search

gravitational / teleport

The easiest, and most secure way to access and protect all of your infrastructure.
https://goteleport.com
GNU Affero General Public License v3.0
17.29k stars 1.73k forks source link

Implement Design System Improvements #37260

Open roraback opened 7 months ago

roraback commented 7 months ago

What would you like Teleport to do? Continue work on the Teleport design system to match the styling, intents, sizes, and interaction states from our Figma design system.

Each interactive component should have the following states for each variant:

### Revise (or add) the following components to match Figma design system
- [x] [Toggle Switches:](https://www.figma.com/file/Gpjs9vjhzUKF1GDbeG9JGE/Application-Design-System?type=design&node-id=8543-43076&mode=design&t=lfboeNMENiqaZygH-4) **_Size:_** lg, sm + **_Interaction states_** (@avatus)
- [ ] https://github.com/gravitational/teleport/issues/42573
- [ ] https://github.com/gravitational/teleport/issues/43175
- [ ] https://github.com/gravitational/teleport/issues/44052
- [ ] https://github.com/gravitational/teleport/issues/44595
- [ ] https://github.com/gravitational/teleport/issues/44596
- [ ] https://github.com/gravitational/teleport/issues/45761
- [ ] https://github.com/gravitational/teleport/issues/45977
- [ ] [Inputs:](https://www.figma.com/file/Gpjs9vjhzUKF1GDbeG9JGE/Application-Design-System?type=design&node-id=8582-10113&mode=design&t=lfboeNMENiqaZygH-4)  _**Size:**_ xs, sm, md, lg + **_Interaction states_**
- [ ] [Textareas](https://www.figma.com/file/Gpjs9vjhzUKF1GDbeG9JGE/Application-Design-System?type=design&node-id=15857-20831&mode=design&t=9UAykjVINlaUSU1n-4): **_Size_**: lg, md, sm + **_Interaction states_**
- [ ] https://github.com/gravitational/teleport/issues/46244
- [ ] https://github.com/gravitational/teleport/issues/44542
- [x] Adjust Dropdown menus so that they open below the triggering element instead of half-covering it. (See "Connect" buttons for an example of this) (@avatus)
- [ ] https://github.com/gravitational/teleport/issues/44874
- [ ] Buttons containing only a single icon (icon buttons?) should be square

What problem does this solve? Brings our Figma and Storybook design systems closer together in styling for a smoother and easier design/engineering handoff, improves accessibility, and modernizes our components.

avatus commented 6 months ago

Adjust Dropdown menus so that they open below the triggering element instead of half-covering it. (See "Connect" buttons for an example of this)

https://github.com/gravitational/teleport/pull/38550