feat: add ButtonGroup component

[snitin315]

Description

Adds new ButtonGroup component to Blade.

Changes

• API - docs(ButtonGroup): add API decisions #2061
• Added scale-down animation to the button when pressed.
• Added ButtonGroup.
• Tests - test: add ButtonGroup test cases #2068
• FC - 2729

Component Checklist

• Update Component Status Page
• Perform Manual Testing in Other Browsers
• Add KitchenSink Story
• Add Interaction Tests (if applicable)
• Add changeset

[changeset-bot]

🦋 Changeset detected

Latest commit: eb5283b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@razorpay/blade	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

✅ PR title follows Conventional Commits specification.

[rzpcibot]

Bundle Size Report

Updated Components

Status	Component	Base Size (kb)	Current Size (kb)	Diff
⬆	Accordion, AccordionItemHeader, AccordionItemBody, AccordionItem	7.331	7.351	+0.020 KB
⬆	ActionList, ActionListItem, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection	12.438	12.464	+0.026 KB
⬆	Alert	11.134	11.459	+0.325 KB
⬆	Amount	1.101	1.107	+0.006 KB
⬆	Badge	0.816	0.827	+0.011 KB
⬆	BladeProvider	1.649	1.655	+0.006 KB
⬆	BottomSheet	9.482	9.494	+0.012 KB
⬆	Box	0.751	0.762	+0.011 KB
⬆	Breadcrumb, BreadcrumbItem	2.526	2.536	+0.010 KB
⬆	Card, CardBody, CardHeader, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderTrailing, CardFooter, CardFooterLeading, CardFooterTrailing	8.794	9.116	+0.322 KB
⬆	Carousel, CarouselItem	6.815	6.824	+0.009 KB
⬆	Checkbox	5.865	5.869	+0.004 KB
⬆	Chip, ChipGroup	5.333	5.350	+0.017 KB
⬆	Collapsible, CollapsibleLink, CollapsibleButton, CollapsibleBody	9.042	9.354	+0.312 KB
⬆	Counter	0.762	0.774	+0.012 KB
⬆	Divider	0.541	0.548	+0.007 KB
⬆	Drawer, DrawerBody, DrawerHeader	15.931	15.942	+0.011 KB
⬆	Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader	22.345	22.656	+0.311 KB
⬆	FileUpload	13.245	13.261	+0.016 KB
⬆	Indicator	0.903	0.915	+0.012 KB
⬇	List, ListItem, ListItemLink, ListItemCode, ListItemText	5.055	5.053	-0.002 KB
⬆	Modal	12.568	12.569	+0.001 KB
⬆	Popover, PopoverInteractiveWrapper	20.315	20.326	+0.011 KB
⬆	ProgressBar	1.687	1.697	+0.010 KB
⬆	Radio	4.689	4.710	+0.021 KB
⬆	Skeleton	0.754	0.764	+0.010 KB
⬆	SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourStep	27.921	28.237	+0.316 KB
⬆	Switch	4.550	4.563	+0.013 KB
⬆	Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions	49.983	50.294	+0.311 KB
⬆	Tabs, TabItem, TabList, TabPanel	6.599	6.604	+0.005 KB
⬆	Tag	3.409	3.425	+0.016 KB
⬆	ToastContainer, useToast	12.340	12.672	+0.332 KB
⬆	Tooltip, TooltipInteractiveWrapper	15.195	15.206	+0.011 KB
⬆	Button	5.589	5.921	+0.332 KB
⬆	IconButton	0.779	0.786	+0.007 KB
⬆	CheckboxGroup	3.971	3.981	+0.010 KB
⬆	SelectInput, AutoComplete	17.398	17.401	+0.003 KB
⬆	OTPInput	11.424	11.437	+0.013 KB
⬆	PasswordInput	13.539	13.547	+0.008 KB
⬇	TextArea	11.827	11.821	-0.006 KB
⬆	TextInput	13.419	13.428	+0.009 KB
⬆	Link	2.090	2.105	+0.015 KB
⬆	RadioGroup	3.948	3.957	+0.009 KB
⬆	Spinner	1.891	1.900	+0.009 KB
⬆	Code	0.604	0.610	+0.006 KB
⬆	Display	0.504	0.524	+0.020 KB
⬆	Heading	0.468	0.490	+0.022 KB
⬆	Text	-0.001	0.002	+0.003 KB

Generated by 🚫 dangerJS against eb5283b

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit eb5283b:

Sandbox	Source
razorpay/blade: basic	Configuration

[anuraghazra]

Can we use componentIds.Button?

[anuraghazra]

Suggested change

	!isValidAllowedChildren(child, 'Button') &&
	!isValidAllowedChildren(child, componentIds.Button) &&

[anuraghazra]

Build is failing, unable to see storybook preview.

[snitin315]

@anuraghazra Build is successful, for some reason it's not coming in CI checks as usual.

Preview Link - https://61c19ee8d3d282003ac1d81c-mdcfdyzkei.chromatic.com/

[saurabhdaware]

expected to give ButtonGroup a priority over individual Button?

[snitin315]

Yes, all buttons should have the same color in a button group.

[anuraghazra]

export the types too.

[snitin315]

It's already exported.

blade/packages/blade/src/components/ButtonGroup/ButtonGroup.web.tsx

Lines 149 to 150 in eb5283b

	export { ButtonGroup };
	export type { ButtonGroupProps };