Lunarfusion/css 174 breadcrumbs tokens #1569

lunarfusion · 2023-01-04T17:03:47Z

Description

BREAKING CHANGE: This migrates the Breadcrumbs component to core tokens.

Jira issue CSS-174 https://jira.corp.adobe.com/browse/CSS-174

Note: as of 01/04, waiting for decision from design regarding the background color on draggable / focused breadcrumb items.

How and where has this been tested?

Chrome 108 for macOS
Firefox 107 for macOS
Safari 16 for macOS
How this was tested: comparing local build of http://localhost:3000/docs/breadcrumb.html with XD redline and with https://opensource.adobe.com/spectrum-css/breadcrumb.html

Screenshots

To-do list

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.
I have read the CONTRIBUTING document.
I have tested these changes in Windows High Contrast mode.

This pull request is ready to merge.

github-actions · 2023-01-04T17:10:02Z

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

jenndiaz

No blockers, looks really good overall. nice work on this!

a couple of questions, opportunity to update a copyright year and a potentially out of scope accessibility concern.

jenndiaz · 2023-01-25T21:08:16Z

components/breadcrumb/index.css

+
+ /* text regular active item */
+ --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200);
+ --spectrum-breadcrumbs-font-family-current: var(--spectrum-font-family-base); /* placeholder for --spectrum-font-family-default */


Do we want to keep these placeholder comments in here?

Yeah, these are placeholder stand-ins for tokens that are not functional.
When we have encountered a token that is absent and needs to be created immediately or that is non-functional (like --spectrum-font-family-default, which does not point to a true font stack), we create a stand-in token in components > tokens > custom-spectrum > custom-vars.css. These tokens then compile into components > tokens > dist > index.css so they can be used.

I am leaving the placeholder note to have a record of the original token that was assigned for this incase the original token is later repaired and the placeholder/stand-in token needs to be removed.

jenndiaz · 2023-01-25T21:11:33Z

components/breadcrumb/index.css

+ inline-size: 100%;
+ }
+
+ > .spectrum-ActionButton {


Not blocking, would you be able to explain or point to some docs for what > . is doing?

CSS selector, selects all .spectrum-ActionButton elements that are immediate children (first ancestor, not grandchildren) of the parent.

So this will select:

.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item .spectrum-ActionButton

But it will not select:

.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item .spectrum-ActionButton .spectrum-ActionButton

This selector was already in the CSS, and I try to preserve as much existing CSS as possible as long as it still aligns with the designs and is reflective of up to date code standards.

jenndiaz · 2023-01-25T21:14:44Z

components/breadcrumb/themes/express.css

@@ -0,0 +1,17 @@
+/*
+Copyright 2022 Adobe. All rights reserved.


should go ahead and update these years?

✨ Great catch, thank you! Updated.

jenndiaz · 2023-01-25T21:14:53Z

components/breadcrumb/themes/spectrum.css

@@ -0,0 +1,17 @@
+/*
+Copyright 2022 Adobe. All rights reserved.


this year too

✨ Thanks again!

jenndiaz · 2023-01-25T21:27:09Z

components/breadcrumb/metadata/breadcrumb.yml

@@ -57,27 +57,27 @@ examples:
 status: Verified
 markup: |
 <nav>
- <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeL">
+ <ul class="spectrum-Breadcrumbs">
 <li class="spectrum-Breadcrumbs-item">
 <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">


accessibility concern: potentially out of scope since you did not edit these buttons

Having the SVG as the only content of the button and setting aria-hidden"true" results in a button that is empty to screen readers, which I was able to reproduce on Voiceover. Potential solution would be to add a title for the SVG.

Relevant to all open folder svg buttons. I tried to comment each but might of missed a couple.

🎣 Good catch. I started a slack conversation with our Accessibility folks. @jnurthen

jenndiaz · 2023-01-25T21:30:09Z

components/breadcrumb/metadata/breadcrumb.yml

@@ -169,27 +169,27 @@ examples:
 status: Verified
 markup: |
 <nav>
- <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeS spectrum-Breadcrumbs--multiline">
+ <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--multiline">
 <li class="spectrum-Breadcrumbs-item">
 <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
 <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">


same accessibility comment from line 63

jenndiaz · 2023-01-25T21:30:50Z

components/breadcrumb/metadata/breadcrumb.yml

@@ -258,27 +258,27 @@ examples:
 status: Verified
 markup: |
 <nav>
- <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeM">
+ <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--compact">
 <li class="spectrum-Breadcrumbs-item">
 <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">


same accessibility comment from line 63

jenndiaz · 2023-01-25T21:47:00Z

components/breadcrumb/index.css

- find: /--spectrum-breadcrumb(.*)-s-/;
- filter: color;
- replace: --spectrum-breadcrumb$1-;
+ [dir="rtl"] & {


ohh fancy! nice.

Rebase to main

github-actions bot temporarily deployed to pull request January 4, 2023 17:11 Inactive

lunarfusion marked this pull request as ready for review January 4, 2023 22:55

lunarfusion requested review from pfulton and bernhard-adobe January 4, 2023 22:55

github-actions bot temporarily deployed to pull request January 4, 2023 23:00 Inactive

github-actions bot temporarily deployed to pull request January 5, 2023 21:27 Inactive

pfulton approved these changes Jan 23, 2023

View reviewed changes

pfulton removed the request for review from bernhard-adobe January 23, 2023 20:38

lunarfusion force-pushed the lunarfusion/css-174-breadcrumbs-tokens branch from 0c8580c to cd55e10 Compare January 23, 2023 21:11

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 23, 2023

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

pfulton requested a review from jenndiaz January 25, 2023 20:50

jenndiaz approved these changes Jan 25, 2023

View reviewed changes

lunarfusion added 15 commits January 27, 2023 09:25

feat(breadcrumbs)!: initial migration WIP

0e1247d

Rebase to main

feat(breadcrumbs): finished initial token migration

f261d77

feat(breadcrumbs): focus and spacing adjustments

0aa3b4e

feat(breadcrumbs): multiline adjustments

344d73e

feat(breadcrumbs): resolved flex alignments and spacing

de0c2f8

fix(breadcrumbs): correct focus indicator border radius

381dd70

chore(breadcrumbs): update year to 2023

7d7bb82

chore(breadcrumbs): update tokens

8509db8

chore(breadcrumbs): add -mod to custom property stacks

c5dc81b

feat(breadcrumbs): windows high contrast mode

1a4693d

fix(breadcrumbs): disabled text color placeholder

313b208

fix(breadcrumbs): rtl seperator direction

dfb9824

fix(breadcrumbs): focus indicator alignment rtl

ea6fc81

chore(breadcrumbs): final tidy sweap

ef1b4e7

fix(breadcrumbs): correct last-of-type variant nesting

b00e61f

pfulton and others added 3 commits January 27, 2023 09:26

chore(breadcrumbs): manual version bump for beta release

7f16cd0

chore(breadcrumbs): update year in themes

ff00a4b

chore(breadcrumbs): consistant dependency versions

cdb9e00

lunarfusion force-pushed the lunarfusion/css-174-breadcrumbs-tokens branch from d1dd470 to cdb9e00 Compare January 27, 2023 15:26

github-actions bot temporarily deployed to pull request January 27, 2023 15:31 Inactive

fix(breadcrumb): remove dupe devDependencies from package.json

4b470be

github-actions bot temporarily deployed to pull request January 27, 2023 17:48 Inactive

chore(breadcrumb): use migrated actionbutton package

1482ea9

github-actions bot temporarily deployed to pull request January 27, 2023 18:02 Inactive

pfulton merged commit a46f3c3 into main Jan 27, 2023

pfulton deleted the lunarfusion/css-174-breadcrumbs-tokens branch January 27, 2023 20:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lunarfusion/css 174 breadcrumbs tokens #1569

Lunarfusion/css 174 breadcrumbs tokens #1569

lunarfusion commented Jan 4, 2023 •

edited

Loading

github-actions bot commented Jan 4, 2023 •

edited

Loading

jenndiaz left a comment

jenndiaz Jan 25, 2023

lunarfusion Jan 26, 2023

jenndiaz Jan 25, 2023

lunarfusion Jan 26, 2023 •

edited

Loading

jenndiaz Jan 25, 2023

lunarfusion Jan 26, 2023

jenndiaz Jan 25, 2023

lunarfusion Jan 26, 2023

jenndiaz Jan 25, 2023

lunarfusion Jan 26, 2023

jenndiaz Jan 25, 2023

jenndiaz Jan 25, 2023

jenndiaz Jan 25, 2023

		@@ -0,0 +1,17 @@
		/*
		Copyright 2022 Adobe. All rights reserved.

Lunarfusion/css 174 breadcrumbs tokens #1569

Lunarfusion/css 174 breadcrumbs tokens #1569

Conversation

lunarfusion commented Jan 4, 2023 • edited Loading

Description

How and where has this been tested?

Screenshots

To-do list

github-actions bot commented Jan 4, 2023 • edited Loading

jenndiaz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lunarfusion Jan 26, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lunarfusion commented Jan 4, 2023 •

edited

Loading

github-actions bot commented Jan 4, 2023 •

edited

Loading

lunarfusion Jan 26, 2023 •

edited

Loading