fix: fix width issue of #form-status and make it more easy to set a c…

…ustom min-width or max-width
dnbexperience · Oct 5, 2020 · 0bc3b0d · 0bc3b0d
1 parent a7e3467
commit 0bc3b0d
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 14 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-status/info.md
@@ -14,3 +14,9 @@ Also, the `FormStatus` is used inside of many other form components.
 The `FormStatus` component cooperates together with the [GlobalStatus](/uilib/components/global-status) component to summaries and have several status messages in once place.
 
 <FormStatusIcons />
+
+### Width alignment
+
+In order to enhance accessibility (readability), the FormStatus will align its width to a linked component. That means, if the FormStatus is build into the Input component, it will inherit the width of the input.
+
+The `min-width` is set to be **12rem**. Use CSS `min-width` or `max-width` to set a custom (manual) width.
diff --git a/packages/dnb-ui-lib/src/components/form-status/FormStatus.js b/packages/dnb-ui-lib/src/components/form-status/FormStatus.js
@@ -8,7 +8,6 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Context from '../../shared/Context'
 import {
-  warn,
   isTrue,
   registerElement,
   makeUniqueId,
@@ -187,19 +186,31 @@ export default class FormStatus extends React.PureComponent {
     const { text_id, width_selector } = this.props
     if (text_id && this._ref.current && typeof document !== 'undefined') {
       try {
-        const width = this.sumElementWidth(
+        let width = this.sumElementWidth(
           elem ||
             width_selector ||
             (text_id.match(/^([a-z0-9]+)/) || [])[1],
           this._ref.current
         )
-        if (width >= 64) {
-          this._ref.current.style.maxWidth = `${
-            (width + (width < 128 ? 32 : 0)) / 16
-          }rem`
+
+        const minWidth = 12 * 16 // use 12rem, because thats the default width in chrome for an input
+        if (width < minWidth) {
+          width = minWidth
+        }
+
+        const remWidth = `${width / 16}rem`
+
+        const cS = window.getComputedStyle(this._ref.current)
+        const hasCustomWidth = this._ref.current.style.maxWidth
+          ? false
+          : (cS.minWidth !== '' && cS.minWidth !== 'auto') ||
+            (cS.maxWidth !== '' && cS.maxWidth !== 'none')
+
+        if (!hasCustomWidth) {
+          this._ref.current.style.maxWidth = remWidth
         }
       } catch (e) {
-        warn(e)
+        // skip logging
       }
     }
   }
@@ -240,7 +251,7 @@ export default class FormStatus extends React.PureComponent {
       // and show it again
       targetElement.style.display = display
     } catch (e) {
-      warn(e)
+      // skip logging
     }
 
     return width
@@ -307,7 +318,7 @@ export default class FormStatus extends React.PureComponent {
       ...attributes
     }
     const textParams = {
-      className: 'dnb-form-status--text',
+      className: classnames('dnb-form-status--text'),
       id: text_id
     }
 

diff --git a/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js b/packages/dnb-ui-lib/src/components/form-status/__tests__/FormStatus.test.js
@@ -50,13 +50,13 @@ describe('FormStatus component', () => {
     // mock call the setMaxWidth since document.getElementById is not an option
     const instance = Comp.find('FormStatus').instance()
     instance.setMaxWidth({
-      offsetWidth: 64 // pixels
+      offsetWidth: 256 + 16 // 16rem + 1rem pixels
     })
 
     // now, setMaxWidth should have set an inline style with an "max-width as rem"
     expect(
       Comp.find('.dnb-form-status').instance().getAttribute('style')
-    ).toBe('max-width: 6rem;') // 4rem + 2rem
+    ).toBe('max-width: 17rem;') // 16rem (min-width) + 1rem
   })
 
   it('should have correact attributes once the "hidden" prop changes', async () => {

diff --git a/packages/dnb-ui-lib/src/components/form-status/style/_form-status.scss b/packages/dnb-ui-lib/src/components/form-status/style/_form-status.scss
@@ -11,6 +11,8 @@
     justify-content: flex-start;
     align-items: flex-start;
 
+    min-width: inherit;
+
     border-radius: var(--input-border-radius);
   }
 

diff --git a/packages/dnb-ui-lib/stories/components/FormStatus.js b/packages/dnb-ui-lib/stories/components/FormStatus.js
@@ -5,7 +5,7 @@
 
 import React /* , { useState, useEffect } */ from 'react'
 import { Wrapper, Box } from '../helpers'
-// import styled from '@emotion/styled'
+import styled from '@emotion/styled'
 
 import {
   FormStatus,
@@ -17,19 +17,50 @@ import {
   Switch,
   Button
 } from '../../src/components'
-import { H2, Link } from '../../src/elements'
+import { Link } from '../../src/elements'
 
 const CustomStatus = () => (
   <>
-    <H2>Custom Status</H2>
+    {/* <H2>Custom Status</H2> */}
     <Link href="/">Goto</Link> more text itae tortor metus nulla nunc
     habitasse
   </>
 )
+
+const SmallWidth = styled(Input)`
+  /* .dnb-form-status {
+      max-width: 16rem;
+    } */
+  .dnb-input__input {
+    width: 4rem;
+    text-align: center;
+  }
+`
+// const CustomStatus = () => (
+//   <>
+//     My info <Link href="/">with a link</Link> and more text
+//   </>
+// )
+
 export default [
   'FormStatus',
   () => (
     <Wrapper>
+      <Box>
+        <Input
+          label="Input with custom status:"
+          status={<CustomStatus />}
+          status_state="info"
+          value="Input value"
+        />
+      </Box>
+      <Box>
+        <SmallWidth
+          label="Small width input:"
+          value="4"
+          status="Adipiscing etiam laoreet et egestas dis massa quis dapibus nam diam est non curae ad hac dictumst"
+        />
+      </Box>
       <Box>
         <FormStatus>Status</FormStatus>
       </Box>