@1024pix/pix-ui 46.1.0 → 46.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/addon/components/pix-checkbox.hbs +11 -13
- package/addon/components/pix-label.hbs +6 -12
- package/addon/components/pix-label.js +2 -3
- package/addon/components/pix-radio-button.hbs +11 -13
- package/addon/styles/_pix-button-base.scss +8 -5
- package/addon/styles/_pix-checkbox.scss +2 -0
- package/addon/styles/_pix-label.scss +1 -6
- package/addon/styles/_pix-radio-button.scss +2 -0
- package/addon/styles/pix-design-tokens/_typography.scss +18 -2
- package/package.json +1 -1
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
<div class="pix-checkbox {{@class}}">
|
|
2
|
+
<input
|
|
3
|
+
type="checkbox"
|
|
4
|
+
id={{this.id}}
|
|
5
|
+
class={{this.inputClasses}}
|
|
6
|
+
checked={{@checked}}
|
|
7
|
+
aria-disabled={{this.isDisabled}}
|
|
8
|
+
{{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
|
|
9
|
+
...attributes
|
|
10
|
+
/>
|
|
11
|
+
|
|
2
12
|
<PixLabel
|
|
3
13
|
@for={{this.id}}
|
|
4
14
|
@requiredLabel={{@requiredLabel}}
|
|
@@ -7,19 +17,7 @@
|
|
|
7
17
|
@inlineLabel={{true}}
|
|
8
18
|
@screenReaderOnly={{@screenReaderOnly}}
|
|
9
19
|
@isDisabled={{this.isDisabled}}
|
|
10
|
-
@wrappedElement={{true}}
|
|
11
20
|
>
|
|
12
|
-
|
|
13
|
-
<input
|
|
14
|
-
type="checkbox"
|
|
15
|
-
id={{this.id}}
|
|
16
|
-
class={{this.inputClasses}}
|
|
17
|
-
checked={{@checked}}
|
|
18
|
-
aria-disabled={{this.isDisabled}}
|
|
19
|
-
{{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
|
|
20
|
-
...attributes
|
|
21
|
-
/>
|
|
22
|
-
</:inputElement>
|
|
23
|
-
<:default>{{yield to="label"}}</:default>
|
|
21
|
+
{{yield to="label"}}
|
|
24
22
|
</PixLabel>
|
|
25
23
|
</div>
|
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
<label for={{@for}} class={{this.className}} ...attributes>
|
|
2
|
-
{{#if
|
|
3
|
-
{{
|
|
2
|
+
{{#if @requiredLabel}}
|
|
3
|
+
<abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
|
|
4
4
|
{{/if}}
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
{{#if @requiredLabel}}
|
|
8
|
-
<abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
|
|
9
|
-
{{/if}}
|
|
6
|
+
{{yield}}
|
|
10
7
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<span class="pix-label__sub-label">{{@subLabel}}</span>
|
|
15
|
-
{{/if}}
|
|
16
|
-
</span>
|
|
8
|
+
{{#if @subLabel}}
|
|
9
|
+
<span class="pix-label__sub-label">{{@subLabel}}</span>
|
|
10
|
+
{{/if}}
|
|
17
11
|
</label>
|
|
@@ -4,9 +4,8 @@ export default class PixLabel extends Component {
|
|
|
4
4
|
get className() {
|
|
5
5
|
const classes = ['pix-label'];
|
|
6
6
|
|
|
7
|
-
if (this.args.
|
|
8
|
-
if (this.args.inlineLabel
|
|
9
|
-
classes.push('pix-label--inline-label');
|
|
7
|
+
if (this.args.screenReaderOnly) classes.push('screen-reader-only');
|
|
8
|
+
if (this.args.inlineLabel) classes.push('pix-label--inline-label');
|
|
10
9
|
if (this.args.isDisabled) classes.push('pix-label--disabled');
|
|
11
10
|
|
|
12
11
|
const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
|
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
<div class="pix-radio-button {{@class}}">
|
|
2
|
+
<input
|
|
3
|
+
type="radio"
|
|
4
|
+
id={{this.id}}
|
|
5
|
+
class="pix-radio-button__input"
|
|
6
|
+
value={{@value}}
|
|
7
|
+
aria-disabled={{this.isDisabled}}
|
|
8
|
+
{{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
|
|
9
|
+
...attributes
|
|
10
|
+
/>
|
|
11
|
+
|
|
2
12
|
<PixLabel
|
|
3
13
|
@for={{this.id}}
|
|
4
14
|
@requiredLabel={{@requiredLabel}}
|
|
@@ -7,19 +17,7 @@
|
|
|
7
17
|
@screenReaderOnly={{@screenReaderOnly}}
|
|
8
18
|
@isDisabled={{this.isDisabled}}
|
|
9
19
|
@inlineLabel={{true}}
|
|
10
|
-
@wrappedElement={{true}}
|
|
11
20
|
>
|
|
12
|
-
|
|
13
|
-
<input
|
|
14
|
-
type="radio"
|
|
15
|
-
id={{this.id}}
|
|
16
|
-
class="pix-radio-button__input"
|
|
17
|
-
value={{@value}}
|
|
18
|
-
aria-disabled={{this.isDisabled}}
|
|
19
|
-
{{on "click" this.avoidCheckedStateChangeIfIsDisabled}}
|
|
20
|
-
...attributes
|
|
21
|
-
/>
|
|
22
|
-
</:inputElement>
|
|
23
|
-
<:default>{{yield to="label"}}</:default>
|
|
21
|
+
{{yield to="label"}}
|
|
24
22
|
</PixLabel>
|
|
25
23
|
</div>
|
|
@@ -2,14 +2,9 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
|
-
color: var(--pix-neutral-0);
|
|
6
|
-
font-weight: var(--pix-font-bold);
|
|
7
|
-
font-size: 0.875rem;
|
|
8
5
|
white-space: nowrap;
|
|
9
6
|
text-decoration: none;
|
|
10
|
-
background-color: var(--pix-primary-500);
|
|
11
7
|
border: 2px solid transparent;
|
|
12
|
-
border-radius: 25px;
|
|
13
8
|
outline: none;
|
|
14
9
|
cursor: pointer;
|
|
15
10
|
|
|
@@ -37,14 +32,21 @@
|
|
|
37
32
|
}
|
|
38
33
|
|
|
39
34
|
&--size-large {
|
|
35
|
+
@extend %pix-cta-l;
|
|
36
|
+
|
|
40
37
|
padding: var(--pix-spacing-3x) var(--pix-spacing-6x);
|
|
38
|
+
border-radius: 50px;
|
|
41
39
|
}
|
|
42
40
|
|
|
43
41
|
&--size-small {
|
|
42
|
+
@extend %pix-cta-s;
|
|
43
|
+
|
|
44
44
|
padding: var(--pix-spacing-2x) var(--pix-spacing-6x);
|
|
45
|
+
border-radius: 25px;
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
&--primary {
|
|
49
|
+
color: var(--pix-neutral-0);
|
|
48
50
|
background-color: var(--pix-primary-500);
|
|
49
51
|
|
|
50
52
|
&:not([aria-disabled="true"]) {
|
|
@@ -145,6 +147,7 @@
|
|
|
145
147
|
}
|
|
146
148
|
|
|
147
149
|
&--success {
|
|
150
|
+
color: var(--pix-neutral-0);
|
|
148
151
|
background-color: var(--pix-success-500);
|
|
149
152
|
|
|
150
153
|
&:not([aria-disabled="true"]) {
|
|
@@ -3,12 +3,6 @@
|
|
|
3
3
|
color: var(--pix-neutral-900);
|
|
4
4
|
font-weight: var(--pix-font-medium);
|
|
5
5
|
|
|
6
|
-
&--wrapped-element {
|
|
7
|
-
display: flex;
|
|
8
|
-
gap: var(--pix-spacing-3x);
|
|
9
|
-
align-items: center;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
6
|
&--disabled {
|
|
13
7
|
color: var(--pix-neutral-500);
|
|
14
8
|
}
|
|
@@ -27,6 +21,7 @@
|
|
|
27
21
|
|
|
28
22
|
&--inline-label {
|
|
29
23
|
margin: 0;
|
|
24
|
+
padding: 0 var(--pix-spacing-2x);
|
|
30
25
|
font-weight: var(--pix-font-normal);
|
|
31
26
|
}
|
|
32
27
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
// Placeholder pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
|
|
4
4
|
%-pix-title {
|
|
5
|
-
font-weight:
|
|
5
|
+
font-weight: var(--pix-font-bold);
|
|
6
6
|
|
|
7
7
|
// stylelint-disable-next-line custom-property-pattern
|
|
8
8
|
font-family: var(--_pix-font-family-title);
|
|
@@ -79,12 +79,28 @@
|
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
%-pix-body {
|
|
82
|
-
font-weight:
|
|
82
|
+
font-weight: var(--pix-font-normal);
|
|
83
83
|
|
|
84
84
|
// stylelint-disable-next-line custom-property-pattern
|
|
85
85
|
font-family: var(--_pix-font-family-body);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
+
%pix-cta-s {
|
|
89
|
+
@extend %-pix-body;
|
|
90
|
+
|
|
91
|
+
font-weight: var(--pix-font-bold);
|
|
92
|
+
font-size: 0.875rem;
|
|
93
|
+
line-height: 1.429;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
%pix-cta-l {
|
|
97
|
+
@extend %-pix-body;
|
|
98
|
+
|
|
99
|
+
font-weight: var(--pix-font-bold);
|
|
100
|
+
font-size: 1.125rem;
|
|
101
|
+
line-height: 1.556;
|
|
102
|
+
}
|
|
103
|
+
|
|
88
104
|
%pix-body-xs,
|
|
89
105
|
.pix-body-xs {
|
|
90
106
|
@extend %-pix-body;
|