[IndexTable] Align IndexTable checkbox header with other headers (#3990)

* 3989: Align IndexTable checkbox header

UNRELEASED.md

@@ -19,6 +19,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Made items in `ActionList` more clear in high contrast mode ([#3971](https://github.com/Shopify/polaris-react/pull/3971))
 - Fixed the MediaCard thumbnail’s corner roundness, so it wouldn’t overflow out of the parent Card ([#3974](https://github.com/Shopify/polaris-react/issues/3974))
 - Fixed `ActionList` `Item` not disabling properly when url prop is passed ([#3979](https://github.com/Shopify/polaris-react/pull/3979))
+- Update `IndexTable`'s checkbox header to be aligned with other headers ([#3990](https://github.com/Shopify/polaris-react/issues/3990))
 - Fixed `CheckableButton` missing border when focused ([#3987](https://github.com/Shopify/polaris-react/issues/3987))
 
 ### Documentation

src/components/IndexTable/IndexTable.scss

@@ -158,6 +158,10 @@ $loading-panel-height: rem(53px);
   padding-right: $checkbox-offset-right;
 }
 
+.ColumnHeaderCheckboxWrapper {
+  display: flex;
+}
+
 .StickyColumnHeaderCheckbox {
   margin-left: #{-1 * $small-checkbox-offset};
   padding-right: $small-checkbox-offset;

src/components/IndexTable/IndexTable.tsx

@@ -521,14 +521,16 @@ function IndexTableBase({
 
   function renderCheckboxContent() {
     return (
-      <PolarisCheckbox
-        label={i18n.translate('Polaris.IndexTable.selectAllLabel', {
-          resourceNamePlural: resourceName.plural,
-        })}
-        labelHidden
-        onChange={handleSelectPage}
-        checked={bulkSelectState}
-      />
+      <div className={styles.ColumnHeaderCheckboxWrapper}>
+        <PolarisCheckbox
+          label={i18n.translate('Polaris.IndexTable.selectAllLabel', {
+            resourceNamePlural: resourceName.plural,
+          })}
+          labelHidden
+          onChange={handleSelectPage}
+          checked={bulkSelectState}
+        />
+      </div>
     );
   }