Skip to content
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.

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

[Select,Combobox,MultiSelect] Add disabled states #1250

Closed
6 tasks done
akdetrick opened this issue May 21, 2024 · 2 comments
Closed
6 tasks done

[Select,Combobox,MultiSelect] Add disabled states #1250

akdetrick opened this issue May 21, 2024 · 2 comments
Assignees
Labels
Design System UI-Platform Owned by Platform Team

Comments

@akdetrick
Copy link
Collaborator

akdetrick commented May 21, 2024

Add a disabled state to Combobox, Select, and MultiSelect.

Components using DropdownTrigger should be able to take a disabled prop to pass down to DropdownTrigger.

Uncontrolled updates should be disabled when the component has the disabled prop.

Dropdown triggers should be disabled when the component is disabled.

Design

We should use the styling of TextInput in its disabled state as a guide:

Screenshot 2024-05-21 at 4 50 10 PM

Definition of Done

  • TextInput has an explicit disabled prop documented
  • DropdownTrigger supports a disabled state (see design above)
  • Combobox supports a disabled prop (FOLLOW UP: [downshift] Upgrade downshift to v9 #1251)
  • Select supports a disabled prop
  • MultiSelect supports a disabled prop

Follow up tasks

@akdetrick akdetrick added the UI-Platform Owned by Platform Team label May 21, 2024
@akdetrick akdetrick changed the title [Select,Combobox,MultiSelect,TokenInput] Add disabled states [Select,Combobox,MultiSelect] Add disabled states May 21, 2024
@akdetrick akdetrick self-assigned this May 28, 2024
@akdetrick akdetrick added the Design System label May 28, 2024 — with Linear
Copy link
Collaborator Author

Screenshots

TokenInput:

In a disabled state, we render the chips without a dismiss button and set the background to primary subdued 10%:

Screenshot 2024-05-28 at 1.26.16 PM.png

Screenshot 2024-05-28 at 1.26.11 PM.png

Select:

When disabled, the Select will show current selection (if applicable), and the dropdown indicator will be removed:

Screenshot 2024-05-28 at 2.06.26 PM.png

Screenshot 2024-05-28 at 2.06.39 PM.png

MultiSelect:

Disabled styling is basically identical to a disabled TokenInput

Screenshot 2024-05-28 at 2.44.12 PM.png

Screenshot 2024-05-28 at 2.44.16 PM.png

Copy link
Collaborator Author

@Hillary Could you take a quick look at the above and confirm these look right for disabled styling?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design System UI-Platform Owned by Platform Team
Projects
None yet
Development

No branches or pull requests

1 participant