feat(table): apply @meriouma suggestions and adjustments following re…

…base
kronostechnologies · Apr 25, 2024 · 91918d7 · 91918d7
1 parent db25594
commit 91918d7
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 103 deletions.
diff --git a/packages/react/src/components/table/table-header.tsx b/packages/react/src/components/table/table-header.tsx
@@ -11,7 +11,7 @@ import {
 import { devConsole } from '../../utils/dev-console';
 import { SortButtonIcon, SortState } from './sort-button-icon';
 import { TableColumn } from './types';
-import { isAGroupColumn, isColumnIsLastInAGroup } from './utils/table-utils';
+import { isAGroupColumn, isLastColumnInAGroup } from './utils/table-utils';
 
 interface CustomHeader<TData extends RowData, TValue = unknown> extends Header<TData, TValue> {
     column: Column<TData, TValue> & {
@@ -78,19 +78,19 @@ const StyledSortButtonIcon = styled(SortButtonIcon)`
 `;
 
 function getSortState(currentSort: false | SortDirection): SortState {
-    if (!currentSort) {
-        return 'none';
+    switch (currentSort) {
+        case 'asc':
+            return 'ascending';
+        case 'desc':
+            return 'descending';
+        default:
+            return 'none';
     }
-
-    return {
-        asc: 'ascending',
-        desc: 'descending',
-    }[currentSort] as SortState;
 }
 
 function getHeading<TData extends object, TValue>(header: CustomHeader<TData, TValue>): ReactElement {
     const colSpan = header.colSpan > 1 ? header.colSpan : undefined;
-    const hasRightBorder = isAGroupColumn(header.column) || isColumnIsLastInAGroup(header.column);
+    const hasRightBorder = isAGroupColumn(header.column) || isLastColumnInAGroup(header.column);
     const sortState: SortState = getSortState(header.column.getIsSorted());
 
     if (!header.column.columnDef.header && !header.column.columnDef.headerAriaLabel) {

diff --git a/packages/react/src/components/table/table-row.tsx b/packages/react/src/components/table/table-row.tsx
@@ -9,7 +9,7 @@ import {
 import styled, { css, FlattenInterpolation, ThemedStyledProps, ThemeProps } from 'styled-components';
 import { ResolvedTheme } from '../../themes/theme';
 import { TableColumn } from './types';
-import { isColumnIsLastInAGroup } from './utils/table-utils';
+import { isLastColumnInAGroup } from './utils/table-utils';
 
 interface StyledTableRowProps {
     $clickable?: boolean;
@@ -158,7 +158,7 @@ function getCell<TData extends object, TValue>(cell: CustomCell<TData, TValue>):
             $textAlign={cell.column.columnDef.textAlign}
             $startOffset={cell.column.getStart()}
             key={cell.id}
-            hasRightBorder={isColumnIsLastInAGroup(cell.column)}
+            hasRightBorder={isLastColumnInAGroup(cell.column)}
         >
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
         </StyledCell>

diff --git a/packages/react/src/components/table/table.test.tsx.snap b/packages/react/src/components/table/table.test.tsx.snap
@@ -335,45 +335,27 @@ exports[`Table has clickable rows styles 1`] = `
 `;
 
 exports[`Table has column with headers grouped 1`] = `
-.c8 {
+.c6 {
   background-color: inherit;
 }
 
-.c8:not(:first-child) {
+.c6:not(:first-child) {
   border-top: 1px solid #DBDEE1;
 }
 
-.c8 td {
+.c6 td {
   background-color: inherit;
 }
 
-.c9 {
+.c7 {
   background-color: inherit;
 }
 
-.c10 {
+.c8 {
   background-color: inherit;
   border-right: 1px solid #DBDEE1;
 }
 
-.c5 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font: inherit;
-  text-align: left;
-}
-
-.c5:focus {
-  outline: none;
-}
-
 .c3 {
   background-color: inherit;
   box-sizing: border-box;
@@ -409,10 +391,6 @@ exports[`Table has column with headers grouped 1`] = `
   background-color: inherit;
 }
 
-.c6 {
-  margin-left: var(--spacing-1x);
-}
-
 .c0 {
   background: #FFFFFF;
   border-collapse: collapse;
@@ -443,22 +421,14 @@ exports[`Table has column with headers grouped 1`] = `
 }
 
 .c0 .eq-table__util-column {
-  box-sizing: border-box;
-  color: #60666E;
-  font-size: 0.75rem;
-  margin-left: 50%;
-  min-width: var(--size-2halfx);
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
-  width: var(--size-2halfx);
+  width: 1px;
 }
 
 .c1 {
   background: inherit;
 }
 
-.c7 {
+.c5 {
   background: inherit;
 }
 
@@ -489,116 +459,80 @@ exports[`Table has column with headers grouped 1`] = `
       class="c2"
     >
       <th
-        aria-sort="none"
         class="c4"
         scope="col"
       >
-        <button
-          class="c5"
-        >
-          Column 1
-          <svg
-            class="c6"
-            color="#60666E"
-            focusable="false"
-            height="16"
-            width="16"
-          />
-        </button>
+        Column 1
       </th>
       <th
-        aria-sort="none"
         class="c3"
         scope="col"
       >
-        <button
-          class="c5"
-        >
-          Column 2
-          <svg
-            class="c6"
-            color="#60666E"
-            focusable="false"
-            height="16"
-            width="16"
-          />
-        </button>
+        Column 2
       </th>
       <th
-        aria-sort="none"
         class="c3"
         scope="col"
       >
-        <button
-          class="c5"
-        >
-          Column 3
-          <svg
-            class="c6"
-            color="#60666E"
-            focusable="false"
-            height="16"
-            width="16"
-          />
-        </button>
+        Column 3
       </th>
     </tr>
   </thead>
   <tbody
-    class="c7"
+    class="c5"
   >
     <tr
-      class="c8"
+      class="c6"
       data-testid="table-row-0"
     >
       <td
-        class="c9"
+        class="c7"
       >
         Hello
       </td>
       <td
-        class="c10"
+        class="c8"
       >
         World
       </td>
       <td
-        class="c10"
+        class="c8"
       />
     </tr>
     <tr
-      class="c8"
+      class="c6"
       data-testid="table-row-1"
     >
       <td
-        class="c9"
+        class="c7"
       >
         Hello
       </td>
       <td
-        class="c10"
+        class="c8"
       >
         Planet
       </td>
       <td
-        class="c10"
+        class="c8"
       />
     </tr>
     <tr
-      class="c8"
+      class="c6"
       data-testid="table-row-2"
     >
       <td
-        class="c9"
+        class="c7"
       >
         Hello
       </td>
       <td
-        class="c10"
+        class="c8"
       >
         Galaxy
       </td>
       <td
-        class="c10"
+        class="c8"
       />
     </tr>
   </tbody>

diff --git a/packages/react/src/components/table/utils/table-utils.ts b/packages/react/src/components/table/utils/table-utils.ts
@@ -71,7 +71,7 @@ export function isAGroupColumn<TData, TValue>(column: Column <TData, TValue>): b
     return column.columns.length > 0;
 }
 
-export function isColumnIsLastInAGroup<TData, TValue>(column: Column <TData, TValue>): boolean {
+export function isLastColumnInAGroup<TData, TValue>(column: Column <TData, TValue>): boolean {
     if (!column.parent) {
         return false;
     }

diff --git a/packages/storybook/stories/table.stories.tsx b/packages/storybook/stories/table.stories.tsx
@@ -1265,7 +1265,7 @@ export const HeaderAriaLabel: Story = () => {
 };
 
 export const GroupedHeaders: Story = () => {
-    const columns: TableColumn<Data> = [
+    const columns: TableColumn<Data>[] = [
         {
             header: 'Group 1',
             columns: [
@@ -1290,7 +1290,7 @@ export const GroupedHeaders: Story = () => {
         },
     ];
 
-    const data: TableRow<Data>[] = [
+    const data: TableData<Data>[] = [
         {
             column1: 'a',
             column2: 'a',