From 00c278ca73b1e97415942dd1d18a349155d8e018 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Mon, 22 Jan 2024 11:28:09 +0100 Subject: [PATCH] feat(forms): add labelDescription prop to fields (`labelSecondary` got removed) (#3251) `labelDescription` was a part of forms before, but where removed in this PR #3209. But it turns out, UX wants this for form fields. This time it gets officially included. We need to consider to add this to FormLabel at a later stage. But that involves a lot more work. Also, `Exipry` needed a larger rewrite in order to make `labelDescription` work. This change will be included in this PR #3252 --- .../create-component/FieldBlock/Examples.tsx | 10 +++++++++ .../create-component/FieldBlock/demos.mdx | 4 ++++ .../forms/data-value-readwrite-properties.mdx | 1 + .../feature-fields/PhoneNumber/properties.mdx | 5 ++++- .../src/components/textarea/Textarea.js | 2 +- .../textarea/__tests__/Textarea.test.tsx | 10 ++++----- .../Provider/__tests__/Provider.test.tsx | 2 -- .../Field/ArraySelection/ArraySelection.tsx | 2 ++ .../src/extensions/forms/Field/Date/Date.tsx | 2 ++ .../extensions/forms/Field/Expiry/Expiry.tsx | 2 ++ .../extensions/forms/Field/Number/Number.tsx | 2 ++ .../forms/Field/Selection/Selection.tsx | 2 ++ .../extensions/forms/Field/String/String.tsx | 2 ++ .../Field/String/__tests__/String.test.tsx | 10 ++++----- .../extensions/forms/Field/Toggle/Toggle.tsx | 2 ++ .../forms/FieldBlock/FieldBlock.tsx | 21 +++++++++++++++++- .../__tests__/FieldBlock.screenshot.test.ts | 10 ++++++++- .../FieldBlock/__tests__/FieldBlock.test.tsx | 16 +++++++++++++ ...n-have-to-match-label-description.snap.png | Bin 0 -> 6328 bytes ...-sbanken-have-to-match-label-size.snap.png | Bin 0 -> 14455 bytes ...-for-sbanken-have-to-match-widths.snap.png | Bin 0 -> 72237 bytes ...i-have-to-match-label-description.snap.png | Bin 0 -> 5576 bytes ...-for-ui-have-to-match-label-size.snap.png} | Bin ...block-for-ui-have-to-match-widths.snap.png | Bin 0 -> 66385 bytes .../fieldblock-have-to-match-widths.snap.png | Bin 66424 -> 0 bytes .../FieldBlock/style/dnb-field-block.scss | 4 ++++ .../style/themes/dnb-field-block-sbanken.scss | 6 +++++ .../themes/dnb-field-block-theme-ui.scss | 6 +++++ .../extensions/forms/Iterate/Array/Array.tsx | 2 ++ .../dnb-eufemia/src/extensions/forms/types.ts | 2 ++ .../fragments/text-counter/TextCounter.tsx | 9 ++++---- .../eiendom-theme-extensions.scss | 1 + .../theme-eiendom/eiendom-theme-forms.scss | 1 + .../sbanken-theme-extensions.scss | 1 + .../theme-sbanken/sbanken-theme-forms.scss | 1 + .../themes/theme-ui/ui-theme-extensions.scss | 1 + .../style/themes/theme-ui/ui-theme-forms.scss | 1 + 37 files changed, 120 insertions(+), 20 deletions(-) create mode 100644 packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description.snap.png create mode 100644 packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-size.snap.png create mode 100644 packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png create mode 100644 packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description.snap.png rename packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/{fieldblock-have-to-match-label-size.snap.png => fieldblock-for-ui-have-to-match-label-size.snap.png} (100%) create mode 100644 packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png delete mode 100644 packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-widths.snap.png create mode 100644 packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-sbanken.scss create mode 100644 packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx index efb5de5bc2e..ead9346ae30 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx @@ -114,6 +114,16 @@ export const Widths = () => { ) } +export const WithDescription = () => { + return ( + + + Input features goes here + + + ) +} + export const GroupMultipleFields = () => { return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx index 15f4ae4de39..4b6806a06d8 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx @@ -26,6 +26,10 @@ import * as Examples from './Examples' +### With description (vertical only) + + + ### Group multiple fields diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx index 1aeea8965a5..8a26271fbfb 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx @@ -12,6 +12,7 @@ import { OmitTableProperties } from 'dnb-design-system-portal/src/shared/tags/Ta | `name` | `string` | _(optional)_ Outer DOM element name attribute. | | `layout` | `string` | _(optional)_ Layout for the label and input. Can be `horizontal` or `vertical`. | | `label` | `string` | _(optional)_ Field label to show above / before the input feature. | +| `labelDescription` | `string` | _(optional)_ A more discreet text displayed beside the label (i.e for "(optional)"). | | `placeholder` | `string` | _(optional)_ Text showing in place of the value if no value is given. | | `path` | `string` | _(optional)_ JSON Pointer for where the data for this input is located in the source dataset (when using Form.Handler or DataContext). The `path` will also be set as the `name` attribute for the [string](/uilib/extensions/forms/base-fields/String/)-field. | | `info` | `Error` or `string` | _(optional)_ Info message shown below / after the input. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx index 6b58a21f93a..5f8f409b9f0 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx @@ -22,4 +22,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. | `width` | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. | | [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | - + diff --git a/packages/dnb-eufemia/src/components/textarea/Textarea.js b/packages/dnb-eufemia/src/components/textarea/Textarea.js index bb6971138cd..c48b0b1acdd 100644 --- a/packages/dnb-eufemia/src/components/textarea/Textarea.js +++ b/packages/dnb-eufemia/src/components/textarea/Textarea.js @@ -549,7 +549,7 @@ export default class Textarea extends React.PureComponent { {characterCounter && maxLength > 0 && ( { const textarea = document.querySelector('textarea') const ariaLive = document.querySelector('.dnb-aria-live') - expect(counter).toHaveTextContent('5 av 8 tegn gjenstår') + expect(counter).toHaveTextContent('3 av 8 tegn gjenstår') expect(ariaLive).toHaveTextContent('') await userEvent.type(textarea, 'bar') - expect(counter).toHaveTextContent('2 av 8 tegn gjenstår') - expect(ariaLive).toHaveTextContent('2 av 8 tegn gjenstår') + expect(counter).toHaveTextContent('6 av 8 tegn gjenstår') + expect(ariaLive).toHaveTextContent('6 av 8 tegn gjenstår') rerender(