feat: Redesign all Input components (#2030)

## Changes ### TextInput - Redesigned UI - Add `leadingIcon` prop - ⚠️ Deprecate `icon` prop in favour of `leadingIcon` which will be removed in the next major version - Add `trailingIcon` prop - Add `trailingLinkButton` prop - Add `size` prop ### TextArea - Redesigned UI - Add `size` prop ### PasswordInput - Redesigned UI - Adds `size` prop ### OTPInput - Redesigned UI - Add `size` prop ### SelectInput - Redesigned UI - Add `size` prop ### Autocomplete - Redesigned UI - Add `size` prop ### Radio - Add `size` prop ### Checkbox - Add `size` prop
razorpay · Mar 28, 2024 · 015e682 · 015e682
1 parent e27131a
commit 015e682
Show file tree

Hide file tree

Showing 110 changed files with 14,508 additions and 4,765 deletions.
diff --git a/.changeset/heavy-badgers-care.md b/.changeset/heavy-badgers-care.md
@@ -0,0 +1,42 @@
+---
+"@razorpay/blade": minor
+---
+
+feat: Redesign all `Input` components 
+
+> Note: No breaking changes to the existing API. The Input components will continue to work as before but with an updated design.
+
+## Changes
+### TextInput
+- Redesigned UI
+- Add `leadingIcon` prop
+- ⚠️ Deprecate `icon` prop in favour of `leadingIcon` which will be removed in the next major version
+- Add `trailingIcon` prop
+- Add `trailingLinkButton` prop
+- Add `size` prop
+
+### TextArea
+- Redesigned UI
+- Add `size` prop
+
+### PasswordInput
+- Redesigned UI
+- Adds `size` prop
+
+### OTPInput
+- Redesigned UI
+- Add `size` prop
+
+### SelectInput
+- Redesigned UI
+- Add `size` prop
+
+### Autocomplete
+- Redesigned UI
+- Add `size` prop
+
+### Radio
+- Add `size` prop
+
+### Checkbox
+- Add `size` prop
diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js
@@ -2,6 +2,7 @@ const ignores = ['/node_modules/'];
 
 const baseConfig = {
   testPathIgnorePatterns: [...ignores, 'native.test'],
+  testTimeout: 10000,
   coverageThreshold: {
     global: {
       branches: 75,

diff --git a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
@@ -105,6 +105,13 @@ Small.args = {
   size: 'small',
 };
 
+export const Large = CheckboxTemplate.bind({});
+Large.storyName = 'Large';
+Large.args = {
+  size: 'large',
+  helpText: 'Checkbox help text',
+};
+
 export const Indeterminate = CheckboxTemplate.bind({});
 Indeterminate.storyName = 'Indeterminate';
 Indeterminate.args = {

diff --git a/packages/blade/src/components/Checkbox/Checkbox.tsx b/packages/blade/src/components/Checkbox/Checkbox.tsx
@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-shadow */
 import React from 'react';
 import { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext';
 import { CheckboxIcon } from './CheckboxIcon';
 import { useCheckbox } from './useCheckbox';
-import { checkboxHoverTokens } from './checkboxTokens';
+import { checkboxHoverTokens, checkboxSizes } from './checkboxTokens';
 import isEmpty from '~utils/lodashButBetter/isEmpty';
 import isUndefined from '~utils/lodashButBetter/isUndefined';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
@@ -18,6 +19,7 @@ import { SelectorInput } from '~components/Form/Selector/SelectorInput';
 import type { BladeElementRef, TestID } from '~utils/types';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { throwBladeError } from '~utils/logger';
+import { makeSize, useTheme } from '~utils';
 
 type OnChange = ({
   isChecked,
@@ -101,7 +103,7 @@ type CheckboxProps = {
    *
    * @default "medium"
    */
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
   /**
    * Sets the tab-index property on checkbox element
    *
@@ -184,7 +186,12 @@ const _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps>
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
   const _isChecked = isChecked ?? groupProps?.state?.isChecked(value!);
   const _size = groupProps.size ?? size;
-  const isSmall = _size === 'small';
+  const { theme } = useTheme();
+  const formHintSize = {
+    small: 'medium',
+    medium: 'medium',
+    large: 'large',
+  } as const;
 
   // only show error when the self validation is set to error
   // Since we don't want to show errorText inside the group
@@ -213,6 +220,9 @@ const _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps>
     onChange: handleChange,
   });
 
+  // Checkbox icon's size & margin + margin-left of SelectorTitle which is 2
+  const helpTextLeftSpacing = makeSize(checkboxSizes.icon[size].width + theme.spacing[3]);
+
   return (
     <BaseBox
       {...metaAttribute({ name: MetaConstants.Checkbox, testID })}
@@ -247,13 +257,16 @@ const _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps>
             ) : null}
           </BaseBox>
           {showSupportingText ? (
-            <BaseBox marginLeft={isSmall ? 'spacing.6' : 'spacing.7'}>
-              <SelectorSupportText id={ids?.helpTextId}>{helpText}</SelectorSupportText>
+            <BaseBox marginLeft={helpTextLeftSpacing}>
+              <SelectorSupportText size={_size} id={ids?.helpTextId}>
+                {helpText}
+              </SelectorSupportText>
             </BaseBox>
           ) : null}
         </BaseBox>
       </SelectorLabel>
       <FormHint
+        size={formHintSize[_size]}
         errorText={errorText}
         errorTextId={ids?.errorTextId}
         type={validationState === 'error' ? 'error' : 'help'}

diff --git a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -141,6 +141,12 @@ Small.args = {
   size: 'small',
 };
 
+export const Large = CheckboxGroupTemplate.bind({});
+Large.storyName = 'Large';
+Large.args = {
+  size: 'large',
+};
+
 export const LabelPositionLeft = CheckboxGroupTemplate.bind({});
 LabelPositionLeft.storyName = 'LabelPositionLeft';
 LabelPositionLeft.args = {

diff --git a/packages/blade/src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx b/packages/blade/src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx
@@ -87,7 +87,7 @@ type CheckboxGroupProps = {
    *
    * @default "medium"
    */
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
 } & TestID &
   StyledPropsBlade;
 
@@ -146,6 +146,7 @@ const CheckboxGroup = ({
               position={labelPosition}
               id={ids.labelId}
               accessibilityText={accessibilityText}
+              size={size}
             >
               {label}
             </FormLabel>
@@ -164,6 +165,7 @@ const CheckboxGroup = ({
               })}
             </BaseBox>
             <FormHint
+              size={size}
               errorText={errorText}
               helpText={helpText}
               type={validationState === 'error' ? 'error' : 'help'}

diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
@@ -20,9 +20,13 @@ const svgSize = {
     width: size[12],
     height: size[12],
   },
+  large: {
+    width: size[16],
+    height: size[16],
+  },
 };
 
-const CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' }) => {
+const CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' | 'large' }) => {
   const width = makeSpace(svgSize[size].width);
   const height = makeSpace(svgSize[size].height);
 
@@ -42,7 +46,13 @@ const CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium'
   );
 };
 
-const IndeterminateIcon = ({ color, size }: { color: string; size: 'small' | 'medium' }) => {
+const IndeterminateIcon = ({
+  color,
+  size,
+}: {
+  color: string;
+  size: 'small' | 'medium' | 'large';
+}) => {
   const width = makeSpace(svgSize[size].width);
   const height = makeSpace(svgSize[size].height);
 
@@ -67,7 +77,7 @@ export type CheckboxIconProps = {
   isNegative?: boolean;
   isChecked?: boolean;
   isIndeterminate?: boolean;
-  size: 'small' | 'medium';
+  size: 'small' | 'medium' | 'large';
 };
 
 const CheckboxIcon = ({

diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap
@@ -348,7 +348,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
     }
   >
     <View
-      accessibilityErrorMessage="checkbox-19-errortext-21"
+      accessibilityErrorMessage="checkbox-25-errortext-27"
       accessibilityInvalid={true}
       accessibilityRequired={false}
       accessibilityRole="checkbox"

diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap
@@ -649,7 +649,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
           <input
             aria-checked="false"
             aria-disabled="false"
-            aria-errormessage="checkbox-19-errortext-21"
+            aria-errormessage="checkbox-25-errortext-27"
             aria-invalid="true"
             aria-required="false"
             class="c3"
@@ -708,7 +708,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
     <div
       class="c8"
       data-blade-component="base-box"
-      id="checkbox-19-errortext-21"
+      id="checkbox-25-errortext-27"
     >
       <span
         class="c9"

diff --git a/.../blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap b/.../blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.native.test.tsx.snap
@@ -190,7 +190,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
@@ -357,7 +357,7 @@ exports[`<CheckboxGroup /> should render with label 1`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
@@ -883,7 +883,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }
@@ -1050,7 +1050,7 @@ exports[`<CheckboxGroup /> should render with label 2`] = `
             style={
               [
                 {
-                  "marginBottom": 8,
+                  "marginBottom": 12,
                 },
               ]
             }