@1024pix/pix-ui 13.5.0 → 13.5.1
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
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
{{#if @requiredLabel}}
|
|
5
5
|
<abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
|
|
6
6
|
{{/if}}
|
|
7
|
+
|
|
7
8
|
{{this.label}}
|
|
9
|
+
|
|
10
|
+
{{#if @information}}
|
|
11
|
+
<span class="pix-input__information">{{@information}}</span>
|
|
12
|
+
{{/if}}
|
|
8
13
|
</label>
|
|
9
14
|
{{/if}}
|
|
10
|
-
{{#if @information}}
|
|
11
|
-
<label for={{this.id}} class="pix-input__information">{{@information}}</label>
|
|
12
|
-
{{/if}}
|
|
13
15
|
<div
|
|
14
16
|
class="pix-input-password__container
|
|
15
17
|
{{if @errorMessage 'pix-input-password__error-container'}}
|
|
@@ -27,6 +29,7 @@
|
|
|
27
29
|
aria-label={{this.ariaLabel}}
|
|
28
30
|
aria-required="{{if @requiredLabel true false}}"
|
|
29
31
|
required={{if @requiredLabel true false}}
|
|
32
|
+
aria-describedby={{if @errorMessage "text-input-password-error"}}
|
|
30
33
|
...attributes
|
|
31
34
|
/>
|
|
32
35
|
|
|
@@ -44,6 +47,6 @@
|
|
|
44
47
|
</div>
|
|
45
48
|
|
|
46
49
|
{{#if @errorMessage}}
|
|
47
|
-
<
|
|
50
|
+
<p id="text-input-password-error" class="pix-input__error-message">{{@errorMessage}}</p>
|
|
48
51
|
{{/if}}
|
|
49
52
|
</div>
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
{{#if @requiredLabel}}
|
|
5
5
|
<abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
|
|
6
6
|
{{/if}}
|
|
7
|
+
|
|
7
8
|
{{@label}}
|
|
9
|
+
|
|
10
|
+
{{#if @information}}
|
|
11
|
+
<span class="pix-input__information">{{@information}}</span>
|
|
12
|
+
{{/if}}
|
|
8
13
|
</label>
|
|
9
14
|
{{/if}}
|
|
10
|
-
{{#if @information}}
|
|
11
|
-
<label for={{this.id}} class="pix-input__information">{{@information}}</label>
|
|
12
|
-
{{/if}}
|
|
13
15
|
|
|
14
16
|
<div class="pix-input__container">
|
|
15
17
|
<input
|
|
@@ -18,6 +20,7 @@
|
|
|
18
20
|
value={{@value}}
|
|
19
21
|
aria-required="{{if @requiredLabel true false}}"
|
|
20
22
|
required={{if @requiredLabel true false}}
|
|
23
|
+
aria-describedby={{if @errorMessage "text-input-error"}}
|
|
21
24
|
...attributes
|
|
22
25
|
/>
|
|
23
26
|
|
|
@@ -31,6 +34,6 @@
|
|
|
31
34
|
</div>
|
|
32
35
|
|
|
33
36
|
{{#if @errorMessage}}
|
|
34
|
-
<
|
|
37
|
+
<p id="text-input-error" class="pix-input__error-message">{{@errorMessage}}</p>
|
|
35
38
|
{{/if}}
|
|
36
39
|
</div>
|
|
@@ -6,14 +6,19 @@
|
|
|
6
6
|
position: relative;
|
|
7
7
|
|
|
8
8
|
&__label {
|
|
9
|
-
|
|
9
|
+
font-family: $font-roboto;
|
|
10
|
+
font-size: 0.875rem;
|
|
11
|
+
color: $grey-70;
|
|
12
|
+
margin-bottom: 4px;
|
|
10
13
|
}
|
|
11
14
|
|
|
12
15
|
&__information {
|
|
13
16
|
font-family: $font-roboto;
|
|
14
17
|
font-size: 0.75rem;
|
|
18
|
+
margin-top: 4px;
|
|
15
19
|
color: $blue-zodiac;
|
|
16
|
-
|
|
20
|
+
|
|
21
|
+
display: block;
|
|
17
22
|
}
|
|
18
23
|
|
|
19
24
|
&__container {
|
|
@@ -54,8 +59,12 @@
|
|
|
54
59
|
|
|
55
60
|
&__error-message {
|
|
56
61
|
@include errorMessage();
|
|
57
|
-
margin-
|
|
62
|
+
margin-bottom: 0;
|
|
58
63
|
bottom: calc(-4px - 1px - 0.75rem);
|
|
64
|
+
|
|
65
|
+
&.pix-input__error-message {
|
|
66
|
+
margin-top:4px;
|
|
67
|
+
}
|
|
59
68
|
}
|
|
60
69
|
|
|
61
70
|
input {
|
|
@@ -13,7 +13,7 @@ export const form = (args) => {
|
|
|
13
13
|
<PixMultiSelect
|
|
14
14
|
@title="Votre notation en étoiles..."
|
|
15
15
|
@id="form__pix-mutli-select"
|
|
16
|
-
@label="A quel point aimez vous Pix
|
|
16
|
+
@label="A quel point aimez vous Pix UI ?"
|
|
17
17
|
@onSelect={{onSelect}}
|
|
18
18
|
@selected={{selected}}
|
|
19
19
|
@options={{options}} as |star|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas
|
|
1
|
+
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
|
|
2
2
|
import centered from '@storybook/addon-centered/ember';
|
|
3
3
|
import * as stories from './form.stories.js';
|
|
4
4
|
|
|
@@ -12,5 +12,5 @@ import * as stories from './form.stories.js';
|
|
|
12
12
|
Un formulaire complet avec les composants Pix UI :
|
|
13
13
|
|
|
14
14
|
<Canvas>
|
|
15
|
-
<Story name="Form" story={stories.form} height={
|
|
15
|
+
<Story name="Form" story={stories.form} height={700} />
|
|
16
16
|
</Canvas>
|