fix(ActionListItem): checkbox spacing (#1734)

* fix: checkbox spacing in actionlistitem * Create tricky-mice-tie.md * fix: snapshots
razorpay · Oct 20, 2023 · 08c161b · 08c161b
1 parent a495760
commit 08c161b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/.changeset/tricky-mice-tie.md b/.changeset/tricky-mice-tie.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(ActionListItem): checkbox spacing
diff --git a/packages/blade/src/components/ActionList/ActionListItem.tsx b/packages/blade/src/components/ActionList/ActionListItem.tsx
@@ -238,10 +238,6 @@ const ActionListItemText = assignWithoutSideEffects(_ActionListItemText, {
   componentId: componentIds.ActionListItemText,
 });
 
-const ActionListCheckboxWrapper = styled(BaseBox)<{ hasDescription: boolean }>((_props) => ({
-  pointerEvents: 'none',
-}));
-
 type ClickHandlerType = (e: React.MouseEvent<HTMLButtonElement>) => void;
 
 const makeActionListItemClickable = (
@@ -287,8 +283,9 @@ const _ActionListItemBody = ({
         <BaseBox display="flex" justifyContent="center" alignItems="center">
           {selectionType === 'multiple' ? (
             // Adding aria-hidden because the listbox item in multiselect in itself explains the behaviour so announcing checkbox is unneccesary and just a nice UI tweak for us
-            <ActionListCheckboxWrapper
-              hasDescription={Boolean(description)}
+            <BaseBox
+              pointerEvents="none"
+              paddingRight="spacing.2"
               {...makeAccessible({
                 hidden: true,
               })}
@@ -300,7 +297,7 @@ const _ActionListItemBody = ({
                     */}
                 {null}
               </Checkbox>
-            </ActionListCheckboxWrapper>
+            </BaseBox>
           ) : (
             leading
           )}

diff --git a/...nts/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap b/...nts/Input/DropdownInputTriggers/__tests__/__snapshots__/AutoComplete.native.test.tsx.snap
@@ -931,12 +931,12 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                           <View
                             accessibilityElementsHidden={true}
                             data-blade-component="base-box"
-                            hasDescription={false}
                             importantForAccessibility="no-hide-descendants"
+                            pointerEvents="none"
                             style={
                               [
-                                {},
                                 {
+                                  "paddingRight": 4,
                                   "pointerEvents": "none",
                                 },
                               ]
@@ -1219,12 +1219,12 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                           <View
                             accessibilityElementsHidden={true}
                             data-blade-component="base-box"
-                            hasDescription={false}
                             importantForAccessibility="no-hide-descendants"
+                            pointerEvents="none"
                             style={
                               [
-                                {},
                                 {
+                                  "paddingRight": 4,
                                   "pointerEvents": "none",
                                 },
                               ]
@@ -1507,12 +1507,12 @@ exports[`<Dropdown /> with <AutoComplete /> should render AutoComplete 1`] = `
                           <View
                             accessibilityElementsHidden={true}
                             data-blade-component="base-box"
-                            hasDescription={false}
                             importantForAccessibility="no-hide-descendants"
+                            pointerEvents="none"
                             style={
                               [
-                                {},
                                 {
+                                  "paddingRight": 4,
                                   "pointerEvents": "none",
                                 },
                               ]