[IndexTable] Fix visual bug for sortable, selectable IndexTables (#7003)

### WHY are these changes introduced?

Fixes a small visual bug where the IndexTable heading containing the checkbox doesn't get the same treatment as the other headings when an IndexTable is sortable.

Before:
<img width="801" alt="Screenshot 2022-08-24 at 10 45 48" src="https://user-images.githubusercontent.com/2562596/186387740-5685b68e-bb90-42ea-8f70-50eea0936ea9.png">

After:
<img width="750" alt="Screenshot 2022-08-24 at 10 45 53" src="https://user-images.githubusercontent.com/2562596/186387819-1a4e7fae-af84-4f1e-b0be-b4cc4bf2d0c3.png">


### 🎩 checklist

- [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

Author: mrcthms

.changeset/shy-jars-add.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fix visual bug for sortable, selectable index table headings

polaris-react/src/components/IndexTable/IndexTable.tsx

@@ -682,10 +682,10 @@ function IndexTableBase({
   function renderHeading(heading: IndexTableHeading, index: number) {
     const isSecond = index === 0;
     const isLast = index === headings.length - 1;
+    const hasSortable = sortable?.some((value) => value === true);
     const headingContentClassName = classNames(
       styles.TableHeading,
-      sortable?.some((value) => value === true) &&
-        styles['TableHeading-sortable'],
+      hasSortable && styles['TableHeading-sortable'],
       isSecond && styles['TableHeading-second'],
       isLast && !heading.hidden && styles['TableHeading-last'],
       !selectable && styles['TableHeading-unselectable'],
@@ -717,6 +717,7 @@ function IndexTableBase({
 
     const checkboxClassName = classNames(
       styles.TableHeading,
+      hasSortable && styles['TableHeading-sortable'],
       index === 0 && styles['TableHeading-first'],
     );