[IndexTable] Use consistent padding around checkboxes

Shopify · Apr 22, 2024 · 724be1e · 724be1e
1 parent a1e4f88
commit 724be1e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git a/.changeset/seven-suns-love.md b/.changeset/seven-suns-love.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Removed extra padding around `IndexTable.Row` `Checkbox`
diff --git a/polaris-react/src/components/IndexTable/IndexTable.module.css b/polaris-react/src/components/IndexTable/IndexTable.module.css
@@ -6,6 +6,8 @@
   --pc-index-table-sticky-cell: 29;
   --pc-index-table-bulk-actions: 31;
   --pc-index-table-loading-panel: 31;
+  --pc-index-table-checkbox-offset-left: var(--p-space-300);
+  --pc-index-table-checkbox-offset-right: var(--p-space-200);
   /* stylelint-enable */
   position: relative;
   border-radius: 0;
@@ -804,8 +806,6 @@
   /* stylelint-disable -- Polaris component custom properties */
   --pc-index-table-heading-padding-x: var(--p-space-150);
   --pc-index-table-heading-padding-y: var(--p-space-200);
-  --pc-index-table-checkbox-offset-left: var(--p-space-300);
-  --pc-index-table-checkbox-offset-right: var(--p-space-200);
   background: var(--p-color-bg-surface-secondary);
   padding: var(--pc-index-table-heading-padding-y)
     var(--pc-index-table-heading-padding-x);
@@ -1027,6 +1027,12 @@
 
     &:first-child {
       padding-left: var(--p-space-300);
+
+      /* stylelint-disable-next-line selector-max-specificity -- This is a valid selector */
+      .Table:not(.Table-unselectable) & {
+        /* stylelint-disable-next-line -- specificity overrides */
+        padding-right: var(--pc-index-table-checkbox-offset-right);
+      }
     }
 
     &:last-child {

diff --git a/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.module.css b/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.module.css
@@ -1,8 +1,3 @@
-.TableCellContentContainer {
-  display: flex;
-  align-items: center;
-}
-
 .Wrapper {
   display: flex;
   justify-content: center;

diff --git a/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.tsx b/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.tsx
@@ -31,16 +31,14 @@ export const Checkbox = memo(function Checkbox({
 
   return (
     <CheckboxWrapper>
-      <div className={styles.TableCellContentContainer}>
-        <div className={styles.Wrapper} onClick={onInteraction} onKeyUp={noop}>
-          <PolarisCheckbox
-            id={`Select-${itemId}`}
-            label={label}
-            labelHidden
-            checked={selected}
-            disabled={disabled}
-          />
-        </div>
+      <div className={styles.Wrapper} onClick={onInteraction} onKeyUp={noop}>
+        <PolarisCheckbox
+          id={`Select-${itemId}`}
+          label={label}
+          labelHidden
+          checked={selected}
+          disabled={disabled}
+        />
       </div>
     </CheckboxWrapper>
   );