feat(modal): add modal CSS only pattern

adobe · Nov 24, 2020 · f2bb4ad · f2bb4ad
1 parent 58cee16
commit f2bb4ad
Show file tree

Hide file tree

Showing 7 changed files with 322 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -54,9 +54,9 @@
         "lint:ts": "eslint -f pretty 'packages/**/*.ts'",
         "lint:css": "stylelint 'packages/**/*.css'",
         "lint:versions": "node ./scripts/lint-versions.js",
-        "precustom-element-json": "lerna exec --ignore '{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- rm custom-elements.json ||:",
-        "custom-element-json": "lerna exec --ignore '{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- wca analyze '*.d.ts' --format json --outFile custom-elements.json",
-        "postcustom-element-json": "lerna exec --ignore '{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- test -f custom-elements.json",
+        "precustom-element-json": "lerna exec --ignore '{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,modal,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- rm custom-elements.json ||:",
+        "custom-element-json": "lerna exec --ignore '{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,modal,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- wca analyze '*.d.ts' --format json --outFile custom-elements.json",
+        "postcustom-element-json": "lerna exec --ignore '{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,modal,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- test -f custom-elements.json",
         "prelerna-publish": "yarn get-ready && yarn custom-element-json",
         "lerna-publish": "lerna publish --message 'chore: release new versions'",
         "test": "yarn build && yarn test:ci",

diff --git a/packages/modal/package.json b/packages/modal/package.json
@@ -0,0 +1,54 @@
+{
+    "name": "@spectrum-web-components/modal",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/modal"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/modal",
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "version": "0.0.1",
+    "description": "",
+    "main": "src/modal.css.js",
+    "module": "src/modal.css.js",
+    "type": "module",
+    "exports": {
+        "./src/": "./src/",
+        "./custom-elements.json": "./custom-elements.json",
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "custom-elements.json",
+        "*.d.ts",
+        "*.js",
+        "*.js.map",
+        "/src/"
+    ],
+    "sideEffects": [
+        "./sp-*.js",
+        "./sp-*.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "author": "",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@spectrum-css/modal": "^3.0.0-beta.1"
+    },
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.1.0",
+        "tslib": "^2.0.0"
+    }
+}
diff --git a/packages/modal/src/modal.css b/packages/modal/src/modal.css
@@ -0,0 +1,14 @@
+/*
+Copyright 2020 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.
+*/
+
+@import './spectrum-modal-wrapper.css';
+@import './spectrum-modal.css';
diff --git a/packages/modal/src/spectrum-config.js b/packages/modal/src/spectrum-config.js
@@ -0,0 +1,71 @@
+/*
+Copyright 2020 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.
+*/
+
+const config = {
+    spectrum: 'modal',
+    components: [
+        {
+            name: 'modal-wrapper',
+            host: {
+                selector: '.spectrum-Modal-wrapper',
+            },
+            attributes: [
+                {
+                    type: 'boolean',
+                    selector: '.is-open',
+                    name: 'open',
+                },
+                {
+                    type: 'boolean',
+                    selector: '.spectrum-Modal--responsive',
+                    name: 'responsive',
+                },
+            ],
+        },
+        {
+            name: 'modal',
+            host: {
+                selector: '.spectrum-Modal',
+                shadowSelector: '.modal',
+            },
+            attributes: [
+                {
+                    type: 'boolean',
+                    selector: '.is-open',
+                    name: 'open',
+                },
+                {
+                    type: 'boolean',
+                    selector: '.spectrum-Modal--responsive',
+                    name: 'responsive',
+                },
+            ],
+            classes: [
+                {
+                    selector: '.spectrum-Modal',
+                    name: 'dialog',
+                },
+                {
+                    name: 'fullscreen',
+                    selector: '.spectrum-Modal--fullscreen',
+                },
+                {
+                    name: 'fullscreenTakeover',
+                    selector: '.spectrum-Modal--fullscreenTakeover',
+                },
+            ],
+            exclude: [/\.spectrum-Modal-wrapper/],
+        },
+    ],
+};
+
+export default config;
diff --git a/packages/modal/src/spectrum-modal-wrapper.css b/packages/modal/src/spectrum-modal-wrapper.css
@@ -0,0 +1,41 @@
+/* stylelint-disable */ /* 
+Copyright 2020 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.
+
+THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+    /* .spectrum-Modal-wrapper */
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100vw;
+    height: 100vh;
+    height: -webkit-fill-available;
+    height: -webkit-stretch;
+    height: -moz-available;
+    height: fill-available;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: 2;
+    transition: visibility 0ms linear
+        var(--spectrum-global-animation-duration-100, 0.13s);
+}
+:host([open]) {
+    /* .spectrum-Modal-wrapper.is-open */
+    visibility: visible;
+}
+:host([responsive]) {
+    /* .spectrum-Modal-wrapper .spectrum-Modal--responsive */
+    margin-top: 0;
+}
diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css
@@ -0,0 +1,129 @@
+/* stylelint-disable */ /* 
+Copyright 2020 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.
+
+THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+.modal {
+    /* .spectrum-Modal */
+    visibility: hidden;
+    opacity: 0;
+    transition: transform var(--spectrum-global-animation-duration-100, 0.13s)
+            ease-in-out,
+        opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out,
+        visibility 0ms linear
+            var(--spectrum-global-animation-duration-100, 0.13s);
+    pointer-events: none; /* .spectrum-Modal */
+    transform: translateY(
+        var(
+            --spectrum-dialog-confirm-entry-animation-distance,
+            var(--spectrum-global-dimension-size-250)
+        )
+    );
+    z-index: 2;
+    max-height: 90vh;
+    border-radius: var(
+        --spectrum-dialog-confirm-border-radius,
+        var(--spectrum-global-dimension-size-50)
+    );
+    overflow: hidden;
+    outline: none;
+    pointer-events: auto;
+    transition: opacity
+            var(
+                --spectrum-dialog-confirm-exit-animation-duration,
+                var(--spectrum-global-animation-duration-100)
+            )
+            cubic-bezier(0.5, 0, 1, 1) 0ms,
+        visibility 0ms linear
+            calc(
+                0ms +
+                    var(
+                        --spectrum-dialog-confirm-exit-animation-duration,
+                        var(--spectrum-global-animation-duration-100)
+                    )
+            ),
+        transform 0ms linear
+            calc(
+                0ms +
+                    var(
+                        --spectrum-dialog-confirm-exit-animation-duration,
+                        var(--spectrum-global-animation-duration-100)
+                    )
+            ); /* .spectrum-Modal */
+    background: var(
+        --spectrum-dialog-confirm-background-color,
+        var(--spectrum-alias-background-color-default)
+    );
+}
+:host([open]) .modal {
+    /* .spectrum-Modal.is-open */
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 0ms;
+    pointer-events: auto; /* .spectrum-Modal.is-open */
+    transition: transform
+            var(
+                --spectrum-dialog-confirm-entry-animation-duration,
+                var(--spectrum-global-animation-duration-500)
+            )
+            cubic-bezier(0, 0, 0.4, 1)
+            var(
+                --spectrum-dialog-confirm-entry-animation-delay,
+                var(--spectrum-global-animation-duration-200)
+            ),
+        opacity
+            var(
+                --spectrum-dialog-confirm-entry-animation-duration,
+                var(--spectrum-global-animation-duration-500)
+            )
+            cubic-bezier(0, 0, 0.4, 1)
+            var(
+                --spectrum-dialog-confirm-entry-animation-delay,
+                var(--spectrum-global-animation-duration-200)
+            );
+    transform: translateY(0);
+}
+:host([responsive]) .modal {
+    /* .spectrum-Modal--responsive */
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 0;
+}
+.fullscreen {
+    /* .spectrum-Modal--fullscreen */
+    position: fixed;
+    left: 32px;
+    top: 32px;
+    right: 32px;
+    bottom: 32px;
+    max-width: none;
+    max-height: none;
+}
+.fullscreenTakeover {
+    /* .spectrum-Modal--fullscreenTakeover */
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    max-width: none;
+    max-height: none;
+    box-sizing: border-box;
+    border: none;
+    border-radius: 0;
+}
+.fullscreenTakeover,
+:host([open]) .fullscreenTakeover {
+    /* .spectrum-Modal--fullscreenTakeover,
+   * .spectrum-Modal--fullscreenTakeover.is-open */
+    transform: none;
+}
diff --git a/packages/modal/tsconfig.json b/packages/modal/tsconfig.json
@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": true,
+        "rootDir": "./"
+    },
+    "include": ["*.ts", "src/*.ts"],
+    "exclude": ["test/*.ts", "stories/*.ts"],
+    "references": [{ "path": "../base" }]
+}