refactor(avatar)!: use spectrum tokens #1565

yosevu · 2022-12-15T13:22:24Z

Description

Refactor avatar to use spectrum tokens.
Add .spectrum-Avatar-link and focus indicator styles for default variant
Add No Link variant

How and where has this been tested?

Tested in Chrome
Tested in WHCM

Screenshots

To-do list

I have tested these changes in Windows High Contrast mode.
This pull request is ready to merge.

github-actions · 2022-12-22T08:43:51Z

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

bernhard-adobe

Approving here with a minor question for PJ and Jess in terms of content strategy:

https://adobedesign.slack.com/archives/G019JTYMT6H/p1671723449855909

bernhard-adobe · 2022-12-22T15:15:22Z

components/avatar/index.css

- box-sizing: border-box;
- border-width: var(--spectrum-avatar-border-size);
+ top: calc(
+ var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) *


nit. I would place the -2 for both cases on a single line.

pfulton · 2023-01-03T22:00:06Z

Approving here with a minor question for PJ and Jess in terms of content strategy

I don't have a problem with this, as we seem to use his photo in other examples in other components. I can double-check with design folks for the ultimate answer, though.

I pushed up a few more commits here to correct a few things:

Here, I think Yosevu might have just accidentally kept the anchor links in the "no link" examples.
Here, I bumped the version number for the tokens package, and also included the default selector stuff we've been including in the express.css and spectrum.css files.
Here, I restored these modified and removed vars and expressvars files. I don't think these should have been modified or deleted. I'm wondering if Yosevu was having some trouble with style conflicts while he was working on this, but when I restored/reset these files and ran things again, everything looked ok?

lunarfusion

Mostly suggestions, but I think the focus indicator position does need a change.

components/avatar/index.css

pfulton · 2023-01-04T16:15:57Z

Mostly suggestions, but I think the focus indicator position does need a change.

Thanks! I fixed up those things @lunarfusion!

lunarfusion

Changes to calc format and to WHCM.

components/avatar/index.css

pfulton · 2023-01-10T22:26:31Z

@lunarfusion - pushed up some changes to address your most recent feedback. This includes the updates to WHCM and the reinstatement of :focus-within. Thanks!

lunarfusion

Looks good to me! 🚀

bernhard-adobe · 2023-01-11T16:25:38Z

@pfulton @lunarfusion I am adding the new avatar here in a moment. Maybe please don't merge or release yet.

bernhard-adobe · 2023-01-11T16:30:42Z

There we go:

I also added a 2x variant for future use.

Original file is: https://stock.adobe.com/images/attractive-fashionable-young-african-american-female-with-clean-healthy-skin-and-afro-haircut-looking-into-the-distance-with-thoughtful-face-dreaming-of-holidays-while-workin-on-laptop-at-a-cafe/113729455

pfulton · 2023-01-11T17:47:15Z

Thanks @bernhard-adobe!!

pfulton · 2023-01-11T18:15:59Z

Beta released: @spectrum-css/avatar@6.0.0-beta.0

Tracking the integration here: adobe/spectrum-web-components#2844

Westbrook · 2023-01-28T18:48:21Z

components/avatar/index.css

+ }
+}
+
+.spectrum-Avatar:focus-within:not(.is-disabled) .spectrum-Avatar-link {


This could also be: .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible and have the same functional styles, right? The main difference that we've not discussed for :focus-within is that is doesn't match the keyboard heuristics of :focus-visible...

Yeah, that'll work.

And yes, we definitely have a discussion about how best to serve :focus-* to y'all going forward.

Westbrook

Works for SWC! Graduate a stable release and we can get adobe/spectrum-web-components#2844 closed out as well!

BREAKING CHANGE

yosevu requested review from bernhard-adobe, pfulton and lunarfusion December 15, 2022 13:22

yosevu force-pushed the yosevu/css-179-avatar branch 4 times, most recently from efa7a14 to 834e542 Compare December 15, 2022 14:01

yosevu changed the title ~~refactor(avatar!): use spectrum tokens~~ refactor(avatar)!: use spectrum tokens Dec 22, 2022

github-actions bot temporarily deployed to pull request December 22, 2022 08:43 Inactive

bernhard-adobe approved these changes Dec 22, 2022

View reviewed changes

yosevu force-pushed the yosevu/css-179-avatar branch from fe0e3e1 to 272987f Compare December 22, 2022 23:33

github-actions bot temporarily deployed to pull request December 22, 2022 23:40 Inactive

github-actions bot temporarily deployed to pull request January 3, 2023 21:51 Inactive

lunarfusion suggested changes Jan 3, 2023

View reviewed changes

pfulton removed their request for review January 4, 2023 16:16

github-actions bot temporarily deployed to pull request January 4, 2023 16:18 Inactive

github-actions bot temporarily deployed to pull request January 4, 2023 19:52 Inactive

lunarfusion self-requested a review January 5, 2023 20:08

lunarfusion suggested changes Jan 9, 2023

View reviewed changes

components/avatar/index.css Outdated Show resolved Hide resolved

components/avatar/index.css Outdated Show resolved Hide resolved

components/avatar/index.css Outdated Show resolved Hide resolved

github-actions bot temporarily deployed to pull request January 10, 2023 22:30 Inactive

lunarfusion approved these changes Jan 11, 2023

View reviewed changes

github-actions bot temporarily deployed to pull request January 11, 2023 16:35 Inactive

pfulton force-pushed the yosevu/css-179-avatar branch from 08f0887 to 94bf397 Compare January 11, 2023 17:49

pfulton added released-beta Indicates a beta release has been rolled for this PR pending-swc-validation Being reviewed in/by SWC; required for breaking changes labels Jan 11, 2023

Westbrook reviewed Jan 28, 2023

View reviewed changes

pfulton force-pushed the yosevu/css-179-avatar branch from 94bf397 to 23115bd Compare February 3, 2023 18:37

github-actions bot temporarily deployed to pull request February 3, 2023 18:45 Inactive

Westbrook approved these changes Feb 3, 2023

View reviewed changes

pfulton force-pushed the yosevu/css-179-avatar branch from ac4f363 to a66e376 Compare February 6, 2023 14:31

github-actions bot temporarily deployed to pull request February 6, 2023 14:36 Inactive

Yosevu Kilonzo and others added 17 commits February 6, 2023 09:43

refactor(avatar)!: use spectrum tokens

4f39451

BREAKING CHANGE

feat: add focus-indicator examples

5df7591

refactor: clean up styles

e19826d

feat: add No Link example

6f0f2f1

fix(avatar): remove unused imports

82e3d38

style: format css

94a8345

docs(avatar): remove anchor tags in no link examples

75ac3ae

chore(avatar): use latest tokens pkg

052d88e

chore(avatar): restore vars and expressvars files

e106da0

refactor(avatar): fixes and corrections based upon PR review feedback

633cdba

refactor(avatar): prefer focus-ring class & focus-visible to focus

0988bcd

refactor(avatar): a11y changes, syntax updates, & reinstate focus-within

49209eb

feat: default avatar replacement

aa030ea

chore(avatar): use latest deps & manual bump for beta release

0eaa576

refactor(avatar): use focus-visible for linked avatars

a4e329c

chore(avatar): use latest tokens release & bump beta

39b1287

chore(avatar): remove skin.css from story file

883c45d

pfulton force-pushed the yosevu/css-179-avatar branch from a66e376 to 883c45d Compare February 6, 2023 14:44

github-actions bot temporarily deployed to pull request February 6, 2023 14:50 Inactive

pfulton merged commit 8db2337 into main Feb 6, 2023

pfulton deleted the yosevu/css-179-avatar branch February 6, 2023 14:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(avatar)!: use spectrum tokens #1565

refactor(avatar)!: use spectrum tokens #1565

yosevu commented Dec 15, 2022 •

edited

Loading

github-actions bot commented Dec 22, 2022 •

edited

Loading

bernhard-adobe left a comment

bernhard-adobe Dec 22, 2022

pfulton commented Jan 3, 2023

lunarfusion left a comment

pfulton commented Jan 4, 2023 •

edited

Loading

lunarfusion left a comment

pfulton commented Jan 10, 2023

lunarfusion left a comment

bernhard-adobe commented Jan 11, 2023

bernhard-adobe commented Jan 11, 2023

pfulton commented Jan 11, 2023

pfulton commented Jan 11, 2023 •

edited

Loading

Westbrook Jan 28, 2023

pfulton Feb 3, 2023

Westbrook left a comment

refactor(avatar)!: use spectrum tokens #1565

refactor(avatar)!: use spectrum tokens #1565

Conversation

yosevu commented Dec 15, 2022 • edited Loading

Description

How and where has this been tested?

Screenshots

To-do list

github-actions bot commented Dec 22, 2022 • edited Loading

bernhard-adobe left a comment

Choose a reason for hiding this comment

bernhard-adobe Dec 22, 2022

Choose a reason for hiding this comment

pfulton commented Jan 3, 2023

lunarfusion left a comment

Choose a reason for hiding this comment

pfulton commented Jan 4, 2023 • edited Loading

lunarfusion left a comment

Choose a reason for hiding this comment

pfulton commented Jan 10, 2023

lunarfusion left a comment

Choose a reason for hiding this comment

bernhard-adobe commented Jan 11, 2023

bernhard-adobe commented Jan 11, 2023

pfulton commented Jan 11, 2023

pfulton commented Jan 11, 2023 • edited Loading

Westbrook Jan 28, 2023

Choose a reason for hiding this comment

pfulton Feb 3, 2023

Choose a reason for hiding this comment

Westbrook left a comment

Choose a reason for hiding this comment

yosevu commented Dec 15, 2022 •

edited

Loading

github-actions bot commented Dec 22, 2022 •

edited

Loading

pfulton commented Jan 4, 2023 •

edited

Loading

pfulton commented Jan 11, 2023 •

edited

Loading