feat(DrawerList, Dropdown, Autocomplete, Field.Selection, Field.Array…

…Selection): disabled options (#4154) * Individual entries in `DrawerList` can now be disabled * Works with `Dropdown`, `Autocomplete`, `Field.Selection`, and `Field.ArraySelection` Other changes: * `selected_key` prop deprecated and can be replaced by `selectedKey` * Updated types for `DrawerList` props * `value` also checks index if no `selectedKey` is a match * `title` overrides `children` in `Field.Option` used by `Field.Selection` and `Field.ArraySelection`
dnbexperience · Nov 19, 2024 · 8786d5d · 8786d5d
1 parent 2cc816a
commit 8786d5d
Show file tree

Hide file tree

Showing 70 changed files with 759 additions and 239 deletions.
diff --git a/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx b/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx
@@ -199,4 +199,9 @@ const errorMessages = {
 
 - Got removed. Simply provide your error message as a object in the `errorMessages` property with an `useMemo` hook.
 
+## DrawerList
+
+- replace type `DrawerListDataObjectUnion` with `DrawerListDataArrayItem`.
+- replace type `DrawerListDataObject` with `DrawerListDataArrayObject`.
+
 _February, 6. 2024_
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.tsx
@@ -543,6 +543,50 @@ export const AutocompleteDisabledExample = () => (
   </Wrapper>
 )
 
+export const AutocompleteDisabledOptionsExample = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="autocomplete-disabled-options">
+      <Autocomplete
+        show_submit_button
+        data={[
+          {
+            disabled: true,
+            content: (
+              <Autocomplete.HorizontalItem>
+                <IconPrimary size="medium" icon="bell" right="x-small" />
+                The Shawshank Redemption
+              </Autocomplete.HorizontalItem>
+            ),
+            year: 1994,
+          },
+          {
+            disabled: true,
+            content: ['The Godfather', 'Line with more info'],
+            year: 1972,
+          },
+          {
+            disabled: true,
+            content: [
+              'The Godfather: Part II',
+              <a key="a-1" className="dnb-anchor" href="/">
+                Anchor 1
+              </a>,
+              <a key="a-2" className="dnb-anchor" href="/">
+                Anchor 2
+              </a>,
+              'Line with more info',
+            ],
+            year: 1974,
+          },
+          { disabled: true, content: 'The Dark Knight', year: 2008 },
+        ]}
+        label="Label"
+        bottom
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
 export const AutocompleteContentAsArrayExample = () => (
   <Wrapper>
     <ComponentBox hidePreview>

diff --git a/.../dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx b/.../dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx
@@ -6,6 +6,7 @@ import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/Transla
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { autocompleteProperties } from '@dnb/eufemia/src/components/autocomplete/AutocompleteDocs'
 import { DrawerListProperties } from '@dnb/eufemia/src/fragments/drawer-list/DrawerListDocs'
+import DrawerListDataDoc from '../fragments/drawer-list/_prop-data.mdx'
 
 ## Properties
 
@@ -17,59 +18,7 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below
 
 <PropertiesTable props={DrawerListProperties} />
 
-## Data structure
-
-```js
-// 1. as array
-const data = [
-  // Every data item can, beside "content" - contain what ever
-  {
-    // (optional) can be what ever
-    selected_key: 'key_0',
-
-    // (optional) is show instead of "content", once selected
-    selected_value: 'Item 1 Value',
-    suffix_value: 'Addition 1',
-
-    // Item content as a string, array or React Element
-    content: 'Item 1 Content',
-  },
-
-  // more items ...
-  {
-    selected_key: 'key_1',
-    content: (
-      <>
-        <IconPrimary icon="bell" />
-        <span className="dnb-typo-bold">Searchable content</span>
-      </>
-    ),
-  },
-  {
-    selected_key: 'key_2',
-    selected_value: 'Item 3 Value',
-    suffix_value: 'Addition 3',
-    content: (
-      <Autocomplete.HorizontalItem>
-        <IconPrimary icon="bell" />
-        <span className="dnb-typo-bold">Searchable content</span>
-      </Autocomplete.HorizontalItem>
-    ),
-  },
-  {
-    selected_key: 'key_3',
-    selected_value: 'Item 4 Value',
-    suffix_value: 'Addition 4',
-    content: ['Item 4 Content A', <>Custom Component</>],
-  },
-]
-
-// 2. as object
-const data = {
-  a: 'A',
-  b: 'B',
-}
-```
+<DrawerListDataDoc />
 
 ## Translations
 

diff --git a/...nb-design-system-portal/src/docs/uilib/components/autocomplete/visual-tests.mdx b/...nb-design-system-portal/src/docs/uilib/components/autocomplete/visual-tests.mdx
@@ -5,9 +5,11 @@ draft: true
 import {
   AutocompleteOpened,
   AutocompleteDisabledExample,
+  AutocompleteDisabledOptionsExample,
 } from 'Docs/uilib/components/autocomplete/Examples'
 
 <VisibleWhenVisualTest>
   <AutocompleteOpened />
   <AutocompleteDisabledExample />
+  <AutocompleteDisabledOptionsExample />
 </VisibleWhenVisualTest>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx
@@ -446,6 +446,26 @@ export const DropdownDisabled = () => (
   </Wrapper>
 )
 
+export const DropdownDisabledOptions = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="dropdown-disabled-options">
+      <Dropdown
+        data={[
+          {
+            content: 'Item 1 Content',
+          },
+          { content: 'Item 2 Content', disabled: true },
+          { content: 'Item 3 Content', disabled: true },
+          {
+            content: 'Item 4 Content A',
+          },
+        ]}
+        label="Label"
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
 export const DropdownDisabledTertiary = () => (
   <Wrapper>
     <ComponentBox data-visual-test="dropdown-disabled-tertiary">

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/demos.mdx
@@ -12,6 +12,7 @@ import {
   DropdownTertiaryRight,
   DropdownMoreMenu,
   DropdownDisabled,
+  DropdownDisabledOptions,
   DropdownCustomEvent,
   DropdownSizes,
   DropdownCustomWidth,
@@ -87,6 +88,10 @@ With long list to make it scrollable and searchable
 
 <DropdownDisabled />
 
+Individual options can also be disabled.
+
+<DropdownDisabledOptions />
+
 ### Disabled tertiary dropdown
 
 <DropdownDisabledTertiary />

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/events.mdx
@@ -4,12 +4,12 @@ showTabs: true
 
 ## Events
 
-| Events      | Description                                                                                                                                                                                                                                                                            |
-| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `on_change` | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }`.                                                                                                                               |
-| `on_select` | _(optional)_ will be called once the user selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }`. The **active_item** property is the currently selected item by keyboard navigation |
-| `on_show`   | _(optional)_ will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.                                                                                                                                                                          |
-| `on_hide`   | _(optional)_ will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.                                                                                                                                          |
+| Events      | Description                                                                                                                                                                                                                                                                                       |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `on_change` | _(optional)_ will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }`.                                                                                                                                          |
+| `on_select` | _(optional)_ will be called once the user focuses or selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }`. The **active_item** property is the currently selected item by keyboard navigation |
+| `on_show`   | _(optional)_ will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`.                                                                                                                                                                                     |
+| `on_hide`   | _(optional)_ will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`.                                                                                                                                                     |
 
 ### The `on_change` vs `on_select` difference
 

diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.mdx
@@ -5,6 +5,7 @@ showTabs: true
 import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { DrawerListProperties } from '@dnb/eufemia/src/fragments/drawer-list/DrawerListDocs'
+import DrawerListDataDoc from '../fragments/drawer-list/_prop-data.mdx'
 
 ## Properties
 
@@ -54,49 +55,7 @@ Should either be an index (integer) of the data array or a key – defined by `s
 
 If `data` is an object, use the object key as the `value` to define the selected item. Can be a string or integer.
 
-## Data structure
-
-```js
-// 1. as array
-const data = [
-  // Every data item can, beside "content" - contain what ever
-  {
-    // (optional) can be what ever
-    selectedKey: 'key_0',
-
-    // (optional) is show instead of "content", once selected
-    selected_value: 'Item 1 Value',
-    suffix_value: 'Addition 1',
-
-    // Item content as a string or array
-    content: 'Item 1 Content',
-  },
-
-  // more items ...
-  {
-    selectedKey: 'key_1',
-    content: ['Item 2 Value', 'Item 2 Content'],
-  },
-  {
-    selectedKey: 'key_2',
-    selected_value: 'Item 3 Value',
-    suffix_value: 'Addition 3',
-    content: ['Item 3 Content A', 'Item 3 Content B'],
-  },
-  {
-    selectedKey: 'key_3',
-    selected_value: 'Item 4 Value',
-    suffix_value: 'Addition 4',
-    content: ['Item 4 Content A', <>Custom Component</>],
-  },
-]
-
-// 2. as object
-const data = {
-  a: 'A',
-  b: 'B',
-}
-```
+<DrawerListDataDoc />
 
 ## Translations
 

diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx b/...ges/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx
@@ -126,6 +126,31 @@ export const DrawerListExampleDefault = () => (
   </Wrapper>
 )
 
+export const DrawerListExampleDisabled = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="drawer-list-disabled">
+      <DrawerList
+        skip_portal
+        opened
+        prevent_close
+        data={[
+          {
+            content: 'Item 1',
+          },
+          {
+            content: 'Item 2, disabled',
+            disabled: true,
+          },
+          {
+            content: 'Item 3',
+          },
+        ]}
+        observer_element=".dnb-live-preview" // prevents direction to change when scrolling in this example
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
 export const DrawerListExampleSingleItem = () => (
   <Wrapper>
     <ComponentBox scope={{ data }} data-visual-test="drawer-list-events">