Skip to content

Commit 0b83f13

Browse files
TarunAdobepfulton
TarunAdobe
and
pfulton
authored
feat(modal)!: diy migration (#2164)
BREAKING CHANGE: migrates Modal to use `@adobe/spectrum-tokens` Additionally: * feat(modal)!: migrate to spectrum tokens * chore(tokens): add modal custom tokens chore(modal): fixed indentation index.css chore(modal): added mod variables chore(modal): updated package version chore(modal): updated css to use custom tokens for animation chore: updated css properties * docs(modal): regenerate mods --------- Co-authored-by: Patrick Fulton <pfulton@adobe.com>
1 parent 0331dae commit 0b83f13

File tree

9 files changed

+68
-49
lines changed

9 files changed

+68
-49
lines changed

‎components/modal/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/modal/index.css

Lines changed: 35 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,20 @@ governing permissions and limitations under the License.
1313
@import "../overlay/index.css";
1414

1515
.spectrum-Modal {
16-
--spectrum-dialog-confirm-vertical-offset: -2vh;
17-
1816
/* Bug: this must be 0ms, not 0 */
19-
--spectrum-dialog-confirm-exit-animation-delay: 0ms;
20-
21-
/* Distance between top and bottom of dialog and edge of window for fullscreen dialog */
22-
--spectrum-dialog-fullscreen-margin: 32px;
23-
--spectrum-dialog-max-height: 90vh;
24-
--spectrum-dialog-max-width: 90%;
17+
--spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);
18+
19+
/* Distance between top and bottom of modal and edge of window for fullscreen modal */
20+
--spectrum-modal-fullscreen-margin: 32px;
21+
--spectrum-modal-max-height: 90vh;
22+
--spectrum-modal-max-width: 90%;
23+
24+
--spectrum-modal-background-color: var(--spectrum-gray-100);
25+
--spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
26+
--spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
27+
--spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
28+
--spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
29+
--spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100);
2530
}
2631

2732
/* Used to position the modal */
@@ -55,8 +60,7 @@ governing permissions and limitations under the License.
5560
z-index: 2;
5661

5762
/* Be invisible by default */
58-
transition: visibility 0ms linear
59-
var(--spectrum-global-animation-duration-100);
63+
transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-modal-transition-animation-duration));
6064

6165
&.is-open {
6266
visibility: visible;
@@ -67,60 +71,52 @@ governing permissions and limitations under the License.
6771
@inherit: %spectrum-overlay;
6872

6973
/* Start offset by the animation distance */
70-
transform: translateY(
71-
var(--spectrum-dialog-confirm-entry-animation-distance)
72-
);
74+
transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance)));
7375

7476
/* Appear above underlay */
7577
z-index: 2;
7678

7779
/* Don't be bigger than the screen */
78-
max-block-size: var(--spectrum-dialog-max-height);
79-
max-inline-size: var(--spectrum-dialog-max-width);
80+
max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height));
81+
max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width));
82+
83+
background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
8084

8185
/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
82-
border-radius: var(
83-
--spectrum-dialog-confirm-border-radius,
84-
var(--spectrum-corner-radius-100)
85-
);
86+
border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius));
8687
overflow: hidden;
8788
outline: none; /* Firefox shows outline */
8889
pointer-events: auto;
8990

9091
/* Exit animations */
91-
transition: opacity var(--spectrum-dialog-confirm-exit-animation-duration)
92-
cubic-bezier(0.5, 0, 1, 1)
93-
var(--spectrum-dialog-confirm-exit-animation-delay),
92+
transition: opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in)
93+
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)),
9494
visibility 0ms linear
9595
calc(
96-
var(--spectrum-dialog-confirm-exit-animation-delay) +
97-
var(--spectrum-dialog-confirm-exit-animation-duration)
96+
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
97+
var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
9898
),
9999
transform 0ms linear
100100
calc(
101-
var(--spectrum-dialog-confirm-exit-animation-delay) +
102-
var(--spectrum-dialog-confirm-exit-animation-duration)
101+
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
102+
var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
103103
);
104104

105105
&.is-open {
106106
@inherit: %spectrum-overlay--open;
107107

108108
/* Entry animations */
109-
transition: transform
110-
var(--spectrum-dialog-confirm-entry-animation-duration)
111-
cubic-bezier(0, 0, 0.4, 1)
112-
var(--spectrum-dialog-confirm-entry-animation-delay),
113-
opacity var(--spectrum-dialog-confirm-entry-animation-duration)
114-
cubic-bezier(0, 0, 0.4, 1)
115-
var(--spectrum-dialog-confirm-entry-animation-delay);
109+
transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
110+
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
111+
opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
112+
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
116113

117114
transform: translateY(0);
118115
}
119116
}
120117

121118
/* Responsive modals will fill the screen on small viewports */
122-
@media only screen and (max-device-width: 400px),
123-
only screen and (max-device-height: 350px) {
119+
@media only screen and (max-device-width: 400px), only screen and (max-device-height: 350px) {
124120
.spectrum-Modal--responsive {
125121
inline-size: 100%;
126122
height: 100%;
@@ -138,10 +134,10 @@ governing permissions and limitations under the License.
138134
/** @unofficial */
139135
.spectrum-Modal--fullscreen {
140136
position: fixed;
141-
left: var(--spectrum-dialog-fullscreen-margin);
142-
top: var(--spectrum-dialog-fullscreen-margin);
143-
right: var(--spectrum-dialog-fullscreen-margin);
144-
bottom: var(--spectrum-dialog-fullscreen-margin);
137+
inset-inline-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
138+
inset-block-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
139+
inset-inline-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
140+
inset-block-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
145141
max-inline-size: none;
146142
max-height: none;
147143
}

‎components/modal/metadata/mods.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
| Modifiable Custom Properties |
2+
| ---------------------------------------------- |
3+
| `--mod-modal-background-color` |
4+
| `--mod-modal-confirm-border-radius` |
5+
| `--mod-modal-confirm-entry-animation-delay` |
6+
| `--mod-modal-confirm-entry-animation-distance` |
7+
| `--mod-modal-confirm-entry-animation-duration` |
8+
| `--mod-modal-confirm-exit-animation-delay` |
9+
| `--mod-modal-confirm-exit-animation-duration` |
10+
| `--mod-modal-fullscreen-margin` |
11+
| `--mod-modal-max-height` |
12+
| `--mod-modal-max-width` |
13+
| `--mod-modal-transition-animation-duration` |

‎components/modal/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -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.17",
25+
"@spectrum-css/tokens": "^11.3.4",
2626
"gulp": "^4.0.0"
2727
},
2828
"publishConfig": {

‎components/modal/stories/template.js

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

44
import "../index.css";
5-
import "../skin.css";
65

76
export const Template = ({
87
rootClass = "spectrum-Modal",

‎components/modal/skin.css renamed to ‎components/modal/themes/express.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +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-Modal {
14-
background: var(--spectrum-gray-100);
12+
@container (--system: express) {
1513
}

‎components/modal/themes/spectrum.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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: spectrum) {
13+
}

‎components/tokens/custom-spectrum/custom-large-vars.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,8 @@ governing permissions and limitations under the License.
8787
--spectrum-treeview-item-indentation-large: 25px;
8888
--spectrum-treeview-item-indentation-extra-large: 30px;
8989
--spectrum-treeview-indicator-inset-block-start: 6px;
90+
9091
--spectrum-dialog-confirm-entry-animation-distance: 25px;
91-
9292
--spectrum-dialog-confirm-hero-height: 160px;
9393
--spectrum-dialog-confirm-border-radius: 5px;
9494
--spectrum-dialog-confirm-title-text-size: 19px;

‎components/tokens/custom-spectrum/custom-medium-vars.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ governing permissions and limitations under the License.
8686
--spectrum-treeview-item-indentation-large: 20px;
8787
--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
8888
--spectrum-treeview-indicator-inset-block-start: 5px;
89+
8990
--spectrum-dialog-confirm-entry-animation-distance: 20px;
90-
9191
--spectrum-dialog-confirm-hero-height: 128px;
9292
--spectrum-dialog-confirm-border-radius: 4px;
9393
--spectrum-dialog-confirm-title-text-size: 18px;

0 commit comments

Comments
 (0)