feat: `OTPInput` component redesign #2073

chaitanyadeorukhkar · 2024-03-11T06:08:05Z

Description

OTPInput Redesign

Changes

Add size prop
Update font family & size being used
Update visuals

Additional Information

Component Checklist

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

changeset-bot · 2024-03-11T06:08:09Z

⚠️ No Changeset found

Latest commit: 120c072

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

github-actions · 2024-03-11T11:14:30Z

✅ PR title follows Conventional Commits specification.

rzpcibot · 2024-03-11T11:25:31Z

Bundle Size Report

Updated Components

Status	Component	Base Size (kb)	Current Size (kb)	Diff
⬆	Accordion, AccordionItemHeader, AccordionItemBody, AccordionItem	7.303	7.350	+0.047 KB
⬆	Alert	11.451	11.489	+0.038 KB
⬆	ActionList, ActionListItem, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection	12.421	12.505	+0.084 KB
⬆	Amount	1.057	1.096	+0.039 KB
⬆	Badge	0.778	0.815	+0.037 KB
⬆	BladeProvider	1.604	1.645	+0.041 KB
⬆	BottomSheet	9.443	9.489	+0.046 KB
⬆	Box	0.712	0.757	+0.045 KB
⬆	Breadcrumb, BreadcrumbItem	2.490	2.540	+0.050 KB
⬆	ButtonGroup	1.120	1.161	+0.041 KB
⬆	Card, CardBody, CardHeader, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderTrailing, CardFooter, CardFooterLeading, CardFooterTrailing	9.100	9.128	+0.028 KB
⬆	Carousel, CarouselItem	6.774	6.808	+0.034 KB
⬆	Checkbox	5.818	5.897	+0.079 KB
⬆	Chip, ChipGroup	5.300	5.338	+0.038 KB
⬆	Collapsible, CollapsibleLink, CollapsibleButton, CollapsibleBody	9.345	9.390	+0.045 KB
⬆	Counter	0.723	0.765	+0.042 KB
⬆	Divider	0.497	0.545	+0.048 KB
⬆	Drawer, DrawerBody, DrawerHeader	15.892	15.937	+0.045 KB
⬆	Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader	22.653	22.692	+0.039 KB
⬆	FileUpload	13.208	13.340	+0.132 KB
⬆	Indicator	0.864	0.901	+0.037 KB
⬆	List, ListItem, ListItemLink, ListItemCode, ListItemText	5.009	5.051	+0.042 KB
⬆	Modal	12.518	12.555	+0.037 KB
⬆	Popover, PopoverInteractiveWrapper	20.277	20.315	+0.038 KB
⬆	ProgressBar	1.647	1.692	+0.045 KB
⬆	Radio	4.659	4.711	+0.052 KB
⬆	Skeleton	0.714	0.762	+0.048 KB
⬆	SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourStep	28.223	28.257	+0.034 KB
⬆	Switch	4.512	4.560	+0.048 KB
⬆	Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions	50.294	51.247	+0.953 KB
⬆	Tabs, TabItem, TabList, TabPanel	6.552	6.588	+0.036 KB
⬆	Tag	3.374	3.403	+0.029 KB
⬆	ToastContainer, useToast	12.661	12.690	+0.029 KB
⬆	Tooltip, TooltipInteractiveWrapper	15.155	15.201	+0.046 KB
⬆	Button	5.902	5.937	+0.035 KB
⬆	IconButton	0.734	0.777	+0.043 KB
⬆	CheckboxGroup	3.931	4.117	+0.186 KB
⬆	SelectInput, AutoComplete	17.356	18.313	+0.957 KB
⬆	OTPInput	11.396	12.504	+1.108 KB
⬆	PasswordInput	13.494	14.450	+0.956 KB
⬆	TextArea	11.769	12.787	+1.018 KB
⬆	TextInput	13.377	14.432	+1.055 KB
⬆	Link	2.059	2.099	+0.040 KB
⬆	RadioGroup	3.905	4.071	+0.166 KB
⬆	Spinner	1.852	1.912	+0.060 KB
⬆	Code	0.560	0.598	+0.038 KB
⬆	Display	0.473	0.518	+0.045 KB
⬇	Heading	0.439	0.000	-0.439 KB
⬆	Text	-0.048	0.003	+0.051 KB

Generated by 🚫 dangerJS against 120c072

codesandbox-ci · 2024-03-11T11:26:06Z

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 120c072:

Sandbox	Source
razorpay/blade: basic	Configuration

… feat/otp-input-redesign

anuraghazra · 2024-03-21T08:35:52Z

Why is the mask square shaped?

expected design?

anuraghazra · 2024-03-21T08:36:55Z

packages/blade/src/components/Input/BaseInput/BaseInput.tsx

+    /**
+     * Whether to use Text or Heading component for Input text
+     * @default text
+     **/
+    valueComponentType?: 'text' | 'heading';


Don't have much context on this, what exactly was the usecase for this?

So for displaying value of the input, we sometimes need it to have the styles of our "Text" component and other times styles of our "Heading" component. Text & Heading differ in sizes as well as font families. OTPInput needs the input value to be shown as the same styles as Heading component whereas other input components need the same style as Text component

anuraghazra · 2024-03-21T08:38:12Z

packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx

@@ -181,7 +202,12 @@ export default {
 } as Meta<OTPInputProps>;

 const OTPInputTemplate: StoryFn<typeof OTPInputComponent> = ({ ...args }) => {
-  return <OTPInputComponent {...args} />;
+  const maxWidth = args.otpLength === 4 ? '376px' : '568px';


So the OTPInput itself doesn't have MaxWidth is it?

Can't find it in ts so guessing nahi hai. We can add it if someone raises it though

anuraghazra · 2024-03-21T08:39:31Z

packages/blade/src/components/Typography/Heading/getHeadingStyles.ts

+}: Pick<HeadingProps, 'weight' | 'size' | 'color'> & {
+  theme: Theme;
+}): CSSObject => {
+  return getBaseTextStyles({ ...getHeadingProps({ weight, size, color }), theme });


chaitanyadeorukhkar added 4 commits March 7, 2024 16:29

update otpinput with no margin and border radius changes

d4a7a14

use heading for otp input

911f6f5

use size for label and hint

1ac0ee0

update story

da09212

fix native issues

902d479

chaitanyadeorukhkar added 13 commits March 13, 2024 12:26

update snapshots and focus ring border radius

05b2377

fix ts issue

5c23d44

fix lint issues

20dad31

fix lint issues

a639868

update snapshot

35d0f0d

increase global timeout

804a73c

update design

ec4111e

revert changes

c6a2c1c

Merge remote-tracking branch 'origin/feat/base-input-ui-changes' into…

5f233f2

… feat/otp-input-redesign

remove unused stuff

f3cdfd0

update snapshot

842a101

update story

5b09f68

update story

a3b59de

chaitanyadeorukhkar marked this pull request as ready for review March 21, 2024 07:15

chaitanyadeorukhkar requested review from kamleshchandnani, anuraghazra, snitin315 and saurabhdaware as code owners March 21, 2024 07:15

chaitanyadeorukhkar assigned anuraghazra Mar 21, 2024

add tests

120c072

anuraghazra reviewed Mar 21, 2024

View reviewed changes

anuraghazra approved these changes Mar 21, 2024

View reviewed changes

chaitanyadeorukhkar merged commit 84d34b0 into feat/base-input-ui-changes Mar 21, 2024
15 of 17 checks passed

chaitanyadeorukhkar deleted the feat/otp-input-redesign branch March 21, 2024 10:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: `OTPInput` component redesign #2073

feat: `OTPInput` component redesign #2073

chaitanyadeorukhkar commented Mar 11, 2024

changeset-bot bot commented Mar 11, 2024 •

edited

Loading

github-actions bot commented Mar 11, 2024 •

edited

Loading

rzpcibot commented Mar 11, 2024 •

edited

Loading

codesandbox-ci bot commented Mar 11, 2024 •

edited

Loading

anuraghazra commented Mar 21, 2024

anuraghazra Mar 21, 2024

chaitanyadeorukhkar Mar 21, 2024

anuraghazra Mar 21, 2024

chaitanyadeorukhkar Mar 21, 2024

anuraghazra Mar 21, 2024

feat: OTPInput component redesign #2073

feat: OTPInput component redesign #2073

Conversation

chaitanyadeorukhkar commented Mar 11, 2024

Description

Changes

Additional Information

Component Checklist

changeset-bot bot commented Mar 11, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Mar 11, 2024 • edited Loading

rzpcibot commented Mar 11, 2024 • edited Loading

Bundle Size Report

codesandbox-ci bot commented Mar 11, 2024 • edited Loading

anuraghazra commented Mar 21, 2024

anuraghazra Mar 21, 2024

Choose a reason for hiding this comment

chaitanyadeorukhkar Mar 21, 2024

Choose a reason for hiding this comment

anuraghazra Mar 21, 2024

Choose a reason for hiding this comment

chaitanyadeorukhkar Mar 21, 2024

Choose a reason for hiding this comment

anuraghazra Mar 21, 2024

Choose a reason for hiding this comment

feat: `OTPInput` component redesign #2073

feat: `OTPInput` component redesign #2073

changeset-bot bot commented Mar 11, 2024 •

edited

Loading

github-actions bot commented Mar 11, 2024 •

edited

Loading

rzpcibot commented Mar 11, 2024 •

edited

Loading

codesandbox-ci bot commented Mar 11, 2024 •

edited

Loading