@1024pix/pix-ui 23.1.1 → 23.2.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 +21 -0
- package/addon/components/pix-select.hbs +15 -16
- package/addon/components/pix-select.js +22 -1
- package/addon/styles/_colors.scss +1 -0
- package/addon/styles/_form.scss +11 -0
- package/addon/styles/_pix-banner.scss +12 -0
- package/addon/styles/_pix-button-base.scss +127 -46
- package/addon/styles/_pix-icon-button.scss +4 -6
- package/addon/styles/_pix-select.scss +10 -0
- package/app/stories/pix-select.stories.js +9 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Pix-UI Changelog
|
|
2
2
|
|
|
3
|
+
## v23.2.0 (16/12/2022)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### :rocket: Amélioration
|
|
7
|
+
- [#271](https://github.com/1024pix/pix-ui/pull/271) [FEATURE] Revue du design des boutons (PIX-6218)
|
|
8
|
+
|
|
9
|
+
## v23.1.2 (16/12/2022)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### :bug: Correction
|
|
13
|
+
- [#308](https://github.com/1024pix/pix-ui/pull/308) [BUGFIX] Support de l'état `disabled` et correction de la taille de l'élement Pix Select
|
|
14
|
+
|
|
15
|
+
### :coffee: Autre
|
|
16
|
+
- [#310](https://github.com/1024pix/pix-ui/pull/310) [DOCS] Ajout infos v20.2.4 au changelog
|
|
17
|
+
|
|
3
18
|
## v23.1.1 (15/12/2022)
|
|
4
19
|
|
|
5
20
|
|
|
@@ -90,6 +105,12 @@ Ember v4 obligatoire.
|
|
|
90
105
|
- [#278](https://github.com/1024pix/pix-ui/pull/278) [BREAKING CHANGES][TECH] Améliorer le composant PixMultiSelect (Pix-6025)
|
|
91
106
|
- [#266](https://github.com/1024pix/pix-ui/pull/266) [BREAKING CHANGES][FEATURE] Créer un nouveau PixSelect accessible basé sur PixDropdown/PixSelect (Pix-6018)
|
|
92
107
|
|
|
108
|
+
## v20.2.4 (16/12/2022)
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
### :coffee: Autre
|
|
112
|
+
- [f9a35c](https://github.com/1024pix/pix-ui/commit/f9a35c4787dc2ae6c7fa62e2cb538bfec84982a9) Relaxer nos version Node.js et npm
|
|
113
|
+
|
|
93
114
|
## v20.2.3 (15/11/2022)
|
|
94
115
|
|
|
95
116
|
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
{{on "click" this.toggleDropdown}}
|
|
32
32
|
aria-expanded={{this.isAriaExpanded}}
|
|
33
33
|
aria-controls={{this.listId}}
|
|
34
|
+
aria-disabled={{@isDisabled}}
|
|
34
35
|
>
|
|
35
36
|
{{this.placeholder}}
|
|
36
37
|
|
|
@@ -59,22 +60,20 @@
|
|
|
59
60
|
</div>
|
|
60
61
|
{{/if}}
|
|
61
62
|
<div role="listbox" id={{this.listId}} class="pix-select__options">
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
</li>
|
|
77
|
-
{{/if}}
|
|
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.isExpanded "0" "-1"}}
|
|
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>
|
|
78
77
|
{{#if this.results}}
|
|
79
78
|
{{#if this.displayCategory}}
|
|
80
79
|
{{#each this.results as |element index|}}
|
|
@@ -41,6 +41,9 @@ export default class PixSelect extends Component {
|
|
|
41
41
|
if (this.args.errorMessage) {
|
|
42
42
|
classes.push('pix-select-button--error');
|
|
43
43
|
}
|
|
44
|
+
if (this.args.isDisabled) {
|
|
45
|
+
classes.push('pix-select-button--disabled');
|
|
46
|
+
}
|
|
44
47
|
return classes.join(' ');
|
|
45
48
|
}
|
|
46
49
|
|
|
@@ -103,6 +106,7 @@ export default class PixSelect extends Component {
|
|
|
103
106
|
@action
|
|
104
107
|
showDropdown(event) {
|
|
105
108
|
event.preventDefault();
|
|
109
|
+
if (this.args.isDisabled) return;
|
|
106
110
|
|
|
107
111
|
this.isExpanded = true;
|
|
108
112
|
}
|
|
@@ -118,6 +122,8 @@ export default class PixSelect extends Component {
|
|
|
118
122
|
|
|
119
123
|
@action
|
|
120
124
|
onChange(option, event) {
|
|
125
|
+
if (this.args.isDisabled) return;
|
|
126
|
+
|
|
121
127
|
this.args.onChange(option.value);
|
|
122
128
|
|
|
123
129
|
this.hideDropdown(event);
|
|
@@ -156,6 +162,21 @@ export default class PixSelect extends Component {
|
|
|
156
162
|
const checkIconWidth = 16;
|
|
157
163
|
const listWidth = document.getElementById(this.listId).getBoundingClientRect().width;
|
|
158
164
|
const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
|
|
159
|
-
|
|
165
|
+
|
|
166
|
+
const className = `sizing-select-${this.selectId}`;
|
|
167
|
+
this.createClass(`.${className}`, `width: ${selectWidth}rem;`);
|
|
168
|
+
|
|
169
|
+
const element = document.getElementById(`container-${this.selectId}`);
|
|
170
|
+
|
|
171
|
+
element.className = element.className + ' ' + className;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
createClass(name, rules) {
|
|
175
|
+
var style = document.createElement('style');
|
|
176
|
+
style.type = 'text/css';
|
|
177
|
+
document.getElementsByTagName('head')[0].appendChild(style);
|
|
178
|
+
|
|
179
|
+
if (!(style.sheet || {}).insertRule) (style.styleSheet || style.sheet).addRule(name, rules);
|
|
180
|
+
else style.sheet.insertRule(name + '{' + rules + '}', 0);
|
|
160
181
|
}
|
|
161
182
|
}
|
package/addon/styles/_form.scss
CHANGED
|
@@ -5,6 +5,17 @@
|
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
@mixin hoverFormElementDisabled() {
|
|
9
|
+
&:hover {
|
|
10
|
+
box-shadow: inset 0px 0px 0px 0.6px $pix-neutral-70;
|
|
11
|
+
background-color: $pix-neutral-20;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@mixin formElementDisabled() {
|
|
16
|
+
background-color: $pix-neutral-20;
|
|
17
|
+
}
|
|
18
|
+
|
|
8
19
|
@mixin focusFormElement() {
|
|
9
20
|
&:focus {
|
|
10
21
|
border-color: $pix-primary;
|
|
@@ -38,6 +38,10 @@
|
|
|
38
38
|
background-color: $pix-primary-10;
|
|
39
39
|
color: $pix-primary-70;
|
|
40
40
|
}
|
|
41
|
+
|
|
42
|
+
&:focus:enabled {
|
|
43
|
+
outline-color: $pix-primary-70;
|
|
44
|
+
}
|
|
41
45
|
}
|
|
42
46
|
}
|
|
43
47
|
|
|
@@ -53,6 +57,10 @@
|
|
|
53
57
|
background-color: $pix-warning-10;
|
|
54
58
|
color: $pix-warning-70;
|
|
55
59
|
}
|
|
60
|
+
|
|
61
|
+
&:focus:enabled {
|
|
62
|
+
outline-color: $pix-warning-70;
|
|
63
|
+
}
|
|
56
64
|
}
|
|
57
65
|
}
|
|
58
66
|
|
|
@@ -68,6 +76,10 @@
|
|
|
68
76
|
background-color: $pix-error-10;
|
|
69
77
|
color: $pix-error-70;
|
|
70
78
|
}
|
|
79
|
+
|
|
80
|
+
&:focus:enabled {
|
|
81
|
+
outline-color: $pix-error-70;
|
|
82
|
+
}
|
|
71
83
|
}
|
|
72
84
|
}
|
|
73
85
|
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
letter-spacing: 0.028rem;
|
|
10
10
|
cursor: pointer;
|
|
11
11
|
background-color: $pix-primary;
|
|
12
|
-
border:
|
|
12
|
+
border: 1px solid transparent;
|
|
13
|
+
outline: none;
|
|
13
14
|
display: flex;
|
|
14
15
|
justify-content: center;
|
|
15
16
|
align-items: center;
|
|
@@ -40,105 +41,185 @@
|
|
|
40
41
|
cursor: not-allowed;
|
|
41
42
|
}
|
|
42
43
|
|
|
43
|
-
|
|
44
|
-
background-color: $
|
|
45
|
-
border-color: $backgroundColor;
|
|
44
|
+
&--background-blue {
|
|
45
|
+
background-color: $pix-primary;
|
|
46
46
|
|
|
47
47
|
&:not(.pix-button--disabled) {
|
|
48
|
-
&:hover
|
|
48
|
+
&:hover {
|
|
49
|
+
background-color: $pix-primary-60;
|
|
50
|
+
}
|
|
51
|
+
|
|
49
52
|
&:focus,
|
|
50
53
|
&:focus-visible {
|
|
51
|
-
background-color:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
outline: none;
|
|
54
|
+
background-color: $pix-primary-60;
|
|
55
|
+
outline: 1px solid $pix-neutral-0;
|
|
56
|
+
outline-offset: -4px;
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
&:active {
|
|
58
|
-
background-color:
|
|
60
|
+
background-color: $pix-primary-70;
|
|
61
|
+
outline: none;
|
|
59
62
|
}
|
|
60
63
|
}
|
|
61
64
|
}
|
|
62
65
|
|
|
63
|
-
&--background-blue {
|
|
64
|
-
@include colorizeBackground($pix-primary, $pix-primary);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
66
|
&--background-green {
|
|
68
|
-
|
|
67
|
+
background-color: $pix-success-60;
|
|
68
|
+
|
|
69
|
+
&:not(.pix-button--disabled) {
|
|
70
|
+
&:hover {
|
|
71
|
+
background-color: $pix-success-70;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&:focus,
|
|
75
|
+
&:focus-visible {
|
|
76
|
+
background-color: $pix-success-70;
|
|
77
|
+
outline: 1px solid $pix-neutral-0;
|
|
78
|
+
outline-offset: -4px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&:active {
|
|
82
|
+
background-color: $pix-success-80;
|
|
83
|
+
outline: none;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
69
86
|
}
|
|
70
87
|
|
|
71
88
|
&--background-yellow {
|
|
72
89
|
color: $pix-neutral-100;
|
|
73
|
-
|
|
90
|
+
background-color: $pix-warning-40;
|
|
91
|
+
|
|
92
|
+
&:not(.pix-button--disabled) {
|
|
93
|
+
&:hover {
|
|
94
|
+
background-color: $pix-warning-50;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&:focus,
|
|
98
|
+
&:focus-visible {
|
|
99
|
+
background-color: $pix-warning-50;
|
|
100
|
+
outline: 1px solid $pix-neutral-0;
|
|
101
|
+
outline-offset: -4px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&:active {
|
|
105
|
+
background-color: $pix-warning-60;
|
|
106
|
+
outline: none;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
74
109
|
}
|
|
75
110
|
|
|
76
111
|
&--background-red {
|
|
77
112
|
color: $pix-neutral-0;
|
|
78
|
-
|
|
113
|
+
background-color: $pix-error-70;
|
|
114
|
+
|
|
115
|
+
&:not(.pix-button--disabled) {
|
|
116
|
+
&:hover {
|
|
117
|
+
background-color: $pix-error-80;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&:focus,
|
|
121
|
+
&:focus-visible {
|
|
122
|
+
background-color: $pix-error-70;
|
|
123
|
+
outline: 1px solid $pix-neutral-0;
|
|
124
|
+
outline-offset: -4px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&:active {
|
|
128
|
+
background-color: $pix-error-90;
|
|
129
|
+
outline: none;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
79
132
|
}
|
|
80
133
|
|
|
81
134
|
&--background-grey {
|
|
82
|
-
|
|
135
|
+
color: $pix-neutral-90;
|
|
136
|
+
background-color: $pix-neutral-20;
|
|
137
|
+
|
|
138
|
+
&:not(.pix-button--disabled) {
|
|
139
|
+
&:hover {
|
|
140
|
+
background-color: $pix-neutral-22;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&:focus,
|
|
144
|
+
&:focus-visible {
|
|
145
|
+
background-color: $pix-neutral-90;
|
|
146
|
+
color: $pix-neutral-0;
|
|
147
|
+
outline: 1px solid $pix-neutral-0;
|
|
148
|
+
outline-offset: -4px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&:active {
|
|
152
|
+
background-color: $pix-neutral-25;
|
|
153
|
+
color: $pix-neutral-90;
|
|
154
|
+
outline: none;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
83
157
|
}
|
|
84
158
|
|
|
85
159
|
/* deprecated in favor of --background-transparent-light + --border */
|
|
86
160
|
&--background-transparent {
|
|
87
161
|
background-color: transparent;
|
|
88
162
|
color: $pix-neutral-50;
|
|
89
|
-
border:
|
|
163
|
+
border: 1px solid $pix-neutral-50;
|
|
90
164
|
}
|
|
91
165
|
|
|
92
166
|
&--background-transparent-light {
|
|
93
|
-
background-color: transparent;
|
|
94
|
-
border-color: transparent;
|
|
95
167
|
color: $pix-neutral-90;
|
|
168
|
+
background-color: transparent;
|
|
169
|
+
|
|
170
|
+
&.pix-button--border {
|
|
171
|
+
border: 1px solid $pix-neutral-50;
|
|
172
|
+
}
|
|
96
173
|
|
|
97
174
|
&:not(.pix-button--disabled) {
|
|
98
|
-
&:hover
|
|
175
|
+
&:hover {
|
|
176
|
+
background-color: $pix-neutral-60;
|
|
177
|
+
color: $pix-neutral-0;
|
|
178
|
+
border: 1px solid transparent;
|
|
179
|
+
}
|
|
180
|
+
|
|
99
181
|
&:focus,
|
|
100
182
|
&:focus-visible {
|
|
101
|
-
background-color:
|
|
102
|
-
|
|
183
|
+
background-color: $pix-neutral-90;
|
|
184
|
+
color: $pix-neutral-0;
|
|
185
|
+
outline: 1px solid $pix-neutral-0;
|
|
186
|
+
outline-offset: -4px;
|
|
103
187
|
}
|
|
104
188
|
|
|
105
189
|
&:active {
|
|
106
|
-
background-color:
|
|
107
|
-
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
&.pix-button--border {
|
|
111
|
-
border-color: $pix-neutral-50;
|
|
112
|
-
|
|
113
|
-
&:not(.pix-button--disabled) {
|
|
114
|
-
&:hover,
|
|
115
|
-
&:active {
|
|
116
|
-
border-color: $pix-neutral-80;
|
|
117
|
-
}
|
|
190
|
+
background-color: $pix-neutral-70;
|
|
191
|
+
outline: none;
|
|
118
192
|
}
|
|
119
193
|
}
|
|
120
194
|
}
|
|
121
195
|
|
|
122
196
|
&--background-transparent-dark {
|
|
123
|
-
background-color: transparent;
|
|
124
|
-
border-color: transparent;
|
|
125
197
|
color: $pix-neutral-0;
|
|
198
|
+
background-color: transparent;
|
|
199
|
+
|
|
200
|
+
&.pix-button--border {
|
|
201
|
+
border: 1px solid $pix-neutral-0;
|
|
202
|
+
}
|
|
126
203
|
|
|
127
204
|
&:not(.pix-button--disabled) {
|
|
128
|
-
&:hover
|
|
205
|
+
&:hover {
|
|
206
|
+
background-color: $pix-neutral-10;
|
|
207
|
+
color: $pix-neutral-90;
|
|
208
|
+
border: 1px solid transparent;
|
|
209
|
+
}
|
|
210
|
+
|
|
129
211
|
&:focus,
|
|
130
212
|
&:focus-visible {
|
|
131
|
-
background-color:
|
|
132
|
-
|
|
213
|
+
background-color: $pix-neutral-10;
|
|
214
|
+
color: $pix-neutral-90;
|
|
215
|
+
outline: 1px solid $pix-neutral-90;
|
|
216
|
+
outline-offset: -4px;
|
|
133
217
|
}
|
|
134
218
|
|
|
135
219
|
&:active {
|
|
136
|
-
background-color:
|
|
220
|
+
background-color: $pix-neutral-20;
|
|
221
|
+
outline: none;
|
|
137
222
|
}
|
|
138
223
|
}
|
|
139
|
-
|
|
140
|
-
&.pix-button--border {
|
|
141
|
-
border-color: $pix-neutral-0;
|
|
142
|
-
}
|
|
143
224
|
}
|
|
144
225
|
}
|
|
@@ -19,22 +19,20 @@
|
|
|
19
19
|
|
|
20
20
|
&:hover:enabled {
|
|
21
21
|
background-color: $pix-neutral-20;
|
|
22
|
-
|
|
23
|
-
border: 0;
|
|
22
|
+
outline: 0;
|
|
24
23
|
color: $pix-neutral-60;
|
|
25
24
|
}
|
|
26
25
|
|
|
27
26
|
&:focus:enabled {
|
|
28
27
|
background-color: $pix-neutral-60;
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
outline: 1px solid $pix-neutral-0;
|
|
29
|
+
outline-offset: -3px;
|
|
31
30
|
color: $pix-neutral-0;
|
|
32
31
|
}
|
|
33
32
|
|
|
34
33
|
&:active:enabled {
|
|
35
34
|
background-color: $pix-neutral-22;
|
|
36
|
-
|
|
37
|
-
border: 0;
|
|
35
|
+
outline: 0;
|
|
38
36
|
color: $pix-neutral-60;
|
|
39
37
|
}
|
|
40
38
|
|
|
@@ -99,6 +99,11 @@
|
|
|
99
99
|
@include hoverFormElement();
|
|
100
100
|
@include focusWithinFormElement();
|
|
101
101
|
|
|
102
|
+
&--disabled {
|
|
103
|
+
@include formElementDisabled();
|
|
104
|
+
@include hoverFormElementDisabled();
|
|
105
|
+
}
|
|
106
|
+
|
|
102
107
|
&--error {
|
|
103
108
|
@include formElementInError();
|
|
104
109
|
}
|
|
@@ -156,6 +161,11 @@
|
|
|
156
161
|
opacity: 1;
|
|
157
162
|
}
|
|
158
163
|
}
|
|
164
|
+
|
|
165
|
+
&--hidden {
|
|
166
|
+
visibility: hidden;
|
|
167
|
+
height: 0;
|
|
168
|
+
}
|
|
159
169
|
}
|
|
160
170
|
}
|
|
161
171
|
|
|
@@ -34,6 +34,7 @@ export const Template = (args) => {
|
|
|
34
34
|
@emptySearchMessage={{this.emptySearchMessage}}
|
|
35
35
|
@requiredText={{this.requiredText}}
|
|
36
36
|
@errorMessage={{this.errorMessage}}
|
|
37
|
+
@isDisabled={{this.isDisabled}}
|
|
37
38
|
/>
|
|
38
39
|
`,
|
|
39
40
|
context: args,
|
|
@@ -303,4 +304,12 @@ export const argTypes = {
|
|
|
303
304
|
type: { summary: 'string' },
|
|
304
305
|
},
|
|
305
306
|
},
|
|
307
|
+
isDisabled: {
|
|
308
|
+
name: 'isDisabled',
|
|
309
|
+
description: "Permet de désactiver l'affichage des options possible",
|
|
310
|
+
type: { name: 'boolean', required: false },
|
|
311
|
+
table: {
|
|
312
|
+
type: { summary: false },
|
|
313
|
+
},
|
|
314
|
+
},
|
|
306
315
|
};
|