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

Implement new inputs and select components #46812

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Conversation

bl-nero
Copy link
Contributor

@bl-nero bl-nero commented Sep 20, 2024

This change:

  • Revamps the existing Input and FieldInput components
  • Revamps the existing Select* and FieldSelect* family of components, including unifying the set of accepted properties and supported features between the components of the family
  • Replaces the concept of "label tooltip" with "helper text" to better align with the UX dictionary and the actual placement of the helper text
  • Tweaks the existing UI in necessary places.

Figma: inputs, dropdowns

This is a large PR, so it's best to review it commit by commit. I decided to lump both input and select changes together, since they frequently appear together and testing these changes together saved a lot of time.

Screenshot 2024-09-20 at 18 28 59
Screenshot 2024-09-20 at 18 29 46
Screenshot 2024-09-20 at 18 30 25
Screenshot 2024-09-20 at 18 30 51
Screenshot 2024-09-20 at 18 31 50
Screenshot 2024-09-20 at 18 32 25

Caveats:

  • I took liberty to implement a small size for the select control, even though it wasn't designed, for consistency with inputs (and there was at least one place that required it).
  • There's still a separate implementation of SelectCreatable inside teleport/Discover/Shared/SelectCreatable, but I don't want to make this PR bigger than it already is.

Fixes #46611
Needs to be merged together with https://github.com/gravitational/teleport.e/pull/5052.

Tested by inspecting all storybook entries and making sure that layouts are fine and don't break when they show validation errors. A couple of screens were also tested on the real Web and Connect UI.

Note: since this PR is the largest and latest of the highly-visible UI changes, it bears the changelog line; however, this has been gradually introduced to v17 across a multitude of PRs. To see the entire development history, see all subissues of #37260.

Changelog: Refreshed the Web and Teleport Connect UI design.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement the new inputs
1 participant