feat(blade): Changes in components for X migration #2448

anuraghazra · 2024-12-17T07:23:55Z

Description

Drawer:

Changed the drawer's showOverlay behaviour to not mandate the overlay on level2 stacking
Exposed ref

RadioGroup:

Exposed event in onChange

ButtonGroup:

Added styled props
Added support for Tooltip inside ButtonGroup

IconButton:

Added styledProps

SideNavLink:

Added onClick

Component Checklist

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

github-actions · 2024-12-17T07:24:14Z

✅ PR title follows Conventional Commits specification.

changeset-bot · 2024-12-17T07:24:34Z

⚠️ No Changeset found

Latest commit: 47f20db

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

codesandbox-ci · 2024-12-17T07:27:44Z

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 47f20db:

Sandbox	Source
razorpay/blade: basic	Configuration

rzpcibot · 2024-12-17T07:41:16Z

Bundle Size Report

Updated Components

Status	Component	Base Size (kb)	Current Size (kb)	Diff
⬇	Accordion, AccordionItemHeader, AccordionItemBody, AccordionItem	8.147	8.092	-0.055 KB
⬆	ActionList, ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection	16.634	16.647	+0.013 KB
⬇	Alert	11.535	11.513	-0.022 KB
⬆	ButtonGroup	1.206	1.267	+0.061 KB
⬇	Card, CardBody, CardHeader, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderTrailing, CardFooter, CardFooterLeading, CardFooterTrailing	9.367	9.358	-0.009 KB
⬆	Carousel, CarouselItem	7.143	7.158	+0.015 KB
⬆	Checkbox	6.381	6.396	+0.015 KB
⬆	Chip, ChipGroup	8.508	8.520	+0.012 KB
⬆	DatePicker	86.641	86.651	+0.010 KB
⬆	Drawer, DrawerBody, DrawerHeader, drawerPadding	17.364	17.507	+0.143 KB
⬆	Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader	28.830	28.831	+0.001 KB
⬆	FileUpload	17.761	17.767	+0.006 KB
⬇	Menu, MenuItem, MenuOverlay, MenuDivider, MenuFooter, MenuHeader	29.515	29.503	-0.012 KB
⬇	Popover, PopoverInteractiveWrapper	21.421	21.411	-0.010 KB
⬆	Radio	5.109	5.128	+0.019 KB
⬆	SideNav, SideNavLink, SideNavLevel, SideNavSection, SideNavItem, SideNavFooter, SideNavBody, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL	33.185	33.331	+0.146 KB
⬇	SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourStep	29.817	29.809	-0.008 KB
⬆	Switch	4.861	4.876	+0.015 KB
⬆	Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions, TableEditableCell, TableEditableDropdownCell	66.838	66.851	+0.013 KB
⬆	Tabs, TabItem, TabList, TabPanel	7.317	7.331	+0.014 KB
⬇	Tag	3.860	3.845	-0.015 KB
⬇	ToastContainer, useToast	12.874	12.860	-0.014 KB
⬆	Tooltip, TooltipInteractiveWrapper	15.880	15.898	+0.018 KB
⬇	IconButton	1.109	1.085	-0.024 KB
⬆	CheckboxGroup	5.124	5.138	+0.014 KB
⬇	SelectInput, AutoComplete	36.526	36.524	-0.002 KB
⬆	OTPInput	30.313	30.328	+0.015 KB
⬇	PasswordInput	32.084	32.067	-0.017 KB
⬆	PhoneNumberInput	60.801	60.827	+0.026 KB
⬇	SearchInput	34.752	34.751	-0.001 KB
⬆	TextArea	32.601	32.616	+0.015 KB
⬆	TextInput	34.192	34.205	+0.013 KB
⬆	RadioGroup	5.100	5.122	+0.022 KB

Generated by 🚫 dangerJS against 47f20db

tewarig · 2024-12-17T11:05:14Z

packages/blade/src/components/Button/IconButton/IconButton.tsx

@@ -108,6 +110,7 @@ const _IconButton: React.ForwardRefRenderFunction<BladeElementRef, IconButtonPro
      onTouchEnd={onTouchEnd}
      onTouchStart={onTouchStart}
      {...makeAnalyticsAttribute(rest)}


Suggested change

{...makeAnalyticsAttribute(rest)}

I think we can remove this {...makeAnalyticsAttribute(rest)}, since we are now using ...rest, which handles the analytics attributes.

tewarig · 2024-12-17T11:07:45Z

packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx

@@ -121,6 +123,7 @@ const StyledIconButton = React.forwardRef<HTMLButtonElement, StyledIconButtonPro
      {...makeAccessible({ label: accessibilityLabel })}
      {...metaAttribute({ name: MetaConstants.IconButton, testID })}
      {...makeAnalyticsAttribute(rest)}


Suggested change

{...makeAnalyticsAttribute(rest)}

tewarig · 2024-12-17T11:11:07Z

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

+    componentName: 'ButtonGroup',
+    children,
+  });
+


packages/blade/src/components/Button/IconButton/IconButton.tsx

saurabhdaware · 2024-12-23T08:04:46Z

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

-    );
-  });
-
-  it('should throw error with invalid dropdown children', () => {


why remove this test?

Removed this test since useVerifyAllowedChildren already handles the logic.

Additionally, the previous check felt overly defensive. It validated nested components like ButtonGroup -> Dropdown -> DropdownButton, which isn’t necessary because anything other than a button inside ButtonGroup is already visually broken. Plus, it complicates composition unnecessarily—for instance, you wouldn’t be able to use <Tooltip><DropdownButton /></Tooltip>

saurabhdaware · 2024-12-23T08:07:38Z

packages/blade/src/components/SideNav/SideNavItems/SideNavLink.web.tsx

@@ -264,6 +265,8 @@ const SideNavLink = ({
                      isFirstRender: false,
                    });
                  }
+
+                  onClick?.(e);


You might have to pass this in isL3Trigger block as well so that onClick is also supported on that collapsible sidenavlink of l3 trigger

saurabhdaware · 2024-12-23T08:08:53Z

packages/blade/src/utils/useControllable.ts

+   * Extra data to be passed to `onChange` callback
+   * Example use case: passing event object to `onChange` callback
+   */
+  extraData?: any,


can we not call this "event" itself?

We could, wanted to keep this param a bit generic, imagine in some component maybe not event but we could pass around any data object.

anuraghazra added 5 commits December 17, 2024 02:08

chore: add styled props to iconbutton

f193d16

chore: button group changes

5caa308

chore: expose drawer ref

92bd8a9

chore: expose event from radio group onchange

fbb78e8

chore: fix tests

cf5797f

anuraghazra requested review from chaitanyadeorukhkar, kamleshchandnani, snitin315, saurabhdaware and tewarig as code owners December 17, 2024 07:23

chore: add onClick to sidenavlink

3d3c75f

tewarig reviewed Dec 17, 2024

View reviewed changes

saurabhdaware reviewed Dec 23, 2024

View reviewed changes

chore: add onClick to sidenav collapsible click

47f20db

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(blade): Changes in components for X migration #2448

feat(blade): Changes in components for X migration #2448

anuraghazra commented Dec 17, 2024 •

edited

Loading

github-actions bot commented Dec 17, 2024 •

edited

Loading

changeset-bot bot commented Dec 17, 2024 •

edited

Loading

codesandbox-ci bot commented Dec 17, 2024 •

edited

Loading

rzpcibot commented Dec 17, 2024 •

edited

Loading

tewarig Dec 17, 2024

tewarig Dec 17, 2024

tewarig Dec 17, 2024

saurabhdaware Dec 23, 2024

anuraghazra Dec 24, 2024 •

edited

Loading

saurabhdaware Dec 23, 2024

anuraghazra Dec 24, 2024

saurabhdaware Dec 23, 2024

anuraghazra Dec 24, 2024

feat(blade): Changes in components for X migration #2448

Are you sure you want to change the base?

feat(blade): Changes in components for X migration #2448

Conversation

anuraghazra commented Dec 17, 2024 • edited Loading

Description

Component Checklist

github-actions bot commented Dec 17, 2024 • edited Loading

changeset-bot bot commented Dec 17, 2024 • edited Loading

⚠️ No Changeset found

codesandbox-ci bot commented Dec 17, 2024 • edited Loading

rzpcibot commented Dec 17, 2024 • edited Loading

Bundle Size Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anuraghazra Dec 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anuraghazra commented Dec 17, 2024 •

edited

Loading

github-actions bot commented Dec 17, 2024 •

edited

Loading

changeset-bot bot commented Dec 17, 2024 •

edited

Loading

codesandbox-ci bot commented Dec 17, 2024 •

edited

Loading

rzpcibot commented Dec 17, 2024 •

edited

Loading

anuraghazra Dec 24, 2024 •

edited

Loading