Skip to content

Commit

Permalink
feat(DrawerList): use CSS Grid for placing list content to enhance fl…
Browse files Browse the repository at this point in the history 
…exibility
  • Loading branch information
@tujoworker
tujoworker committed Jun 21, 2022
1 parent 6607963 commit cf130d9
Show file tree
Hide file tree
Showing 15 changed files with 297 additions and 151 deletions.
30 changes: 17 additions & 13 deletions packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.js
View file
Expand Up @@ -199,12 +199,16 @@ export const DropdownDirections = () => {
<Dropdown
label="Label:"
data={[
['Vertical', 'text'],
['Vertical', 'alignment'],
<>
<span className="dnb-p--medium">Vertical</span> text
<P modifier="medium">Vertical</P>
<P>alignment</P>
</>,
<Dropdown.HorizontalItem>
<span className="dnb-p--medium">Horizontal</span> text
<Dropdown.HorizontalItem key="item-1">
<P modifier="medium" right="x-small">
Horizontal
</P>
<P>alignment</P>
</Dropdown.HorizontalItem>,
]}
{...visualTestProps(typeof window !== 'undefined' && window.IS_TEST && window.location.search.includes('item-directions'))}
Expand Down Expand Up @@ -256,7 +260,7 @@ export const DropdownActionMenu = () => (
</>
]}
/>
`}
`}
</ComponentBox>
</Wrapper>
)
Expand Down Expand Up @@ -300,7 +304,7 @@ export const DropdownMoreMenu = () => {
more_menu="true"
size="small"
title="Choose an item"
data={() => [<Link href="/">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
data={() => [<Link href="/" key="item-1">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
right="small"
{...visualTestProps(typeof window !== 'undefined' && window.IS_TEST && window.location.search.includes('left-side'))}
/>
Expand All @@ -310,22 +314,22 @@ export const DropdownMoreMenu = () => {
size="small"
title={null}
aria-label="Choose an item"
data={() => [<Link href="/">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
data={() => [<Link href="/" key="item-1">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
right="small"
{...visualTestProps(typeof window !== 'undefined' && window.IS_TEST && window.location.search.includes('right-side'))}
/>
<Dropdown
more_menu="true"
title="Choose an item"
data={[<Link href="/">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
data={[<Link href="/" key="item-1">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
right="small"
/>
<Dropdown
prevent_selection="true"
align_dropdown="right"
title={null}
aria-label="Choose an item"
data={[<Link href="/">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
data={[<Link href="/" key="item-1">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
on_change={({ value }) => {
console.log('on_change', value)
}}
Expand Down Expand Up @@ -415,7 +419,7 @@ render(
label="Label:"
title="Choose an item"
data={() => [
<Link href="/">Go to this Link</Link>,
<Link href="/" key="item-1">Go to this Link</Link>,
'Or press on me',
<CustomComponent />
]}
Expand Down Expand Up @@ -567,19 +571,19 @@ export const DropdownListOpened = () => (
</li>
<li className="dnb-drawer-list__option dnb-drawer-list__option--selected">
<span className="dnb-drawer-list__option__inner">
<span className="dnb-drawer-list__option__item"><NumberFormat always_selectall key="n-1" ban>12345678902</NumberFormat></span>
<span className="dnb-drawer-list__option__item item-nr-1"><NumberFormat always_selectall key="n-1" ban>12345678902</NumberFormat></span>
<span className="dnb-drawer-list__option__item">Sparekonto - Ole Nordmann</span>
</span>
</li>
<li className="dnb-drawer-list__option">
<span className="dnb-drawer-list__option__inner">
<span className="dnb-drawer-list__option__item"><NumberFormat always_selectall key="n-2" ban>11345678962</NumberFormat></span>
<span className="dnb-drawer-list__option__item item-nr-1"><NumberFormat always_selectall key="n-2" ban>11345678962</NumberFormat></span>
<span className="dnb-drawer-list__option__item">Feriekonto - Kari Nordmann med et kjempelangt etternavnsen</span>
</span>
</li>
<li className="dnb-drawer-list__option last-of-type">
<span className="dnb-drawer-list__option__inner">
<span className="dnb-drawer-list__option__item"><NumberFormat always_selectall key="n-3" ban>15349648901</NumberFormat></span>
<span className="dnb-drawer-list__option__item item-nr-1"><NumberFormat always_selectall key="n-3" ban>15349648901</NumberFormat></span>
<span className="dnb-drawer-list__option__item">Oppussing - Ole Nordmann</span>
</span>
</li>
Expand Down
6 changes: 3 additions & 3 deletions ...ages/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.js
View file
Expand Up @@ -52,19 +52,19 @@ export const DrawerListExampleOnlyToVisualize = () => (
</li>
<li className="dnb-drawer-list__option dnb-drawer-list__option--selected">
<span className="dnb-drawer-list__option__inner">
<span className="dnb-drawer-list__option__item"><NumberFormat ban>12345678902</NumberFormat></span>
<span className="dnb-drawer-list__option__item item-nr-1"><NumberFormat ban>12345678902</NumberFormat></span>
<span className="dnb-drawer-list__option__item">Sparekonto - Ole Nordmann</span>
</span>
</li>
<li className="dnb-drawer-list__option">
<span className="dnb-drawer-list__option__inner">
<span className="dnb-drawer-list__option__item"><NumberFormat ban>11345678962</NumberFormat></span>
<span className="dnb-drawer-list__option__item item-nr-1"><NumberFormat ban>11345678962</NumberFormat></span>
<span className="dnb-drawer-list__option__item">Feriekonto - Kari Nordmann med et kjempelangt etternavnsen</span>
</span>
</li>
<li className="dnb-drawer-list__option last-of-type">
<span className="dnb-drawer-list__option__inner">
<span className="dnb-drawer-list__option__item"><NumberFormat ban>15349648901</NumberFormat></span>
<span className="dnb-drawer-list__option__item item-nr-1"><NumberFormat ban>15349648901</NumberFormat></span>
<span className="dnb-drawer-list__option__item">Oppussing - Ole Nordmann</span>
</span>
</li>
Expand Down
41 changes: 34 additions & 7 deletions packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
View file
Expand Up @@ -72,7 +72,7 @@ describe('Autocomplete component', () => {
/>
)
expect(Comp.find('li.dnb-drawer-list__option').at(0).html()).toBe(
/* html */ `<li class="first-of-type dnb-drawer-list__option" role="option" tabindex="-1" aria-selected="false" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span><span class="dnb-drawer-list__option__item--highlight">Th</span>e <span class="dnb-drawer-list__option__item--highlight">G</span>odfa<span class="dnb-drawer-list__option__item--highlight">th</span>er <span class="dnb-drawer-list__option__item--highlight">th</span>e <span class="dnb-drawer-list__option__item--highlight">g</span>odfa<span class="dnb-drawer-list__option__item--highlight">th</span>er <span class="dnb-drawer-list__option__item--highlight">Th</span>e <span class="dnb-drawer-list__option__item--highlight">G</span>odfa<span class="dnb-drawer-list__option__item--highlight">th</span>er</span></span></li>`
/* html */ `<li class="first-of-type dnb-drawer-list__option" role="option" tabindex="-1" aria-selected="false" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span class="dnb-drawer-list__option__item"><span><span class="dnb-drawer-list__option__item--highlight">Th</span>e <span class="dnb-drawer-list__option__item--highlight">G</span>odfa<span class="dnb-drawer-list__option__item--highlight">th</span>er <span class="dnb-drawer-list__option__item--highlight">th</span>e <span class="dnb-drawer-list__option__item--highlight">g</span>odfa<span class="dnb-drawer-list__option__item--highlight">th</span>er <span class="dnb-drawer-list__option__item--highlight">Th</span>e <span class="dnb-drawer-list__option__item--highlight">G</span>odfa<span class="dnb-drawer-list__option__item--highlight">th</span>er</span></span></span></li>`
)
})

Expand Down Expand Up @@ -165,7 +165,7 @@ describe('Autocomplete component', () => {
mockData[1]
)
expect(Comp.find('li.dnb-drawer-list__option').at(0).html()).toBe(
/* html */ `<li class="first-of-type dnb-drawer-list__option" role="option" tabindex="-1" aria-selected="false" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span><span class="dnb-drawer-list__option__item--highlight">BB</span> <span class="dnb-drawer-list__option__item--highlight">cc</span> ze<span class="dnb-drawer-list__option__item--highlight">thx</span></span></span></li>`
/* html */ `<li class="first-of-type dnb-drawer-list__option" role="option" tabindex="-1" aria-selected="false" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span class="dnb-drawer-list__option__item"><span><span class="dnb-drawer-list__option__item--highlight">BB</span> <span class="dnb-drawer-list__option__item--highlight">cc</span> ze<span class="dnb-drawer-list__option__item--highlight">thx</span></span></span></span></li>`
)

// check "invalid"
Expand Down Expand Up @@ -235,31 +235,31 @@ describe('Autocomplete component', () => {
target: { value: 'bb' },
})
expect(Comp.find('li.dnb-drawer-list__option').at(0).html()).toBe(
'<li class="first-of-type dnb-drawer-list__option dnb-drawer-list__option--focus" role="option" tabindex="-1" aria-selected="true" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span>item <span class="dnb-drawer-list__option__item--highlight">bb</span></span></span></li>'
'<li class="first-of-type dnb-drawer-list__option dnb-drawer-list__option--focus" role="option" tabindex="-1" aria-selected="true" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span class="dnb-drawer-list__option__item"><span>item <span class="dnb-drawer-list__option__item--highlight">bb</span></span></span></span></li>'
)

// First result direction
Comp.find('.dnb-input__input').simulate('change', {
target: { value: 'cc bb' },
})
expect(Comp.find('li.dnb-drawer-list__option').at(0).html()).toBe(
'<li class="first-of-type dnb-drawer-list__option" role="option" tabindex="-1" aria-selected="false" data-item="2" id="option-autocomplete-id-2"><span class="dnb-drawer-list__option__inner"><span>item <span class="dnb-drawer-list__option__item--highlight">cc</span></span></span></li>'
'<li class="first-of-type dnb-drawer-list__option" role="option" tabindex="-1" aria-selected="false" data-item="2" id="option-autocomplete-id-2"><span class="dnb-drawer-list__option__inner"><span class="dnb-drawer-list__option__item"><span>item <span class="dnb-drawer-list__option__item--highlight">cc</span></span></span></span></li>'
)

// Second result direction
Comp.find('.dnb-input__input').simulate('change', {
target: { value: 'bb cc' },
})
expect(Comp.find('li.dnb-drawer-list__option').at(0).html()).toBe(
'<li class="first-of-type dnb-drawer-list__option dnb-drawer-list__option--focus" role="option" tabindex="-1" aria-selected="true" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span>item <span class="dnb-drawer-list__option__item--highlight">bb</span></span></span></li>'
'<li class="first-of-type dnb-drawer-list__option dnb-drawer-list__option--focus" role="option" tabindex="-1" aria-selected="true" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span class="dnb-drawer-list__option__item"><span>item <span class="dnb-drawer-list__option__item--highlight">bb</span></span></span></span></li>'
)

// With three matches, we prioritize the second one to be on the first place
Comp.find('.dnb-input__input').simulate('change', {
target: { value: 'cc bb more' },
})
expect(Comp.find('li.dnb-drawer-list__option').at(0).html()).toBe(
'<li class="first-of-type dnb-drawer-list__option" role="option" tabindex="-1" aria-selected="false" data-item="3" id="option-autocomplete-id-3"><span class="dnb-drawer-list__option__inner"><span>item <span class="dnb-drawer-list__option__item--highlight">cc</span> second</span></span></li>'
'<li class="first-of-type dnb-drawer-list__option" role="option" tabindex="-1" aria-selected="false" data-item="3" id="option-autocomplete-id-3"><span class="dnb-drawer-list__option__inner"><span class="dnb-drawer-list__option__item"><span>item <span class="dnb-drawer-list__option__item--highlight">cc</span> second</span></span></span></li>'
)

// Do not find item, as there is defined a search_content
Expand Down Expand Up @@ -369,7 +369,7 @@ describe('Autocomplete component', () => {
mockData[1]
)
expect(Comp.find('li.dnb-drawer-list__option').at(0).html()).toBe(
/* html */ `<li class="first-of-type dnb-drawer-list__option dnb-drawer-list__option--focus" role="option" tabindex="-1" aria-selected="true" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span><span class="dnb-drawer-list__option__item--highlight">2223</span> <span class="dnb-drawer-list__option__item--highlight">33</span> <span class="dnb-drawer-list__option__item--highlight">4442</span>5</span></span></li>`
/* html */ `<li class="first-of-type dnb-drawer-list__option dnb-drawer-list__option--focus" role="option" tabindex="-1" aria-selected="true" data-item="1" id="option-autocomplete-id-1"><span class="dnb-drawer-list__option__inner"><span class="dnb-drawer-list__option__item"><span><span class="dnb-drawer-list__option__item--highlight">2223</span> <span class="dnb-drawer-list__option__item--highlight">33</span> <span class="dnb-drawer-list__option__item--highlight">4442</span>5</span></span></span></li>`
)

Comp.find('.dnb-input__input').simulate('change', {
Expand Down Expand Up @@ -1330,6 +1330,33 @@ describe('Autocomplete component', () => {
expect(callThree.dataList).toStrictEqual(callTwo.dataList)
})

it('will use selected_value as the input value when selected', () => {
const mockData = [
{ selected_value: 'a value', content: '11 aa' },
{ selected_value: 'b value', content: '22 bb' },
{ selected_value: 'c value', content: '22 cc' },
]

let index = 1

const Comp = mount(
<Component {...mockProps} value={index} data={mockData} />
)

const assert = () => {
expect(Comp.find('.dnb-input__input').instance().value).toBe(
mockData[index].selected_value
)
}

assert()

index = 2
Comp.setProps({ value: index })

assert()
})

it('will select correct item after updateData', () => {
const mockData = [
{ selected_value: 'a value', content: '11 aa' },
Expand Down
31 changes: 23 additions & 8 deletions ...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
View file
Expand Up @@ -1005,7 +1005,11 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
<ItemContent
hash="option-autocomplete-id-0-0"
>
AA c
<span
className="dnb-drawer-list__option__item"
>
AA c
</span>
</ItemContent>
</span>
</li>
Expand Down Expand Up @@ -1042,7 +1046,11 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
<ItemContent
hash="option-autocomplete-id-1-1"
>
BB cc zethx
<span
className="dnb-drawer-list__option__item"
>
BB cc zethx
</span>
</ItemContent>
</span>
</li>
Expand Down Expand Up @@ -1081,13 +1089,13 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
hash="option-autocomplete-id-2-2"
>
<span
className="dnb-drawer-list__option__item"
className="dnb-drawer-list__option__item item-nr-1"
key="option-autocomplete-id-2-20"
>
CC
</span>
<span
className="dnb-drawer-list__option__item"
className="dnb-drawer-list__option__item item-nr-2"
key="option-autocomplete-id-2-21"
>
cc
Expand Down Expand Up @@ -1260,6 +1268,12 @@ exports[`Autocomplete scss have to match default theme snapshot 1`] = `
background-color: var(--color-sea-green);
box-shadow: none; }
.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
color: transparent; }
.dnb-autocomplete__shell, .dnb-autocomplete__input {
border-radius: var(--autocomplete-border-radius); }
.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover
~ .dnb-autocomplete__inner .dnb-input:not([data-input-state='disabled']) .dnb-input__shell {
--border-color: var(--color-fire-red);
Expand Down Expand Up @@ -2850,6 +2864,9 @@ legend.dnb-form-label {
justify-content: center;
align-items: center;
color: var(--color-sea-green); }
.dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
display: flex;
flex-direction: column; }
.dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-icon {
align-self: center; }
.dnb-autocomplete__input {
Expand All @@ -2861,15 +2878,13 @@ legend.dnb-form-label {
.dnb-autocomplete__input .dnb-input__shell,
.dnb-autocomplete__input .dnb-input__input {
width: 100%; }
.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
color: transparent; }
.dnb-autocomplete--opened .dnb-input__submit-button__button .dnb-icon {
transform: rotate(180deg);
transform-origin: 50% 50%; }
.dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
transition: transform 400ms ease-out; }
.dnb-autocomplete__shell, .dnb-autocomplete__input {
border-radius: var(--autocomplete-border-radius); }
html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
transition-duration: 1ms !important; }
.dnb-autocomplete__text {
order: 1;
position: relative;
Expand Down
Binary file modified ...autocomplete-screenshot-have-to-match-autocomplete-opened-list-1-6cf75.snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...plete-screenshot-have-to-match-autocomplete-with-search-result-1-ad9c8.snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 9 additions & 7 deletions packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss
View file
Expand Up @@ -76,6 +76,11 @@
justify-content: center;
align-items: center;

.dnb-drawer-list__option__item {
display: flex;
flex-direction: column;
}

.dnb-icon {
align-self: center;
}
Expand All @@ -98,20 +103,17 @@
width: 100%;
}
}
&--show-indicator &__input .dnb-input__icon {
color: transparent;
}

&--opened .dnb-input__submit-button__button .dnb-icon {
transform: rotate(180deg);
transform-origin: 50% 50%;
}
.dnb-input__submit-button__button .dnb-icon {
transition: transform 400ms ease-out;
}

&__shell,
&__input {
border-radius: var(--autocomplete-border-radius);
html[data-visual-test] & {
transition-duration: 1ms !important;
}
}

&__text {
Expand Down
8 changes: 8 additions & 0 deletions packages/dnb-eufemia/src/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss
View file
Expand Up @@ -22,6 +22,14 @@
}
}

&--show-indicator &__input .dnb-input__icon {
color: transparent;
}
&__shell,
&__input {
border-radius: var(--autocomplete-border-radius);
}

&__status--error:not(#{&}--opened)
.dnb-form-label:hover
~ &__inner
Expand Down
1 change: 1 addition & 0 deletions packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.screenshot.test.js
View file
Expand Up @@ -147,6 +147,7 @@ describe('Dropdown screenshot', () => {

it('have to match the dropdown action menu with custom items', async () => {
const screenshot = await testPageScreenshot({
reload: true,
selector: '[data-visual-test="dropdown-action_menu-custom"]',
})
expect(screenshot).toMatchImageSnapshot()
Expand Down

0 comments on commit cf130d9

Please sign in to comment.