Skip to content

Commit 2e0651a

Browse files
jenndiazpfulton
jenndiaz
and
pfulton
authored
feat(underlay)!: migrate to use spectrum-tokens (#2096)
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>
1 parent 32f122a commit 2e0651a

File tree

10 files changed

+85
-28
lines changed

10 files changed

+85
-28
lines changed

‎components/dialog/stories/dialog.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default {
5555
},
5656
parameters: {
5757
actions: {
58-
handles: [],
58+
handles: ["click .spectrum-Dialog button"],
5959
},
6060
status: {
6161
type: process.env.MIGRATED_PACKAGES.includes("dialog")

‎components/dialog/stories/template.js

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@ import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
33
import { ifDefined } from "lit/directives/if-defined.js";
44
import { when } from "lit/directives/when.js";
5+
import { useArgs } from "@storybook/client-api";
56

7+
import { Template as Underlay } from '@spectrum-css/underlay/stories/template.js';
68
import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
79
import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
810
import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
11+
import { Template as Button } from '@spectrum-css/button/stories/template.js';
912

1013
import "../index.css";
1114
import "../skin.css";
@@ -18,10 +21,13 @@ export const Template = ({
1821
heading,
1922
content = [],
2023
customClasses = [],
24+
onclick,
2125
id,
2226
...globals
2327
}) => {
2428
const { scale } = globals;
29+
const [_, updateArgs] = useArgs();
30+
2531
const Dialog = html`
2632
<div
2733
class=${classMap({
@@ -49,18 +55,38 @@ export const Template = ({
4955
CloseButton({
5056
customClasses: [`${rootClass}-closeButton`],
5157
...globals,
58+
onclick: () => {
59+
updateArgs({ isOpen: !isOpen });
60+
},
5261
})
5362
)}
5463
</div>
5564
</div>
5665
`;
5766

5867
if (showModal) {
59-
return Modal({
60-
...globals,
61-
isOpen,
62-
content: Dialog,
63-
});
68+
return html`
69+
${Underlay({
70+
...globals,
71+
isOpen,
72+
})}
73+
${Button({
74+
...globals,
75+
size: "m",
76+
variant: "secondary",
77+
label: "Click to open Dialog",
78+
treatment: "outline",
79+
customClasses: ['spectrum-CSSExample-overlayShowButton'],
80+
onclick: () => {
81+
updateArgs({ isOpen: !isOpen });
82+
},
83+
})}
84+
${Modal({
85+
...globals,
86+
isOpen,
87+
content: Dialog,
88+
})}
89+
`
6490
} else {
6591
return Dialog;
6692
}

‎components/underlay/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require("@spectrum-css/component-builder");
1+
module.exports = require("@spectrum-css/component-builder-simple");

‎components/underlay/index.css

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,34 +13,47 @@ governing permissions and limitations under the License.
1313
@import '../overlay/index.css';
1414

1515
.spectrum-Underlay {
16-
/* Bug: this must be 0ms, not 0 */
17-
--spectrum-dialog-confirm-background-entry-animation-delay: 0ms;
18-
--spectrum-dialog-confirm-background-exit-animation-ease: cubic-bezier(0.5, 0, 1, 1); /* wrong in DNA */
19-
--spectrum-dialog-confirm-background-entry-animation-ease: cubic-bezier(0, 0, 0.40, 1); /* wrong in DNA */
16+
--spectrum-underlay-background-entry-animation-delay: var(--spectrum-animation-duration-0);
17+
--spectrum-underlay-background-exit-animation-ease: var(--spectrum-animation-ease-in);
18+
--spectrum-underlay-background-entry-animation-ease: var(--spectrum-animation-ease-out);
19+
--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-100);
20+
--spectrum-underlay-background-entry-animation-duration: var(--spectrum-animation-duration-600);
21+
--spectrum-underlay-background-exit-animation-duration: var(--spectrum-animation-duration-300);
22+
--spectrum-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
23+
24+
/* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */
25+
--spectrum-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));;
2026
}
2127

2228
.spectrum-Underlay {
2329
@inherit: %spectrum-overlay;
2430

2531
position: fixed;
26-
top: 0;
27-
right: 0;
28-
bottom: 0;
29-
left: 0;
32+
inset-block: 0;
33+
inset-inline: 0;
34+
35+
background-color: var(--mod-underlay-background-color, var(--spectrum-underlay-background-color));
3036

3137
/* Float above things by default */
3238
z-index: 1;
3339

3440
overflow: hidden;
3541

3642
/* Exit animations */
37-
transition: opacity var(--spectrum-dialog-confirm-background-exit-animation-duration) var(--spectrum-dialog-confirm-background-exit-animation-ease) var(--spectrum-dialog-confirm-background-exit-animation-delay),
38-
visibility 0ms linear calc(var(--spectrum-dialog-confirm-background-exit-animation-delay) + var(--spectrum-dialog-confirm-background-exit-animation-duration));
43+
transition: opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration))
44+
var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease))
45+
var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)),
46+
visibility 0ms
47+
linear calc(
48+
var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) +
49+
var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)));
3950
}
4051

4152
.spectrum-Underlay.is-open {
4253
@inherit: %spectrum-overlay--open;
4354

4455
/* Entry animations */
45-
transition: opacity var(--spectrum-dialog-confirm-background-entry-animation-duration) var(--spectrum-dialog-confirm-background-entry-animation-ease) var(--spectrum-dialog-confirm-background-entry-animation-delay);
56+
transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration))
57+
var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease))
58+
var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay));
4659
}

‎components/underlay/metadata/mods.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
| Modifiable Custom Properties |
2+
| ---------------------------------------------------- |
3+
| `--mod-underlay-background-color` |
4+
| `--mod-underlay-background-entry-animation-delay` |
5+
| `--mod-underlay-background-entry-animation-duration` |
6+
| `--mod-underlay-background-entry-animation-ease` |
7+
| `--mod-underlay-background-exit-animation-delay` |
8+
| `--mod-underlay-background-exit-animation-duration` |
9+
| `--mod-underlay-background-exit-animation-ease` |

‎components/underlay/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/underlay",
3-
"version": "2.1.0",
3+
"version": "3.0.0-beta.0",
44
"description": "The Spectrum CSS underlay component",
55
"license": "Apache-2.0",
66
"author": "Adobe",
@@ -18,11 +18,11 @@
1818
"build": "gulp"
1919
},
2020
"peerDependencies": {
21-
"@spectrum-css/vars": ">=9"
21+
"@spectrum-css/tokens": ">=11"
2222
},
2323
"devDependencies": {
24-
"@spectrum-css/component-builder": "^4.0.14",
25-
"@spectrum-css/vars": "^9.0.8",
24+
"@spectrum-css/component-builder-simple": "^2.0.16",
25+
"@spectrum-css/tokens": "^11.2.0",
2626
"gulp": "^4.0.0"
2727
},
2828
"publishConfig": {

‎components/underlay/stories/template.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { classMap } from 'lit-html/directives/class-map.js';
33
import { styleMap } from 'lit-html/directives/style-map.js';
44

55
import "../index.css";
6-
import "../skin.css";
76

87
export const Template = ({
98
rootClass = "spectrum-Underlay",

‎components/underlay/stories/underlay.stories.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default {
3434

3535
export const Default = Template.bind({});
3636
Default.args = {
37+
isOpen: true,
3738
content: [
3839
"This is a underlay. Don't use it like this. Use it with a Modal and a Dialog.",
3940
],

‎components/underlay/themes/express.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
Unless required by applicable law or agreed to in writing, software distributed under
7+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
8+
OF ANY KIND, either express or implied. See the License for the specific language
9+
governing permissions and limitations under the License.
10+
*/
11+
12+
@container (--system: express) {}

‎components/underlay/skin.css renamed to ‎components/underlay/themes/spectrum.css

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@ Copyright 2023 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
55
of the License at http://www.apache.org/licenses/LICENSE-2.0
6-
76
Unless required by applicable law or agreed to in writing, software distributed under
87
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
98
OF ANY KIND, either express or implied. See the License for the specific language
109
governing permissions and limitations under the License.
1110
*/
1211

13-
.spectrum-Underlay {
14-
/* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */
15-
background: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
16-
}
12+
@container (--system: spectrum) {}
13+

0 commit comments

Comments
 (0)