RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

fix(select) select dropdown arrow #1198

Closed kiley-mitti closed 1 year ago

kiley-mitti commented 1 year ago

Brief Description

Fixed the dropdown arrow so that it changes color based on light/dark theme.

JIRA Link

Astro-5888

Related Issue

General Notes

Motivation and Context

the dropdown arrow was not passing contrast accessibility in light mode.

Issues and Limitations

This is deceptively challenging because the arrow here is being generated as an svg background image so it can't take on our normal token variables. masking doesn't work because there are other background linear-gradients and such associated with the look of this. Can't put the dropdown arrow in an ::after psuedoclass because and using css to position it on top of the select box appropriately, but that seemed too fragile. So in the end I created a --dropdown-arrow variable and stuck it in our global variables so that, like status, it can change when light theme is called.

Need to test cherry picking to make sure that it at least has a fallback.

Types of changes

Checklist

changeset-bot[bot] commented 1 year ago

πŸ¦‹ Changeset detected

Latest commit: c08b18da764de65bd2f7aba82b9b5bdc9c6bc8e5

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

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

netlify[bot] commented 1 year ago

Deploy Preview for astro-preview ready!

Name Link
Latest commit c08b18da764de65bd2f7aba82b9b5bdc9c6bc8e5
Latest deploy log https://app.netlify.com/sites/astro-preview/deploys/64c7fd6073d233000887a66e
Deploy Preview https://deploy-preview-1198--astro-preview.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 1 year ago

Deploy Preview for astro-stencil ready!

Name Link
Latest commit c08b18da764de65bd2f7aba82b9b5bdc9c6bc8e5
Latest deploy log https://app.netlify.com/sites/astro-stencil/deploys/64c7fd605518d20008d417be
Deploy Preview https://deploy-preview-1198--astro-stencil.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.