feat(Forms): add inline HelpButton to all Field.* components as defau…

…lt (with option to open in Dialog) (#4282) This PR changes the existing behavior of the `help` prop for Fields that previously supported it. The content now opens inline instead of in a Dialog. The `help` prop has now all of these optional props: ```tsx <Field.String label="Label text" help={{ title: 'Help is available', content: 'Take the time to help other people without expecting a reward or gratitude is definitely important in living an optimistic life.', open: false,// only for the inline variant renderAs: 'dialog' }} /> ``` We use this prop description: > Provide help content for the field using `title` and `content` as a string or React.Node. Additionally, you can set `open` to `true` to display the inline help or use `renderAs` set to `dialog` to render the content in a [Dialog](/uilib/components/dialog/) (recommended for larger amounts of content). Examples with inline "HelpButton": - [FieldBlock](https://eufemia-git-feat-forms-inline-help-button-eufemia.vercel.app/uilib/extensions/forms/create-component/FieldBlock/demos/#inline-help-button-vertical-only) (several examples) - [Form.MainHeading](https://eufemia-git-feat-forms-inline-help-button-eufemia.vercel.app/uilib/extensions/forms/Form/MainHeading/#with-helpbutton) - [Form.SubHeading](https://eufemia-git-feat-forms-inline-help-button-eufemia.vercel.app/uilib/extensions/forms/Form/SubHeading/#with-helpbutton) - [Field.String](https://eufemia-git-feat-forms-inline-help-button-eufemia.vercel.app/uilib/extensions/forms/base-fields/String/#with-help) - [Field.Number](https://eufemia-git-feat-forms-inline-help-button-eufemia.vercel.app/uilib/extensions/forms/base-fields/Number/#with-help) - [Field.Upload](https://eufemia-git-feat-forms-inline-help-button-eufemia.vercel.app/uilib/extensions/forms/feature-fields/more-fields/Upload/#with-help) - ... many other fields do have an example as well. **NB:** We do not document the internals of the inline version at this time. This can be included in another PR. The reason is that it would require additional tests, examples, and documentation. It is also an "isolated" feature specific to the HelpButton. However, as of this writing, I am unsure if we will ever document it, as integration is not straightforward. There are several considerations to address when implementing it.
dnbexperience · Nov 17, 2024 · e869a60 · e869a60
1 parent 030a09c
commit e869a60
Show file tree

Hide file tree

Showing 190 changed files with 3,058 additions and 819 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,9 +10,9 @@ export const Default = () => {
   )
 }
 
-export const OverStack = () => {
+export const PrecedingFlexContainer = () => {
   return (
-    <ComponentBox data-visual-test="layout-main-heading-over-stack">
+    <ComponentBox data-visual-test="layout-main-heading-above-stack">
       <Form.MainHeading>This is a main heading</Form.MainHeading>
       <Flex.Stack>
         <P>Stack contents</P>
@@ -21,11 +21,29 @@ export const OverStack = () => {
   )
 }
 
-export const OverStackWithCard = () => {
+export const AboveCard = () => {
   return (
-    <ComponentBox data-visual-test="layout-main-heading-over-card">
+    <ComponentBox data-visual-test="layout-main-heading-above-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,18 @@ 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 />
+When placed above a [Card](/uilib/components/card/) component, the heading will be indented to align with the card content.
+
+On small screens, the indention will be removed.
+
+<Examples.AboveCard />
+
+### 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 AboveCard = () => {
   return (
-    <ComponentBox data-visual-test="layout-sub-heading-over-card">
+    <ComponentBox data-visual-test="layout-sub-heading-above-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,26 @@ 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 />
+When placed above a [Card](/uilib/components/card/) component, the heading will be indented to align with the card content.
+
+On small screens, the indention will be removed.
+
+<Examples.AboveCard />
 
 ### 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.