Skip to content

Conversation

@marktnoonan
Copy link
Contributor

@marktnoonan marktnoonan commented Oct 5, 2021

Additional details

This PR fixes the images in the component testing framework picker, improves the Switch and Button components to be more consistent with the specific variations present in the designs in Figma, and tweaks colors and spacing throughout launchpad to better align with Figma.

In more detail, this PR:

  • Adjusts sizes and colors for our Button component (also removes the icon sizing from the button component as it causes extra height to be added when icons are present, please correct me if this needs to stay)
  • Improves keyboard behavior of the copy button. The button itself is now the next item in the tab order after choosing to install something manually (the rare positive tabindex that makes sense). The offscreen textarea utility used is this component is no longer keyboard-focusable.
  • The Switch is using our design colors and now has switch semantics. It has variations for the 4 sizes in Figma.
  • New shortcuts for a default focus and hocus style have been added. Focus on dark indigo buttons is still a little hard to see but I think that's a think we can return to with Ryan some other time
  • "Select Framework" picker got a little cleanup
  • Button Bar now associates a label with the switch via a name prop
  • Makes "manual install" the only option for InstallDependencies - the hope was to close https://cypress-io.atlassian.net/browse/UNIFY-355 but the image in that ticket is old and there is a new design to implement. Still the changes here are in the right direction so I left them in.
  • Adds hocus styles and keyboard accessibility to the Testing Type cards. The a11y implementation is not idea but didn't want to get too in the weeds. The strings bound under :role previously weren't valid roles, I've renamed that prop to function, it seems like it will come in handy when content arrives for those cards but isn't doing anything atm.
  • Simplifies WizardLayout CSS a lil bit
  • Imports framework SVGs as urls for image tag src values
  • Rearranges the Wizard text in the constants file as the titles and description had gotten jumbled at some point.

How has the user experience changed?

More things match Figma and keyboard behavior is improved, eg: the switch is now represented like this in the accessibility tree:

switch behavior in a11y tree

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Oct 5, 2021

Thanks for taking the time to open a PR!

@JessicaSachs JessicaSachs self-requested a review October 5, 2021 21:33
Copy link
Contributor

@JessicaSachs JessicaSachs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tiny typo that I fixed. Otherwise, good. Mark and I paired on doing this.

Copy link
Contributor

@lmiller1990 lmiller1990 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we verify launchpad CT tests are passing locally before merging? Thanks

@marktnoonan marktnoonan merged commit dfdc537 into unified-desktop-gui Oct 6, 2021
@marktnoonan marktnoonan deleted the UNIFY-378-launchpad-ui-tweaks branch October 6, 2021 15:31
tgriesser added a commit that referenced this pull request Oct 6, 2021
…nent-tests

* unified-desktop-gui:
  chore(launchpad): launchpad UI tweaks (#18369)
tgriesser added a commit that referenced this pull request Oct 6, 2021
…tton

* unified-desktop-gui:
  chore: improving component test infra (#18378)
  chore(launchpad): launchpad UI tweaks (#18369)
tgriesser added a commit that referenced this pull request Oct 6, 2021
* unified-desktop-gui:
  chore: improving component test infra (#18378)
  chore(launchpad): launchpad UI tweaks (#18369)
  feat: wire up add project button (#18320)
  feat(unify): adding larger defaults for the Launchpad window (#18248)
  fix(app): allow launching app dev server w/o relying on `supportFile` to bundle deps (#18354)
  feat(unify): reporter dark theme (#18313)
  feat(launchpad): UNIFY-371 header menu (#18338)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants