fix: make #table style expandable in width

packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js

@@ -3,18 +3,12 @@
  *
  */
 
-import React, {
-  PureComponent
-  // , useEffect, useState
-} from 'react'
+import React, { PureComponent, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 // import { Space } from 'dnb-ui-lib/src/components'
 import styled from '@emotion/styled'
-import {
-  MagicBox,
-  VisualSpace
-} from '../../../../../../dnb-ui-lib/stories/components/Space'
+import { Space } from 'dnb-ui-lib/src/components'
 
 const IS_TEST = typeof window !== 'undefined' && window.IS_TEST
 const TestStyles = styled.div`
@@ -189,3 +183,127 @@ RedBox.propTypes = {
 RedBox.defaultProps = {
   children: null
 }
+
+const Block = styled.div`
+  position: relative;
+
+  display: flex;
+  justify-content: center;
+
+  width: 1.5rem;
+  height: 1.5rem;
+
+  background-color: var(--color-mint-green);
+`
+const Line = styled.div`
+  position: absolute;
+  bottom: 100%;
+
+  display: flex;
+  align-items: center;
+
+  width: 0.0625rem;
+  height: 100%;
+
+  background-color: var(--color-cherry-red);
+  ${'' /* border-left: 0.0625rem dotted var(--color-cherry-red); */}
+`
+const MarginContainer = styled.div`
+  position: relative;
+`
+const Margin = styled.div`
+  position: absolute;
+  bottom: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: rgba(213, 30, 149, 0.25);
+  ${'' /* border-left: 0.0625rem dotted var(--color-cherry-red); */}
+`
+const Label = styled.label`
+  display: block;
+  width: 1rem;
+  margin-left: 0.25rem;
+  font-size: 0.5rem;
+  text-align: center;
+  color: var(--color-black-80);
+`
+
+const MagicBox = ({ label, ...rest }) => {
+  const ref = React.createRef()
+
+  const [spaceInRem, setLabel] = useState(label)
+  const [title, setTitle] = useState(null)
+
+  if (!label) {
+    useEffect(() => {
+      const spaceInPixels = window
+        .getComputedStyle(ref.current.parentElement)
+        .getPropertyValue('margin-top')
+      const spaceInRem = `${parseFloat(spaceInPixels) / 16}`
+      setLabel(spaceInRem)
+
+      const title = ref.current.parentElement.getAttribute('class')
+      setTitle(title)
+    })
+  }
+
+  return (
+    <Block {...rest} ref={ref} title={title}>
+      <Line style={{ height: `${spaceInRem}rem` }}></Line>
+      <Label>{spaceInRem}</Label>
+    </Block>
+  )
+}
+MagicBox.propTypes = {
+  label: PropTypes.string
+}
+MagicBox.defaultProps = {
+  label: null
+}
+
+const VisualSpace = ({ label, children, ...rest }) => {
+  const ref = React.createRef()
+
+  const [spaceInRem, setLabel] = useState(label)
+  const [title, setTitle] = useState(null)
+
+  if (!label) {
+    useEffect(() => {
+      const spaceInPixels = window
+        .getComputedStyle(ref.current.children[0])
+        .getPropertyValue('margin-top')
+      const spaceInRem = `${parseFloat(spaceInPixels) / 16}`
+      setLabel(spaceInRem)
+
+      const title = ref.current.parentElement.getAttribute('class')
+      setTitle(title)
+    })
+  }
+
+  return (
+    <Space {...rest} title={title}>
+      <MarginContainer ref={ref}>
+        {children}
+        <Margin style={{ height: `${spaceInRem}rem` }}>
+          <Label>{spaceInRem}</Label>
+        </Margin>
+      </MarginContainer>
+    </Space>
+  )
+}
+VisualSpace.propTypes = {
+  label: PropTypes.string,
+  children: PropTypes.node
+}
+VisualSpace.defaultProps = {
+  label: null,
+  children: null
+}
+
+export { MagicBox, VisualSpace }

packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js

@@ -95,6 +95,11 @@ const DividerSection = styled(Section)`
   .dnb-button + .dnb-button {
     margin-left: 1rem;
   }
+  @media (max-width: 40em) {
+    .dnb-button + .dnb-button {
+      margin-left: 0.5rem;
+    }
+  }
 `
 
 // Default local states/values

packages/dnb-design-system-portal/src/docs/uilib/elements/tables.md

@@ -9,15 +9,17 @@ import ComponentBox from 'Tags/ComponentBox'
 
 The following table has a default style. But in future, there will be several patterns and styles to choose from.
 
+You may consider using `table-layout: fixed;`.
+
 <ComponentBox reactLive hideCode data-dnb-test="table-default">
 {`
 <table className="dnb-table">
   <thead>
     <tr>
-      <th colSpan="2" className="dnb-table--no-wrap">
-        Only text
+      <th scope="col" colSpan="2" className="dnb-table--no-wrap">
+        Header
       </th>
-      <th className="dnb-table--sortable dnb-table--reversed">
+      <th scope="col" className="dnb-table--sortable dnb-table--reversed">
         {/* <a href="#sort">
           Sortable
           <IconPrimary icon="chevron-down" />
@@ -29,7 +31,7 @@ The following table has a default style. But in future, there will be several pa
           title="Sort table row"
         />
       </th>
-      <th className="dnb-table--sortable dnb-table--active">
+      <th scope="col" className="dnb-table--sortable dnb-table--active">
         {/* <a href="#sort">
           Active
           <IconPrimary icon="chevron-down" />
@@ -43,6 +45,12 @@ The following table has a default style. But in future, there will be several pa
       </th>
     </tr>
   </thead>
+  <tfoot>
+    <tr>
+      <td colSpan="3">Footer</td>
+      <td>Sum</td>
+    </tr>
+  </tfoot>
   <tbody>
     <tr>
       <td>
@@ -59,8 +67,7 @@ The following table has a default style. But in future, there will be several pa
       <td>Column 4</td>
     </tr>
     <tr>
-      <td>Column 1</td>
-      <td>Column 2</td>
+      <td colSpan="2">Column witch spans over two columns</td>
       <td>Column 3</td>
       <td>Column 4</td>
     </tr>

packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js

@@ -12,16 +12,26 @@ describe('Table screenshot', () => {
   setupPageScreenshot({ url: '/uilib/elements/tables' })
   it('have to match the default choice of table styles', async () => {
     const screenshot = await testPageScreenshot({
+      style: {
+        width: '40rem'
+      },
       selector: '[data-dnb-test="table-default"] .dnb-table'
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+  const style = {
+    display: 'block',
+    width: '40rem'
+  }
+  const styleSelector = '[data-dnb-test="table-default"] .dnb-table'
   it('have to match a sortable table header on hover', async () => {
     const selector =
       '[data-dnb-test="table-default"] th.dnb-table--sortable:not(.dnb-table--active)'
     const screenshot = await testPageScreenshot({
+      style,
+      styleSelector,
       selector,
-      simulateSelector: `${selector} button`,
+      simulateSelector: `${selector} button.dnb-button`,
       simulate: 'hover'
     })
     expect(screenshot).toMatchImageSnapshot()
@@ -30,8 +40,10 @@ describe('Table screenshot', () => {
     const selector =
       '[data-dnb-test="table-default"] th.dnb-table--sortable:not(.dnb-table--active)'
     const screenshot = await testPageScreenshot({
+      style,
+      styleSelector,
       selector,
-      simulateSelector: `${selector} button`,
+      simulateSelector: `${selector} button.dnb-button`,
       simulate: 'focus'
     })
     expect(screenshot).toMatchImageSnapshot()

packages/dnb-ui-lib/src/style/elements/table.scss

@@ -6,7 +6,8 @@
 @import '../../components/button/style/button-mixins.scss';
 
 @mixin tableStyle() {
-  display: block;
+  display: table;
+  table-layout: auto;
   width: 100%;
 
   overflow: auto;