feat: css changes

Orfium · May 16, 2024 · 62c0d71 · 62c0d71
1 parent 8a19c4e
commit 62c0d71
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 14 deletions.
diff --git a/src/__storyshots__/Updated Components/Table/Table-Sorting.snap b/src/__storyshots__/Updated Components/Table/Table-Sorting.snap
@@ -145,6 +145,16 @@
   opacity: 0;
 }
 
+.emotion-9:hover,
+.emotion-9:focus-visible {
+  color: #111530;
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+}
+
 .emotion-9:hover [data-header-role='options'] button,
 .emotion-9:focus-visible [data-header-role='options'] button {
   opacity: 1;
@@ -247,6 +257,36 @@
   fill: #194DCC!important;
 }
 
+.emotion-21 {
+  width: 150%;
+  height: 2.75rem;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 8px 16px;
+  color: #52567a;
+  font-family: Roboto;
+  font-weight: 400;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  letter-spacing: 0.015625rem;
+}
+
+.emotion-21 [data-header-role='options'] button {
+  opacity: 0;
+}
+
+.emotion-21:hover [data-header-role='options'] button,
+.emotion-21:focus-visible [data-header-role='options'] button {
+  opacity: 1;
+}
+
+.emotion-21 button:focus-visible {
+  opacity: 1;
+}
+
 .emotion-39 {
   height: 2.75rem;
   padding: 8px 16px;
@@ -406,7 +446,7 @@
               </div>
             </th>
             <th
-              class="emotion-9"
+              class="emotion-21"
               colspan="1"
             >
               <div
@@ -499,7 +539,7 @@
               </div>
             </th>
             <th
-              class="emotion-9"
+              class="emotion-21"
               colspan="1"
             >
               <div

diff --git a/src/components/Table/components/TH/TH.style.ts b/src/components/Table/components/TH/TH.style.ts
@@ -12,7 +12,12 @@ export const thContainer =
     rowSize,
     width,
     hasVisibleOptions,
-  }: Pick<TableProps<any>, 'rowSize'> & { width?: number; hasVisibleOptions?: boolean }) =>
+    isSortable,
+  }: Pick<TableProps<any>, 'rowSize'> & {
+    width?: number;
+    hasVisibleOptions?: boolean;
+    isSortable?: boolean;
+  }) =>
   (theme: Theme): SerializedStyles => {
     return css`
       width: ${width ? `${width}%` : undefined};
@@ -21,7 +26,9 @@ export const thContainer =
       text-align: left;
       box-sizing: border-box;
       padding: 8px 16px;
-      color: ${theme.tokens.colors.get('textColor.default.secondary')};
+      color: ${theme.tokens.colors.get(
+        `textColor.default.${hasVisibleOptions ? 'primary' : 'secondary'}`
+      )};
       ${generateStylesFromTokens(theme.tokens.typography.get('normal.body02'))};
 
       [data-header-role='options'] {
@@ -32,6 +39,9 @@ export const thContainer =
 
       &:hover,
       &:focus-visible {
+        color: ${isSortable && theme.tokens.colors.get('textColor.default.primary')};
+        ${isSortable && generateStylesFromTokens(theme.tokens.typography.get('normal.label02'))};
+
         [data-header-role='options'] {
           button {
             opacity: 1;

diff --git a/src/components/Table/components/TH/TH.tsx b/src/components/Table/components/TH/TH.tsx
@@ -5,7 +5,6 @@ import type { DivProps } from 'utils/common';
 
 import { THOptions } from './components';
 import { thContainer, optionsContainer } from './TH.style';
-import type { PrimitiveButtonTypes } from 'components/Button/Button.types';
 import type { AcceptedIconNames } from 'components/Icon';
 import IconButton from 'components/IconButton';
 import type { RowSize } from 'components/Table/types';
@@ -62,15 +61,7 @@ const TH: React.FCC<Props & Pick<DivProps, 'onClick'>> = ({
       return 'arrowDown';
     };
 
-    const getIconType = (): PrimitiveButtonTypes => {
-      if (isDesc === true || isDesc === false) return 'secondary';
-
-      return 'tertiary';
-    };
-
-    return (
-      <IconButton iconName={getIcon()} type={getIconType()} size="compact" onClick={handleClick} />
-    );
+    return <IconButton iconName={getIcon()} type="tertiary" size="compact" onClick={handleClick} />;
   };
 
   return (
@@ -79,6 +70,7 @@ const TH: React.FCC<Props & Pick<DivProps, 'onClick'>> = ({
         rowSize,
         width,
         hasVisibleOptions: hasVisibleOptions || Boolean(colSortingState),
+        isSortable,
       })}
       {...rest}
     >