Design system <> storybook: Buttons

[eugkuo]

Goal

User story
As a designer/dev,
I want to have a unified design system / storybook instance
so that I can easily update and reference components when designing/developing..

Key result

Small UI/UX improvements

Original requests

Also closes https://github.com/fleetdm/fleet/issues/23415

Context

• Product Designer: @eugkuo

Changes

Product

• [ ] UI changes:
  1. Make a quick link variant for each unique button variant.
  2. Change default "Click here" text to be sentence case.
  3. Button type alert
     1. Disabled color in storybook looks darker than [in figma](https://www.figma.com/design/8oXlYXpgCV1Sn4ek7OworP/%F0%9F%A7%A9-Design-system?node-id=1469-
     2. 15373&t=dBtixqrldiZN9DYo-11)
  4. Button tyle success
     1. Add hover state to storybook
     2. Add active state to storybook
     3. Disabled state in storybook appears darker than in figma
  5. Button style warning
     1. Add hover state to storybook
     2. Add active state to storybook
     3. Disabled stat in storybook appears darker than in figma
  6. Button style text icon
     1. Icon seems to be missing after the text. See figma
     2. Hover and active states appear to be missing.
     3. I've added another button style text icon with a small icon, please add states to storybook.
  7. Button style text link
     1. Active states appears to be missing. See figma.
  8. Icon button
     1. Add from figma.
     2. [
• [x] Developer go through all use cases of current variants

export type ButtonVariant =
  | "brand"
  | "success"
  | "alert"
  | "blue-green"
  | "grey"
  | "warning"
  | "link"
  | "label"
  | "text-link" // Underlines on hover
  | "text-icon"
  | "icon" // Buttons without text
  | "small-icon" // Buttons without text
  | "inverse"
  | "inverse-alert"
  | "block"
  | "unstyled"
  | "unstyled-modal-query"
  | "contextual-nav-item"
  | "small-text-icon"
  | "oversized";

Determine which are:

• unused
• can be combined
• undocumented in storybook
• undocumented in Figma
• should be renamed

Spreadsheet here: https://docs.google.com/spreadsheets/d/1cefBmnPNemcSxLtDpgX_4Gc7od4FDXK755KcEFXzJqo/edit?gid=0#gid=0

• [ ] Work with designer to decide on some of these items since buttons are a widely used component

• [ ] CLI (fleetctl) usage changes: No changes

• [ ] YAML changes: No changes

• [ ] REST API changes: No changes

• [ ] Fleet's agent (fleetd) changes: No changes

• [ ] GitOps mode changes: No changes

• [ ] Activity changes: No changes

• [ ] Permissions changes: No changes

• [ ] Changes to paid features or tiers: No changes

• [ ] Transparency changes: No changes

• [ ] First draft of test plan added

• [ ] Other reference documentation changes: No changes

• [ ] Once shipped, requester has been notified

• [ ] Once shipped, dogfooding issue has been filed

Engineering

• [ ] Test plan is finalized
• [ ] Feature guide changes: N/A
• [ ] Database schema migrations: N/A
• [ ] Load testing: N/A

ℹ️  Please read this issue carefully and understand it. Pay special attention to UI wireframes, especially "dev notes".

QA

Risk assessment

• Requires load testing: No
• Risk level: Medium
• Risk description: Depending on changes might change buttons across the app which might conflict with local code

Test plan

Make sure to go through the list and consider all events that might be related to this story, so we catch edge cases earlier.

1. See links and description above to match

Testing notes

Confirmation

1. [ ] Engineer: Added comment to user story confirming successful completion of test plan.
2. [ ] QA: Added comment to user story confirming successful completion of test plan.

[eugkuo]

@RachelElysia There are a bunch of definitions in storybook that don't seem to correspond to things in the design system in the buttons section. I wonder if these are vestiges of design past and whether we should remove them or hold onto them just in case.

[eugkuo]

@RachelElysia I wasn't entirely certain how to access the different states for some of the button definitions as they don't seem to show rollover or active states in the example area. Not sure if this is b/c they don't exist or b/c I'm doing something.

Also wasn't sure how to access the disabled and loading states.

As a result, a bunch of the above might actually be done; I just couldn't find them. :-)

[eugkuo]

@RachelElysia confirm warning button exists.

[eugkuo]

@RachelElysia Okee. I've made this a story and populated the info for buttons. I've put it in user story review so we can talk about it when we get to it, but feel free to take a look and lmk what you think of how it's written.

I've also linked the button page in storybook to the components in figma. Nice suggestion!

[noahtalerman]

Hey @RachelElysia @mostlikelee just a reminder that these stories are ready to spec. Can you please update the engineering TODOs so we can estimate them? Thanks!

• #27183
• #27185

[RachelElysia]

@noahtalerman Yes! Aiming for EOW since I'm on-call + have a tricky unreleased bug I need to wrap up

[RachelElysia]

@eugkuo Side thought: Sounds like we should get the GitOps Mode tooltip o Design system <> storybook

[RachelElysia]

@eugkuo I just got around to digging into this, we should chat about naming/removal/combination.

Estimate: 3 (solid 3, might be a 5 if there's a lot of chat)

[eugkuo]

we should chat about naming/removal/combination

@RachelElysia Coolio. I added some time on our calendars. LMK if you thnk we need more.

[iansltx]

Please add your planning poker estimate with Zenhub @RachelElysia

[iansltx]

Added an estimate request, which can be filled out once y'all've chatted.

[jmwatts]

QA Notes

Followed UI test plan: Input show/hide and copy icons and copy messages are styled consistently with the same InputFieldHiddenContent component and have larger padding to more easily click on the buttons Updated locations:

• [x] /hosts/manage > Enroll secrets modal (also includes updated edit/delete icons)
• [x] /account > Get API token modal (also updated help text to use built in helpText instead of one off styling, should see no change in UI)

Input copy icon and copy messages are styled consistently with the same InputField component across whole app Updated locations:

• [x] /hosts/manage > Add hosts modal (10+ instances)
• [x] /settings/integrations/calendars > Oauth scopes copy at the bottom
• [x] /settings/integrations/automatic-enrollment/windows (Note: Eugene will talk to Marko about being consistent with copy button here as this one is outside the input field for whatever reason)

Modal close button should see no change in styling, only FE code was updated to use variant "icon" instead of variant "unstyled" Updated locations:

• [x] Spot check all modals throughout app Icons that are on "text-icon" and "icon" buttons should have icons that also darken on-hover and on-click Updated locations:
• [x] Spot check throughout app (examples: /hosts/manage > Edit columns button icon, queries/:id/edit > Show advanced options button icon, /settings/integrations/mdm > Edit button icon) Other icons that had no padding and now have more padding so they're easier to click
• [x] Host filter pill X to close (example: click on a Yes/No host link from /policies/manage and it brings you to hosts/manage with the filter pill showing, or click on any "View all hosts" link and you'll see the filter pill with the X

[fleet-release]

Unified design blooms, Ease in updates, like spring's bloom, Fleet's buttons transform.

[eugkuo]

Verified in storybook.

[fleet-release]

Unified design shines, like a beacon in the cloud. Ease for devs aligns.