feat: make #form-row support fieldset and legend by default

dnbexperience · Jul 4, 2019 · 14f92eb · 14f92eb
1 parent a9d5e94
commit 14f92eb
Show file tree

Hide file tree

Showing 23 changed files with 548 additions and 452 deletions.
diff --git a/...gn-system-portal/src/pages/uilib/components/form-label/form-label-properties.md b/...gn-system-portal/src/pages/uilib/components/form-label/form-label-properties.md
@@ -10,3 +10,4 @@ draft: true
 | `title`     | _(optional)_ the `title` attribute of the label.                                                                                                                     |
 | `text`      | _(optional)_ the `text` of the label.                                                                                                                                |
 | `element`   | _(optional)_ defines the HTML element used. Defaults to `label`.                                                                                                     |
+| `use_label` | _(optional)_ if set to `true`, then the internal legend will be a `label` instead. Defaults to `false`.                                                              |
diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -287,8 +287,10 @@ exports[`Checkbox scss have to match snapshot 1`] = `
 .dnb-form-label {
   display: inline-block;
   width: auto;
+  padding: 0;
   margin: 0;
   margin-right: 1rem;
+  text-align: left;
   vertical-align: baseline;
   color: inherit; }
   .dnb-form-label--vertical {

diff --git a/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -1247,8 +1247,10 @@ a.dnb-button .dnb-button__text {
 .dnb-form-label {
   display: inline-block;
   width: auto;
+  padding: 0;
   margin: 0;
   margin-right: 1rem;
+  text-align: left;
   vertical-align: baseline;
   color: inherit; }
   .dnb-form-label--vertical {

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -515,8 +515,10 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 .dnb-form-label {
   display: inline-block;
   width: auto;
+  padding: 0;
   margin: 0;
   margin-right: 1rem;
+  text-align: left;
   vertical-align: baseline;
   color: inherit; }
   .dnb-form-label--vertical {

diff --git a/packages/dnb-ui-lib/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap b/packages/dnb-ui-lib/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap
@@ -107,8 +107,10 @@ exports[`FormLabel scss have to match snapshot 1`] = `
 .dnb-form-label {
   display: inline-block;
   width: auto;
+  padding: 0;
   margin: 0;
   margin-right: 1rem;
+  text-align: left;
   vertical-align: baseline;
   color: inherit; }
   .dnb-form-label--vertical {

diff --git a/packages/dnb-ui-lib/src/components/form-label/style/_form-label.scss b/packages/dnb-ui-lib/src/components/form-label/style/_form-label.scss
@@ -7,8 +7,10 @@
   display: inline-block;
 
   width: auto;
+  padding: 0;
   margin: 0;
   margin-right: 1rem;
+  text-align: left;
 
   &--vertical {
     display: block;

diff --git a/packages/dnb-ui-lib/src/components/form-row/FormRow.js b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
@@ -26,6 +26,7 @@ export const propTypes = {
   label: PropTypes.string,
   label_id: PropTypes.string,
   no_label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  use_label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
   vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -51,6 +52,7 @@ export const defaultProps = {
   label: null,
   label_id: null,
   no_label: false,
+  use_label: null,
   size: null,
   direction: null,
   vertical: null,
@@ -101,8 +103,10 @@ export default class FormRow extends PureComponent {
     return { label, children }
   }
 
-  constructor(props) {
+  constructor(props, context) {
     super(props)
+    this.isInsideFormSet =
+      context.formRow && context.formRow.isInsideFormSet
     this._id =
       props.id || `dnb-form-row-${Math.round(Math.random() * 999)}` // cause we need an id anyway
   }
@@ -117,6 +121,7 @@ export default class FormRow extends PureComponent {
     let {
       label,
       label_id,
+      use_label,
       no_label,
       size,
       direction,
@@ -183,30 +188,43 @@ export default class FormRow extends PureComponent {
       }
     })
 
+    const Wrapper = ({ children }) => {
+      // if (this.isInsideFormSet) {
+      if (!isTrue(use_label)) {
+        return (
+          <fieldset className="dnb-form-row__wrapper">{children}</fieldset>
+        )
+      }
+      return children
+    }
+
     return (
       <Context.Provider value={context}>
-        <div {...params}>
-          {label && (
-            <FormLabel
-              id={(label_id ? label_id : id) + '-label'}
-              for_id={id} // we don't use for_id, because we don't have a single element to target to
-              text={label}
-              disabled={isTrue(disabled)}
-              className="dnb-form-row__label"
-            />
-          )}
-          {isTrue(no_label) && (
-            <span
-              className="dnb-form-label dnb-form-row__label-dummy"
-              aria-hidden
-            />
-          )}
-          {isNested ? (
-            children
-          ) : (
-            <div className="dnb-form-row__content">{children}</div>
-          )}
-        </div>
+        <Wrapper>
+          <div {...params}>
+            {label && (
+              <FormLabel
+                className="dnb-form-row__label"
+                id={(label_id ? label_id : id) + '-label'}
+                for_id={isTrue(use_label) ? id : null} // we don't use for_id, because we don't have a single element to target to
+                text={label}
+                element={isTrue(use_label) ? 'label' : 'legend'}
+                disabled={isTrue(disabled)}
+              />
+            )}
+            {isTrue(no_label) && (
+              <span
+                className="dnb-form-label dnb-form-row__label-dummy"
+                aria-hidden
+              />
+            )}
+            {isNested ? (
+              children
+            ) : (
+              <div className="dnb-form-row__content">{children}</div>
+            )}
+          </div>
+        </Wrapper>
       </Context.Provider>
     )
   }

diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
@@ -14,45 +14,50 @@ exports[`FormRow component have to match snapshot 1`] = `
   section_spacing="section_spacing"
   section_style="section_style"
   size="size"
+  use_label="use_label"
   vertical="vertical"
 >
-  <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"
-  >
-    <FormLabel
-      class={null}
-      className="dnb-form-row__label"
-      direction={null}
-      disabled={false}
-      element="label"
-      for_id="form-row"
-      id="label_id-label"
-      render_content={null}
-      text="label"
-      title={null}
-      vertical={null}
+  <Wrapper>
+    <fieldset
+      className="dnb-form-row__wrapper"
     >
-      <Element
-        className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
-        htmlFor="form-row"
-        id="label_id-label"
-        is="label"
+      <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"
       >
-        <label
-          className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
-          htmlFor="form-row"
+        <FormLabel
+          class={null}
+          className="dnb-form-row__label"
+          direction={null}
+          disabled={false}
+          element="legend"
+          for_id={null}
           id="label_id-label"
+          render_content={null}
+          text="label"
+          title={null}
+          vertical={null}
         >
-          label
-        </label>
-      </Element>
-    </FormLabel>
-    <div
-      className="dnb-form-row__content"
-    >
-      children
-    </div>
-  </div>
+          <Element
+            className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+            id="label_id-label"
+            is="legend"
+          >
+            <legend
+              className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+              id="label_id-label"
+            >
+              label
+            </legend>
+          </Element>
+        </FormLabel>
+        <div
+          className="dnb-form-row__content"
+        >
+          children
+        </div>
+      </div>
+    </fieldset>
+  </Wrapper>
 </FormRow>
 `;
 
@@ -130,8 +135,10 @@ exports[`FormRow scss have to match snapshot 1`] = `
 .dnb-form-label {
   display: inline-block;
   width: auto;
+  padding: 0;
   margin: 0;
   margin-right: 1rem;
+  text-align: left;
   vertical-align: baseline;
   color: inherit; }
   .dnb-form-label--vertical {
@@ -196,6 +203,7 @@ exports[`FormRow scss have to match snapshot 1`] = `
   .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 {
@@ -209,21 +217,15 @@ exports[`FormRow scss have to match snapshot 1`] = `
     grid-column: column2-start / column2-end;
     grid-row: row2-start / row2-end;
     justify-self: start; }
-  .dnb-form-row:not(.dnb-form-row--vertical) > label,
-  .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label, .dnb-form-row--horizontal > label,
-  .dnb-form-row--horizontal > .dnb-form-label {
+  .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label, .dnb-form-row--horizontal > .dnb-form-label {
     margin-right: 1rem; }
     @supports (display: grid) {
-      .dnb-form-row:not(.dnb-form-row--vertical) > label,
-      .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label, .dnb-form-row--horizontal > label,
-      .dnb-form-row--horizontal > .dnb-form-label {
+      .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label, .dnb-form-row--horizontal > .dnb-form-label {
         grid-column: column1-start / column1-end;
         grid-row: row1-start / row1-end;
         margin-bottom: -1.5rem; }
         @media (min-width: 40em) {
-          .dnb-form-row:not(.dnb-form-row--vertical) > label,
-          .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label, .dnb-form-row--horizontal > label,
-          .dnb-form-row--horizontal > .dnb-form-label {
+          .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-label, .dnb-form-row--horizontal > .dnb-form-label {
             text-align: right; } } }
   @media (max-width: 40em) {
     .dnb-form-row:not(.dnb-form-row--vertical), .dnb-form-row--horizontal {
@@ -234,7 +236,6 @@ exports[`FormRow scss have to match snapshot 1`] = `
     width: auto;
     /* stylelint-disable */
     /* stylelint-enable */ }
-    .dnb-form-row--vertical > label,
     .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 {
@@ -243,5 +244,10 @@ exports[`FormRow scss have to match snapshot 1`] = `
     @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__wrapper,
+  .dnb-core-style .dnb-form-row__wrapper {
+    margin: 0;
+    padding: 0;
+    border: none; }
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss b/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
@@ -28,6 +28,7 @@
     margin: 0.5rem 0;
   }
   > .dnb-form-label {
+    padding: 0;
     margin: 0;
   }
 
@@ -55,10 +56,8 @@
       grid-column: column2-start / column2-end;
       grid-row: row2-start / row2-end;
       justify-self: start;
-      // align-self: end;
     }
 
-    > label,
     > .dnb-form-label {
       @supports (display: grid) {
         // put the label in the first column
@@ -90,7 +89,6 @@
     width: auto;
 
     /* stylelint-disable */
-    > label,
     > .dnb-form-label {
       margin-bottom: 0.5rem;
     }
@@ -126,4 +124,12 @@
     //   }
     // }
   }
+
+  // reset the fieldset
+  &__wrapper,
+  .dnb-core-style &__wrapper {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
 }
diff --git a/packages/dnb-ui-lib/src/components/form-set/FormSet.js b/packages/dnb-ui-lib/src/components/form-set/FormSet.js
@@ -129,7 +129,13 @@ export default class FormSet extends PureComponent {
     validateDOMAttributes(this.props, params)
 
     const context = extend(this.context, {
-      formRow: { size, direction, vertical, disabled }
+      formRow: {
+        size,
+        direction,
+        vertical,
+        disabled,
+        isInsideFormSet: true
+      }
     })
 
     return (

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -437,8 +437,10 @@ a.dnb-button .dnb-button__text {
 .dnb-form-label {
   display: inline-block;
   width: auto;
+  padding: 0;
   margin: 0;
   margin-right: 1rem;
+  text-align: left;
   vertical-align: baseline;
   color: inherit; }
   .dnb-form-label--vertical {

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -845,8 +845,10 @@ a.dnb-button .dnb-button__text {
 .dnb-form-label {
   display: inline-block;
   width: auto;
+  padding: 0;
   margin: 0;
   margin-right: 1rem;
+  text-align: left;
   vertical-align: baseline;
   color: inherit; }
   .dnb-form-label--vertical {