Skip to content

feat(modal): diy migration #2164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 12, 2023
Merged

feat(modal): diy migration #2164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
204bb4b
feat(modal)!: migrate to spectrum tokens
TarunAdobe Sep 12, 2023
58dd070
chore(tokens): add modal custom tokens
TarunAdobe Sep 12, 2023
54377c3
docs(modal): regenerate mods
pfulton Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/modal/gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
module.exports = require("@spectrum-css/component-builder");
module.exports = require("@spectrum-css/component-builder-simple");
74 changes: 35 additions & 39 deletions components/modal/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,20 @@ governing permissions and limitations under the License.
@import "../overlay/index.css";

.spectrum-Modal {
--spectrum-dialog-confirm-vertical-offset: -2vh;

/* Bug: this must be 0ms, not 0 */
--spectrum-dialog-confirm-exit-animation-delay: 0ms;

/* Distance between top and bottom of dialog and edge of window for fullscreen dialog */
--spectrum-dialog-fullscreen-margin: 32px;
--spectrum-dialog-max-height: 90vh;
--spectrum-dialog-max-width: 90%;
--spectrum-modal-confirm-exit-animation-delay: var(--spectrum-animation-duration-0);

/* Distance between top and bottom of modal and edge of window for fullscreen modal */
--spectrum-modal-fullscreen-margin: 32px;
--spectrum-modal-max-height: 90vh;
--spectrum-modal-max-width: 90%;

--spectrum-modal-background-color: var(--spectrum-gray-100);
--spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
--spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
--spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
--spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
--spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100);
}

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

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

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

/* Start offset by the animation distance */
transform: translateY(
var(--spectrum-dialog-confirm-entry-animation-distance)
);
transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance)));

/* Appear above underlay */
z-index: 2;

/* Don't be bigger than the screen */
max-block-size: var(--spectrum-dialog-max-height);
max-inline-size: var(--spectrum-dialog-max-width);
max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height));
max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width));

background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));

/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
border-radius: var(
--spectrum-dialog-confirm-border-radius,
var(--spectrum-corner-radius-100)
);
border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius));
overflow: hidden;
outline: none; /* Firefox shows outline */
pointer-events: auto;

/* Exit animations */
transition: opacity var(--spectrum-dialog-confirm-exit-animation-duration)
cubic-bezier(0.5, 0, 1, 1)
var(--spectrum-dialog-confirm-exit-animation-delay),
transition: opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in)
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)),
visibility 0ms linear
calc(
var(--spectrum-dialog-confirm-exit-animation-delay) +
var(--spectrum-dialog-confirm-exit-animation-duration)
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
),
transform 0ms linear
calc(
var(--spectrum-dialog-confirm-exit-animation-delay) +
var(--spectrum-dialog-confirm-exit-animation-duration)
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
);

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

/* Entry animations */
transition: transform
var(--spectrum-dialog-confirm-entry-animation-duration)
cubic-bezier(0, 0, 0.4, 1)
var(--spectrum-dialog-confirm-entry-animation-delay),
opacity var(--spectrum-dialog-confirm-entry-animation-duration)
cubic-bezier(0, 0, 0.4, 1)
var(--spectrum-dialog-confirm-entry-animation-delay);
transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));

transform: translateY(0);
}
}

/* Responsive modals will fill the screen on small viewports */
@media only screen and (max-device-width: 400px),
only screen and (max-device-height: 350px) {
@media only screen and (max-device-width: 400px), only screen and (max-device-height: 350px) {
.spectrum-Modal--responsive {
inline-size: 100%;
height: 100%;
Expand All @@ -138,10 +134,10 @@ governing permissions and limitations under the License.
/** @unofficial */
.spectrum-Modal--fullscreen {
position: fixed;
left: var(--spectrum-dialog-fullscreen-margin);
top: var(--spectrum-dialog-fullscreen-margin);
right: var(--spectrum-dialog-fullscreen-margin);
bottom: var(--spectrum-dialog-fullscreen-margin);
inset-inline-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
inset-block-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
inset-inline-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
inset-block-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
max-inline-size: none;
max-height: none;
}
Expand Down
13 changes: 13 additions & 0 deletions components/modal/metadata/mods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
| Modifiable Custom Properties |
| ---------------------------------------------- |
| `--mod-modal-background-color` |
| `--mod-modal-confirm-border-radius` |
| `--mod-modal-confirm-entry-animation-delay` |
| `--mod-modal-confirm-entry-animation-distance` |
| `--mod-modal-confirm-entry-animation-duration` |
| `--mod-modal-confirm-exit-animation-delay` |
| `--mod-modal-confirm-exit-animation-duration` |
| `--mod-modal-fullscreen-margin` |
| `--mod-modal-max-height` |
| `--mod-modal-max-width` |
| `--mod-modal-transition-animation-duration` |
6 changes: 3 additions & 3 deletions components/modal/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
"build": "gulp"
},
"peerDependencies": {
"@spectrum-css/vars": ">=9"
"@spectrum-css/tokens": ">=11"
},
"devDependencies": {
"@spectrum-css/component-builder": "^4.0.14",
"@spectrum-css/vars": "^9.0.8",
"@spectrum-css/component-builder-simple": "^2.0.17",
"@spectrum-css/tokens": "^11.3.4",
"gulp": "^4.0.0"
},
"publishConfig": {
Expand Down
1 change: 0 additions & 1 deletion components/modal/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";

import "../index.css";
import "../skin.css";

export const Template = ({
rootClass = "spectrum-Modal",
Expand Down
4 changes: 1 addition & 3 deletions components/modal/skin.css → components/modal/themes/express.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@ Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

.spectrum-Modal {
background: var(--spectrum-gray-100);
@container (--system: express) {
}
13 changes: 13 additions & 0 deletions components/modal/themes/spectrum.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/*!
Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

@container (--system: spectrum) {
}
2 changes: 1 addition & 1 deletion components/tokens/custom-spectrum/custom-large-vars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@ governing permissions and limitations under the License.
--spectrum-treeview-item-indentation-large: 25px;
--spectrum-treeview-item-indentation-extra-large: 30px;
--spectrum-treeview-indicator-inset-block-start: 6px;

--spectrum-dialog-confirm-entry-animation-distance: 25px;

--spectrum-dialog-confirm-hero-height: 160px;
--spectrum-dialog-confirm-border-radius: 5px;
--spectrum-dialog-confirm-title-text-size: 19px;
Expand Down
2 changes: 1 addition & 1 deletion components/tokens/custom-spectrum/custom-medium-vars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@ governing permissions and limitations under the License.
--spectrum-treeview-item-indentation-large: 20px;
--spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400);
--spectrum-treeview-indicator-inset-block-start: 5px;

--spectrum-dialog-confirm-entry-animation-distance: 20px;

--spectrum-dialog-confirm-hero-height: 128px;
--spectrum-dialog-confirm-border-radius: 4px;
--spectrum-dialog-confirm-title-text-size: 18px;
Expand Down