fix(TableHeader): add flex wrapper for sortable headers

carbon-design-system · Jul 1, 2020 · a523eb7 · a523eb7
1 parent 0f2b80e
commit a523eb7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git a/packages/components/src/components/data-table/_data-table-sort.scss b/packages/components/src/components/data-table/_data-table-sort.scss
@@ -54,6 +54,15 @@
     opacity: 1;
   }
 
+  // -------------------------------------
+  // Th > Button > Span (span required for flex bugs in Safari)
+  // -------------------------------------
+  .#{$prefix}--data-table--sort th .#{$prefix}--table-sort__flex {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
   // -------------------------------------
   //Th > Button > Svg (Sort Icons)
   // -------------------------------------
@@ -123,6 +132,13 @@
   .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort {
+    display: inline-block;
+    height: rem(64px);
+  }
+
+  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
+    th
+    .#{$prefix}--table-sort__flex {
     align-items: flex-start;
   }
 

diff --git a/packages/react/src/components/DataTable/TableHeader.js b/packages/react/src/components/DataTable/TableHeader.js
@@ -92,25 +92,27 @@ const TableHeader = React.forwardRef(function TableHeader(
       ref={ref}
       scope={scope}>
       <button className={className} onClick={onClick} {...rest}>
-        <div className={`${prefix}--table-header-label`}>{children}</div>
-        <Arrow
-          className={`${prefix}--table-sort__icon`}
-          aria-label={t('carbon.table.header.icon.description', {
-            header: children,
-            sortDirection,
-            isSortHeader,
-            sortStates,
-          })}
-        />
-        <Arrows
-          className={`${prefix}--table-sort__icon-unsorted`}
-          aria-label={t('carbon.table.header.icon.description', {
-            header: children,
-            sortDirection,
-            isSortHeader,
-            sortStates,
-          })}
-        />
+        <span className={`${prefix}--table-sort__flex`}>
+          <div className={`${prefix}--table-header-label`}>{children}</div>
+          <Arrow
+            className={`${prefix}--table-sort__icon`}
+            aria-label={t('carbon.table.header.icon.description', {
+              header: children,
+              sortDirection,
+              isSortHeader,
+              sortStates,
+            })}
+          />
+          <Arrows
+            className={`${prefix}--table-sort__icon-unsorted`}
+            aria-label={t('carbon.table.header.icon.description', {
+              header: children,
+              sortDirection,
+              isSortHeader,
+              sortStates,
+            })}
+          />
+        </span>
       </button>
     </th>
   );