Skip to content

Commit c04c447

Browse files
jimmyfortinxjimmyfortinx
authored
Merge pull request #155 from ovh-ux/ouiFieldTextarea
Oui field textarea
2 parents 3b04722 + 9ebed06 commit c04c447

File tree

9 files changed

+142
-25
lines changed

9 files changed

+142
-25
lines changed

‎packages/oui-button/_mixins.less‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,18 @@
209209
}
210210
}
211211

212+
.button-dropdown-error() {
213+
background-color: @oui-button-error-background-color;
214+
border: 1px @oui-button-error-border-color solid;
215+
color: @oui-button-error-text-color;
216+
217+
.oui-icon {
218+
&::before {
219+
color: @oui-button-error-text-color;
220+
}
221+
}
222+
}
223+
212224
.button-icon-base(
213225
@icon-selector,
214226
@icon-size: @oui-button-icon-icon-size,

‎packages/oui-button/_variables.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,8 @@
8585

8686
// Button - Large height
8787
@oui-button-large-height-min-height: rem-calc(45);
88+
89+
// Button - Error style
90+
@oui-button-error-background-color: @oui-color-error-fade;
91+
@oui-button-error-border-color: @oui-color-error-light;
92+
@oui-button-error-text-color: @oui-color-error-dark;

‎packages/oui-field/_mixins.less‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
@import '../oui-checkbox/_mixins';
22
@import '../oui-responsive/_mixins';
33
@import '../oui-select/_mixins';
4+
@import '../oui-ui-select/_mixins';
5+
@import '../oui-textarea/_mixins';
46
@import './_variables';
57

68
#oui {
79
.field-base(
810
@selector,
11+
@button-selector,
912
@label-selector,
13+
@input-group-selector,
1014
@checkbox-selector,
1115
@select-selector,
16+
@ui-select-selector,
17+
@textarea-selector,
18+
@custom-component-selector,
1219
@icon-error-selector: @oui-field-error-icon-selector,
1320
@form-controls: @oui-global-base-form-controls
1421
) {
@@ -51,21 +58,24 @@
5158
*/
5259
&-control, &__control {
5360
width: @oui-field-control-default-size;
61+
margin-bottom: @oui-field-control-spacing;
5462
.field-sizes();
5563

64+
// Native form controls
5665
.controls(@index: length(@form-controls)) when(@index > 0) {
5766
.controls(@index - 1);
5867
@control: extract(@form-controls, @index);
5968

6069
> @{control} {
61-
margin-bottom: @oui-field-control-spacing;
70+
margin-bottom: 0;
6271
}
6372
}
6473
.controls();
6574

6675
// Specific cases
67-
> oui-numeric > .oui-input-group {
68-
margin-bottom: @oui-field-control-spacing;
76+
> oui-numeric > .@{input-group-selector},
77+
> oui-select > .@{ui-select-selector} {
78+
margin-bottom: 0;
6979
}
7080
}
7181

@@ -118,6 +128,16 @@
118128
.@{select-selector} {
119129
#oui > .select-error-style();
120130
}
131+
132+
// Custom components specificities
133+
.@{ui-select-selector} {
134+
#oui > .ui-select-container-error-style();
135+
}
136+
137+
.@{textarea-selector} {
138+
background-color: pink;
139+
#oui > .textarea-error-style(@textarea-selector);
140+
}
121141
}
122142
}
123143

‎packages/oui-field/field.less‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,25 @@
33

44
.oui-field {
55
@oui-selector: oui-field;
6+
@oui-button-selector: oui-button;
67
@oui-label-selector: oui-label;
8+
@oui-input-group-selector: oui-input-group;
79
@oui-checkbox-selector: oui-checkbox;
810
@oui-select-selector: oui-select;
11+
@oui-ui-select-selector: oui-ui-select-container;
12+
@oui-textarea-selector: oui-textarea;
13+
@oui-custom-component-selector: oui-field__component;
914

1015
#oui > .field-normalize();
1116
#oui > .field-base(
1217
@oui-selector,
18+
@oui-button-selector,
1319
@oui-label-selector,
20+
@oui-input-group-selector,
1421
@oui-checkbox-selector,
15-
@oui-select-selector
22+
@oui-select-selector,
23+
@oui-ui-select-selector,
24+
@oui-textarea-selector,
25+
@oui-custom-component-selector
1626
);
1727
}

‎packages/oui-textarea/_mixins.less‎

Lines changed: 70 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
border: 1px solid @oui-textarea-border-color;
1717

1818
&__textarea {
19+
#oui > .animate();
20+
1921
display: block;
2022
width: 100%;
2123
resize: none;
@@ -52,20 +54,7 @@
5254

5355
// Set this state when element is focused.
5456
&_active {
55-
border-color: @oui-textarea-border-color-focus;
56-
background-color: @oui-textarea-background-color-focus;
57-
box-shadow: @oui-textarea-shadow-focus;
58-
}
59-
60-
&_error {
61-
border-color: @oui-textarea-border-color-error;
62-
background-color: @oui-textarea-background-color-error;
63-
box-shadow: none;
64-
65-
.@{selector}__footer {
66-
border-color: @oui-textarea-border-color-error;
67-
color: @oui-textarea-footer-error-color;
68-
}
57+
.textarea-focus-style();
6958
}
7059

7160
&_disabled {
@@ -87,18 +76,81 @@
8776
}
8877
}
8978

90-
.textarea-legacy-base() {
91-
#oui > .input-base();
79+
.textarea-error(
80+
@selector
81+
) {
82+
&_error {
83+
.textarea-error-style(@selector);
84+
}
85+
}
9286

87+
.textarea-focus-style() {
88+
#oui > .animate();
89+
90+
border-color: @oui-textarea-border-color-focus;
91+
outline: none;
92+
background-color: @oui-textarea-background-color-focus;
93+
box-shadow: @oui-textarea-shadow-focus;
94+
}
95+
96+
.textarea-error-style(
97+
@selector
98+
) {
99+
border-color: @oui-textarea-border-color-error;
100+
background-color: @oui-textarea-background-color-error;
101+
box-shadow: none;
102+
103+
.@{selector}__footer {
104+
border-color: @oui-textarea-border-color-error;
105+
color: @oui-textarea-footer-error-color;
106+
}
107+
}
108+
109+
.textarea-legacy-base() {
93110
padding: @oui-textarea-field-padding;
94111
font-size: @oui-textarea-font-size;
95112
line-height: @oui-textarea-line-height;
96113
font-weight: @oui-textarea-font-weight;
97114
color: @oui-textarea-color;
115+
116+
&::selection {
117+
background: @oui-textarea-selection-background-color;
118+
color: @oui-textarea-selection-font-color;
119+
}
120+
121+
&::-moz-selection {
122+
background: @oui-textarea-selection-background-color;
123+
color: @oui-textarea-selection-font-color;
124+
}
125+
126+
&:focus {
127+
.textarea-focus-style();
128+
}
98129
}
99130

100-
.textarea-legacy-status() {
101-
#oui > .input-status();
131+
.textarea-legacy-error() {
132+
&:not(:disabled),
133+
&:not(:disabled):hover,
134+
&:not(:disabled):active,
135+
&:not(:disabled):focus {
136+
border-color: @oui-textarea-border-color-error;
137+
background-color: @oui-textarea-background-color-error;
138+
box-shadow: none;
139+
}
140+
141+
&:not(:disabled):focus {
142+
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.35);
143+
}
144+
145+
&::selection {
146+
background: @oui-textarea-selection-background-color-error;
147+
color: #fff;
148+
}
149+
150+
&::-moz-selection {
151+
background: @oui-textarea-selection-background-color-error;
152+
color: #fff;
153+
}
102154
}
103155

104156
.textarea-legacy-inline() {

‎packages/oui-textarea/_variables.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
// Error
3232
@oui-textarea-border-color-error: @oui-color-error-medium;
3333
@oui-textarea-background-color-error: @oui-color-error-fade;
34+
@oui-textarea-selection-background-color-error: @oui-color-error-dark;
3435

3536
// Disable
3637
@oui-textarea-background-color-disabled: @oui-color-grey-1;

‎packages/oui-textarea/textarea.less‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,20 @@
77

88
#oui > .textarea-normalize();
99
#oui > .textarea-base(@oui-textarea-selector);
10+
#oui > .textarea-error(@oui-textarea-selector);
1011
#oui > .field-sizes();
1112
}
1213

1314
/** Legacy styling */
1415
textarea.oui-textarea {
1516
#oui > .textarea-normalize();
1617
#oui > .textarea-legacy-base();
17-
#oui > .textarea-legacy-status();
1818
#oui > .field-sizes();
1919

20+
&_error {
21+
#oui > .textarea-legacy-error();
22+
}
23+
2024
&_inline {
2125
#oui > .textarea-legacy-inline();
2226
}

‎packages/oui-ui-select/_mixins.less‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import '../oui-button/_mixins';
12
@import './_variables';
23

34
#oui {
@@ -8,6 +9,7 @@
89
@input-selector
910
) {
1011
position: relative;
12+
margin: @oui-ui-select-margin;
1113

1214
&.oui-ui-select-container_open {
1315
.ui-select-choices {
@@ -20,7 +22,7 @@
2022
}
2123

2224
.@{button-dropdown-selector} {
23-
margin: @oui-ui-select-button-dropdown-margin;
25+
text-align: left;
2426
max-width: @oui-ui-select-button-dropdown-max-width;
2527
}
2628

@@ -46,6 +48,14 @@
4648
}
4749
}
4850

51+
.ui-select-container-error-style(
52+
@button-selector: @oui-ui-select-button-dropdown-selector
53+
) {
54+
.@{button-selector} {
55+
#oui > .button-dropdown-error();
56+
}
57+
}
58+
4959
.ui-select-choices-base(
5060
@button-selector,
5161
@icon-selector

‎packages/oui-ui-select/_variables.less‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
// Ui-Select
2+
@oui-ui-select-margin: 0 0 rem-calc(20);
3+
14
// Ui-Select - Button
25
// See oui-dropdown__trigger
36
@oui-ui-select-button-dropdown-max-width: rem-calc(500);
4-
@oui-ui-select-button-dropdown-margin: 0 0 rem-calc(20);
7+
@oui-ui-select-button-dropdown-selector: oui-button_dropdown;
58

69
// Ui-Select - Dropdown
710
@oui-ui-select-max-height: rem-calc(200);

0 commit comments

Comments
 (0)