Merge pull request #118 from edx/dsjen/update-table-header

fix(table): Use class name for button in table heading
openedx · Jan 8, 2018 · a0e346b · a0e346b
2 parents d9bfb4c + 7c12644
commit a0e346b
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -2169,7 +2169,7 @@ exports[`Storyshots Table sortable 1`] = `
         scope="col"
       >
         <button
-          className="btn"
+          className="btn-header btn"
           onBlur={[Function]}
           onClick={[Function]}
           onKeyDown={[Function]}

diff --git a/src/Table/Table.scss b/src/Table/Table.scss
@@ -2,7 +2,7 @@
 @import "~bootstrap/scss/utilities/_screenreaders.scss";
 @import "~bootstrap/scss/utilities/_spacing.scss";
 
-th .btn {
+.btn-header {
   @extend .p-0;
   font-weight: $font-weight-bold;
 }
diff --git a/src/Table/index.jsx b/src/Table/index.jsx
@@ -66,6 +66,7 @@ class Table extends React.Component {
     let heading;
     if (this.props.tableSortable && column.columnSortable) {
       heading = (<Button
+        className={[classNames(styles['btn-header'])]}
         label={
           <span>
             {column.label}