diff --git a/addon/components/pix-select-list.hbs b/addon/components/pix-select-list.hbs
index 1075345bd..d4dd13dc0 100644
--- a/addon/components/pix-select-list.hbs
+++ b/addon/components/pix-select-list.hbs
@@ -1,18 +1,20 @@
- -
- {{@defaultOptionValue}}
-
+ {{#if @displayDefaultOption}}
+ -
+ {{@defaultOptionValue}}
+
+ {{/if}}
{{#if this.results}}
{{#if this.displayCategory}}
{{#each this.results as |element index|}}
diff --git a/addon/styles/_pix-select-list.scss b/addon/styles/_pix-select-list.scss
index 57469e4f0..24124ef50 100644
--- a/addon/styles/_pix-select-list.scss
+++ b/addon/styles/_pix-select-list.scss
@@ -1,14 +1,16 @@
@use "pix-design-tokens/typography";
.pix-select_list {
- padding: var(--pix-spacing-2x);
- border-top: 1px solid var(--pix-neutral-20);
-
- --border-radius-2x: var(--pix-spacing-2x);
-
+ display: flex;
+ flex-direction: column;
+ gap: var(--pix-spacing-1x);
+ padding: var(--pix-spacing-2x) var(--pix-spacing-1x);
}
.pix-select-list-category {
+ display: flex;
+ flex-direction: column;
+ gap: var(--pix-spacing-1x);
margin: 0;
padding: 0;
list-style: none;
@@ -16,24 +18,28 @@
&__name {
@extend %pix-body-s;
- padding: var(--pix-spacing-4x) var(--pix-spacing-6x) var(--pix-spacing-2x) var(--pix-spacing-4x);
- color: var(--pix-neutral-500);
- text-transform: uppercase;
+ padding: var(--pix-spacing-1x) var(--pix-spacing-3x);
+ color: var(--pix-neutral-800);
+ font-weight: var(--pix-font-bold);
+ text-transform: capitalize;
+ background-color: var(--pix-neutral-20);
+ border-radius: 0.25rem;
}
&__option {
@extend %pix-body-s;
position: relative;
- padding: var(--pix-spacing-2x) var(--pix-spacing-8x) var(--pix-spacing-2x) var(--pix-spacing-4x);
+ padding: var(--pix-spacing-2x) var(--pix-spacing-10x) var(--pix-spacing-2x) var(--pix-spacing-3x);
color: var(--pix-neutral-900);
- border-radius: 8px;
+ border-radius: 0.25rem;
- &:nth-child(even) {
- background-color: var(--pix-neutral-20);
+ &:hover {
+ background-color: rgba(var(--pix-neutral-100-inline), 0.60);
+ outline: none;
+ cursor: pointer;
}
- &:hover,
&:focus {
background-color: var(--pix-primary-10);
outline: none;
@@ -43,27 +49,18 @@
svg {
position: absolute;
top: 50%;
- right: var(--pix-spacing-2x);
+ right: var(--pix-spacing-3x);
transform: translateY(-50%);
- visibility: hidden;
- opacity: 0;
}
&--selected {
- align-items: center;
+ color: var(--pix-primary-900);
+ font-weight: var(--pix-font-bold);
background-color: var(--pix-primary-10);
-
- svg {
- visibility: visible;
- opacity: 1;
- }
}
- &--hidden {
- height: 0;
- padding-top: 0;
- padding-bottom: 0;
- visibility: hidden;
+ &--default {
+ margin-bottom: var(--pix-spacing-1x);
}
}
}
diff --git a/addon/styles/_pix-select.scss b/addon/styles/_pix-select.scss
index 6066c868e..c54c8c40d 100644
--- a/addon/styles/_pix-select.scss
+++ b/addon/styles/_pix-select.scss
@@ -64,7 +64,7 @@
&__search {
display: flex;
- margin: var(--pix-spacing-4x) var(--pix-spacing-6x);
+ margin: var(--pix-spacing-2x) var(--pix-spacing-3x);
color: var(--pix-neutral-100);
border-bottom: 2px solid var(--pix-neutral-100);
border-radius: var(--pix-spacing-1x) var(--pix-spacing-1x) 0 0;
diff --git a/tests/dummy/app/controllers/select-page.js b/tests/dummy/app/controllers/select-page.js
index 1874e293e..c548a0781 100644
--- a/tests/dummy/app/controllers/select-page.js
+++ b/tests/dummy/app/controllers/select-page.js
@@ -18,14 +18,15 @@ export default class SelectPage extends Controller {
get options() {
return [
- { value: '1', label: 'Figues' },
- { value: '3', label: 'Fraises' },
- { value: '2', label: 'Bananes' },
- { value: '4', label: 'Mangues' },
- { value: '5', label: 'Kaki' },
+ { value: '1', label: 'Figues', category: 'rouge' },
+ { value: '3', label: 'Fraises', category: 'rouge' },
+ { value: '2', label: 'Bananes', category: 'jaune' },
+ { value: '4', label: 'Mangues', category: 'jaune' },
+ { value: '5', label: 'Kaki', category: 'vert' },
{
value: '6',
label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
+ category: 'vert'
},
];
}
diff --git a/tests/integration/components/pix-structure-switcher-test.js b/tests/integration/components/pix-structure-switcher-test.js
index df2c77e87..a05cdee72 100644
--- a/tests/integration/components/pix-structure-switcher-test.js
+++ b/tests/integration/components/pix-structure-switcher-test.js
@@ -60,12 +60,10 @@ module('Integration | Component | pix-structure-switcher', function (hooks) {
const button = screen.getByRole('button', { name: 'Changer de structure' });
await userEvent.click(button);
- const hiddenDefaultOption = await screen.findByRole('option', {
- selected: true,
- hidden: true,
- });
// then
- assert.strictEqual(hiddenDefaultOption.tabIndex, -1);
+ assert.notOK(screen.queryByRole('option', {
+ name : 'Changer de structure'
+ }));
});
});