diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/Examples.tsx index 38d809b0de4..a76fe50ebde 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/Examples.tsx @@ -7,14 +7,14 @@ import React from 'react' import ComponentBox from '../../../../shared/tags/ComponentBox' import { FormLabel, Checkbox, Switch } from '@dnb/eufemia/src' -export const FormLabelDefaultExample = () => ( +export const Default = () => ( Default horizontal FormLabel: ) -export const FormLabelVerticalExample = () => ( +export const Vertical = () => ( Vertical FormLabel: @@ -23,14 +23,14 @@ export const FormLabelVerticalExample = () => ( ) -export const FormLabelNoForIdExample = () => ( +export const NoForId = () => ( Without for_id (select me): ) -export const FormLabelLinkedLabelExample = () => ( +export const LinkedLabel = () => (
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/demos.mdx index 5b7a319e848..c1f6db9aa9f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/demos.mdx @@ -2,27 +2,22 @@ showTabs: true --- -import { - FormLabelDefaultExample, - FormLabelVerticalExample, - FormLabelNoForIdExample, - FormLabelLinkedLabelExample, -} from 'Docs/uilib/components/form-label/Examples' +import * as Examples from 'Docs/uilib/components/form-label/Examples' ## Demos ### Default form-label - + ### Vertical form-label - + ### Vertical form-label without a `for_id` - + ### Linked label (pattern) - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx index fb924f837aa..322546e7f3e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label/properties.mdx @@ -4,12 +4,13 @@ showTabs: true ## Properties -| Properties | Description | -| --------------------------------------- | ---------------------------------------------------------------------------------------------- | -| `for_id` | _(required)_ the `id` of the input. | -| `vertical` | _(optional)_ if set to `true`, will do the same as `label_direction` when set to **vertical**. | -| `title` | _(optional)_ the `title` attribute of the label. | -| `text` | _(optional)_ the `text` of the label. | -| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | -| `element` | _(optional)_ defines the HTML element used. Defaults to `label`. | -| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | +| Properties | Description | +| --------------------------------------- | ------------------------------------------------------------------------------------------------------- | +| `for_id` | _(required)_ the `id` of the input. | +| `vertical` | _(optional)_ if set to `true`, will do the same as `label_direction` when set to **vertical**. | +| `title` | _(optional)_ the `title` attribute of the label. | +| `text` | _(optional)_ the `text` of the label. | +| `size` | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. | +| `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | +| `element` | _(optional)_ defines the HTML element used. Defaults to `label`. | +| [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | 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 d08479bf662..42bc3d5fa92 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 @@ -3,6 +3,7 @@ import { FieldBlock, Field, TestElement, + Form, } from '@dnb/eufemia/src/extensions/forms' import { Flex, Slider } from '@dnb/eufemia/src' @@ -190,3 +191,22 @@ export const HorizontalAutoSize = () => { ) } + +export const LabelSize = () => ( + + + + Heading + + + + + + + + + +) 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 fea881579b3..de9934c9acf 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 @@ -14,6 +14,10 @@ import * as Examples from './Examples' +### Label size + + + ### Horizontal layout diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx index 486e7bd9dfa..091cadacba6 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx @@ -6,7 +6,8 @@ showTabs: true ## Properties -| Property | Type | Description | -| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------- | -| `width` | `string` or `false` | _(optional)_ `small`, `medium`, `large` or `false` for predefined standard widths. | -| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | Various | _(optional)_ `FieldProps` properties. | +| Property | Type | Description | +| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------- | +| `width` | `string` or `false` | _(optional)_ `small`, `medium`, `large` or `false` for predefined standard widths. | +| `size` | `string` or `false` | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. | +| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | Various | _(optional)_ `FieldProps` properties. | diff --git a/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts b/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts index 2d7d023ba07..f914fb5e849 100644 --- a/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts +++ b/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import type { SkeletonShow } from '../Skeleton'; import type { SpacingProps } from '../space/types'; +export type FormLabelSize = 'medium' | 'large'; export type FormLabelText = | string | ((...args: any[]) => any) @@ -29,6 +30,7 @@ export interface FormLabelProps * The `text` of the label. */ text?: FormLabelText; + size?: FormLabelSize; id?: string; class?: string; disabled?: boolean; diff --git a/packages/dnb-eufemia/src/components/form-label/FormLabel.js b/packages/dnb-eufemia/src/components/form-label/FormLabel.js index 0e23c229545..9ccb4e0f76f 100644 --- a/packages/dnb-eufemia/src/components/form-label/FormLabel.js +++ b/packages/dnb-eufemia/src/components/form-label/FormLabel.js @@ -35,6 +35,7 @@ export default class FormLabel extends React.PureComponent { PropTypes.func, PropTypes.node, ]), + size: PropTypes.oneOf(['basis', 'medium', 'large']), id: PropTypes.string, class: PropTypes.string, disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -58,6 +59,7 @@ export default class FormLabel extends React.PureComponent { element: 'label', title: null, text: null, + size: null, id: null, class: null, disabled: null, @@ -98,6 +100,7 @@ export default class FormLabel extends React.PureComponent { sr_only, class: _className, text: _text, // eslint-disable-line + size, ...attributes } = props @@ -110,6 +113,7 @@ export default class FormLabel extends React.PureComponent { (isTrue(vertical) || label_direction === 'vertical') && `dnb-form-label--vertical`, isTrue(sr_only) && 'dnb-sr-only', + size && `dnb-h--${size}`, createSkeletonClass('font', skeleton, this.context), createSpacingClasses(props), className, diff --git a/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx b/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx index b9ff7342b80..1ef50a73df9 100644 --- a/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx +++ b/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx @@ -66,6 +66,28 @@ describe('FormLabel component', () => { ]) }) + it('should support heading size prop', () => { + const { rerender } = render( + + content + + ) + + expect(document.querySelector('.dnb-form-label').classList).toContain( + 'dnb-h--medium' + ) + + rerender( + + content + + ) + + expect(document.querySelector('.dnb-form-label').classList).toContain( + 'dnb-h--large' + ) + }) + it('should validate with ARIA rules', async () => { const Comp = render() expect(await axeComponent(Comp)).toHaveNoViolations() diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx index 070242a1ca9..6823d2b1396 100644 --- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx @@ -23,6 +23,8 @@ export type Props = Pick< width?: false | 'small' | 'medium' | 'large' /** Width of contents block, while label etc can be wider if space is available */ contentsWidth?: 'small' | 'medium' | 'large' | 'stretch' + /** Typography size */ + size?: 'medium' | 'large' } & React.HTMLAttributes function FieldBlock(props: Props) { @@ -40,6 +42,7 @@ function FieldBlock(props: Props) { error: errorProp, width, contentsWidth, + size, contentClassName, children, ...rest @@ -138,6 +141,19 @@ function FieldBlock(props: Props) { ? 'info' : null + const Label = ({ children }) => { + return ( + + {children} + + ) + } + return ( {label || labelDescription ? ( - + + ) : ( <>  )} @@ -175,15 +187,7 @@ function FieldBlock(props: Props) { )}
) : ( - label && ( - - {label} - - ) + label && )}
{ }) expect(screenshot).toMatchImageSnapshot() }) + + it('have to match label size', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="forms-field-block-label-size"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) }) diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx index 5ff8044962b..6985da5254f 100644 --- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx @@ -31,6 +31,28 @@ describe('FieldBlock', () => { expect(element.classList).toContain('dnb-space__top--x-large') }) + it('should support heading size prop', () => { + const { rerender } = render( + + content + + ) + + expect(document.querySelector('.dnb-form-label').classList).toContain( + 'dnb-h--medium' + ) + + rerender( + + content + + ) + + expect(document.querySelector('.dnb-form-label').classList).toContain( + 'dnb-h--large' + ) + }) + it('should contain given classes', () => { render(content) @@ -81,7 +103,7 @@ describe('FieldBlock', () => { expect(labelElement).toBeInTheDocument() expect(labelElement.className).toBe( - 'dnb-form-label dnb-space__bottom--x-small' + 'dnb-form-label dnb-space__top--zero dnb-space__bottom--x-small' ) expect(labelElement.textContent).toBe('A Label Description') }) @@ -95,7 +117,7 @@ describe('FieldBlock', () => { expect(labelElement).toBeInTheDocument() expect(labelElement.className).toBe( - 'dnb-form-label dnb-space__bottom--x-small' + 'dnb-form-label dnb-space__top--zero dnb-space__bottom--x-small' ) expect(labelElement.textContent).toBe('A Secondary Label') }) diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-label-size.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-label-size.snap.png new file mode 100644 index 00000000000..b2f7860cf4c Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-have-to-match-label-size.snap.png differ diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts index a009cb71423..ede1603ba25 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts +++ b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts @@ -16,7 +16,6 @@ export type DrawerListValue = string | number; export type DrawerListDataObject = { selected_value?: string | React.ReactNode; selectedKey?: string | number; - /** @deprecated Use "selectedKey" instead */ selected_key?: string | number; suffix_value?: string | React.ReactNode; content?: string | React.ReactNode | string[];