From 0bc3b0d90b8f3a22629ae102cb9b9ad86d62b4d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Mon, 5 Oct 2020 14:44:38 +0200 Subject: [PATCH] fix: fix width issue of #form-status and make it more easy to set a custom min-width or max-width --- .../docs/uilib/components/form-status/info.md | 6 +++ .../src/components/form-status/FormStatus.js | 29 ++++++++++----- .../form-status/__tests__/FormStatus.test.js | 4 +- .../form-status/style/_form-status.scss | 2 + .../stories/components/FormStatus.js | 37 +++++++++++++++++-- 5 files changed, 64 insertions(+), 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 index 330863efd98..0768541c9c3 100644 --- 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. + +### 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 index 770d6ea927d..cec4d0a505c 100644 --- 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 index 1facfc1466a..a3a5802db08 100644 --- 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 index 01673b05e59..518dabc1929 100644 --- 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 index 399e4cd7874..28c5c418e29 100644 --- 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 = () => ( <> -

Custom Status

+ {/*

Custom Status

*/} Goto 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 with a link and more text +// +// ) + export default [ 'FormStatus', () => ( + + } + status_state="info" + value="Input value" + /> + + + + Status