feat(fieldset): add SASS mix-in fieldsetReset

packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.module.scss

@@ -0,0 +1,7 @@
+@import '@dnb/eufemia/src/style/core/utilities.scss';
+
+.fieldsetReset {
+  :global(fieldset) {
+    @include fieldsetReset();
+  }
+}

packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.tsx

@@ -6,13 +6,14 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import ComponentBox from '../../../shared/tags/ComponentBox'
+import { fieldsetReset } from './Examples.module.scss'
 
 // have a limit because this page is used for screenshot tests
 const Wrapper = styled.div`
   max-width: 40rem;
 `
 
-export function CoreStyleExample() {
+export function CoreStyle() {
   return (
     <Wrapper className="dnb-spacing">
       <ComponentBox hideCode data-visual-test="helper-core-style">
@@ -36,7 +37,7 @@ export function CoreStyleExample() {
   )
 }
 
-export function TabFocusExample() {
+export function TabFocus() {
   return (
     <Wrapper className="dnb-spacing">
       <ComponentBox hideCode data-visual-test="helper-tap-focus">
@@ -52,7 +53,7 @@ export function TabFocusExample() {
   )
 }
 
-export function UnstyledListExample() {
+export function UnstyledList() {
   return (
     <Wrapper className="dnb-spacing">
       <ComponentBox hideCode data-visual-test="helper-unstyled-list">
@@ -69,7 +70,7 @@ export function UnstyledListExample() {
   )
 }
 
-export function ScreenReaderOnlyExample() {
+export function ScreenReaderOnly() {
   return (
     <Wrapper className="dnb-spacing">
       <ComponentBox hideCode data-visual-test="helper-sr-only">
@@ -86,7 +87,7 @@ export function ScreenReaderOnlyExample() {
   )
 }
 
-export function SelectionExample() {
+export function Selection() {
   return (
     <Wrapper className="dnb-spacing">
       <ComponentBox hideCode data-visual-test="helper-selection">
@@ -98,3 +99,13 @@ export function SelectionExample() {
     </Wrapper>
   )
 }
+
+export function FormsetReset() {
+  return (
+    <Wrapper className={fieldsetReset}>
+      <ComponentBox hideCode data-visual-test="helper-fieldset-reset">
+        <fieldset>I'm a fieldset without styling.</fieldset>
+      </ComponentBox>
+    </Wrapper>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/helpers/classes.mdx

@@ -2,13 +2,7 @@
 showTabs: true
 ---
 
-import {
-  CoreStyleExample,
-  TabFocusExample,
-  UnstyledListExample,
-  ScreenReaderOnlyExample,
-  SelectionExample,
-} from 'Docs/uilib/helpers/Examples'
+import * as Examples from 'Docs/uilib/helpers/Examples'
 import SkipLinkExample from 'Docs/uilib/usage/accessibility/examples/skip-link-example.tsx'
 
 ## Description
@@ -21,9 +15,7 @@ Reusing classes in the markup instead of using SCSS extends or _mixins_ will pre
 
 In order to be able to have the core Body Style inside a wrapper and available for all its children. The Body Style contains among others styles, the correct color, line-height, font and a CSS reset.
 
-### Example
-
-<CoreStyleExample />
+<Examples.CoreStyle />
 
 ## Tab focus
 
@@ -36,18 +28,14 @@ There is also:
 - `dnb-focus-ring`
 - `dnb-no-focus`
 
-### Example
-
-<TabFocusExample />
+<Examples.TabFocus />
 
 ## Skip link
 
 `dnb-skip-link`
 
 A default Skip Link style, for adding a link at the top of each page that goes directly to the main content area.
 
-### Example
-
 <SkipLinkExample />
 
 ```html
@@ -72,8 +60,6 @@ More details in the [Focus Section](/uilib/usage/accessibility/focus#skip-link).
 
 Sets default spacing (using _margin_) on all HTML elements inside the container with this style. The default spacing is a `margin-bottom: 1.5rem`, but specific margins are defined for headings, lists and tables.
 
-### Example
-
 ```html
 <article class="dnb-spacing">
   <!-- DNB spacings -->
@@ -100,9 +86,7 @@ NB: Browser support is not fully covered (2021).
 
 Visually hides an element, but is still reachable by screen readers. (_sr_ stands for _Screen Reader_)
 
-### Example
-
-<ScreenReaderOnlyExample />
+<Examples.ScreenReaderOnly />
 
 ## Drop shadow
 
@@ -114,7 +98,7 @@ Adds a default drop shadow, `box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08)`, to
 
 The DNB Drop shadow is also available as a CSS Custom Property:
 
-```js
+```ts
 import properties from '@dnb/eufemia/style/themes/theme-ui/properties.js'
 
 const cssBoxShadow = properties['--shadow-default']
@@ -139,9 +123,7 @@ Makes some component form components, like [Input](/uilib/components/input) reac
 
 Removes default styling for lists. Applies to the `ul` or `ol` elements.
 
-### Example
-
-<UnstyledListExample />
+<Examples.UnstyledList />
 
 ## Selection
 
@@ -152,21 +134,19 @@ Applies the DNB selection colors to the selected content.
 Eufemia uses custom `::selection` colors to enhance the contrast and to play well against the many green colors.
 Every HTML class that starts with the prefix `dnb-` will be effected. In some circumstances you can simply make use of the class `.dnb-selection`, which applies the styles below on `::selection`.
 
-```css
+```scss
 background-color: var(--color-mint-green);
 color: var(--color-black);
 text-shadow: none;
 ```
 
-### Example
-
-<SelectionExample />
+<Examples.Selection />
 
 ## HTML class naming
 
 To ensure a consistent class structure and to ensure that the class is owned by the DNB UI Library, all classes in the UI Library are prefixed with `dnb-`. Read more about that in the [Naming conventions](/contribute/naming).
 
-### SASS and mixins
+## SASS and mixins
 
 All CSS helper classes are to be found in `src/style/core/helper-classes/helper-classes.scss`
 Most helper classes are SCSS _mixins_ which are then applied to the class when invoked.
@@ -225,4 +205,17 @@ You can import Eufemia _mixins_ directly into your SCSS styles:
 @include scrollX(/* $mode: scroll */);
 @include hideScrollbar();
 @include scrollbarAppearance();
+
+/** Reset fieldset styles */
+@include fieldsetReset();
 ```
+
+### Formset reset
+
+Removes default styling on a `fieldset` element.
+
+`@include fieldsetReset($checkSpaceProps: boolean)`
+
+If true is given, it will handle margin gracefully by checking for e.g. `dnb-space__top--` and not reset if this class exists.
+
+<Examples.FormsetReset />

packages/dnb-design-system-portal/src/docs/uilib/helpers/classes/visual-tests.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import * as Examples from '../Examples'
+
+export default function VisibleWhenVisualTests() {
+  useSelection('[data-visual-test="helper-selection"] p')
+
+  return Object.values(Examples).map((Component, i) => {
+    return <Component key={i} />
+  })
+}
+
+function useSelection(className: string) {
+  // Selects/marks some of the text in SelectionExample on second render tick
+  // For comparing screenshots
+  React.useEffect(() => {
+    const textNode = document.querySelector(className).childNodes[0]
+
+    const range = new Range()
+    range.setStart(textNode, 0)
+    range.setEnd(textNode, Math.floor(textNode.textContent.length / 2))
+
+    // apply this range for document selection
+    document.getSelection().addRange(range)
+  }, [])
+}

packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss

@@ -502,9 +502,7 @@
 
   &__fieldset,
   .dnb-core-style &__fieldset {
-    margin: 0;
-    padding: 0;
-    border: none;
+    @include fieldsetReset();
   }
 }
 

packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss

@@ -114,9 +114,7 @@
   // reset the fieldset
   &__fieldset,
   .dnb-core-style &__fieldset {
-    margin: 0;
-    padding: 0;
-    border: none;
+    @include fieldsetReset();
 
     width: 100%;
   }

packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -3,20 +3,7 @@
 
 // Reset the fieldset
 fieldset.dnb-forms-field-block {
-  &:not([class*='space__top']) {
-    margin-top: 0;
-  }
-  &:not([class*='space__right']) {
-    margin-right: 0;
-  }
-  &:not([class*='space__bottom']) {
-    margin-bottom: 0;
-  }
-  &:not([class*='space__left']) {
-    margin-left: 0;
-  }
-  padding: 0;
-  border: none;
+  @include fieldsetReset(true);
 }
 
 .dnb-forms-field-block {

packages/dnb-eufemia/src/style/core/helper-classes/__tests__/HelperClasses.screenshot.test.ts

@@ -52,4 +52,11 @@ describe('HelperClasses', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match fieldset reset', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="helper-fieldset-reset"] fieldset',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })

packages/dnb-eufemia/src/style/core/utilities.scss

@@ -363,3 +363,24 @@ $breakpoints: (
     }
   }
 }
+
+@mixin fieldsetReset($checkSpaceProps: false) {
+  @if $checkSpaceProps {
+    &:not([class*='space__top']) {
+      margin-top: 0;
+    }
+    &:not([class*='space__right']) {
+      margin-right: 0;
+    }
+    &:not([class*='space__bottom']) {
+      margin-bottom: 0;
+    }
+    &:not([class*='space__left']) {
+      margin-left: 0;
+    }
+  } @else {
+    margin: 0;
+  }
+  padding: 0;
+  border: none;
+}