chore: review changes

razorpay · Feb 14, 2025 · eee166f · eee166f
1 parent bf73016
commit eee166f
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git a/packages/blade/src/components/Chip/Chip.tsx b/packages/blade/src/components/Chip/Chip.tsx
@@ -27,7 +27,6 @@ import { Text } from '~components/Typography';
 import { useTheme } from '~components/BladeProvider';
 import { getInnerMotionRef, getOuterMotionRef } from '~utils/getMotionRefs';
 import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
-import { getBaseBoxStyles } from '~components/Box/BaseBox/baseBoxStyles';
 
 type OnChange = ({
   isChecked,
@@ -85,13 +84,6 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
   const useChip = groupProps?.selectionType === 'single' ? useRadio : useCheckbox;
   const _size = groupProps?.size || 'small';
   const chipColor = color ?? groupProps?.color ?? 'primary';
-  const selectorLabelStyles = getBaseBoxStyles({
-    width,
-    minWidth,
-    maxWidth,
-    theme,
-  });
-
   const handleChange: OnChange = ({ isChecked, value }) => {
     if (isChecked) {
       groupProps?.state?.addValue(value!);
@@ -166,6 +158,9 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
       {...makeAnalyticsAttribute(rest)}
       display={(isReactNative() ? 'flex' : 'inline-flex') as never}
       ref={getOuterMotionRef({ _motionMeta, ref })}
+      width={width}
+      maxWidth={maxWidth}
+      minWidth={minWidth}
     >
       <SelectorLabel
         componentName={MetaConstants.ChipLabel}
@@ -179,7 +174,7 @@ const _Chip: React.ForwardRefRenderFunction<BladeElementRef, ChipProps> = (
         inputProps={isReactNative() ? inputProps : {}}
         style={{
           cursor: _isDisabled ? 'not-allowed' : 'pointer',
-          ...selectorLabelStyles,
+          width: '100%',
         }}
       >
         <BaseBox display="flex" flexDirection="column" width="100%">

diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Chip /> should render with icon 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gvlLGk"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Apple</p></div></div></div></div></label></div><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Mango</p></div></div></div></div></label></div></div></div></div></div></div>"`;
+exports[`<Chip /> should render with icon 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="chip-group-undefined-label" data-blade-component="chip-group" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Select fruits</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx gvlLGk"><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="apple"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Apple</p></div></div></div></div></label></div><div data-blade-component="chip" class="BaseBox-bmPWx ePenKG"><label style="cursor:pointer;width:100%" data-blade-component="chip-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 ghSKMk" value="mango"/><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedChipweb__AnimatedChip-sc-1xiynj1-0 juMMpD kxmMgU"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledChipWrapperweb__StyledChipWrapper-sc-1p3u1xx-0 bAEHYW cpbSXx"><div data-blade-component="base-box" class="BaseBox-bmPWx pJwXq"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(211, 26%, 34%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(211, 26%, 34%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><p class="StyledBaseText-dVBfTO bTXThc" data-blade-component="text">Mango</p></div></div></div></div></label></div></div></div></div></div></div>"`;
 
 exports[`<Chip /> should render with icon 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -357,6 +357,7 @@ exports[`<Chip /> should render with icon 2`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor:pointer;width:100%"
             >
               <div
                 class="c6"
@@ -436,6 +437,7 @@ exports[`<Chip /> should render with icon 2`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor:pointer;width:100%"
             >
               <div
                 class="c6"

diff --git a/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap b/packages/blade/src/components/Chip/__tests__/__snapshots__/Chip.web.test.tsx.snap
@@ -348,6 +348,7 @@ exports[`<Chip /> should accept data-analytics-* 1`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
               <div
                 class="c6"
@@ -396,6 +397,7 @@ exports[`<Chip /> should accept data-analytics-* 1`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
               <div
                 class="c6"
@@ -789,6 +791,7 @@ exports[`<Chip /> should render chip 1`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
               <div
                 class="c6"
@@ -836,6 +839,7 @@ exports[`<Chip /> should render chip 1`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
               <div
                 class="c6"
@@ -1236,6 +1240,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
               <div
                 class="c6"
@@ -1315,6 +1320,7 @@ exports[`<Chip /> should render chip with icon 1`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
               <div
                 class="c6"
@@ -1929,6 +1935,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor: not-allowed; width: 100%;"
             >
               <div
                 class="c6"
@@ -1977,6 +1984,7 @@ exports[`<Chip /> should set disabled state with isDisabled 1`] = `
             <label
               class="c5"
               data-blade-component="chip-label"
+              style="cursor: pointer; width: 100%;"
             >
               <div
                 class="c6"