"Dropdown" component - CSS cleanup (02)

[didoo]

📌 Summary

Some minor cleanup/refactoring of the CSS for the Dropdown component.

🛠️ Detailed description

• re-added back Sass variables
  • removed in 0a974bc / see Dropdown component (feature branch) #66 (comment))
• check that all sizes are in px and not in rem
  • some leftovers of 06e556a + b02b0e8/ see Dropdown component (feature branch) #66 (review))
• added width: max-content to the list so that it doesn’t compress the text
  • see Dropdown component (feature branch) #66 (comment))
  • notice: the reason is that the element has position absolute so no intrinsic width, so this impacts on the flex algorithm of the children (in some cases they don't use the full width, probably the layout algorithm has constrasting requirements)
• removed extra import (in the dummy app) of the typography CSS helper classes
  • it was not only duplicating the import of CSS classes, but also coming after the components CSS, so resetting margin/padding applied to text elements
• replaced typographic tokens with CSS helper classes in “list-item” text elements
  • see Dropdown component (feature branch) #66 (comment))
• un-indented CSS classes where is not needed
  • see Dropdown component (feature branch) #66 (comment))
• removed inline size for the image in the toggle-icon
  • this is to avoid having two distinct places where this size is declared (in CSS and in HTML)
• re-ordered properties alphabetically
• some other small refactorings/cleanups

👀 How to review

👉 Review commit-by-commit

Reviewer's checklist:

• +1 Percy if applicable
• Confirm that PR has a changelog update via Changesets if needed

💬 Please consider using conventional comments when reviewing this PR.

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1202108023378525

[changeset-bot]

⚠️ No Changeset found

Latest commit: 18a44b8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

hds-flight-website – ./

🔍 Inspect: https://vercel.com/hashicorp/hds-flight-website/BQDnGaxv2Z1yMey45jQApdaJqJqm
✅ Preview: https://hds-flight-website-git-dropdown-02-css-cleanup-hashicorp.vercel.app

hds-components – ./

🔍 Inspect: https://vercel.com/hashicorp/hds-components/GE8iCbtvLgSa6cMDanpesTU6qqZg
✅ Preview: https://hds-components-git-dropdown-02-css-cleanup-hashicorp.vercel.app

[MelSumner]

[issue] [a11y] these need to be in relative units to support browser zoom.

The most important reason for using responsive and unitless values in our CSS is for supporting our users that rely on zooming. If you read the Web Content Accessibility Guidelines, our users need to be able to zoom the viewport without loss of content or functionality, or restrictions imposed by CSS values or viewport scaling settings.

In particular, there are a some success criteria to be met:

• WCAG 1.4.4: Users must be able to resize text without assistive technology up to 200 percent, without loss of content or functionality. (Level AA)
• WCAG 1.4.10: Users must be able to resize text without being forced to scroll both horizontally and vertically to read that content. (Level AA)

[didoo]

@MelSumner can you tell me how declaring the size in px or rem would change the outcome in this case (zooming, not changing base font size, which is something we're not able to support yet)?

This is the content at 200% with px

This is the content at 200% with rem

They look exactly the same to me.

[didoo]

As per @Dhaulagiri comment I've opened a distinct issue to discuss this, so we are not blocked in the merging of the other PRs.
#228

[MelSumner]

two small issues, everything else seems correct, although I'm not sure why we're using helper classes? I thought the helper classes were for our users, not us.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
hds-components	✅ Ready (Inspect)	Visit Preview	Apr 19, 2022 at 10:25AM (UTC)
hds-flight-website	✅ Ready (Inspect)	Visit Preview	Apr 19, 2022 at 10:25AM (UTC)

[Dhaulagiri]

I'm going to approve this to unblock the pipeline of PRs that are open, but let's discuss the pixel/rem question and document our decision so we can refer to that in the future.