Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix a couple issues with anchor styling #1972

Merged
merged 11 commits into from
Apr 10, 2024
Merged

Conversation

m-akinc
Copy link
Contributor

@m-akinc m-akinc commented Mar 28, 2024

Pull Request

🤨 Rationale

I noticed a few differences between our anchor styling and the Figma design:

  1. Visited links have a distinct color (purple)
  2. Keyboard focus is indicated by an outline rather than double underline
  3. Disabled links should have underlines unless underline-hidden is set
  4. Links with underline-hidden should not have underlines when clicked/active (despite mouse hover)
  5. In the color theme, a clicked/active link should have the same, dim, gray color regardless of whether it has the prominent appearance. (Figma does not actually provide a design for the prominent appearance under the color theme, but we can extrapolate from the other themes.)

👩‍💻 Implementation

I am addressing issues 3-5. Tech debt issue #2011 tracks items 1 and 2.

To simplify things, I rewrote the anchor styles using CSS cascade layers.

🧪 Testing

Storybook snapshots

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

@m-akinc
Copy link
Contributor Author

m-akinc commented Mar 28, 2024

@mollykreis mind buddying this for me?

@m-akinc m-akinc requested a review from mollykreis March 28, 2024 20:15
@m-akinc m-akinc requested a review from mollykreis March 29, 2024 00:11
@m-akinc m-akinc marked this pull request as ready for review April 1, 2024 18:11
@m-akinc m-akinc requested a review from rajsite April 1, 2024 20:39
packages/nimble-components/src/rich-text/viewer/styles.ts Outdated Show resolved Hide resolved
packages/nimble-components/src/anchor/styles.ts Outdated Show resolved Hide resolved
@m-akinc m-akinc enabled auto-merge (squash) April 10, 2024 17:10
@m-akinc m-akinc merged commit 8a76c28 into main Apr 10, 2024
11 checks passed
@m-akinc m-akinc deleted the users/makinc/anchor-style-fixes branch April 10, 2024 17:27
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