Skip to content

feat(fuselage): Update input pseudo states #2162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliajforesti merged 4 commits into from
Aug 18, 2026
Merged

feat(fuselage): Update input pseudo states #2162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b28552f
feat(fuselage): Update input pseudo states
abhinavkrin Aug 13, 2026
3523166
test(fuselage): Update input visual regression baselines
abhinavkrin Aug 14, 2026
cf3adbf
feat(fuselage): Match input transitions across all input types
abhinavkrin Aug 16, 2026
957e5cf
Merge branch 'main' into feat/core-2375-input-pseudo-states
juliajforesti Aug 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/input-pseudo-states.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rocket.chat/fuselage': minor
---

feat(fuselage): Update input pseudo states
10 changes: 5 additions & 5 deletions packages/fuselage-forms/src/__snapshots__/test.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ exports[`renders WithAutoComplete without crashing 1`] = `
class="rcx-box rcx-box--full rcx-field__row"
>
<div
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
>
<div
class="rcx-box rcx-box--full rcx-css-6d871f"
Expand All @@ -65,7 +65,7 @@ exports[`renders WithAutoComplete without crashing 1`] = `
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
>
</i>
Expand Down Expand Up @@ -144,7 +144,7 @@ exports[`renders WithAutoCompleteMultiple without crashing 1`] = `
class="rcx-box rcx-box--full rcx-field__row"
>
<div
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
>
<div
class="rcx-box rcx-box--full rcx-css-6d871f"
Expand Down Expand Up @@ -199,7 +199,7 @@ exports[`renders WithAutoCompleteMultiple without crashing 1`] = `
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
>
</i>
Expand Down Expand Up @@ -449,7 +449,7 @@ exports[`renders WithMultiSelect without crashing 1`] = `
class="rcx-box rcx-box--full rcx-field__row"
>
<div
class="rcx-box rcx-box--full rcx-select"
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
>
<div
class="rcx-box rcx-box--full rcx-css-1sr8su7"
Expand Down
3 changes: 2 additions & 1 deletion packages/fuselage/src/components/AutoComplete/AutoComplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ function AutoComplete<TLabel = ReactNode>({

return (
<Box
animated
rcx-autocomplete
ref={containerRef}
onClick={useStableCallback(() => innerRef.current?.focus())}
Expand Down Expand Up @@ -256,7 +257,7 @@ function AutoComplete<TLabel = ReactNode>({
: 'magnifier'
}
size='x20'
color='default'
color='titles-labels'
/>
</Box>
<PositionAnimated visible={optionsAreVisible} anchor={containerRef}>
Expand Down
28 changes: 14 additions & 14 deletions packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`[AutoComplete Rendering] renders CustomItem without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
>
<div
class="rcx-box rcx-box--full rcx-css-6d871f"
Expand All @@ -21,7 +21,7 @@ exports[`[AutoComplete Rendering] renders CustomItem without crashing 1`] = `
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
>
</i>
Expand All @@ -35,7 +35,7 @@ exports[`[AutoComplete Rendering] renders CustomSelected without crashing 1`] =
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
>
<div
class="rcx-box rcx-box--full rcx-css-6d871f"
Expand Down Expand Up @@ -120,7 +120,7 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
>
</i>
Expand All @@ -134,7 +134,7 @@ exports[`[AutoComplete Rendering] renders Default without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
>
<div
class="rcx-box rcx-box--full rcx-css-6d871f"
Expand All @@ -151,7 +151,7 @@ exports[`[AutoComplete Rendering] renders Default without crashing 1`] = `
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
>
</i>
Expand All @@ -165,7 +165,7 @@ exports[`[AutoComplete Rendering] renders Disabled without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-autocomplete disabled rcx-css-t3n91h"
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete disabled rcx-css-t3n91h"
>
<div
class="rcx-box rcx-box--full rcx-css-6d871f"
Expand All @@ -183,7 +183,7 @@ exports[`[AutoComplete Rendering] renders Disabled without crashing 1`] = `
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
>
</i>
Expand All @@ -197,7 +197,7 @@ exports[`[AutoComplete Rendering] renders Multiple without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
>
<div
class="rcx-box rcx-box--full rcx-css-6d871f"
Expand Down Expand Up @@ -248,7 +248,7 @@ exports[`[AutoComplete Rendering] renders Multiple without crashing 1`] = `
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
>
</i>
Expand All @@ -262,7 +262,7 @@ exports[`[AutoComplete Rendering] renders MultipleCustomSelected without crashin
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
>
<div
class="rcx-box rcx-box--full rcx-css-6d871f"
Expand Down Expand Up @@ -447,7 +447,7 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
>
</i>
Expand All @@ -461,7 +461,7 @@ exports[`[AutoComplete Rendering] renders WithPlaceholder without crashing 1`] =
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
class="rcx-box rcx-box--full rcx-box--animated rcx-autocomplete rcx-css-t3n91h"
>
<div
class="rcx-box rcx-box--full rcx-css-6d871f"
Expand All @@ -479,7 +479,7 @@ exports[`[AutoComplete Rendering] renders WithPlaceholder without crashing 1`] =
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-rm4moq"
class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-l5txo2"
>
</i>
Expand Down
6 changes: 6 additions & 0 deletions packages/fuselage/src/components/InputBox/InputBox.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,12 @@ $input-border-radius: theme(
background: transparent;
}
-webkit-text-fill-color: $input-colors-color;

*:disabled &,
&:disabled,
&.disabled {
-webkit-text-fill-color: $input-colors-disabled-color;
}
}

// Firefox shows its own (non-hideable) calendar icon for date inputs, so hide
Expand Down
11 changes: 7 additions & 4 deletions packages/fuselage/src/components/InputBox/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@
) {
color: $color;

// TODO: fix placeholder performance issue
// &::placeholder {
// color: #{ $placeholder-color };
// }
&::placeholder {
color: $placeholder-color;
}

&.rcx-input-box--placeholder-visible {
color: $placeholder-color;
Expand All @@ -35,6 +34,10 @@
&:disabled,
&.disabled {
color: $disabled-color;

&::placeholder {
color: $disabled-color;
}
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/fuselage/src/components/MultiSelect/MultiSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] =
useCursor(index, filteredOptions, internalChanged);

useEffect(reset, [filter]);

Check warning on line 123 in packages/fuselage/src/components/MultiSelect/MultiSelect.tsx

View workflow job for this annotation

GitHub Actions / Build and Test 

React Hook useEffect has a missing dependency: 'reset'. Either include it or remove the dependency array

const innerRef = useRef<HTMLElement>(null);
const anchorRef = useMergedRefs(ref, innerRef);
Expand Down Expand Up @@ -152,6 +152,7 @@
return (
<Box
is='div'
animated
rcx-select
className={[error && 'invalid', disabled && 'disabled']}
ref={containerRef}
Expand Down
12 changes: 6 additions & 6 deletions packages/fuselage/src/components/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`renders CustomEmpty without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select"
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
>
<div
class="rcx-box rcx-box--full rcx-css-1sr8su7"
Expand Down Expand Up @@ -43,7 +43,7 @@ exports[`renders Default without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select"
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
>
<div
class="rcx-box rcx-box--full rcx-css-1sr8su7"
Expand Down Expand Up @@ -82,7 +82,7 @@ exports[`renders Disabled without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select disabled"
class="rcx-box rcx-box--full rcx-box--animated rcx-select disabled"
disabled=""
>
<div
Expand Down Expand Up @@ -123,7 +123,7 @@ exports[`renders Error without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select invalid"
class="rcx-box rcx-box--full rcx-box--animated rcx-select invalid"
>
<div
class="rcx-box rcx-box--full rcx-css-1sr8su7"
Expand Down Expand Up @@ -162,7 +162,7 @@ exports[`renders WithFilter without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select"
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
>
<div
class="rcx-box rcx-box--full rcx-css-1sr8su7"
Expand Down Expand Up @@ -200,7 +200,7 @@ exports[`renders WithValue without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select"
class="rcx-box rcx-box--full rcx-box--animated rcx-select"
>
<div
class="rcx-box rcx-box--full rcx-css-1sr8su7"
Expand Down
3 changes: 2 additions & 1 deletion packages/fuselage/src/components/PaginatedSelect/PaginatedSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export const PaginatedSelect = ({

return (
<Box
animated
rcx-select
disabled={disabled}
ref={containerRef}
Expand All @@ -109,7 +110,7 @@ export const PaginatedSelect = ({
marginInline={4}
rcx-select__item
fontScale='p2m'
color={valueLabel ? 'default' : 'hint'}
color={valueLabel ? 'titles-labels' : 'hint'}
>
{visibleText}
</Box>
Expand Down
8 changes: 4 additions & 4 deletions ...selage/src/components/PaginatedSelect/__snapshots__/PaginatedSelectFiltered.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`[PaginatedSelectFiltered Component] renders Disabled without crashing 1
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select disabled rcx-css-5gkzmp"
class="rcx-box rcx-box--full rcx-box--animated rcx-select disabled rcx-css-5gkzmp"
disabled=""
>
<div
Expand Down Expand Up @@ -36,7 +36,7 @@ exports[`[PaginatedSelectFiltered Component] renders Errored without crashing 1`
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select invalid rcx-css-5gkzmp"
class="rcx-box rcx-box--full rcx-box--animated rcx-select invalid rcx-css-5gkzmp"
>
<div
class="rcx-box rcx-box--full rcx-select__wrapper rcx-css-bpb89k"
Expand Down Expand Up @@ -66,7 +66,7 @@ exports[`[PaginatedSelectFiltered Component] renders Normal without crashing 1`]
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select rcx-css-5gkzmp"
class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-5gkzmp"
>
<div
class="rcx-box rcx-box--full rcx-select__wrapper rcx-css-bpb89k"
Expand Down Expand Up @@ -96,7 +96,7 @@ exports[`[PaginatedSelectFiltered Component] renders WithRenderItem without cras
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-select rcx-css-5gkzmp"
class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-5gkzmp"
>
<div
class="rcx-box rcx-box--full rcx-select__wrapper rcx-css-bpb89k"
Expand Down
4 changes: 2 additions & 2 deletions packages/fuselage/src/components/Select/SelectAria.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,14 @@ export function SelectAria({
>
<Box
is='span'
color={state.selectedItem ? 'default' : 'hint'}
color={state.selectedItem ? 'titles-labels' : 'hint'}
{...valueProps}
{...(small && { fontScale: 'c1' })}
>
{state.selectedItem ? state.selectedItem.rendered : placeholder}
</Box>
<Icon
color='default'
color='titles-labels'
name={state.isOpen ? 'chevron-up' : 'chevron-down'}
size='x20'
/>
Expand Down
3 changes: 2 additions & 1 deletion packages/fuselage/src/components/Select/SelectLegacy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
fn();
}
didMount.current = true;
}, deps || []);

Check warning on line 42 in packages/fuselage/src/components/Select/SelectLegacy.tsx

View workflow job for this annotation

GitHub Actions / Build and Test 

React Hook useEffect has a missing dependency: 'fn'. Either include it or remove the dependency array

Check warning on line 42 in packages/fuselage/src/components/Select/SelectLegacy.tsx

View workflow job for this annotation

GitHub Actions / Build and Test 

React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies
};

export type SelectProps = Omit<BoxProps, 'ref' | 'onChange'> &
Expand Down Expand Up @@ -144,6 +144,7 @@

return (
<Box
animated
rcx-select
disabled={disabled}
ref={containerRef}
Expand Down Expand Up @@ -175,7 +176,7 @@
marginInline={4}
rcx-select__item
fontScale='p2'
color={valueLabel ? 'default' : 'hint'}
color={valueLabel ? 'titles-labels' : 'hint'}
>
{visibleText}
</Box>
Expand Down
1 change: 1 addition & 0 deletions packages/fuselage/src/components/Select/SelectTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export function SelectTrigger({
<Box
{...buttonProps}
id={id}
animated
rcx-select
ref={ref}
is='button'
Expand Down
Loading
Loading