@1024pix/pix-ui 30.0.0 → 30.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Pix-UI Changelog
|
|
2
2
|
|
|
3
|
+
## v30.1.0 (14/04/2023)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### :bug: Correction
|
|
7
|
+
- [#377](https://github.com/1024pix/pix-ui/pull/377) [BUGFIX] Faire en sorte que la dropdown du select puisse s'ouvrir ailleurs qu'en bas si besoin (PIX-7237)
|
|
8
|
+
|
|
3
9
|
## v30.0.0 (05/04/2023)
|
|
4
10
|
|
|
5
11
|
|
|
@@ -23,122 +23,125 @@
|
|
|
23
23
|
{{/if}}
|
|
24
24
|
</div>
|
|
25
25
|
{{/if}}
|
|
26
|
+
<PopperJS @placement={{@placement}} as |reference popover|>
|
|
27
|
+
<button
|
|
28
|
+
{{reference}}
|
|
29
|
+
type="button"
|
|
30
|
+
id={{this.selectId}}
|
|
31
|
+
class={{this.className}}
|
|
32
|
+
{{on "click" this.toggleDropdown}}
|
|
33
|
+
aria-expanded={{this.isAriaExpanded}}
|
|
34
|
+
aria-controls={{this.listId}}
|
|
35
|
+
aria-disabled={{@isDisabled}}
|
|
36
|
+
>
|
|
37
|
+
<span class="pix-select-button__text">{{this.placeholder}}</span>
|
|
26
38
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
39
|
+
<FaIcon
|
|
40
|
+
class="pix-select-button__dropdown-icon"
|
|
41
|
+
@icon={{if this.isExpanded "chevron-up" "chevron-down"}}
|
|
42
|
+
/>
|
|
43
|
+
</button>
|
|
44
|
+
<div
|
|
45
|
+
{{popover}}
|
|
46
|
+
class="pix-select__dropdown{{unless this.isExpanded ' pix-select__dropdown--closed'}}"
|
|
47
|
+
id={{this.dropDownId}}
|
|
48
|
+
{{on "transitionend" this.focus}}
|
|
49
|
+
>
|
|
50
|
+
{{#if @isSearchable}}
|
|
51
|
+
<div class="pix-select__search">
|
|
52
|
+
<FaIcon class="pix-select-search__icon" @icon="magnifying-glass" />
|
|
53
|
+
<label class="screen-reader-only" for={{this.searchId}}>{{@searchLabel}}</label>
|
|
54
|
+
<input
|
|
55
|
+
class="pix-select-search__input"
|
|
56
|
+
id={{this.searchId}}
|
|
57
|
+
autocomplete="off"
|
|
58
|
+
tabindex={{if this.isExpanded "0" "-1"}}
|
|
59
|
+
placeholder={{@searchPlaceholder}}
|
|
60
|
+
{{on "input" this.setSearchValue}}
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
{{/if}}
|
|
64
|
+
<ul role="listbox" id={{this.listId}} class="pix-select__options">
|
|
65
|
+
<li
|
|
66
|
+
class="pix-select-options-category__option{{unless
|
|
67
|
+
@value
|
|
68
|
+
' pix-select-options-category__option--selected'
|
|
69
|
+
}}{{unless this.displayDefaultOption ' pix-select-options-category__option--hidden'}}"
|
|
70
|
+
role="option"
|
|
71
|
+
tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
|
|
72
|
+
aria-selected={{if @value "false" "true"}}
|
|
73
|
+
{{on "click" (fn this.onChange this.defaultOption)}}
|
|
74
|
+
{{on-enter-action (fn this.onChange this.defaultOption)}}
|
|
75
|
+
{{on-space-action (fn this.onChange this.defaultOption)}}
|
|
76
|
+
>
|
|
77
|
+
{{@placeholder}}
|
|
78
|
+
</li>
|
|
79
|
+
{{#if this.results}}
|
|
80
|
+
{{#if this.displayCategory}}
|
|
81
|
+
{{#each this.results as |element index|}}
|
|
82
|
+
<ul
|
|
83
|
+
class="pix-select-options__category"
|
|
84
|
+
role="group"
|
|
85
|
+
aria-labelledby={{if this.displayCategory (concat "cat-" this.selectId "-" index)}}
|
|
86
|
+
>
|
|
87
|
+
{{#if this.displayCategory}}
|
|
88
|
+
{{! template-lint-disable no-invalid-role }}
|
|
89
|
+
{{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
|
|
90
|
+
<li
|
|
91
|
+
class="pix-select-options-category__name"
|
|
92
|
+
role="presentation"
|
|
93
|
+
id={{concat "cat-" this.selectId "-" index}}
|
|
94
|
+
>
|
|
95
|
+
{{element.category}}
|
|
96
|
+
</li>
|
|
97
|
+
{{/if}}
|
|
37
98
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<input
|
|
53
|
-
class="pix-select-search__input"
|
|
54
|
-
id={{this.searchId}}
|
|
55
|
-
autocomplete="off"
|
|
56
|
-
tabindex={{if this.isExpanded "0" "-1"}}
|
|
57
|
-
placeholder={{@searchPlaceholder}}
|
|
58
|
-
{{on "input" this.setSearchValue}}
|
|
59
|
-
/>
|
|
60
|
-
</div>
|
|
61
|
-
{{/if}}
|
|
62
|
-
<ul role="listbox" id={{this.listId}} class="pix-select__options">
|
|
63
|
-
<li
|
|
64
|
-
class="pix-select-options-category__option{{unless
|
|
65
|
-
@value
|
|
66
|
-
' pix-select-options-category__option--selected'
|
|
67
|
-
}}{{unless this.displayDefaultOption ' pix-select-options-category__option--hidden'}}"
|
|
68
|
-
role="option"
|
|
69
|
-
tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
|
|
70
|
-
aria-selected={{if @value "false" "true"}}
|
|
71
|
-
{{on "click" (fn this.onChange this.defaultOption)}}
|
|
72
|
-
{{on-enter-action (fn this.onChange this.defaultOption)}}
|
|
73
|
-
{{on-space-action (fn this.onChange this.defaultOption)}}
|
|
74
|
-
>
|
|
75
|
-
{{@placeholder}}
|
|
76
|
-
</li>
|
|
77
|
-
{{#if this.results}}
|
|
78
|
-
{{#if this.displayCategory}}
|
|
79
|
-
{{#each this.results as |element index|}}
|
|
80
|
-
<ul
|
|
81
|
-
class="pix-select-options__category"
|
|
82
|
-
role="group"
|
|
83
|
-
aria-labelledby={{if this.displayCategory (concat "cat-" this.selectId "-" index)}}
|
|
84
|
-
>
|
|
85
|
-
{{#if this.displayCategory}}
|
|
86
|
-
{{! template-lint-disable no-invalid-role }}
|
|
87
|
-
{{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
|
|
88
|
-
<li
|
|
89
|
-
class="pix-select-options-category__name"
|
|
90
|
-
role="presentation"
|
|
91
|
-
id={{concat "cat-" this.selectId "-" index}}
|
|
92
|
-
>
|
|
93
|
-
{{element.category}}
|
|
94
|
-
</li>
|
|
95
|
-
{{/if}}
|
|
99
|
+
{{#each element.options as |option|}}
|
|
100
|
+
<li
|
|
101
|
+
class="pix-select-options-category__option{{if
|
|
102
|
+
(eq option.value @value)
|
|
103
|
+
' pix-select-options-category__option--selected'
|
|
104
|
+
}}"
|
|
105
|
+
role="option"
|
|
106
|
+
tabindex={{if this.isExpanded "0" "-1"}}
|
|
107
|
+
aria-selected={{if (eq option.value @value) "true" "false"}}
|
|
108
|
+
{{on "click" (fn this.onChange option)}}
|
|
109
|
+
{{on-enter-action (fn this.onChange option)}}
|
|
110
|
+
{{on-space-action (fn this.onChange option)}}
|
|
111
|
+
>
|
|
112
|
+
{{option.label}}
|
|
96
113
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
114
|
+
<FaIcon @icon="check" />
|
|
115
|
+
</li>
|
|
116
|
+
{{/each}}
|
|
117
|
+
</ul>
|
|
118
|
+
{{/each}}
|
|
119
|
+
{{else}}
|
|
120
|
+
{{#each this.results as |option|}}
|
|
121
|
+
<li
|
|
122
|
+
class="pix-select-options-category__option{{if
|
|
123
|
+
(eq option.value @value)
|
|
124
|
+
' pix-select-options-category__option--selected'
|
|
125
|
+
}}"
|
|
126
|
+
role="option"
|
|
127
|
+
tabindex={{if this.isExpanded "0" "-1"}}
|
|
128
|
+
aria-selected={{if (eq option.value @value) "true" "false"}}
|
|
129
|
+
{{on "click" (fn this.onChange option)}}
|
|
130
|
+
{{on-enter-action (fn this.onChange option)}}
|
|
131
|
+
{{on-space-action (fn this.onChange this.defaultOption)}}
|
|
132
|
+
>
|
|
133
|
+
{{option.label}}
|
|
111
134
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
{{/each}}
|
|
135
|
+
<FaIcon @icon="check" />
|
|
136
|
+
</li>
|
|
137
|
+
{{/each}}
|
|
138
|
+
{{/if}}
|
|
117
139
|
{{else}}
|
|
118
|
-
{{
|
|
119
|
-
<li
|
|
120
|
-
class="pix-select-options-category__option{{if
|
|
121
|
-
(eq option.value @value)
|
|
122
|
-
' pix-select-options-category__option--selected'
|
|
123
|
-
}}"
|
|
124
|
-
role="option"
|
|
125
|
-
tabindex={{if this.isExpanded "0" "-1"}}
|
|
126
|
-
aria-selected={{if (eq option.value @value) "true" "false"}}
|
|
127
|
-
{{on "click" (fn this.onChange option)}}
|
|
128
|
-
{{on-enter-action (fn this.onChange option)}}
|
|
129
|
-
{{on-space-action (fn this.onChange this.defaultOption)}}
|
|
130
|
-
>
|
|
131
|
-
{{option.label}}
|
|
132
|
-
|
|
133
|
-
<FaIcon @icon="check" />
|
|
134
|
-
</li>
|
|
135
|
-
{{/each}}
|
|
140
|
+
<li class="pix-select__empty-search-message">{{@emptySearchMessage}}</li>
|
|
136
141
|
{{/if}}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
</ul>
|
|
141
|
-
</div>
|
|
142
|
+
</ul>
|
|
143
|
+
</div>
|
|
144
|
+
</PopperJS>
|
|
142
145
|
{{#if @errorMessage}}
|
|
143
146
|
<p class="pix-select__error-message">{{@errorMessage}}</p>
|
|
144
147
|
{{/if}}
|
|
@@ -4,15 +4,6 @@ import { action } from '@storybook/addon-actions';
|
|
|
4
4
|
export const Template = (args) => {
|
|
5
5
|
return {
|
|
6
6
|
template: hbs`
|
|
7
|
-
<style>
|
|
8
|
-
.custom {
|
|
9
|
-
border: 0;
|
|
10
|
-
width: 150px;
|
|
11
|
-
}
|
|
12
|
-
.custom:hover {
|
|
13
|
-
border: 0;
|
|
14
|
-
}
|
|
15
|
-
</style>
|
|
16
7
|
{{#if this.id}}
|
|
17
8
|
<div>
|
|
18
9
|
<label for={{this.id}}>Un label en dehors du composant</label>
|
|
@@ -36,12 +27,50 @@ export const Template = (args) => {
|
|
|
36
27
|
@requiredText={{this.requiredText}}
|
|
37
28
|
@errorMessage={{this.errorMessage}}
|
|
38
29
|
@isDisabled={{this.isDisabled}}
|
|
30
|
+
@placement={{this.placement}}
|
|
39
31
|
/>
|
|
40
32
|
`,
|
|
41
33
|
context: args,
|
|
42
34
|
};
|
|
43
35
|
};
|
|
44
36
|
|
|
37
|
+
export const TemplatePopover = (args) => {
|
|
38
|
+
return {
|
|
39
|
+
template: hbs`
|
|
40
|
+
<div style="display:flex;height:330px">
|
|
41
|
+
<div style="align-self:flex-end">
|
|
42
|
+
{{#if this.id}}
|
|
43
|
+
<div>
|
|
44
|
+
<label for={{this.id}}>Un label en dehors du composant</label>
|
|
45
|
+
</div>
|
|
46
|
+
{{/if}}
|
|
47
|
+
<PixSelect
|
|
48
|
+
@id={{this.id}}
|
|
49
|
+
@className={{this.className}}
|
|
50
|
+
@options={{this.options}}
|
|
51
|
+
@isSearchable={{this.isSearchable}}
|
|
52
|
+
@onChange={{this.onChange}}
|
|
53
|
+
@label={{this.label}}
|
|
54
|
+
@placeholder={{this.placeholder}}
|
|
55
|
+
@hideDefaultOption={{this.hideDefaultOption}}
|
|
56
|
+
@subLabel={{this.subLabel}}
|
|
57
|
+
@searchLabel={{this.searchLabel}}
|
|
58
|
+
@value={{this.value}}
|
|
59
|
+
@searchPlaceholder={{this.searchPlaceholder}}
|
|
60
|
+
@screenReaderOnly={{this.screenReaderOnly}}
|
|
61
|
+
@emptySearchMessage={{this.emptySearchMessage}}
|
|
62
|
+
@requiredText={{this.requiredText}}
|
|
63
|
+
@errorMessage={{this.errorMessage}}
|
|
64
|
+
@isDisabled={{this.isDisabled}}
|
|
65
|
+
@placement={{this.placement}}
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
`,
|
|
70
|
+
context: args,
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
|
|
45
74
|
export const WithId = Template.bind({});
|
|
46
75
|
WithId.args = {
|
|
47
76
|
id: 'custom',
|
|
@@ -168,6 +197,27 @@ WithCategoriesAndSearch.args = {
|
|
|
168
197
|
onChange: action('onChange'),
|
|
169
198
|
};
|
|
170
199
|
|
|
200
|
+
export const WithDropDownAtTheTop = TemplatePopover.bind({});
|
|
201
|
+
WithDropDownAtTheTop.args = {
|
|
202
|
+
options: [
|
|
203
|
+
{ value: '1', label: 'Figues' },
|
|
204
|
+
{ value: '3', label: 'Fraises' },
|
|
205
|
+
{ value: '2', label: 'Bananes' },
|
|
206
|
+
{ value: '4', label: 'Mangues' },
|
|
207
|
+
{ value: '5', label: 'Kaki' },
|
|
208
|
+
{
|
|
209
|
+
value: '6',
|
|
210
|
+
label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
|
|
211
|
+
},
|
|
212
|
+
],
|
|
213
|
+
label: 'JambonFromage',
|
|
214
|
+
placeholder: 'Mon innerText',
|
|
215
|
+
subLabel: 'Mon sous label',
|
|
216
|
+
isSearchable: false,
|
|
217
|
+
onChange: action('onChange'),
|
|
218
|
+
placement: 'top',
|
|
219
|
+
};
|
|
220
|
+
|
|
171
221
|
export const argTypes = {
|
|
172
222
|
options: {
|
|
173
223
|
name: 'options',
|
|
@@ -313,4 +363,15 @@ export const argTypes = {
|
|
|
313
363
|
type: { summary: false },
|
|
314
364
|
},
|
|
315
365
|
},
|
|
366
|
+
placement: {
|
|
367
|
+
name: 'placement',
|
|
368
|
+
description:
|
|
369
|
+
"Permet de placer la dropdown du select par rapport à son bouton. Par défaut, cela s'adapte tout seul.",
|
|
370
|
+
type: { name: 'string', required: false },
|
|
371
|
+
options: ['bottom', 'top', 'left', 'right'],
|
|
372
|
+
table: {
|
|
373
|
+
type: { summary: 'string' },
|
|
374
|
+
defaultValue: { summary: null },
|
|
375
|
+
},
|
|
376
|
+
},
|
|
316
377
|
};
|
|
@@ -53,6 +53,14 @@ Les options sont représentées par un tableau d'objet contenant les propriété
|
|
|
53
53
|
<Story name="WithCategoriesAndSearch" story={stories.WithCategoriesAndSearch} height={200} />
|
|
54
54
|
</Canvas>
|
|
55
55
|
|
|
56
|
+
## WithDropDownAtTheTop
|
|
57
|
+
|
|
58
|
+
Ici nous avons forcé le placement de la dropdown en haut du select mais sachez que ce placement se fait automatiquement par défaut.
|
|
59
|
+
|
|
60
|
+
<Canvas>
|
|
61
|
+
<Story name="WithDropDownAtTheTop" story={stories.WithDropDownAtTheTop} />
|
|
62
|
+
</Canvas>
|
|
63
|
+
|
|
56
64
|
## Usage
|
|
57
65
|
|
|
58
66
|
```html
|
|
@@ -71,6 +79,7 @@ Les options sont représentées par un tableau d'objet contenant les propriété
|
|
|
71
79
|
@screenReaderOnly="{{screenReaderOnly}}"
|
|
72
80
|
@requiredText="{{requiredText}}"
|
|
73
81
|
@errorMessage="{{errorMessage}}"
|
|
82
|
+
@placement="{{placement}}"
|
|
74
83
|
/>
|
|
75
84
|
```
|
|
76
85
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@1024pix/pix-ui",
|
|
3
|
-
"version": "30.
|
|
3
|
+
"version": "30.1.0",
|
|
4
4
|
"description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ember-addon"
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
"ember-cli-htmlbars": "^6.1.1",
|
|
55
55
|
"ember-cli-sass": "^11.0.1",
|
|
56
56
|
"ember-click-outside": "^6.0.1",
|
|
57
|
+
"ember-popperjs": "^3.0.0",
|
|
57
58
|
"ember-truth-helpers": "^3.1.1",
|
|
58
59
|
"lodash.debounce": "^4.0.8"
|
|
59
60
|
},
|