Skip to content

Commit cdc86c7

Browse files
abhinavkrinabhinavkrin
authored
feat(fuselage): Update input pseudo states (#2162)
Signed-off-by: Abhinav Kumar <abhinav@avitechlab.com>
1 parent 73bf4a4 commit cdc86c7

30 files changed

Lines changed: 74 additions & 55 deletions

‎.changeset/input-pseudo-states.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@rocket.chat/fuselage': minor
3+
---
4+
5+
feat(fuselage): Update input pseudo states

‎packages/fuselage-forms/src/__snapshots__/test.spec.tsx.snap‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ exports[`renders WithAutoComplete without crashing 1`] = `
4444
class="rcx-box rcx-box--full rcx-field__row"
4545
>
4646
<div
47-
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
47+
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
4848
>
4949
<div
5050
class="rcx-box rcx-box--full rcx-css-6d871f"
@@ -65,7 +65,7 @@ exports[`renders WithAutoComplete without crashing 1`] = `
6565
>
6666
<i
6767
aria-hidden="true"
68-
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
68+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
6969
>
7070
7171
</i>
@@ -144,7 +144,7 @@ exports[`renders WithAutoCompleteMultiple without crashing 1`] = `
144144
class="rcx-box rcx-box--full rcx-field__row"
145145
>
146146
<div
147-
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
147+
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
148148
>
149149
<div
150150
class="rcx-box rcx-box--full rcx-css-6d871f"
@@ -199,7 +199,7 @@ exports[`renders WithAutoCompleteMultiple without crashing 1`] = `
199199
>
200200
<i
201201
aria-hidden="true"
202-
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
202+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
203203
>
204204
205205
</i>
@@ -449,7 +449,7 @@ exports[`renders WithMultiSelect without crashing 1`] = `
449449
class="rcx-box rcx-box--full rcx-field__row"
450450
>
451451
<div
452-
class="rcx-box rcx-box--full rcx-select"
452+
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
453453
>
454454
<div
455455
class="rcx-box rcx-box--full rcx-css-1sr8su7"

‎packages/fuselage/src/components/AutoComplete/AutoComplete.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@ function AutoComplete<TLabel = ReactNode>({
192192

193193
return (
194194
<Box
195+
animated
195196
rcx-autocomplete
196197
ref={containerRef}
197198
onClick={useStableCallback(() => innerRef.current?.focus())}
@@ -256,7 +257,7 @@ function AutoComplete<TLabel = ReactNode>({
256257
: 'magnifier'
257258
}
258259
size='x20'
259-
color='default'
260+
color='titles-labels'
260261
/>
261262
</Box>
262263
<PositionAnimated visible={optionsAreVisible} anchor={containerRef}>

‎packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`[AutoComplete Rendering] renders CustomItem without crashing 1`] = `
44
<body>
55
<div>
66
<div
7-
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
7+
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
88
>
99
<div
1010
class="rcx-box rcx-box--full rcx-css-6d871f"
@@ -21,7 +21,7 @@ exports[`[AutoComplete Rendering] renders CustomItem without crashing 1`] = `
2121
>
2222
<i
2323
aria-hidden="true"
24-
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
24+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
2525
>
2626
2727
</i>
@@ -35,7 +35,7 @@ exports[`[AutoComplete Rendering] renders CustomSelected without crashing 1`] =
3535
<body>
3636
<div>
3737
<div
38-
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
38+
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
3939
>
4040
<div
4141
class="rcx-box rcx-box--full rcx-css-6d871f"
@@ -120,7 +120,7 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
120120
>
121121
<i
122122
aria-hidden="true"
123-
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
123+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
124124
>
125125
126126
</i>
@@ -134,7 +134,7 @@ exports[`[AutoComplete Rendering] renders Default without crashing 1`] = `
134134
<body>
135135
<div>
136136
<div
137-
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
137+
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
138138
>
139139
<div
140140
class="rcx-box rcx-box--full rcx-css-6d871f"
@@ -151,7 +151,7 @@ exports[`[AutoComplete Rendering] renders Default without crashing 1`] = `
151151
>
152152
<i
153153
aria-hidden="true"
154-
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
154+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
155155
>
156156
157157
</i>
@@ -165,7 +165,7 @@ exports[`[AutoComplete Rendering] renders Disabled without crashing 1`] = `
165165
<body>
166166
<div>
167167
<div
168-
class="rcx-box rcx-box--full rcx-autocomplete disabled rcx-css-t3n91h"
168+
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete disabled rcx-css-t3n91h"
169169
>
170170
<div
171171
class="rcx-box rcx-box--full rcx-css-6d871f"
@@ -183,7 +183,7 @@ exports[`[AutoComplete Rendering] renders Disabled without crashing 1`] = `
183183
>
184184
<i
185185
aria-hidden="true"
186-
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
186+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
187187
>
188188
189189
</i>
@@ -197,7 +197,7 @@ exports[`[AutoComplete Rendering] renders Multiple without crashing 1`] = `
197197
<body>
198198
<div>
199199
<div
200-
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
200+
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
201201
>
202202
<div
203203
class="rcx-box rcx-box--full rcx-css-6d871f"
@@ -248,7 +248,7 @@ exports[`[AutoComplete Rendering] renders Multiple without crashing 1`] = `
248248
>
249249
<i
250250
aria-hidden="true"
251-
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
251+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
252252
>
253253
254254
</i>
@@ -262,7 +262,7 @@ exports[`[AutoComplete Rendering] renders MultipleCustomSelected without crashin
262262
<body>
263263
<div>
264264
<div
265-
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
265+
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
266266
>
267267
<div
268268
class="rcx-box rcx-box--full rcx-css-6d871f"
@@ -447,7 +447,7 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
447447
>
448448
<i
449449
aria-hidden="true"
450-
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
450+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
451451
>
452452
453453
</i>
@@ -461,7 +461,7 @@ exports[`[AutoComplete Rendering] renders WithPlaceholder without crashing 1`] =
461461
<body>
462462
<div>
463463
<div
464-
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
464+
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
465465
>
466466
<div
467467
class="rcx-box rcx-box--full rcx-css-6d871f"
@@ -479,7 +479,7 @@ exports[`[AutoComplete Rendering] renders WithPlaceholder without crashing 1`] =
479479
>
480480
<i
481481
aria-hidden="true"
482-
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
482+
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
483483
>
484484
485485
</i>

‎packages/fuselage/src/components/InputBox/InputBox.styles.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,12 @@ $input-border-radius: theme(
119119
background: transparent;
120120
}
121121
-webkit-text-fill-color: $input-colors-color;
122+
123+
*:disabled &,
124+
&:disabled,
125+
&.disabled {
126+
-webkit-text-fill-color: $input-colors-disabled-color;
127+
}
122128
}
123129

124130
// Firefox shows its own (non-hideable) calendar icon for date inputs, so hide

‎packages/fuselage/src/components/InputBox/mixins.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@
1212
) {
1313
color: $color;
1414

15-
// TODO: fix placeholder performance issue
16-
// &::placeholder {
17-
// color: #{ $placeholder-color };
18-
// }
15+
&::placeholder {
16+
color: $placeholder-color;
17+
}
1918

2019
&.rcx-input-box--placeholder-visible {
2120
color: $placeholder-color;
@@ -35,6 +34,10 @@
3534
&:disabled,
3635
&.disabled {
3736
color: $disabled-color;
37+
38+
&::placeholder {
39+
color: $disabled-color;
40+
}
3841
}
3942
}
4043

‎packages/fuselage/src/components/MultiSelect/MultiSelect.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ function MultiSelect({
152152
return (
153153
<Box
154154
is='div'
155+
animated
155156
rcx-select
156157
className={[error && 'invalid', disabled && 'disabled']}
157158
ref={containerRef}

‎packages/fuselage/src/components/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`renders CustomEmpty without crashing 1`] = `
44
<body>
55
<div>
66
<div
7-
class="rcx-box rcx-box--full rcx-select"
7+
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
88
>
99
<div
1010
class="rcx-box rcx-box--full rcx-css-1sr8su7"
@@ -43,7 +43,7 @@ exports[`renders Default without crashing 1`] = `
4343
<body>
4444
<div>
4545
<div
46-
class="rcx-box rcx-box--full rcx-select"
46+
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
4747
>
4848
<div
4949
class="rcx-box rcx-box--full rcx-css-1sr8su7"
@@ -82,7 +82,7 @@ exports[`renders Disabled without crashing 1`] = `
8282
<body>
8383
<div>
8484
<div
85-
class="rcx-box rcx-box--full rcx-select disabled"
85+
class="rcx-box rcx-box--full rcx-box--animated rcx-select disabled"
8686
disabled=""
8787
>
8888
<div
@@ -123,7 +123,7 @@ exports[`renders Error without crashing 1`] = `
123123
<body>
124124
<div>
125125
<div
126-
class="rcx-box rcx-box--full rcx-select invalid"
126+
class="rcx-box rcx-box--full rcx-box--animated rcx-select invalid"
127127
>
128128
<div
129129
class="rcx-box rcx-box--full rcx-css-1sr8su7"
@@ -162,7 +162,7 @@ exports[`renders WithFilter without crashing 1`] = `
162162
<body>
163163
<div>
164164
<div
165-
class="rcx-box rcx-box--full rcx-select"
165+
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
166166
>
167167
<div
168168
class="rcx-box rcx-box--full rcx-css-1sr8su7"
@@ -200,7 +200,7 @@ exports[`renders WithValue without crashing 1`] = `
200200
<body>
201201
<div>
202202
<div
203-
class="rcx-box rcx-box--full rcx-select"
203+
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
204204
>
205205
<div
206206
class="rcx-box rcx-box--full rcx-css-1sr8su7"

‎packages/fuselage/src/components/PaginatedSelect/PaginatedSelect.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export const PaginatedSelect = ({
8787

8888
return (
8989
<Box
90+
animated
9091
rcx-select
9192
disabled={disabled}
9293
ref={containerRef}
@@ -109,7 +110,7 @@ export const PaginatedSelect = ({
109110
marginInline={4}
110111
rcx-select__item
111112
fontScale='p2m'
112-
color={valueLabel ? 'default' : 'hint'}
113+
color={valueLabel ? 'titles-labels' : 'hint'}
113114
>
114115
{visibleText}
115116
</Box>

‎packages/fuselage/src/components/PaginatedSelect/__snapshots__/PaginatedSelectFiltered.spec.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`[PaginatedSelectFiltered Component] renders Disabled without crashing 1
44
<body>
55
<div>
66
<div
7-
class="rcx-box rcx-box--full rcx-select disabled rcx-css-5gkzmp"
7+
class="rcx-box rcx-box--full rcx-box--animated rcx-select disabled rcx-css-5gkzmp"
88
disabled=""
99
>
1010
<div
@@ -36,7 +36,7 @@ exports[`[PaginatedSelectFiltered Component] renders Errored without crashing 1`
3636
<body>
3737
<div>
3838
<div
39-
class="rcx-box rcx-box--full rcx-select invalid rcx-css-5gkzmp"
39+
class="rcx-box rcx-box--full rcx-box--animated rcx-select invalid rcx-css-5gkzmp"
4040
>
4141
<div
4242
class="rcx-box rcx-box--full rcx-select__wrapper rcx-css-bpb89k"
@@ -66,7 +66,7 @@ exports[`[PaginatedSelectFiltered Component] renders Normal without crashing 1`]
6666
<body>
6767
<div>
6868
<div
69-
class="rcx-box rcx-box--full rcx-select rcx-css-5gkzmp"
69+
class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-5gkzmp"
7070
>
7171
<div
7272
class="rcx-box rcx-box--full rcx-select__wrapper rcx-css-bpb89k"
@@ -96,7 +96,7 @@ exports[`[PaginatedSelectFiltered Component] renders WithRenderItem without cras
9696
<body>
9797
<div>
9898
<div
99-
class="rcx-box rcx-box--full rcx-select rcx-css-5gkzmp"
99+
class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-5gkzmp"
100100
>
101101
<div
102102
class="rcx-box rcx-box--full rcx-select__wrapper rcx-css-bpb89k"

0 commit comments

Comments
 (0)