diff --git a/packages/dnb-design-system-portal/src/docs/icons/primary.mdx b/packages/dnb-design-system-portal/src/docs/icons/primary.mdx index a7fcd07547f..5f74ab694e9 100644 --- a/packages/dnb-design-system-portal/src/docs/icons/primary.mdx +++ b/packages/dnb-design-system-portal/src/docs/icons/primary.mdx @@ -17,7 +17,7 @@ They are integrated by using the `` [Icon Component](/uilib/compo ## React example usage ```jsx - + ``` diff --git a/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx b/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx index 3627cfc1fce..8f03eb326de 100644 --- a/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx +++ b/packages/dnb-design-system-portal/src/docs/icons/secondary.mdx @@ -9,7 +9,7 @@ import ListAllIcons from 'dnb-design-system-portal/src/shared/parts/icons/ListAl # Secondary Icons -The Secondary Icons are an addition to the [Primary Icons](/icons/primary). They extend the possibility to have more, not mainly used icons. They get not shipped integrated as the [Primary Icons](/icons/primary) do. +The Secondary Icons are an addition to the [Primary Icons](/icons/primary). They extend the possibility to have more, not mainly used icons. They do not ship integrated, as the [Primary Icons](/icons/primary) do. The Secondary Icons can be extended infinitely. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/properties.mdx index 39b0cf397d9..bf86e06d0ed 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon-primary/properties.mdx @@ -7,5 +7,5 @@ showTabs: true | Properties | Description | | ----------------------------------------- | -------------------------------------------------------------------------------- | | `icon` | _(required)_ Defines the [primary icon](/icons/primary) to be used, as a string. | -| [Icon](/uilib/components/icon/properties) | _(optional)_ accepts else all the default icon properties. | +| [Icon](/uilib/components/icon/properties) | _(optional)_ accepts all default icon properties. | | [Space](/uilib/layout/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/properties.mdx index 844d94b2f1a..1b58a6a90b7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/icon/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/icon/properties.mdx @@ -6,7 +6,7 @@ showTabs: true | Properties | Description | | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `icon` | _(required)_ a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`). | +| `icon` | _(required)_ a React SVG Component. | | `title` | _(optional)_ Use a title to provide extra information about the icon used. | | `border` | _(optional)_ use `true` to display a rounded border with an inherited color. Keep in mind that the icon will have a larger total width and height of `+0.5em`. | | `alt` | _(optional)_ the alternative label (text version) of the icon. Defaults to the imported icon name. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation.mdx index 02c498fd07e..c1e1f545642 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation.mdx @@ -1,6 +1,6 @@ --- title: 'Isolation' -description: '`Form.Isolation` lets you isolate parts of your from so data and validations are not shared between between the `Form.Handler` until you want to.' +description: '`Form.Isolation` lets you isolate parts of your form so data and validations are not shared between the `Form.Handler` until you want to.' hideInMenu: true showTabs: true tabs: diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 85cdfea5033..8cb57beb81a 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -2142,12 +2142,6 @@ button .dnb-form-status__text { .dnb-dropdown__row { display: inline-flex; } -.dnb-dropdown--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem); -} -.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem); -} .dnb-dropdown__icon { position: relative; order: 2; @@ -2389,6 +2383,13 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell { } } +.dnb-drawer-list--triangle-position-left .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle { + margin-left: 0.5rem; +} +.dnb-drawer-list--triangle-position-right .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle { + margin-right: 0.5rem; +} + /* * Used for snapshot testing * diff --git a/packages/dnb-eufemia/src/components/dropdown/Dropdown.js b/packages/dnb-eufemia/src/components/dropdown/Dropdown.js index 0dff13967c3..e60c658bc8f 100644 --- a/packages/dnb-eufemia/src/components/dropdown/Dropdown.js +++ b/packages/dnb-eufemia/src/components/dropdown/Dropdown.js @@ -646,7 +646,10 @@ class DropdownInstance extends React.PureComponent { id={id} role={handleAsMenu ? 'menu' : 'listbox'} portal_class={portal_class} - list_class="dnb-dropdown__list" + list_class={classnames( + 'dnb-dropdown__list', + variant === 'tertiary' && 'dnb-dropdown__list--tertiary' + )} value={selected_item} default_value={default_value} scrollable={scrollable} diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap index af26dc0b783..b0bd7c7bb94 100644 --- a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap @@ -819,12 +819,6 @@ button .dnb-form-status__text { .dnb-dropdown__row { display: inline-flex; } -.dnb-dropdown--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem); -} -.dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem); -} .dnb-dropdown__icon { position: relative; order: 2; @@ -1064,6 +1058,13 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell { .dnb-responsive-component .dnb-dropdown__helper { display: none; } +} + +.dnb-drawer-list--triangle-position-left .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle { + margin-left: 0.5rem; +} +.dnb-drawer-list--triangle-position-right .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle { + margin-right: 0.5rem; }" `; diff --git a/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss b/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss index ba275a14d16..210220807c7 100644 --- a/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss +++ b/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss @@ -56,23 +56,6 @@ display: inline-flex; } - // NB: looks like we don't need this anymore! - // &--default .dnb-drawer-list__list { - // top: var(--dropdown-height); - // bottom: auto; - // } - // &--default#{&}--top .dnb-drawer-list__list { - // bottom: var(--dropdown-height); - // top: auto; - // } - - &--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem); - } - &--icon-position-left#{&}--large .dnb-drawer-list__triangle { - margin-left: calc(var(--dropdown-padding-horizontal) + 0.25rem); - } - &__icon { position: relative; order: 2; @@ -391,3 +374,20 @@ } } } + +.dnb-drawer-list--triangle-position { + // Cant access --dropdown-padding-horizontal, as the drawer list is outside of the dropdown scope + &-left { + .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle { + // --dropdown-padding-horizontal divided by two + margin-left: 0.5rem; + } + } + + &-right { + .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle { + // --dropdown-padding-horizontal divided by two + margin-right: 0.5rem; + } + } +} diff --git a/packages/dnb-eufemia/src/components/icon/Icon.tsx b/packages/dnb-eufemia/src/components/icon/Icon.tsx index 114389ffee5..c685ceb4118 100644 --- a/packages/dnb-eufemia/src/components/icon/Icon.tsx +++ b/packages/dnb-eufemia/src/components/icon/Icon.tsx @@ -63,7 +63,7 @@ export type IconColor = export type IconProps = { /** - * A React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`). + * A React SVG Component. */ icon?: IconIcon diff --git a/packages/dnb-eufemia/src/components/icon/stories/Icon.stories.tsx b/packages/dnb-eufemia/src/components/icon/stories/Icon.stories.tsx index 5267ec60cc5..eb69171fd28 100644 --- a/packages/dnb-eufemia/src/components/icon/stories/Icon.stories.tsx +++ b/packages/dnb-eufemia/src/components/icon/stories/Icon.stories.tsx @@ -19,6 +19,7 @@ export const IconSandbox = () => ( text + diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useData.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useData.tsx index 8934e7210ea..7b42630b30d 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useData.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useData.tsx @@ -37,7 +37,7 @@ type UseDataReturnUpdate = ( export type UseDataReturnGetValue = ( path: P -) => PathType | unknown +) => PathType | any export type UseDataReturnFilterData = ( filterDataHandler: FilterData,
( export type UseDataReturnGetValue = ( path: P -) => PathType | unknown +) => PathType | any export type UseDataReturnFilterData = ( filterDataHandler: FilterData,
( path: P -) => PathType | unknown +) => PathType | any export type UseDataReturnFilterData = ( filterDataHandler: FilterData,