feat: #form-row has now an official prop indent for a horizontal in…

…dented label/content appearance

packages/dnb-design-system-portal/src/pages/uilib/components/form-row/form-row-info.md

@@ -6,7 +6,17 @@ import Examples from 'Pages/uilib/components/form-row/Examples'
 
 ## Description
 
-The `FormRow` component is a form helper to archive more easily often used DNB form layout setups. By default gives You a `formset` and `legend` HTML element, if a label is provided.
+The `FormRow` component is a helper to archive more easily often used DNB form layout setups. By default a `FormRow` is using the `<formset>` and `<legend>` HTML elements - if a label property is provided.
+
+```jsx
+<FormRow label="Legend label:" label_direction="vertical">
+  /** Only the legend label will be placed vertically */
+  <Input label="Input label A:" />
+  <Input label="Input label B:" />
+</FormRow>
+```
+
+**TODO:** Support [Spacing](/uilib/usage/layout/spacing#spacing-helpers) out of box by defining e.g. `<FormRow top="large x-small" ...` witch will be equivalent with **`margin-top: 2.5rem;`**
 
 ## Demos
 

packages/dnb-design-system-portal/src/pages/uilib/components/form-row/form-row-properties.md

@@ -2,12 +2,13 @@
 draft: true
 ---
 
-| Properties        | Description                                                                                                                                                                       |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `label`           | _(optional)_ use either the `label` property or provide custom one.                                                                                                               |
-| `direction`       | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.              |
-| `vertical`        | _(optional)_ is a short hand to define a `vertical` direction if set to `true`.                                                                                                   |
-| ~~`size`~~        | _(optional)_ the `width` of the **FormLabel** (`.dnb-form-label`). Use `small`, `medium` and `large`. Defaults to `null`. If set to `true`, then `medium` is used.                |
-| `section_style`   | _(optional)_ to enable the visual helper `.dnb-section` class. Use a supported modifier from the [Section component](/uilib/components/section#tab-properties). Defaults to null. |
-| `section_spacing` | _(optional)_ to modify the `spacing`. Use a supported modifier from the [Section component](/uilib/components/section#tab-properties). Defaults to null.                          |
-| `no_fieldset`     | _(optional)_ if set to `true`, then the internal `legend` will be a `label` instead, and no `fieldset` is used. Defaults to `false`.                                              |
+| Properties        | Description                                                                                                                                                                                          |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`           | _(optional)_ use either the `label` property or provide custom one.                                                                                                                                  |
+| `label_direction` | _(optional)_ use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`.                                                                                 |
+| `direction`       | _(optional)_ to define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.                                       |
+| `vertical`        | _(optional)_ is a short hand to define a `vertical` direction if set to `true`.                                                                                                                      |
+| `indent`          | _(optional)_ indents the **FormLabel** (`.dnb-form-label`) left it `direction` is `horizontal`. ~~Use `small`, `medium` and `large`~~. Defaults to `false`. If set to `true`, then `medium` is used. |
+| `section_style`   | _(optional)_ to enable the visual helper `.dnb-section` class. Use a supported modifier from the [Section component](/uilib/components/section#tab-properties). Defaults to null.                    |
+| `section_spacing` | _(optional)_ to modify the `spacing`. Use a supported modifier from the [Section component](/uilib/components/section#tab-properties). Defaults to null.                                             |
+| `no_fieldset`     | _(optional)_ if set to `true`, then the internal `legend` will be a `label` instead, and no `fieldset` is used. Defaults to `false`.                                                                 |

packages/dnb-design-system-portal/src/pages/uilib/components/form-set/Examples.js

@@ -15,7 +15,7 @@ class Example extends PureComponent {
           data-dnb-test="form-set-default"
         >
           {/* @jsx */ `
-<FormSet size direction="horizontal">
+<FormSet indent="true" direction="horizontal">
   <FormRow no_label>
     <H2>A h2 in a FormRow without a label</H2>
   </FormRow>

packages/dnb-design-system-portal/src/pages/uilib/components/form-set/form-set-info.md

@@ -6,7 +6,14 @@ import Examples from 'Pages/uilib/components/form-set/Examples'
 
 ## Description
 
-The `FormSet` component is currently only a provider for [FormRow](/uilib/components/form-row). This way You can define a more globally - e.g. if all the rows should be displayed vertically.
+The `FormSet` component gives You both a HTML form element `<form>` by default and also a React provider for [FormRow](/uilib/components/form-row). This way You can define more globally e.g. if all the rows should be displayed **vertically**.
+
+```jsx
+<FormSet direction="vertical">
+  <FormRow>/** Components are now vertical aligned */</FormRow>
+  <FormRow>/** Components are now vertical aligned */</FormRow>
+</FormSet>
+```
 
 ## Demos
 

packages/dnb-design-system-portal/src/pages/uilib/components/form-set/form-set-properties.md

@@ -2,10 +2,11 @@
 draft: true
 ---
 
-| Properties  | Description                                                                                                                                                                |
-| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `direction` | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.       |
-| `vertical`  | _(optional)_ is a short hand to define a `vertical` direction if set to `true`.                                                                                            |
-| ~~`size`~~  | _(optional)_ the `width` of the **FormLabel** (`.dnb-form-label`). Use `small`, `medium` (12rem) and `large`. Defaults to `null`. If set to `true`, then `medium` is used. |
-| `element`   | _(optional)_ define what HTML element should be used. Defaults to `<form>`.                                                                                                |
-| `no_form`   | _(optional)_ if set to `true`, then a `div` HTML element will be used instead of `form`. Defaults to `false`.                                                              |
+**More Properties**: Beside the own properties, **FormSet** supports the [FormRow](/uilib/components/form-row#tab-properties) properties in React based applications by using the React Context under the hood.
+
+| Properties       | Description                                                                                                                                     |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `element`        | _(optional)_ define what HTML element should be used. Defaults to `<form>`.                                                                     |
+| `no_form`        | _(optional)_ if set to `true`, then a `div` HTML element will be used instead of `form`. Defaults to `false`.                                   |
+| `prevent_submit` | _(optional)_ if set to `true`, components inside can't cause a page refresh. The event `on_submit` will sill be triggered. Defaults to `false`. |
+| `disabled`       | _(optional)_ if set to `true`, every component inside will be disabled. Defaults to `false`.                                                    |

packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js

@@ -46,7 +46,7 @@ class Example extends PureComponent {
           {/* @jsx */ `
 <Input
   label="Medium input:"
-  size="medium"
+  indent="medium"
   align="right"
   stretch="true"
   placeholder="Medium input placeholder"
@@ -62,7 +62,7 @@ class Example extends PureComponent {
         >
           {/* @jsx */ `
 <Input
-  size="large"
+  indent="large"
   type="search"
   stretch="true"
   value="Large search value"
@@ -119,7 +119,7 @@ class Example extends PureComponent {
         <ComponentBox caption="Stretched `Input` with `FormRow` and a long label">
           {/* @jsx */ `
 <FormRow
-  size={true}
+  indent={true}
   label="Long label labwl Adipiscing mauris dis proin nec:"
 >
   <Input value="Placeholder ..." stretch />

packages/dnb-ui-lib/src/components/form-row/FormRow.js

@@ -24,10 +24,11 @@ const renderProps = {
 export const propTypes = {
   id: PropTypes.string,
   label: PropTypes.string,
+  label_direction: PropTypes.oneOf(['vertical', 'horizontal']),
   label_id: PropTypes.string,
   no_label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   no_fieldset: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  indent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
   vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   section_style: PropTypes.string,
@@ -50,10 +51,11 @@ export const propTypes = {
 export const defaultProps = {
   id: null,
   label: null,
+  label_direction: null,
   label_id: null,
   no_label: false,
   no_fieldset: null,
-  size: null,
+  indent: null,
   direction: null,
   vertical: null,
   section_style: null,
@@ -120,10 +122,11 @@ export default class FormRow extends PureComponent {
 
     let {
       label,
+      label_direction,
       label_id,
       no_fieldset,
       no_label,
-      size,
+      indent,
       direction,
       vertical,
       section_style,
@@ -151,7 +154,10 @@ export default class FormRow extends PureComponent {
         'dnb-form-row',
         (isTrue(vertical) || direction) &&
           `dnb-form-row--${isTrue(vertical) ? 'vertical' : direction}`,
-        size && `dnb-form-row__size--${isTrue(size) ? 'default' : size}`,
+        (isTrue(label_direction) || label_direction) &&
+          `dnb-form-row--${label_direction}-label`,
+        indent &&
+          `dnb-form-row__indent--${isTrue(indent) ? 'default' : indent}`,
         isNested && `dnb-form-row--nested`,
         section_style ? `dnb-section dnb-section--${section_style}` : null,
         section_spacing
@@ -180,7 +186,7 @@ export default class FormRow extends PureComponent {
         },
         itsMeAgain: true,
         hasLabel: label,
-        size,
+        indent,
         direction,
         vertical,
         label_direction: isTrue(vertical) ? 'vertical' : direction,
@@ -206,6 +212,7 @@ export default class FormRow extends PureComponent {
                 for_id={!useFieldset ? id : null} // we don't use for_id, because we don't have a single element to target to
                 text={label}
                 element={!useFieldset ? 'label' : 'legend'}
+                direction={label_direction}
                 disabled={isTrue(disabled)}
               />
             )}

packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.test.js

@@ -23,6 +23,7 @@ const props = fakeProps(require.resolve('../FormRow'), {
 })
 props.id = 'form-row'
 props.direction = 'horizontal'
+props.label_direction = 'horizontal'
 
 describe('FormRow component', () => {
   const Comp = mount(<Component {...props} />)
@@ -38,10 +39,10 @@ describe('FormRow component', () => {
     ).toBe(true)
   })
 
-  it('should have correct size class', () => {
-    const Comp = mount(<Component {...props} size="large" />)
+  it('should have correct indent class', () => {
+    const Comp = mount(<Component {...props} indent="large" />)
     expect(
-      Comp.find('.dnb-form-row').hasClass('dnb-form-row__size--large')
+      Comp.find('.dnb-form-row').hasClass('dnb-form-row__indent--large')
     ).toBe(true)
   })
 

packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap

@@ -7,14 +7,15 @@ exports[`FormRow component have to match snapshot 1`] = `
   direction="horizontal"
   disabled="disabled"
   id="form-row"
+  indent="indent"
   label="label"
+  label_direction="horizontal"
   label_id="label_id"
   no_fieldset="no_fieldset"
   no_label="no_label"
   render_content={[Function]}
   section_spacing="section_spacing"
   section_style="section_style"
-  size="size"
   vertical="vertical"
 >
   <Fieldset
@@ -25,12 +26,12 @@ exports[`FormRow component have to match snapshot 1`] = `
       className="dnb-form-row__wrapper"
     >
       <div
-        className="dnb-form-row dnb-form-row--horizontal dnb-form-row__size--size dnb-section dnb-section--section_style dnb-section--spacing-section_spacing className class"
+        className="dnb-form-row dnb-form-row--horizontal dnb-form-row--horizontal-label dnb-form-row__indent--indent dnb-section dnb-section--section_style dnb-section--spacing-section_spacing className class"
       >
         <FormLabel
           class={null}
           className="dnb-form-row__label"
-          direction={null}
+          direction="horizontal"
           disabled={false}
           element="legend"
           for_id={null}
@@ -69,6 +70,12 @@ exports[`FormRow scss have to match default theme snapshot 1`] = `
  * FormRow theme
  *
  */
+.dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--default > .dnb-form-label, .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--medium > .dnb-form-label {
+  width: 30vw;
+  max-width: 20rem; }
+  @media (max-width: 40em) {
+    .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--default > .dnb-form-label, .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--medium > .dnb-form-label {
+      width: auto; } }
 "
 `;
 
@@ -206,11 +213,6 @@ legend.dnb-form-label {
   flex-direction: row; }
   .dnb-form-row__content {
     width: 100%; }
-  .dnb-form-row > .dnb-form-status {
-    margin: 0.5rem 0; }
-  .dnb-form-row > .dnb-form-label {
-    padding: 0;
-    margin: 0; }
   @supports (display: grid) {
     .dnb-form-row:not(.dnb-form-row--vertical), .dnb-form-row--horizontal {
       display: grid;
@@ -244,12 +246,17 @@ legend.dnb-form-label {
     /* stylelint-enable */ }
     .dnb-form-row--vertical > .dnb-form-label {
       margin-bottom: 0.5rem; }
-  .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__size--default > .dnb-form-label, .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__size--medium > .dnb-form-label {
-    width: 30vw;
-    max-width: 20rem; }
-    @media (max-width: 40em) {
-      .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__size--default > .dnb-form-label, .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__size--medium > .dnb-form-label {
-        width: auto; } }
+  .dnb-form-row--vertical-label {
+    row-gap: 2rem;
+    flex-direction: column; }
+  .dnb-form-row > .dnb-form-status {
+    margin: 0.5rem 0; }
+  .dnb-form-row > .dnb-form-label--vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; }
+  .dnb-form-row > .dnb-form-label--vertical ~ .dnb-form-row__content {
+    grid-column: column1-start / column1-end; }
   .dnb-form-row__wrapper,
   .dnb-core-style .dnb-form-row__wrapper {
     margin: 0;

packages/dnb-ui-lib/src/components/form-set/__tests__/FormSet.test.js

@@ -47,14 +47,14 @@ describe('FormSet component', () => {
     ).toBe(true)
   })
 
-  it('should have working provider have correct size classs on form-row', () => {
+  it('should have working provider have correct indent classs on form-row', () => {
     const Comp = mount(
-      <Component {...props} size="large">
+      <Component {...props} indent="large">
         <FormRow />
       </Component>
     )
     expect(
-      Comp.find('.dnb-form-row').hasClass('dnb-form-row__size--large')
+      Comp.find('.dnb-form-row').hasClass('dnb-form-row__indent--large')
     ).toBe(true)
   })
 

packages/dnb-ui-lib/src/components/form-set/__tests__/__snapshots__/FormSet.test.js.snap

@@ -11,8 +11,6 @@ exports[`FormSet component have to match snapshot 1`] = `
   no_form="no_form"
   prevent_submit="prevent_submit"
   render_content={[Function]}
-  size="size"
-  vertical="vertical"
 >
   <Element
     className="dnb-form-set className class"

packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap

@@ -176,7 +176,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
                 value={null}
               >
                 <span
-                  className="dnb-checkbox--modifier"
+                  className="dnb-checkbox__wrapper"
                 >
                   <span
                     className="dnb-checkbox"
@@ -291,14 +291,15 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
       direction={null}
       disabled={null}
       id="group"
+      indent={null}
       label="Label"
+      label_direction={null}
       label_id="group"
       no_fieldset={null}
       no_label={false}
       render_content={null}
       section_spacing={null}
       section_style={null}
-      size={null}
       vertical={null}
     >
       <Fieldset
@@ -1185,7 +1186,7 @@ a.dnb-button .dnb-button__text {
     border: 0; }
   .dnb-checkbox__input:not([disabled]) {
     cursor: pointer; }
-  .dnb-checkbox--modifier {
+  .dnb-checkbox__wrapper {
     display: inline-flex;
     flex-direction: row;
     vertical-align: top; }
@@ -1309,9 +1310,6 @@ a.dnb-button .dnb-button__text {
     cursor: pointer; }
   .dnb-radio .dnb-form-status {
     margin-bottom: 0.5rem; }
-  .dnb-radio--modifier {
-    display: inline-flex;
-    flex-direction: row; }
   .dnb-radio--label-position-left .dnb-radio {
     order: 2; }
   .dnb-radio--label-position-left .dnb-form-label {
@@ -1340,6 +1338,8 @@ a.dnb-button .dnb-button__text {
   .dnb-radio-group {
     display: inline-flex;
     flex-direction: row; }
+    .dnb-form-row--vertical .dnb-radio-group {
+      display: flex; }
 
 .dnb-toggle-button {
   font-family: var(--font-family-default);
@@ -1454,6 +1454,8 @@ a.dnb-button .dnb-button__text {
     .dnb-toggle-button-group .dnb-toggle-button-group__shell {
       display: block;
       margin-bottom: -1rem; }
+    .dnb-form-row--vertical .dnb-toggle-button-group {
+      display: flex; }
     @media (min-width: 40em) {
       .dnb-form-row__label:not(.dnb-form-label--vertical)
 + .dnb-form-row__content

packages/dnb-ui-lib/stories/components/FormRow.js

@@ -23,7 +23,7 @@ export default [
     <Center>
       <Wrapper>
         <Box>
-          <FormRow direction="horizontal" size="default">
+          <FormRow direction="horizontal" indent="default">
             <FormLabel for_id="alone-1">
               A long horizontal FormLabel with a lot of informative text
               and a default size: