diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js
index 063e6e98d56..b96dc1427f3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js
@@ -8,6 +8,7 @@ import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
import { Autocomplete, IconPrimary } from '@dnb/eufemia/src/components'
import { format } from '@dnb/eufemia/src/components/number-format/NumberUtils'
import styled from '@emotion/styled'
+import Context from '@dnb/eufemia/src/shared/Context'
const Wrapper = styled.div`
[data-visual-test] {
@@ -228,13 +229,12 @@ export const AutocompleteDifferentSizes = () => (
)
export const AutocompleteCustomWidth = () => (
-
-
- {() => /* jsx */ `
+
+ {() => /* jsx */ `
const CustomWidthOne = styled(Autocomplete)\`
.dnb-autocomplete__shell {
width: 10rem;
@@ -259,6 +259,7 @@ const CustomWidthThree = styled(Autocomplete)\`
render(
/>
)
`}
-
-
+
+)
+
+export const AutocompleteSuffix = () => {
+ const { locale } = React.useContext(Context)
+ const ban = format(20001234567, { ban: true, locale })
+ const suffix_value = format(12345678, { currency: true, locale })
+ const numbers = [
+ {
+ selected_value: `Brukskonto (${ban})`,
+ suffix_value,
+ content: ['Brukskonto', ban],
+ },
+ {
+ selected_value: `BSU (${ban})`,
+ suffix_value,
+ content: ['BSU', ban],
+ },
+ {
+ selected_value: `Sparekonto (${ban})`,
+ suffix_value,
+ content: ['Sparekonto', ban],
+ },
+ {
+ selected_value: `Brukskonto (${ban})`,
+ suffix_value,
+ content: ['Brukskonto', ban],
+ },
+ ]
+ return (
+
+ {() => /* jsx */ `
+const CustomWidth = styled(Autocomplete)\`
+ .dnb-drawer-list__root,
+ .dnb-autocomplete__shell {
+ width: 50vw;
+ min-width: 15rem;
+ max-width: 30rem;
+ }
+\`
+render(
+
)
+`}
+
+ )
+}
export const AutocompleteOpened = () => {
if (!(typeof window !== 'undefined' && window.IS_TEST)) {
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md
index 7cb632ef0aa..3367f1325bc 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md
@@ -12,6 +12,7 @@ AutocompleteToggleExample,
AutocompletePredefinedInput,
AutocompleteDifferentSizes,
AutocompleteCustomWidth,
+AutocompleteSuffix,
AutocompleteOpened
} from 'Docs/uilib/components/autocomplete/Examples'
@@ -58,6 +59,27 @@ Four sizes are available: `small`, `default`, `medium` and `large`.
+### Data suffix value
+
+Data is provided as such:
+
+```js
+const { locale } = React.useContext(Context)
+const data = [
+ {
+ suffix_value: (
+
+ {12345678}
+
+ ),
+ selected_value: `Brukskonto (${ban})`,
+ content: ['Brukskonto', ban],
+ },
+]
+```
+
+
+
### Custom width
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md
index 3bf4f28c07f..eb2da5bbd72 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md
@@ -73,6 +73,7 @@ const data = [
// (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',
@@ -91,6 +92,7 @@ const data = [
{
selected_key: 'key_2',
selected_value: 'Item 3 Value',
+ suffix_value: 'Addition 3',
content: (
@@ -101,6 +103,7 @@ const data = [
{
selected_key: 'key_3',
selected_value: 'Item 4 Value',
+ suffix_value: 'Addition 4',
content: ['Item 4 Content A', <>Custom Component>],
},
]
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md
index 22aba8d9a73..af3faf474eb 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md
@@ -10,15 +10,15 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below
| Properties | Description |
| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` | _(optional)_ give a title to let the users know what they have to do. Defaults to `Valgmeny`. |
-| `variant` | _(optional)_ defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`. |
+| `title` | _(optional)_ give a title to let the users know what they have to do. Defaults to `Valgmeny`. |
+| `variant` | _(optional)_ defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`. |
| `icon` | _(optional)_ icon to be included in the dropdown. |
| `icon_size` | _(optional)_ change the size of the icon pragmatically. |
-| `icon_position` | _(optional)_ position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`. |
+| `icon_position` | _(optional)_ position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`. |
| `triangle_position` | _(optional)_ position of arrow / triangle of the drawer. Set to `left` or `right`. Defaults to `right`. |
| `size` | _(optional)_ define the height of the Dropdown. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`. |
| `opened` | _(optional)_ if set to `true`, the Dropdown will be rendered initially with a visible and accessible data list / options. |
-| `open_on_focus` | _(optional)_ if set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action. |
+| `open_on_focus` | _(optional)_ if set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action. |
| `prevent_selection` | _(optional)_ if set to `true`, no permanent selection will be made. Defaults to `false`. |
| `action_menu` | _(optional)_ same as `prevent_selection`, but the DrawerList will be opened from the bottom of the page for mobile devices. Defaults to `false`. |
| `more_menu` | _(optional)_ same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`. |
@@ -27,7 +27,7 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below
| `skip_portal` | _(optional)_ set to `true` to disable the React Portal behavior. Defaults to `false`. |
| `stretch` | _(optional)_ if set to `true`, then the dropdown will be 100% in available `width`. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. |
-| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. |
+| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. |
| `status_props` | _(optional)_ use an object to define additional FormStatus properties. |
| `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). |
| `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. |
@@ -53,6 +53,7 @@ const data = [
// (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',
@@ -66,11 +67,13 @@ const data = [
{
selected_key: 'key_2',
selected_value: 'Item 3 Value',
+ suffix_value: 'Addition 3',
content: ['Item 3 Content A', 'Item 3 Content B'],
},
{
selected_key: 'key_3',
selected_value: 'Item 4 Value',
+ suffix_value: 'Addition 4',
content: ['Item 4 Content A', <>Custom Component>],
},
]
@@ -80,4 +83,4 @@ const data = {
a: 'A',
b: 'B',
}
-```
\ No newline at end of file
+```
diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
index a27d3426d40..48efcf4925b 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
+++ b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -179,6 +179,10 @@ export default class Autocomplete extends React.PureComponent {
PropTypes.string,
PropTypes.node,
]),
+ suffix_value: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node,
+ ]),
content: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node,
@@ -1786,7 +1790,7 @@ class AutocompleteInstance extends React.PureComponent {
}
const inputParams = {
- className: classnames('dnb-autocomplete__input'),
+ className: 'dnb-autocomplete__input',
id,
value: inputValue,
autoCapitalize: 'none',
@@ -1934,6 +1938,12 @@ class AutocompleteInstance extends React.PureComponent {
status={status ? status_state : null}
status_state={status_state}
type={null}
+ inner_element={
+ getCurrentData(
+ selected_item,
+ this.context.drawerList.original_data
+ )?.suffix_value
+ }
submit_element={submitButton}
input_state={
this.state.skipFocusDuringChange ? 'focus' : undefined
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js
index 5311903da16..49c8df1b31e 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js
+++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js
@@ -20,6 +20,13 @@ describe('Autocomplete screenshot', () => {
expect(screenshot).toMatchImageSnapshot()
})
+ it('have to match custom input width', async () => {
+ const screenshot = await testPageScreenshot({
+ selector: '[data-visual-test="autocomplete-input-width"]',
+ })
+ expect(screenshot).toMatchImageSnapshot()
+ })
+
it('have to match autocomplete with drawer-button', async () => {
const screenshot = await testPageScreenshot({
selector:
@@ -35,12 +42,6 @@ describe('Autocomplete screenshot', () => {
})
expect(screenshot).toMatchImageSnapshot()
})
-})
-
-describe('Autocomplete screenshot', () => {
- setupPageScreenshot({
- url: '/uilib/components/autocomplete/demos',
- })
it('have to match autocomplete with search result', async () => {
const screenshot = await testPageScreenshot({
@@ -48,31 +49,57 @@ describe('Autocomplete screenshot', () => {
simulateSelector:
'[data-visual-test="autocomplete-drawer-search"] .dnb-autocomplete .dnb-input',
simulate: 'click',
- waitAfterSimulateSelector:
- '.dnb-drawer-list__options .first-of-type.dnb-drawer-list__option',
style: {
height: '40rem',
},
})
expect(screenshot).toMatchImageSnapshot()
})
+
+ it('have to match autocomplete opened list', async () => {
+ const screenshot = await testPageScreenshot({
+ selector: '[data-visual-test="autocomplete-opened"]',
+ simulateSelector:
+ '[data-visual-test="autocomplete-opened"] .focus-trigger .dnb-drawer-list:last-of-type li.first-of-type',
+ simulate: 'click',
+ style: {
+ height: '40rem',
+ },
+ })
+ expect(screenshot).toMatchImageSnapshot()
+ })
+
+ it('have to match autocomplete with suffix value', async () => {
+ const screenshot = await testPageScreenshot({
+ selector: '[data-visual-test="autocomplete-suffix"]',
+ simulateSelector:
+ '[data-visual-test="autocomplete-suffix"] .dnb-autocomplete .dnb-input',
+ simulate: 'click',
+ style: {
+ height: '25rem',
+ },
+ })
+ expect(screenshot).toMatchImageSnapshot()
+ })
})
describe('Autocomplete screenshot', () => {
setupPageScreenshot({
url: '/uilib/components/autocomplete/demos',
+ pageViewport: {
+ width: 600,
+ height: 600,
+ },
})
- it('have to match autocomplete opened list', async () => {
+ it('have to match small screen autocomplete with suffix value', async () => {
const screenshot = await testPageScreenshot({
- selector: '[data-visual-test="autocomplete-opened"]',
+ selector: '[data-visual-test="autocomplete-suffix"]',
simulateSelector:
- '[data-visual-test="autocomplete-opened"] .focus-trigger .dnb-drawer-list:last-of-type li.first-of-type',
+ '[data-visual-test="autocomplete-suffix"] .dnb-autocomplete .dnb-input',
simulate: 'click',
- waitAfterSimulateSelector:
- '.dnb-drawer-list__options li.first-of-type.dnb-drawer-list__option--selected',
style: {
- height: '40rem',
+ height: '35rem',
},
})
expect(screenshot).toMatchImageSnapshot()
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
index 5bb76826df7..7944adabdc7 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
+++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
@@ -1494,6 +1494,59 @@ describe('Autocomplete component', () => {
assert()
})
+ it('will show suffix_value in options and in input when selected', () => {
+ const mockData = [
+ {
+ selected_value: 'a selected',
+ suffix_value: 'a suffix',
+ content: '11 aa',
+ },
+ {
+ selected_value: 'b selected',
+ suffix_value: b suffix,
+ content: '22 bb',
+ },
+ {
+ selected_value: 'c selected',
+ suffix_value: 'c suffix',
+ content: '22 cc',
+ },
+ ]
+
+ let index = 1
+
+ const Comp = mount(
+
+ )
+
+ const assertInputValue = () => {
+ expect(Comp.find('.dnb-input__input').instance().value).toBe(
+ mockData[index].selected_value
+ )
+ }
+
+ assertInputValue()
+
+ index = 2
+ Comp.setProps({ value: index })
+
+ assertInputValue()
+
+ // open
+ keydown(Comp, 40) // down
+
+ const getTextContent = (itemIndex) =>
+ Comp.find('.dnb-drawer-list__option')
+ .at(itemIndex)
+ .instance()
+ .querySelector(
+ '.dnb-drawer-list__option__item.dnb-drawer-list__option__suffix'
+ ).textContent
+
+ expect(getTextContent(1)).toBe('b suffix')
+ expect(getTextContent(2)).toBe(mockData[2].suffix_value)
+ })
+
it('will select correct item after updateData', () => {
const mockData = [
{ selected_value: 'a value', content: '11 aa' },
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
index 30de6474ed5..b12658e8a5c 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
+++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -2890,6 +2890,33 @@ legend.dnb-form-label {
transition: transform 400ms ease-out; }
html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
transition-duration: 1ms !important; }
+ .dnb-autocomplete .dnb-input__inner__element {
+ position: relative;
+ z-index: 3; }
+ @media screen and (min-width: 40em) {
+ .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+ .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+ padding-right: 0 !important; } }
+ @media screen and (max-width: 40em) {
+ .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
+ .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
+ padding-right: 2.5rem !important; } }
+ .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+ pointer-events: none;
+ white-space: nowrap;
+ padding: 0 0.5rem; }
+ @media screen and (max-width: 40em) {
+ .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+ display: none; } }
+ .dnb-autocomplete .dnb-input__inner__element.dnb-p,
+ .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p {
+ margin: 0; }
+ .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element {
+ margin-right: 2.5rem !important; }
+ .dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p {
+ padding-right: 3rem; }
+ .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input {
+ padding-right: 1rem; }
.dnb-autocomplete__text {
order: 1;
position: relative;
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-autocomplete-with-suffix-value-1-bae4c.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-autocomplete-with-suffix-value-1-bae4c.snap.png
new file mode 100644
index 00000000000..86cb69f87a8
Binary files /dev/null and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-autocomplete-with-suffix-value-1-bae4c.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-custom-input-width-1-41b4b.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-custom-input-width-1-41b4b.snap.png
new file mode 100644
index 00000000000..82935faca5d
Binary files /dev/null and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-custom-input-width-1-41b4b.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-small-screen-autocomplete-with-suffix-value-1-1e7f2.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-small-screen-autocomplete-with-suffix-value-1-1e7f2.snap.png
new file mode 100644
index 00000000000..db0f058667a
Binary files /dev/null and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-small-screen-autocomplete-with-suffix-value-1-1e7f2.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js b/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js
index 3bd5a2111dc..34e8c265806 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js
+++ b/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js
@@ -7,8 +7,15 @@ import React from 'react'
import { Wrapper, Box } from 'storybook-utils/helpers'
import styled from '@emotion/styled'
-import { Autocomplete, NumberFormat, IconPrimary, Button } from '../../'
+import {
+ Autocomplete,
+ NumberFormat,
+ IconPrimary,
+ Button,
+ FormRow,
+} from '../../'
import { Anchor } from '../../../elements'
+import { Context } from '../../../shared'
import { SubmitButton } from '../../input/Input'
import { format } from '../../number-format/NumberUtils'
@@ -832,3 +839,73 @@ function UpdateDataExample() {
>
)
}
+
+const WideStyle = styled.div`
+ .dnb-drawer-list__root,
+ .dnb-autocomplete__shell {
+ /* custom width */
+ width: 50vw;
+ min-width: 15rem;
+ max-width: 30rem;
+ }
+`
+
+export function DataSuffix() {
+ const { locale } = React.useContext(Context)
+ const ban = format(21001234567, { ban: true, locale })
+ const numbers = [
+ {
+ selected_value: `Brukskonto (${ban})`,
+ suffix_value: (
+
+ {12345678}
+
+ ),
+ content: ['Brukskonto', ban],
+ },
+ {
+ selected_value: `BSU (${ban})`,
+ suffix_value: (
+
+ {2223}
+
+ ),
+ content: ['BSU', ban],
+ },
+ {
+ selected_value: `Sparekonto (${ban})`,
+ suffix_value: (
+
+ {876555.5}
+
+ ),
+ content: ['Sparekonto', ban],
+ },
+ {
+ selected_value: `Brukskonto (${ban})`,
+ suffix_value: (
+
+ {34999.2}
+
+ ),
+ content: ['Brukskonto', ban],
+ },
+ ]
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss b/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss
index b711bcca9d0..9e916d9c0af 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss
+++ b/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss
@@ -116,6 +116,55 @@
}
}
+ // Support for "suffix_value"
+ .dnb-input {
+ &__inner__element {
+ position: relative;
+ z-index: 3;
+ }
+
+ &--has-submit-element .dnb-input__placeholder,
+ &--has-submit-element .dnb-input__input {
+ @include allAbove(small) {
+ // same width of submit button
+ padding-right: 0 !important; // use important so we avoid to have all sizes in addition
+ }
+ @include allBelow(small) {
+ // same width of submit button
+ padding-right: 2.5rem !important; // use important so we avoid to have all sizes in addition
+ }
+ }
+
+ &__inner__element.dnb-p {
+ pointer-events: none;
+ white-space: nowrap;
+ padding: 0 0.5rem;
+
+ @include allBelow(small) {
+ display: none;
+ }
+ }
+
+ &__inner__element.dnb-p,
+ .dnb-spacing &__inner__element.dnb-p {
+ margin: 0;
+ }
+
+ &--has-submit-element .dnb-input__inner__element {
+ // same width of submit button
+ margin-right: 2.5rem !important; // use important so we avoid to have all sizes in addition
+ }
+ }
+ &--icon-position-right .dnb-input {
+ // stylelint-disable-next-line
+ &__inner__element.dnb-p {
+ padding-right: 3rem;
+ }
+ &--icon-position-right &--icon-position-right#{&}--has-icon &__input {
+ padding-right: 1rem;
+ }
+ }
+
&__text {
order: 1;
position: relative;
diff --git a/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.js b/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.js
index 66a941689e3..b2efff5d4b6 100644
--- a/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.js
+++ b/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.js
@@ -19,6 +19,7 @@ import {
Modal,
// Checkbox
} from '../../'
+import { Link } from '../../../'
export default {
title: 'Eufemia/Components/Dropdown',
@@ -101,7 +102,12 @@ const DropdownStory = () => {
align_dropdown="left"
variant="tertiary"
title="Tertiary"
- data={['Go to this Link', 'Or to this one']}
+ data={[
+
+ Go to this Link
+ ,
+ 'Or to this one',
+ ]}
/>
{
// align_dropdown="right"
variant="tertiary"
title="Tertiary"
- data={['Go to this Link', 'Or to this one']}
+ data={[
+
+ Go to this Link
+ ,
+ 'Or to this one',
+ ]}
/>
@@ -160,7 +171,12 @@ const DropdownStory = () => {
size="small"
// opened
more_menu
- data={['Go to this Link', 'Or to this one']}
+ data={[
+
+ Go to this Link
+ ,
+ 'Or to this one',
+ ]}
// skip_portal
align_dropdown="right"
/>
@@ -168,7 +184,12 @@ const DropdownStory = () => {
size="small"
// opened
more_menu
- data={['Go to this Link', 'Or to this one']}
+ data={[
+
+ Go to this Link
+ ,
+ 'Or to this one',
+ ]}
// skip_portal
// align_dropdown="right"
/>
@@ -299,7 +320,12 @@ const DropdownStory = () => {
align_dropdown={align_dropdown}
icon_position={icon_position}
more_menu={true}
- data={['Go to this Link', 'Or to this one']}
+ data={[
+
+ Go to this Link
+ ,
+ 'Or to this one',
+ ]}
right="x-large x-large"
skip_portal
/>
@@ -311,7 +337,12 @@ const DropdownStory = () => {
direction={direction}
align_dropdown={align_dropdown}
icon_position={icon_position}
- data={['Go to this Link', 'Or to this one']}
+ data={[
+
+ Go to this Link
+ ,
+ 'Or to this one',
+ ]}
right="x-large x-large"
/>
{
direction={direction}
align_dropdown={align_dropdown}
icon_position={icon_position}
- data={['Go to this Link', 'Or to this one']}
+ data={[
+
+ Go to this Link
+ ,
+ 'Or to this one',
+ ]}
right="x-large x-large"
/>
{
direction={direction}
align_dropdown={align_dropdown}
icon_position={icon_position}
- data={['Go to this Link', 'Or to this one']}
+ data={[
+
+ Go to this Link
+ ,
+ 'Or to this one',
+ ]}
right="x-large x-large"
/>
@@ -596,6 +637,7 @@ export const DropdownSandbox = () => (
let dropdownData = [
{
selected_value: 'Brukskonto - Kari Nordmann',
+ suffix_value: 'Suffix value',
content: (
<>
{/* */}
@@ -604,11 +646,14 @@ let dropdownData = [
),
},
{
+ suffix_value: 'Very long suffix value',
content: [
12345678902
,
'Sparekonto - Ole Nordmann',
+ 'Line 2',
+ 'Line 3',
],
},
{
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js
index 29ecc846060..32b932e2b78 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js
@@ -583,7 +583,17 @@ export function ItemContent({ hash = '', children }) {
)
}
- return content
+ return Object.prototype.hasOwnProperty.call(children, 'suffix_value') ? (
+ <>
+ {content}
+
+
+ {children.suffix_value}
+
+ >
+ ) : (
+ content
+ )
}
ItemContent.propTypes = {
hash: PropTypes.string,
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js
index 6df24219563..50dd2cb1269 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js
@@ -79,6 +79,10 @@ export const drawerListPropTypes = {
PropTypes.string,
PropTypes.node,
]),
+ suffix_value: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.node,
+ ]),
content: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node,
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js
index 40f12cbee67..80190d9980d 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js
@@ -50,6 +50,7 @@ beforeAll(() => {
const snapshotProps = {
...fakeProps(require.resolve('../DrawerList'), {
+ all: true,
optional: true,
}),
id: 'drawer-list-id',
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap
index 6cf55bb63b6..ebb34cd20e3 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap
@@ -2,6 +2,54 @@
exports[`DrawerList markup have to match snapshot 1`] = `