feat(underlay)!: diy migration #2096

jenndiaz · 2023-08-14T19:42:27Z

Description

The DIY migration for Underlay

updates build system
implements --mods
uses custom tokens for animation values
adds Underlay to Storybook
updates Dialog story to use the underlay component

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.

Test Outline

Open the docs site for the dialog component. Scroll to Dialog - Alert Confirmation, Click on the cancel button to close it, then use the Open Alert Confirmation Dialog button to reopen. Inspect underlay compared to the underlay on the live docs site for any design regressions.

Ensure underly color is correct in all 3 theme colors
Animations on close and open should not of changed

Open the storybook site for the Underlay component

controls should all function as expected
styling should match docs site

Open the storybook site for the Dialog component

controls should all function as expected
styling should match docs site

Regression testing

Validate:

A legacy documentation page (such as accordion), including:

The page renders correctly
The page is accessible
The page is responsive

A migrated documentation page (such as action group), including:

The page renders correctly
The page is accessible
The page is responsive

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. ✨

github-actions · 2023-08-14T19:50:36Z

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

jenndiaz · 2023-08-16T15:07:19Z

note: #1862 will need to be updated with any changes to Dialog, Button, and Underlay that this PR brings in.

castastrophe

This looks great from a code-perspective. Haven't seen the rendered pages yet but if VRT passes, this is good to merge too.

castastrophe · 2023-08-16T17:08:50Z

components/dialog/stories/dialog.stories.js

@@ -55,7 +55,7 @@ export default {
 	},
 	parameters: {
 		actions: {
-			handles: [],
+			handles: ["click .spectrum-Dialog button"],


castastrophe · 2023-08-16T17:09:53Z

components/underlay/index.css

-  --spectrum-dialog-confirm-background-entry-animation-delay: 0ms;
-  --spectrum-dialog-confirm-background-exit-animation-ease: cubic-bezier(0.5, 0, 1, 1); /* wrong in DNA */
-  --spectrum-dialog-confirm-background-entry-animation-ease: cubic-bezier(0, 0, 0.40, 1); /* wrong in DNA */
+  --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);   /* Bug: this must be 0ms, not 0 */


Does this work as-is or do we need to do a hardocoded 0ms for now?

It does work as is. I had interrupted this comment as it previously was 0 and it was corrected to be 0ms then here I am just using our custom animation token for it.

I couldn't find the related git blame that brought in the comment. Nor did I see any active Github issues for it. I have removed the comment for now as it doesn't seem relevant any more.

castastrophe · 2023-08-16T17:10:09Z

components/underlay/index.css

-  --spectrum-dialog-confirm-background-exit-animation-ease: cubic-bezier(0.5, 0, 1, 1); /* wrong in DNA */
-  --spectrum-dialog-confirm-background-entry-animation-ease: cubic-bezier(0, 0, 0.40, 1); /* wrong in DNA */
+  --spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);   /* Bug: this must be 0ms, not 0 */
+  --spectrum-underlay-background-exit-animation-ease: cubic-bezier(0.5, 0, 1, 1); /* wrong in DNA */


Is there an issue associated with this so we can track it's update?

not that I am aware of or that I could find.

I however was able to replace each of these with our custom animation tokens

castastrophe · 2023-08-16T17:13:03Z

@jenndiaz Do we need to open an SWC PR with a beta for this one?

mlogsdon18

Just a few things!

components/underlay/index.css

jenndiaz · 2023-08-16T19:12:04Z

@jenndiaz Do we need to open an SWC PR with a beta for this one?

@castastrophe yes I think with how underlay touches multiple other components, a beta release would be a good idea.

pfulton · 2023-08-21T21:37:43Z

Beta released: @spectrum-css/underlay@3.0.0-beta.0

BREAKING CHANGE: migrates Underlay to use `@adobe/spectrum-tokens` Additionally: * chore(underlay): build changes * chore(underlay): add mods * feat(underlay): add to storybook * feat(dialog): use underlay in story * refactor(dialog): story and template * refactor(underlay): use custom animation tokens * chore(underlay): mods * refactor(dialog): remove unneeded handle * fix(underlay): address pr feedback * refactor(underlay): use new token for underlay color * chore(underlay): manual version increase for beta release * chore(underlay): update mods * chore(underlay): remove skin import --------- Co-authored-by: Patrick Fulton <pfulton@adobe.com>

github-actions bot temporarily deployed to pull request August 14, 2023 19:50 Inactive

github-actions bot temporarily deployed to pull request August 15, 2023 20:17 Inactive

github-actions bot temporarily deployed to pull request August 15, 2023 20:42 Inactive

github-actions bot temporarily deployed to pull request August 15, 2023 22:48 Inactive

github-actions bot temporarily deployed to pull request August 15, 2023 23:09 Inactive

jenndiaz marked this pull request as ready for review August 15, 2023 23:37

github-actions bot temporarily deployed to pull request August 15, 2023 23:43 Inactive

castastrophe approved these changes Aug 16, 2023

View reviewed changes

castastrophe added the run_vrt For use on PRs looking to kick off VRT label Aug 16, 2023

github-actions bot removed the run_vrt For use on PRs looking to kick off VRT label Aug 16, 2023

mlogsdon18 reviewed Aug 16, 2023

View reviewed changes

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

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

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

jenndiaz force-pushed the jenndiaz/diy-migration-underlay branch from d62626f to 1e7067b Compare August 16, 2023 19:22

github-actions bot temporarily deployed to pull request August 16, 2023 19:32 Inactive

jenndiaz force-pushed the jenndiaz/diy-migration-underlay branch from 2dd1f0d to 1a44349 Compare August 21, 2023 18:11

github-actions bot temporarily deployed to pull request August 21, 2023 18:18 Inactive

github-actions bot temporarily deployed to pull request August 21, 2023 18:37 Inactive

pfulton force-pushed the main branch from 34193cb to 8c276f8 Compare August 21, 2023 20:34

pfulton added released-beta labels Aug 21, 2023

github-actions bot temporarily deployed to pull request August 21, 2023 21:41 Inactive

jenndiaz force-pushed the jenndiaz/diy-migration-underlay branch 2 times, most recently from e7dbd9a to 71ca623 Compare August 23, 2023 19:10

github-actions bot temporarily deployed to pull request August 23, 2023 19:16 Inactive

jenndiaz force-pushed the jenndiaz/diy-migration-underlay branch 2 times, most recently from 5ceeff2 to 9c9deaf Compare August 28, 2023 15:22

github-actions bot temporarily deployed to pull request August 28, 2023 15:39 Inactive

jenndiaz and others added 13 commits August 28, 2023 13:27

chore(underlay): build changes

e53c487

chore(underlay): add mods

6369311

feat(underlay): add to storybook

04ac6fc

feat(dialog): use underlay in story

3de96cf

refactor(dialog): story and template

6e48c52

refactor(underlay): use custom animation tokens

f70ff04

chore(underlay): mods

716fc00

refactor(dialog): remove unneeded handle

0dbff56

fix(underlay): address pr feedback

2499dd5

refactor(underlay): use new token for underlay color

6b6690f

chore(underlay): manual version increase for beta release

dff5452

chore(underlay): update mods

eb3a93e

chore(underlay): remove skin import

5cfcd49

jenndiaz force-pushed the jenndiaz/diy-migration-underlay branch from 044d1ca to 5cfcd49 Compare August 28, 2023 19:27

github-actions bot temporarily deployed to pull request August 28, 2023 19:35 Inactive

pfulton added the run_vrt For use on PRs looking to kick off VRT label Aug 28, 2023

github-actions bot removed the run_vrt For use on PRs looking to kick off VRT label Aug 28, 2023

pfulton merged commit 2e0651a into main Aug 29, 2023

pfulton deleted the jenndiaz/diy-migration-underlay branch August 29, 2023 13:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(underlay)!: diy migration #2096

feat(underlay)!: diy migration #2096

Uh oh!

jenndiaz commented Aug 14, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Aug 14, 2023 •

edited

Loading

Uh oh!

jenndiaz commented Aug 16, 2023

Uh oh!

castastrophe left a comment

Uh oh!

castastrophe Aug 16, 2023

Uh oh!

castastrophe Aug 16, 2023

Uh oh!

jenndiaz Aug 16, 2023

Uh oh!

castastrophe Aug 16, 2023

Uh oh!

jenndiaz Aug 16, 2023

Uh oh!

castastrophe commented Aug 16, 2023

Uh oh!

mlogsdon18 left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jenndiaz commented Aug 16, 2023

Uh oh!

pfulton commented Aug 21, 2023

Uh oh!

Uh oh!

feat(underlay)!: diy migration #2096

feat(underlay)!: diy migration #2096

Uh oh!

Conversation

jenndiaz commented Aug 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Test Outline

Regression testing

Screenshots

To-do list

Uh oh!

github-actions bot commented Aug 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jenndiaz commented Aug 16, 2023

Uh oh!

castastrophe left a comment

Choose a reason for hiding this comment

Uh oh!

castastrophe Aug 16, 2023

Choose a reason for hiding this comment

Uh oh!

castastrophe Aug 16, 2023

Choose a reason for hiding this comment

Uh oh!

jenndiaz Aug 16, 2023

Choose a reason for hiding this comment

Uh oh!

castastrophe Aug 16, 2023

Choose a reason for hiding this comment

Uh oh!

jenndiaz Aug 16, 2023

Choose a reason for hiding this comment

Uh oh!

castastrophe commented Aug 16, 2023

Uh oh!

mlogsdon18 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jenndiaz commented Aug 16, 2023

Uh oh!

pfulton commented Aug 21, 2023

Uh oh!

Uh oh!

jenndiaz commented Aug 14, 2023 •

edited

Loading

github-actions bot commented Aug 14, 2023 •

edited

Loading