fix(table): adjust border table thickness and sortable table icon (#1154

) fix: update border table styles, adjust sort icon sizes, add note
dequelabs · Aug 10, 2023 · 5f0c732 · 5f0c732
1 parent 0dd10f2
commit 5f0c732
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/docs/pages/components/Table.mdx b/docs/pages/components/Table.mdx
@@ -264,6 +264,10 @@ function SortableTableExample() {
 }
 ```
 
+<Note>
+  As a best practice, when a table has sorted columns an author should indicate which column is currently sorted by setting the sort direction for the active sorted column.
+</Note>
+
 ## Props
 
 ### Table

diff --git a/packages/react/src/components/Icon/icons/table-sort-ascending.svg b/packages/react/src/components/Icon/icons/table-sort-ascending.svg
diff --git a/packages/react/src/components/Icon/icons/table-sort-descending.svg b/packages/react/src/components/Icon/icons/table-sort-descending.svg
diff --git a/packages/styles/table.css b/packages/styles/table.css
@@ -117,6 +117,10 @@
   border: 1px solid var(--gray-40);
 }
 
+.Table--border .TableHeader {
+  border-bottom: 2px solid var(--gray-40);
+}
+
 .cauldron--theme-dark .Table--border,
 .cauldron--theme-dark .Table--border .TableHeader,
 .cauldron--theme-dark .Table--border .TableFooter,
-Original file line number
+Diff line change
@@ Expand Up / @@ -264,6 +264,10 @@ function SortableTableExample() { @@
     }
     ```
+    <Note>
+      As a best practice, when a table has sorted columns an author should indicate which column is currently sorted by setting the sort direction for the active sorted column.
+    </Note>
     ## Props
     ### Table
@@ Expand Down @@