fix(shared-types,ui-table): fix color contrast for table sorting icons

Closes: INSTUI-4238
instructure · Oct 3, 2024 · b5a60bf · b5a60bf
1 parent 99f8068
commit b5a60bf
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 6 deletions.
diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
@@ -1214,6 +1214,8 @@ export type TableColHeaderTheme = {
   focusOutlineColor: Colors['contrasts']['blue4570']
   focusOutlineWidth: Border['widthMedium']
   focusOutlineStyle: Border['style']
+  unSortedIconColor: Colors['contrasts']['grey4570']
+  sortedIconColor: Colors['contrasts']['blue4570']
 }
 
 export type TableHeadTheme = {

diff --git a/packages/ui-table/src/Table/ColHeader/index.tsx b/packages/ui-table/src/Table/ColHeader/index.tsx
@@ -74,16 +74,16 @@ class ColHeader extends Component<TableColHeaderProps> {
   }
 
   renderSortArrow() {
-    const { sortDirection, onRequestSort } = this.props
+    const { sortDirection, onRequestSort, styles } = this.props
 
     if (sortDirection === 'ascending') {
-      return <IconMiniArrowUpLine />
+      return <IconMiniArrowUpLine css={styles?.sortedIconColor} />
     }
     if (sortDirection === 'descending') {
-      return <IconMiniArrowDownLine />
+      return <IconMiniArrowDownLine css={styles?.sortedIconColor} />
     }
     if (onRequestSort) {
-      return <IconMiniArrowDoubleLine css={{ opacity: '30%' }} />
+      return <IconMiniArrowDoubleLine css={styles?.unSortedIconColor} />
     }
     return undefined
   }

diff --git a/packages/ui-table/src/Table/ColHeader/props.ts b/packages/ui-table/src/Table/ColHeader/props.ts
@@ -85,7 +85,11 @@ type TableColHeaderProps = TableColHeaderOwnProps &
   >
 
 type TableColHeaderStyle = ComponentStyle<
-  'colHeader' | 'button' | 'buttonContent'
+  | 'colHeader'
+  | 'button'
+  | 'buttonContent'
+  | 'unSortedIconColor'
+  | 'sortedIconColor'
 >
 
 const propTypes: PropValidators<PropKeys> = {

diff --git a/packages/ui-table/src/Table/ColHeader/styles.ts b/packages/ui-table/src/Table/ColHeader/styles.ts
@@ -86,6 +86,14 @@ const generateStyle = (
       label: 'colHeader__buttonContent',
       display: 'flex',
       alignItems: 'center'
+    },
+    unSortedIconColor: {
+      label: 'colHeader__unSortedIconColor',
+      color: componentTheme.unSortedIconColor
+    },
+    sortedIconColor: {
+      label: 'colHeader__sortedIconColor',
+      color: componentTheme.sortedIconColor
     }
   }
 }

diff --git a/packages/ui-table/src/Table/ColHeader/theme.ts b/packages/ui-table/src/Table/ColHeader/theme.ts
@@ -47,7 +47,10 @@ const generateComponentTheme = (theme: Theme): TableColHeaderTheme => {
 
     focusOutlineColor: colors?.contrasts?.blue4570,
     focusOutlineWidth: borders?.widthMedium,
-    focusOutlineStyle: borders?.style
+    focusOutlineStyle: borders?.style,
+
+    unSortedIconColor: colors?.contrasts?.grey4570,
+    sortedIconColor: colors?.contrasts?.blue4570
   }
 
   return {