feat(Table): add Table.SortButton and align to column edges

dnbexperience · Nov 8, 2022 · b2ee767 · b2ee767
1 parent ae605c8
commit b2ee767
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 65 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js
@@ -19,21 +19,15 @@ export const TableVariantBasic = () => (
         Header
       </Th>
       <Th scope="col" sortable reversed>
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Table.SortButton
           text="Sortable"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
       <Th scope="col" align="right" sortable active>
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Table.SortButton
           text="Active"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
     </Tr>
@@ -80,21 +74,15 @@ export const TableClassHelpers = () => (
         .dnb-table__th
       </th>
       <th scope="col" className="dnb-table__th dnb-table--sortable dnb-table--reversed">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Table.SortButton
           text="dnb-table--reversed"
           title="dnb-table__th dnb-table--sortable dnb-table--reversed"
-          wrap="true"
         />
       </th>
       <th scope="col" className="dnb-table__th dnb-table--sortable dnb-table--active">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Table.SortButton
           text="dnb-table--active"
           title="dnb-table__th dnb-table--sortable dnb-table--active"
-          wrap="true"
         />
       </th>
     </tr>
@@ -125,21 +113,15 @@ export const TableLongHeader = () => (
         Static long header senectus ornare convallis ut at  erat imperdiet commodo
       </Th>
       <Th scope="col" className="dnb-table--sortable dnb-table--reversed">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Table.SortButton
           text="Sortable long header ridiculus laoreet turpis netus at vitae"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
       <Th scope="col" align="right" className="dnb-table--sortable dnb-table--active">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Table.SortButton
           text="Active and right aligned long header ridiculus laoreet turpis netus at vitae"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
     </Tr>
@@ -185,21 +167,15 @@ export const TableSticky = () => (
         Header
       </Th>
       <Th scope="col" className="dnb-table--sortable dnb-table--reversed">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Table.SortButton
           text="Sortable"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
       <Th scope="col" className="dnb-table--sortable dnb-table--active">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Table.SortButton
           text="Active"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
     </Tr>

diff --git a/packages/dnb-eufemia/src/components/table/Table.tsx b/packages/dnb-eufemia/src/components/table/Table.tsx
@@ -13,6 +13,7 @@ import {
   validateDOMAttributes,
 } from '../../shared/component-helper'
 import TableContext from './TableContext'
+import TableSortButton from './TableSortButton'
 
 // Internal
 import {
@@ -142,3 +143,4 @@ const Table = (
 export default Table
 
 Table.StickyHelper = StickyHelper
+Table.SortButton = TableSortButton
diff --git a/packages/dnb-eufemia/src/components/table/TableSortButton.tsx b/packages/dnb-eufemia/src/components/table/TableSortButton.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import classnames from 'classnames'
+import Button from '../button/Button'
+
+export default function TableSortButton({ className, ...props }) {
+  return (
+    <Button
+      className={classnames('dnb-table__sort-button', className)}
+      variant="tertiary"
+      icon="arrow-down"
+      wrap
+      {...props}
+    />
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx
@@ -31,7 +31,7 @@ describe('Table screenshot', () => {
   it('have to match the default choice of table styles', async () => {
     const screenshot = await testPageScreenshot({
       style: {
-        width: '40rem',
+        width: '50rem',
       },
       selector: '[data-visual-test="table-default"] .dnb-table',
     })

diff --git a/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx b/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx
@@ -9,7 +9,6 @@ import Table from '../Table'
 import Td from '../TableTd'
 import Th from '../TableTh'
 import Tr from '../TableTr'
-import { Button } from '../../'
 import { Provider } from '../../../shared'
 
 export default {
@@ -32,22 +31,10 @@ export const StickyBasicTable = () => {
             Header
           </Th>
           <Th scope="col" reversed sortable>
-            <Button
-              variant="tertiary"
-              icon="arrow-down"
-              text="Sortable"
-              title="Sort table column"
-              wrap="true"
-            />
+            <Table.SortButton text="Sortable" title="Sort table column" />
           </Th>
           <Th scope="col" active sortable>
-            <Button
-              variant="tertiary"
-              icon="arrow-down"
-              text="Active"
-              title="Sort table column"
-              wrap="true"
-            />
+            <Table.SortButton text="Active" title="Sort table column" />
           </Th>
         </Tr>
       </thead>
@@ -114,22 +101,13 @@ export const BasicTable = () => {
               Header
             </Th>
             <Th scope="col" reversed sortable>
-              <Button
-                variant="tertiary"
-                icon="arrow-down"
+              <Table.SortButton
                 text="Sortable"
                 title="Sort table column"
-                wrap="true"
               />
             </Th>
             <Th scope="col" align="right" active sortable>
-              <Button
-                variant="tertiary"
-                icon="arrow-down"
-                text="Active"
-                title="Sort table column"
-                wrap="true"
-              />
+              <Table.SortButton text="Active" title="Sort table column" />
             </Th>
           </Tr>
         </thead>

diff --git a/packages/dnb-eufemia/src/components/table/style/themes/table-basis.scss b/packages/dnb-eufemia/src/components/table/style/themes/table-basis.scss
@@ -17,8 +17,8 @@
   & &__th#{&}--sortable {
     color: var(--color-emerald-green);
 
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-anchor,
+    .dnb-table__sort-button.dnb-button {
       > .dnb-icon {
         opacity: 0;
         transition: opacity 200ms ease-out, transform 500ms ease-out;
@@ -111,11 +111,30 @@
         visibility: hidden;
       }
     }
+
+    &[align='right'] {
+      padding-right: 0.5rem;
+
+      .dnb-table__sort-button.dnb-button {
+        flex-direction: row-reverse;
+
+        &--tertiary.dnb-button--icon-position-right {
+          padding-right: 0.5rem;
+
+          .dnb-button__text {
+            padding-right: 0;
+            &::after {
+              right: 0;
+            }
+          }
+        }
+      }
+    }
   }
   & > thead > tr > th#{&}--active,
   & &__th#{&}--active {
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-anchor,
+    .dnb-table__sort-button.dnb-button {
       // hide underline
       &:not(:hover) .dnb-button__text::after {
         opacity: 0;
@@ -145,8 +164,8 @@
   }
   & > thead > tr > th#{&}--reversed,
   & &__th#{&}--reversed {
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-anchor,
+    .dnb-table__sort-button.dnb-button {
       .dnb-icon {
         transform: rotate(180deg);
         transform-origin: 50% 50%;