@1024pix/pix-ui 46.5.1 → 46.5.2
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.
|
@@ -12,23 +12,24 @@
|
|
|
12
12
|
</PixLabel>
|
|
13
13
|
{{/if}}
|
|
14
14
|
|
|
15
|
-
<div>
|
|
15
|
+
<div class="pix-textarea__container">
|
|
16
16
|
<textarea
|
|
17
17
|
id={{this.id}}
|
|
18
18
|
maxlength={{if @maxlength @maxlength}}
|
|
19
19
|
aria-required="{{if @requiredLabel true false}}"
|
|
20
20
|
required={{if @requiredLabel true false}}
|
|
21
|
-
class="{{if @errorMessage 'pix-textarea--error'}}"
|
|
21
|
+
class="pix-textarea-container__input {{if @errorMessage 'pix-textarea--error'}}"
|
|
22
22
|
{{on "keyup" this.updateValue}}
|
|
23
23
|
...attributes
|
|
24
24
|
>{{@value}}</textarea>
|
|
25
25
|
|
|
26
26
|
{{#if @maxlength}}
|
|
27
|
-
|
|
27
|
+
{{! prettier-ignore }}
|
|
28
|
+
<p class="pix-textarea-container__text-length-indicator">{{this.textLengthIndicator}} / {{@maxlength}}</p>
|
|
28
29
|
{{/if}}
|
|
29
30
|
|
|
30
31
|
{{#if @errorMessage}}
|
|
31
|
-
<label for={{this.id}} class="pix-
|
|
32
|
+
<label for={{this.id}} class="pix-textarea-container__error-message">{{@errorMessage}}</label>
|
|
32
33
|
{{/if}}
|
|
33
34
|
</div>
|
|
34
35
|
|
|
@@ -1,7 +1,20 @@
|
|
|
1
1
|
.pix-textarea {
|
|
2
|
-
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
height: 100%;
|
|
5
|
+
|
|
6
|
+
&__container {
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
flex-grow: 1;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.pix-textarea-container {
|
|
14
|
+
&__input {
|
|
3
15
|
@extend %pix-form-element-state;
|
|
4
16
|
|
|
17
|
+
flex-grow: 1;
|
|
5
18
|
width: 100%;
|
|
6
19
|
padding: 10px var(--pix-spacing-4x);
|
|
7
20
|
color: var(--pix-neutral-900);
|
|
@@ -16,7 +29,7 @@
|
|
|
16
29
|
}
|
|
17
30
|
}
|
|
18
31
|
|
|
19
|
-
|
|
32
|
+
&__text-length-indicator {
|
|
20
33
|
display: flex;
|
|
21
34
|
flex-direction: row-reverse;
|
|
22
35
|
margin-top: 6px;
|
|
@@ -11,6 +11,12 @@ Optionellement, il peut afficher le nombre de caractères tapés ainsi que le no
|
|
|
11
11
|
|
|
12
12
|
<Story of={ComponentStories.textarea} height={150} />
|
|
13
13
|
|
|
14
|
+
## Dimensions
|
|
15
|
+
|
|
16
|
+
Le PixTextarea prend tout l'espace à sa disposition.
|
|
17
|
+
|
|
18
|
+
<Story of={ComponentStories.FullWidth} height={290} />
|
|
19
|
+
|
|
14
20
|
## Accessibilité
|
|
15
21
|
|
|
16
22
|
La propriété label est optionnelle pour le composant.
|
|
@@ -113,6 +113,32 @@ textarea.args = {
|
|
|
113
113
|
value: 'Contenu du textarea',
|
|
114
114
|
};
|
|
115
115
|
|
|
116
|
+
const FullWidthTemplate = (args) => {
|
|
117
|
+
return {
|
|
118
|
+
template: hbs`{{! template-lint-disable no-inline-styles }}
|
|
119
|
+
<div
|
|
120
|
+
style='border: 1px solid var(--pix-neutral-500); background: var(--pix-neutral-20); padding: var(--pix-spacing-4x); width: 500px; height: 250px;'
|
|
121
|
+
>
|
|
122
|
+
<PixTextarea
|
|
123
|
+
@id={{this.id}}
|
|
124
|
+
@value={{this.value}}
|
|
125
|
+
@subLabel={{this.subLabel}}
|
|
126
|
+
@maxlength={{this.maxlength}}
|
|
127
|
+
><:label>{{this.label}}</:label></PixTextarea>
|
|
128
|
+
</div>`,
|
|
129
|
+
context: args,
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
export const FullWidth = FullWidthTemplate.bind({});
|
|
134
|
+
FullWidth.args = {
|
|
135
|
+
id: 'textarea',
|
|
136
|
+
label: 'Label du textarea',
|
|
137
|
+
subLabel: 'Sous-label',
|
|
138
|
+
value: 'Contenu du textarea',
|
|
139
|
+
maxlength: 120,
|
|
140
|
+
};
|
|
141
|
+
|
|
116
142
|
export const textareaWithoutLabel = TemplateWithoutlabel.bind({});
|
|
117
143
|
textareaWithoutLabel.args = {
|
|
118
144
|
id: 'textarea-without-label',
|