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

🦋 Changeset detected

Latest commit: f54f105

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

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 f54f105:

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.150	8.095	-0.055 KB
⬆	ActionList, ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection	16.596	16.609	+0.013 KB
⬇	Alert	11.535	11.511	-0.024 KB
⬆	ButtonGroup	1.206	1.269	+0.063 KB
⬇	Card, CardBody, CardHeader, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderTrailing, CardFooter, CardFooterLeading, CardFooterTrailing	9.363	9.354	-0.009 KB
⬆	Carousel, CarouselItem	7.116	7.129	+0.013 KB
⬆	Checkbox	6.343	6.358	+0.015 KB
⬆	Chip, ChipGroup	8.464	8.477	+0.013 KB
⬆	DatePicker	86.611	86.631	+0.020 KB
⬆	Drawer, DrawerBody, DrawerHeader, drawerPadding	17.363	17.503	+0.140 KB
⬇	Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader	28.813	28.804	-0.009 KB
⬆	FileUpload	17.730	17.734	+0.004 KB
⬆	Menu, MenuItem, MenuOverlay, MenuDivider, MenuFooter, MenuHeader	29.473	29.477	+0.004 KB
⬇	Popover, PopoverInteractiveWrapper	21.380	21.376	-0.004 KB
⬆	Radio	5.060	5.079	+0.019 KB
⬇	Scale	0.904	0.901	-0.003 KB
⬆	SideNav, SideNavLink, SideNavLevel, SideNavSection, SideNavItem, SideNavFooter, SideNavBody, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL	33.177	33.323	+0.146 KB
⬆	SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourStep	29.782	29.784	+0.002 KB
⬆	Switch	4.822	4.837	+0.015 KB
⬆	Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions, TableEditableCell, TableEditableDropdownCell	66.812	66.832	+0.020 KB
⬆	Tabs, TabItem, TabList, TabPanel	7.279	7.293	+0.014 KB
⬇	Tag	3.861	3.848	-0.013 KB
⬇	ToastContainer, useToast	12.876	12.862	-0.014 KB
⬆	Tooltip, TooltipInteractiveWrapper	15.879	15.895	+0.016 KB
⬇	IconButton	1.107	1.086	-0.021 KB
⬆	CheckboxGroup	5.096	5.109	+0.013 KB
⬇	SelectInput, AutoComplete	36.535	36.531	-0.004 KB
⬆	OTPInput	30.325	30.339	+0.014 KB
⬇	PasswordInput	32.093	32.075	-0.018 KB
⬆	PhoneNumberInput	60.767	60.805	+0.038 KB
⬇	SearchInput	34.754	34.753	-0.001 KB
⬆	TextArea	32.568	32.590	+0.022 KB
⬆	TextInput	34.153	34.166	+0.013 KB
⬆	RadioGroup	5.077	5.099	+0.022 KB

Generated by 🚫 dangerJS against f54f105

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.

saurabhdaware

lgtm

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

saurabhdaware previously approved these changes Jan 2, 2025

View reviewed changes

Create young-dragons-poke.md

f54f105

anuraghazra dismissed saurabhdaware’s stale review via f54f105 January 2, 2025 07:55

saurabhdaware approved these changes Jan 6, 2025

View reviewed changes

anuraghazra merged commit e00172b into master Jan 6, 2025
12 of 14 checks passed

anuraghazra deleted the anu/x-changes branch January 6, 2025 10:40

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

saurabhdaware left a comment

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

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

🦋 Changeset detected

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

saurabhdaware left a 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