feat(Forms): introduce inline HelpButton to every Field.* component

dnbexperience · Nov 14, 2024 · 9ea92e4 · 9ea92e4
1 parent d4326f5
commit 9ea92e4
Show file tree

Hide file tree

Showing 170 changed files with 2,320 additions and 731 deletions.
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/Examples.tsx b/...es/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/Examples.tsx
@@ -10,7 +10,7 @@ export const Default = () => {
   )
 }
 
-export const OverStack = () => {
+export const PrecedingFlexContainer = () => {
   return (
     <ComponentBox data-visual-test="layout-main-heading-over-stack">
       <Form.MainHeading>This is a main heading</Form.MainHeading>
@@ -21,11 +21,29 @@ export const OverStack = () => {
   )
 }
 
-export const OverStackWithCard = () => {
+export const PrecedingCard = () => {
   return (
-    <ComponentBox data-visual-test="layout-main-heading-over-card">
+    <ComponentBox data-visual-test="layout-main-heading-preceding-card">
       <Form.MainHeading>This is a main heading</Form.MainHeading>
+      <Card stack>
+        <P>Card contents</P>
+      </Card>
+    </ComponentBox>
+  )
+}
+
+export const WithHelpButton = () => {
+  return (
+    <ComponentBox data-visual-test="layout-main-heading-help-button">
       <Flex.Stack>
+        <Form.MainHeading
+          help={{
+            title: 'Title',
+            content: 'Content',
+          }}
+        >
+          This is a main heading
+        </Form.MainHeading>
         <Card stack>
           <P>Card contents</P>
         </Card>

diff --git a/...design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/demos.mdx b/...design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/demos.mdx
@@ -10,10 +10,14 @@ import * as Examples from './Examples'
 
 <Examples.Default />
 
-### Over Stack
+### Above a flex container
 
-<Examples.OverStack />
+<Examples.PrecedingFlexContainer />
 
-### Over Stack with Card
+### Above Card
 
-<Examples.OverStackWithCard />
+<Examples.PrecedingCard />
+
+### With HelpButton
+
+<Examples.WithHelpButton />
diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/Examples.tsx b/...ges/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/Examples.tsx
@@ -19,7 +19,7 @@ export const BelowMainHeading = () => {
   )
 }
 
-export const OverStack = () => {
+export const PrecedingFlexContainer = () => {
   return (
     <ComponentBox>
       <Form.SubHeading>This is a sub heading</Form.SubHeading>
@@ -43,15 +43,13 @@ export const InsideCard = () => {
   )
 }
 
-export const OverStackWithCard = () => {
+export const PrecedingCard = () => {
   return (
-    <ComponentBox data-visual-test="layout-sub-heading-over-card">
+    <ComponentBox data-visual-test="layout-sub-heading-preceding-card">
       <Form.SubHeading>This is a sub heading</Form.SubHeading>
-      <Flex.Stack>
-        <Card stack>
-          <P>Card contents</P>
-        </Card>
-      </Flex.Stack>
+      <Card stack>
+        <P>Card contents</P>
+      </Card>
     </ComponentBox>
   )
 }
@@ -65,3 +63,23 @@ export const TwoSubHeadings = () => {
     </ComponentBox>
   )
 }
+
+export const WithHelpButton = () => {
+  return (
+    <ComponentBox data-visual-test="layout-sub-heading-help-button">
+      <Flex.Stack>
+        <Form.SubHeading
+          help={{
+            title: 'Title',
+            content: 'Content',
+          }}
+        >
+          This is a sub heading
+        </Form.SubHeading>
+        <Card stack>
+          <P>Card contents</P>
+        </Card>
+      </Flex.Stack>
+    </ComponentBox>
+  )
+}
diff --git a/...-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/demos.mdx b/...-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/demos.mdx
@@ -14,18 +14,22 @@ import * as Examples from './Examples'
 
 <Examples.BelowMainHeading />
 
-### Over Stack
+### Above a flex container
 
-<Examples.OverStack />
+<Examples.PrecedingFlexContainer />
 
 ### Inside Card
 
 <Examples.InsideCard />
 
-### Over Stack with Card
+### Above Card
 
-<Examples.OverStackWithCard />
+<Examples.PrecedingCard />
 
 ### Two sub headings
 
 <Examples.TwoSubHeadings />
+
+### With HelpButton
+
+<Examples.WithHelpButton />
diff --git a/...stem-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx b/...stem-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx
@@ -8,12 +8,34 @@ showTabs: true
 
 There is a corresponding [Value.ArraySelection](/uilib/extensions/forms/Value/ArraySelection) component.
 
+The [Field.Option](/uilib/extensions/forms/base-fields/Option/) is a related component.
+
 ```jsx
 import { Field } from '@dnb/eufemia/extensions/forms'
+
 render(
   <Field.ArraySelection>
     <Field.Option />
     <Field.Option />
   </Field.ArraySelection>,
 )
 ```
+
+You can also use the `dataPath` property to provide the data to the component:
+
+```jsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Handler
+    data={{
+      myDataPath: [
+        { title: 'Foo!', value: 'foo' },
+        { title: 'Bar!', value: 'bar' },
+      ],
+    }}
+  >
+    <Field.ArraySelection dataPath="/myDataPath" />
+  </Form.Handler>,
+)
+```
diff --git a/...design-system-portal/src/docs/uilib/extensions/forms/base-fields/Composition/Examples.tsx b/...design-system-portal/src/docs/uilib/extensions/forms/base-fields/Composition/Examples.tsx
@@ -17,7 +17,10 @@ export const CompositionError = () => (
       width="large"
     >
       <Field.String label="Field A" width="stretch" />
-      <Field.String label="Field B with a long label" width="medium" />
+      <Field.String
+        label="Field B with a long label that wraps"
+        width="medium"
+      />
     </Field.Composition>
   </ComponentBox>
 )

diff --git a/...system-portal/src/docs/uilib/extensions/forms/base-fields/Option/properties.mdx b/...system-portal/src/docs/uilib/extensions/forms/base-fields/Option/properties.mdx
@@ -2,11 +2,9 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { OptionProperties } from '@dnb/eufemia/src/extensions/forms/Field/Option/OptionDocs'
+
 ## Properties
 
-| Property   | Type                 | Description                                   |
-| ---------- | -------------------- | --------------------------------------------- |
-| `value`    | `string` or `number` | _(optional)_ Value for this option.           |
-| `title`    | `string`             | _(optional)_ Text title for the option.       |
-| `text`     | `string`             | _(optional)_ Secondary text.                  |
-| `children` | `React.Node`         | _(optional)_ Optional way to provide `title`. |
+<PropertiesTable props={OptionProperties} />
diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx b/...gn-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx
@@ -6,12 +6,13 @@ showTabs: true
 
 `Field.Selection` is a component for selecting between options using a dropdown or similar user experiences.
 
-[Field.Option](/uilib/extensions/forms/base-fields/Option/) is a related component.
-
 There is a corresponding [Value.Selection](/uilib/extensions/forms/Value/Selection) component.
 
+The [Field.Option](/uilib/extensions/forms/base-fields/Option/) is a related component.
+
 ```tsx
 import { Field } from '@dnb/eufemia/extensions/forms'
+
 render(
   <Field.Selection placeholder="Select something...">
     <Field.Option value="foo" title="Foo!" />
@@ -20,6 +21,25 @@ render(
 )
 ```
 
+You can also use the `dataPath` property to provide the data to the component:
+
+```jsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Handler
+    data={{
+      myDataPath: [
+        { title: 'Foo!', value: 'foo' },
+        { title: 'Bar!', value: 'bar' },
+      ],
+    }}
+  >
+    <Field.Selection dataPath="/myDataPath" />
+  </Form.Handler>,
+)
+```
+
 ## About the Autocomplete variant
 
 The autocomplete variant (`variant="autocomplete"`) is a special easy drop-in version – basically as an replacement for the Dropdown variant, but with a search capability.