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(avatar): disabled state and whcm #2265

Merged
merged 5 commits into from
Nov 8, 2023

Conversation

jenndiaz
Copy link
Contributor

@jenndiaz jenndiaz commented Nov 6, 2023

Description

Addresses Issue #2236

Previously the disabled avatar was displayed with a link wrapping the image and was styled to appear disabled. This caused some unexpected behavior: the disabled avatar could be clicked, had a cursor change on hover and when viewed in WHCM the disabled component appeared in the same way as the non-disabled variant.

Changes:

  • removed the disabled avatars from the standard variant
  • update storybook to have link by default and be able to toggle to noLink
  • removed high contrast custom property that removed opacity on disabled avatars
  • Updated component description

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

  1. Open the docs site for the avatar component:
  • Disabled avatar is only visible in the No Link variant and has no hover styling
  1. Open the storybook for the avatar component:
  • controls allow you to toggle has link from true to false
  • when disabled is toggled to true the html does not have the <a>

Validation steps

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • VRTs have been run and looked at.
  • Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

  • I have read the contribution guidelines.
  • I have updated relevant storybook stories and templates.
  • I have tested these changes in Windows High Contrast mode.
  • If my change impacts other components, I have tested to make sure they don't break.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

Copy link
Contributor

github-actions bot commented Nov 6, 2023

🚀 Deployed on https://pr-2265--spectrum-css.netlify.app

@github-actions github-actions bot temporarily deployed to pull request November 6, 2023 17:51 Inactive
Copy link
Collaborator

@mdt2 mdt2 left a comment

Choose a reason for hiding this comment

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

Looks good Jenn!

@pfulton pfulton force-pushed the jenndiaz/css-627-avatar-disabled-fix branch from e636e4b to 4d7679e Compare November 8, 2023 14:50
@github-actions github-actions bot temporarily deployed to pull request November 8, 2023 14:54 Inactive
@@ -24,7 +26,18 @@ export const Template = ({
})}
id=${ifDefined(id)}
>
<img class="${rootClass}-image" src=${image} alt=${ifDefined(altText)} />
${when(hasLink, () =>
Copy link
Collaborator

Choose a reason for hiding this comment

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

😍

@pfulton
Copy link
Collaborator

pfulton commented Nov 8, 2023

@castastrophe noting that we'll have a docs site change here!

@pfulton pfulton merged commit 026b03d into main Nov 8, 2023
4 checks passed
@pfulton pfulton deleted the jenndiaz/css-627-avatar-disabled-fix branch November 8, 2023 14:58
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.

3 participants