diff --git a/.changeset/seven-suns-love.md b/.changeset/seven-suns-love.md new file mode 100644 index 00000000000..e417d09d188 --- /dev/null +++ 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 index 00742207cdd..fcb5a75adb2 100644 --- 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 index 09f3964c1d7..be467cdec1d 100644 --- 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 index 164b666fa8e..ba20b6ecd39 100644 --- 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 ( -
-
- -
+
+
);