fix: correct #table header styling for sorting as per UX

dnbexperience · Sep 10, 2019 · e0fc87e · e0fc87e
1 parent 46c0e14
commit e0fc87e
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 44 deletions.
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss
@@ -78,10 +78,18 @@
     bottom: 0;
 
     width: auto;
-    height: 1px;
+    height: 0.0625rem;
 
-    border-radius: 0.5px;
-    border-bottom: 1px solid var(--color-sea-green);
+    border-radius: calc(0.0625rem / 2);
+    border-bottom: 0.0625rem solid var(--color-sea-green);
+
+    // IE fix
+    @media screen and (-ms-high-contrast: none) {
+      height: 1px;
+
+      border-radius: 0.5px;
+      border-bottom-width: 1px;
+    }
 
     @content;
   }

diff --git a/...able-screenshot-have-to-match-a-sortable-table-header-on-focus-1-4fdc6.snap.png b/...able-screenshot-have-to-match-a-sortable-table-header-on-focus-1-4fdc6.snap.png
diff --git a/...able-screenshot-have-to-match-a-sortable-table-header-on-hover-1-dff6e.snap.png b/...able-screenshot-have-to-match-a-sortable-table-header-on-hover-1-dff6e.snap.png
diff --git a/packages/dnb-ui-lib/src/style/elements/table.scss b/packages/dnb-ui-lib/src/style/elements/table.scss
@@ -69,13 +69,13 @@
     color: var(--color-emerald-green);
 
     .dnb-anchor,
-    .dnb-button,
-    .dnb-button--tertiary {
+    .dnb-button {
       > .dnb-icon {
         position: absolute;
         right: 0.25rem;
         left: auto;
-        visibility: hidden;
+        opacity: 0;
+        transition: opacity 200ms ease-out;
       }
 
       position: relative;
@@ -100,15 +100,15 @@
         padding-right: 1rem;
       }
 
-      &:not(:focus),
-      &:not(:focus).dnb-button--has-text {
+      &:not(:focus) .dnb-button__text {
         @include drawUnderlineBorder() {
           left: 0;
           right: 1.5rem;
           bottom: 0;
           height: 0.125rem;
           border-radius: 0.0625rem;
           background-color: var(--color-emerald-green);
+          transition: opacity 200ms ease-out;
         }
       }
 
@@ -120,18 +120,22 @@
         }
 
         &:not(:focus) .dnb-icon {
-          visibility: visible;
+          opacity: 1;
         }
 
-        &::after {
-          right: 0;
-          background-color: var(--color-sea-green);
-          visibility: visible;
+        .dnb-button__text::after {
+          opacity: 0;
         }
       }
 
       &:focus {
         @include tableFocusRing();
+        &::before {
+          right: -0.5rem;
+        }
+        .dnb-icon {
+          opacity: 1;
+        }
       }
 
       @include active() {
@@ -140,45 +144,53 @@
           right: -0.5rem;
         }
 
-        color: var(--color-emerald-green);
         .dnb-button__text {
           border-bottom-color: transparent;
         }
-        &::after {
+        .dnb-button__text::after {
           visibility: hidden;
         }
+        .dnb-icon {
+          opacity: 1;
+        }
+
+        color: var(--color-emerald-green);
       }
     }
   }
   & > thead > tr > th#{&}--active,
   & &__th#{&}--active {
-    a,
     .dnb-anchor,
-    .dnb-button,
-    .dnb-button--tertiary {
-      &,
-      &.dnb-button--has-text {
-        &::after {
-          visibility: hidden;
-        }
+    .dnb-button {
+      // hide underline
+      .dnb-button__text::after {
+        right: 0 !important; // force the line to be under the icon
+        opacity: 0;
       }
       .dnb-icon {
-        visibility: visible;
+        opacity: 1;
       }
 
-      &:focus {
-        &::before {
-          right: -0.5rem;
+      // and underline on hover
+      @include hover() {
+        .dnb-button__text::after {
+          right: 0;
+          background-color: var(--color-sea-green-alt);
+          border-bottom-color: var(--color-sea-green-alt);
+          opacity: 1;
         }
       }
+
+      // focus ring
+      &:focus::before {
+        right: -0.5rem;
+      }
     }
   }
   & > thead > tr > th#{&}--reversed,
   & &__th#{&}--reversed {
-    a,
     .dnb-anchor,
-    .dnb-button,
-    .dnb-button--tertiary {
+    .dnb-button {
       .dnb-icon {
         transform: scaleY(-1);
       }

diff --git a/packages/dnb-ui-lib/stories/elements/Table.js b/packages/dnb-ui-lib/stories/elements/Table.js
@@ -3,11 +3,18 @@
  *
  */
 
-import React /* , { useState, useEffect } */ from 'react'
+import React, { Fragment } from 'react'
 import { Wrapper, Box } from '../helpers'
 import styled from '@emotion/styled'
 
-import { Button, DatePicker } from '../../src/components'
+import {
+  Button,
+  Switch,
+  Checkbox,
+  Dropdown,
+  Input,
+  DatePicker
+} from '../../src/components'
 
 const CustomWrapper = styled(Wrapper)`
   .mint_col {
@@ -30,21 +37,13 @@ export default [
                 Only text
               </th>
               <th className="dnb-table--sortable dnb-table--reversed">
-                {/* <a className="dnb-anchor" href="#sort">
-                    Sortable
-                    <IconPrimary icon="chevron-down" />
-                  </a> */}
                 <Button
                   variant="tertiary"
                   icon="chevron-down"
                   text="Sortable"
                 />
               </th>
               <th className="dnb-table--sortable dnb-table--active">
-                {/* <a className="dnb-anchor" href="#sort">
-                    Active
-                    <IconPrimary icon="chevron-down" />
-                  </a> */}
                 <Button
                   variant="tertiary"
                   icon="chevron-down"
@@ -54,24 +53,60 @@ export default [
             </tr>
           </thead>
           <tbody>
+            <tr>
+              {/* <td>
+                <Button variant="secondary" icon="close" />
+              </td> */}
+              <td>
+                <Dropdown
+                  data={data}
+                  selected_index={0}
+                  title="Please select a value"
+                  on_change={({ data: { selected_key } }) => {
+                    //eslint-disable-line
+                    console.log('on_change', selected_key) //eslint-disable-line
+                  }}
+                />
+              </td>
+              <td>
+                <Input placeholder="Placeholder text" />
+              </td>
+              <td>
+                <DatePicker
+                  date={new Date()}
+                  show_input
+                  show_cancel_button
+                  on_change={({ date }) => {
+                    console.log('on_change', date) //eslint-disable-line
+                  }}
+                  on_cancel={({ date }) => {
+                    console.log('on_cancel', date) //eslint-disable-line
+                  }}
+                />
+              </td>
+              <td>
+                <Checkbox label="12345" />
+              </td>
+            </tr>
             <tr>
               <td>
                 <p className="dnb-p">
                   Column 1 <b>width p</b>
                 </p>
               </td>
               <td>
-                <code>Column 2 with code</code>{' '}
-                <DatePicker label="Date:" range />
+                <code>Col</code> <DatePicker label="Date:" range />
               </td>
               <td>
-                <span>Column 3 with span</span>
+                <span>
+                  Col <Switch />
+                </span>
               </td>
               <td>Column 4</td>
             </tr>
             <tr>
               <td>
-                Column 1 <DatePicker label="Date:" range show_input />
+                Col <DatePicker label="Date:" show_input />
               </td>
               <td>Column 2</td>
               <td>Column 3</td>
@@ -164,3 +199,41 @@ export default [
     </CustomWrapper>
   )
 ]
+
+const data = [
+  {
+    selected_value: 'AA',
+    content: 'A'
+  },
+  {
+    content: ['1234.56.78902', 'B']
+  },
+  {
+    selected_value: 'CC',
+    content: ['1134.56.78962', 'C']
+  },
+  {
+    selected_value: 'DD',
+    content: ['1534.96.48901', 'D']
+  },
+  {
+    content: <Fragment>E</Fragment>
+  },
+  <Fragment key="key1">Custom content {'🔥'}</Fragment>,
+  [<Fragment key="key2">Custom content X {'🔥'}</Fragment>],
+  {
+    content: 'EE'
+  },
+  {
+    content: 'EEE'
+  },
+  {
+    content: ['F', 'F', 'F', 'F', 'F']
+  },
+  {
+    content: 'G'
+  },
+  {
+    content: 'H'
+  }
+]