feat: update to Spectrum CSS v3.0.0

adobe · Aug 29, 2020 · e8b3d8f · e8b3d8f
1 parent 012b7f8
commit e8b3d8f
Show file tree

Hide file tree

Showing 94 changed files with 2,943 additions and 931 deletions.
diff --git a/package.json b/package.json
@@ -93,7 +93,7 @@
         "@open-wc/demoing-storybook": "^2.3.19",
         "@open-wc/polyfills-loader": "^0.3.3",
         "@open-wc/testing": "^2.5.24",
-        "@spectrum-css/table": "^2.0.6",
+        "@spectrum-css/table": "^3.0.0-beta.3",
         "@types/chai": "^4.1.7",
         "@types/command-line-args": "^5.0.0",
         "@types/command-line-usage": "^5.0.1",

diff --git a/packages/avatar/package.json b/packages/avatar/package.json
@@ -47,7 +47,7 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/avatar": "^2.0.5"
+        "@spectrum-css/avatar": "^3.0.0-beta.2"
     },
     "dependencies": {
         "lit-element": "^2.1.0",

diff --git a/packages/banner/package.json b/packages/banner/package.json
@@ -47,9 +47,10 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/banner": "^2.0.5"
+        "@spectrum-css/banner": "^3.0.0-beta.2"
     },
     "dependencies": {
+        "@spectrum-web-components/base": "^0.0.1",
         "lit-element": "^2.1.0",
         "lit-html": "^1.0.0",
         "tslib": "^2.0.0"

diff --git a/packages/banner/src/Banner.ts b/packages/banner/src/Banner.ts
@@ -12,11 +12,11 @@ governing permissions and limitations under the License.
 
 import {
     html,
-    LitElement,
+    SpectrumElement,
     property,
     CSSResultArray,
     TemplateResult,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 
 import bannerStyles from './banner.css.js';
 
@@ -29,7 +29,7 @@ import bannerStyles from './banner.css.js';
  * @slot header - Primary message of the banner.
  * @slot content - Secondary message of the banner. Used to provide a description.
  */
-export class Banner extends LitElement {
+export class Banner extends SpectrumElement {
     @property({ reflect: true, type: String })
     public type: 'info' | 'warning' | 'error' = 'info';
 

diff --git a/packages/banner/src/spectrum-banner.css b/packages/banner/src/spectrum-banner.css
@@ -42,11 +42,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     /* .spectrum-Banner-header */
     font-weight: 700;
 }
+:host([dir='ltr'][corner]) {
+    /* [dir=ltr] .spectrum-Banner--corner */
+    right: -10px;
+}
+:host([dir='rtl'][corner]) {
+    /* [dir=rtl] .spectrum-Banner--corner */
+    left: -10px;
+}
 :host([corner]) {
     /* .spectrum-Banner--corner */
     position: absolute;
     top: -10px;
-    right: -10px;
 }
 :host([type='info']) {
     /* .spectrum-Banner--info */

diff --git a/packages/bar-loader/package.json b/packages/bar-loader/package.json
@@ -51,9 +51,10 @@
         "lit-html": "^1.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/barloader": "^2.0.0"
+        "@spectrum-css/barloader": "^3.0.0-beta.2"
     },
     "dependencies": {
+        "@spectrum-web-components/base": "^0.0.1",
         "tslib": "^2.0.0"
     }
 }
diff --git a/packages/bar-loader/src/BarLoader.ts b/packages/bar-loader/src/BarLoader.ts
@@ -12,19 +12,19 @@ governing permissions and limitations under the License.
 
 import {
     html,
-    LitElement,
+    SpectrumElement,
     CSSResultArray,
     TemplateResult,
     PropertyValues,
     property,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 
 import styles from './bar-loader.css.js';
 
 /**
  * @element sp-bar-loader
  */
-export class BarLoader extends LitElement {
+export class BarLoader extends SpectrumElement {
     public static get styles(): CSSResultArray {
         return [styles];
     }

diff --git a/packages/bar-loader/src/bar-loader.css b/packages/bar-loader/src/bar-loader.css
@@ -16,3 +16,7 @@ governing permissions and limitations under the License.
     width: 100%;
     transform-origin: left;
 }
+
+:host([dir='rtl']) .fill {
+    transform-origin: right;
+}
diff --git a/packages/bar-loader/src/spectrum-bar-loader.css b/packages/bar-loader/src/spectrum-bar-loader.css
@@ -10,21 +10,36 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 
 THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-@keyframes indeterminate-loop {
+@keyframes indeterminate-loop-ltr {
     0% {
-        transform: translate(0);
+        transform: translate(
+            calc(
+                -1 * var(--spectrum-barloader-large-indeterminate-fill-width, var(--spectrum-global-dimension-size-1700))
+            )
+        );
+    }
+    to {
+        transform: translate(
+            var(
+                --spectrum-barloader-large-width,
+                var(--spectrum-global-dimension-size-2400)
+            )
+        );
+    }
+}
+@keyframes indeterminate-loop-rtl {
+    0% {
+        transform: translate(
+            var(
+                --spectrum-barloader-large-width,
+                var(--spectrum-global-dimension-size-2400)
+            )
+        );
     }
     to {
         transform: translate(
             calc(
-                var(
-                        --spectrum-barloader-large-width,
-                        var(--spectrum-global-dimension-size-2400)
-                    ) +
-                    var(
-                        --spectrum-barloader-large-indeterminate-fill-width,
-                        var(--spectrum-global-dimension-size-1700)
-                    )
+                -1 * var(--spectrum-barloader-large-width, var(--spectrum-global-dimension-size-2400))
             )
         );
     }
@@ -75,6 +90,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-color-blue-500)
     );
 }
+:host([dir='ltr']) .label,
+:host([dir='ltr']) .percentage {
+    /* [dir=ltr] .spectrum-BarLoader-label,
+   * [dir=ltr] .spectrum-BarLoader-percentage */
+    text-align: left;
+}
+:host([dir='rtl']) .label,
+:host([dir='rtl']) .percentage {
+    /* [dir=rtl] .spectrum-BarLoader-label,
+   * [dir=rtl] .spectrum-BarLoader-percentage */
+    text-align: right;
+}
 .label,
 .percentage {
     /* .spectrum-BarLoader-label,
@@ -91,7 +118,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         --spectrum-fieldlabel-text-line-height,
         var(--spectrum-global-font-line-height-small)
     );
-    text-align: left;
     margin-bottom: var(
         --spectrum-barloader-large-label-gap-y,
         var(--spectrum-global-dimension-size-115)
@@ -101,37 +127,68 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     /* .spectrum-BarLoader-label */
     flex: 1 1 0%;
 }
-.percentage {
-    /* .spectrum-BarLoader-percentage */
-    align-self: flex-start;
+:host([dir='ltr']) .percentage {
+    /* [dir=ltr] .spectrum-BarLoader-percentage */
     margin-left: var(
         --spectrum-barloader-small-label-gap-x,
         var(--spectrum-global-dimension-size-150)
     );
 }
+:host([dir='rtl']) .percentage {
+    /* [dir=rtl] .spectrum-BarLoader-percentage */
+    margin-right: var(
+        --spectrum-barloader-small-label-gap-x,
+        var(--spectrum-global-dimension-size-150)
+    );
+}
+.percentage {
+    /* .spectrum-BarLoader-percentage */
+    align-self: flex-start;
+}
 :host([side-label]) {
     /* .spectrum-BarLoader--sideLabel */
     display: inline-flex;
     flex-flow: row;
     justify-content: space-between;
     width: auto;
 }
-:host([side-label]) .label {
-    /* .spectrum-BarLoader--sideLabel .spectrum-BarLoader-label */
+:host([dir='ltr'][side-label]) .label {
+    /* [dir=ltr] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-label */
     margin-right: var(
         --spectrum-barloader-large-label-gap-x,
         var(--spectrum-global-dimension-size-150)
     );
+}
+:host([dir='rtl'][side-label]) .label {
+    /* [dir=rtl] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-label */
+    margin-left: var(
+        --spectrum-barloader-large-label-gap-x,
+        var(--spectrum-global-dimension-size-150)
+    );
+}
+:host([side-label]) .label {
+    /* .spectrum-BarLoader--sideLabel .spectrum-BarLoader-label */
     margin-bottom: 0;
 }
-:host([side-label]) .percentage {
-    /* .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */
-    order: 3;
-    text-align: right;
+:host([dir='ltr'][side-label]) .percentage {
+    /* [dir=ltr] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */
+    text-align: right; /* [dir=ltr] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */
     margin-left: var(
         --spectrum-barloader-large-label-gap-x,
         var(--spectrum-global-dimension-size-150)
     );
+}
+:host([dir='rtl'][side-label]) .percentage {
+    /* [dir=rtl] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */
+    text-align: left; /* [dir=rtl] .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */
+    margin-right: var(
+        --spectrum-barloader-large-label-gap-x,
+        var(--spectrum-global-dimension-size-150)
+    );
+}
+:host([side-label]) .percentage {
+    /* .spectrum-BarLoader--sideLabel .spectrum-BarLoader-percentage */
+    order: 3;
     margin-bottom: 0;
 }
 :host([small]) {
@@ -161,21 +218,30 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-dimension-size-1700)
     );
     position: relative;
-    animation: indeterminate-loop
-        var(
-            --spectrum-barloader-large-indeterminate-duration,
-            var(--spectrum-global-animation-duration-2000)
-        )
-        infinite;
     animation-timing-function: var(
         --spectrum-barloader-large-indeterminate-animation-ease,
         var(--spectrum-global-animation-ease-in-out)
     );
-    left: calc(
-        -1 * var(--spectrum-barloader-large-indeterminate-fill-width, var(--spectrum-global-dimension-size-1700))
-    );
     will-change: transform;
 }
+:host([dir='ltr'][indeterminate]) .fill {
+    /* [dir=ltr] .spectrum-BarLoader--indeterminate .spectrum-BarLoader-fill */
+    animation: indeterminate-loop-ltr
+        var(
+            --spectrum-barloader-large-indeterminate-duration,
+            var(--spectrum-global-animation-duration-2000)
+        )
+        infinite;
+}
+:host([dir='rtl'][indeterminate]) .fill {
+    /* [dir=rtl] .spectrum-BarLoader--indeterminate .spectrum-BarLoader-fill */
+    animation: indeterminate-loop-rtl
+        var(
+            --spectrum-barloader-large-indeterminate-duration,
+            var(--spectrum-global-animation-duration-2000)
+        )
+        infinite;
+}
 :host([over-background]) .fill {
     /* .spectrum-BarLoader.spectrum-BarLoader--overBackground .spectrum-BarLoader-fill */
     background: var(

diff --git a/packages/base/src/Base.ts b/packages/base/src/Base.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { LitElement } from 'lit-element';
+import { LitElement, property } from 'lit-element';
 
 export * from 'lit-element';
 
@@ -24,21 +24,31 @@ type Constructor<T = Record<string, unknown>> = {
 
 export interface SpectrumInterface {
     shadowRoot: ShadowRoot;
+    isDefaultDir: boolean;
+    dir: 'ltr' | 'rtl';
 }
 
 export function SpectrumMixin<T extends Constructor<UpdatingElement>>(
     constructor: T
 ): T & Constructor<SpectrumInterface> {
-    return class SlotTextObservingElement extends constructor {
+    class SlotTextObservingElement extends constructor {
         public shadowRoot!: ShadowRoot;
 
+        @property({ reflect: true })
+        public dir: 'ltr' | 'rtl' = 'ltr';
+
+        public get isDefaultDir(): boolean {
+            return this.dir === 'ltr';
+        }
+
         public connectedCallback(): void {
             if (!this.hasAttribute('dir')) {
-                this.dir = document.dir || 'ltr';
+                this.dir = document.dir === 'rtl' ? document.dir : 'ltr';
             }
             super.connectedCallback();
         }
-    };
+    }
+    return SlotTextObservingElement;
 }
 
 export class SpectrumElement extends SpectrumMixin(LitElement) {}
diff --git a/packages/button-group/package.json b/packages/button-group/package.json
@@ -47,12 +47,11 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/buttongroup": "^2.0.0",
+        "@spectrum-css/buttongroup": "^3.0.0-beta.3",
         "@spectrum-web-components/button": "^0.8.4"
     },
     "dependencies": {
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.0.1",
         "tslib": "^2.0.0"
     }
 }
diff --git a/packages/button-group/src/ButtonGroup.ts b/packages/button-group/src/ButtonGroup.ts
@@ -12,18 +12,18 @@ governing permissions and limitations under the License.
 
 import {
     html,
-    LitElement,
+    SpectrumElement,
     CSSResultArray,
     TemplateResult,
     property,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 
 import styles from './button-group.css.js';
 
 /**
  * @element sp-button-group
  */
-export class ButtonGroup extends LitElement {
+export class ButtonGroup extends SpectrumElement {
     public static get styles(): CSSResultArray {
         return [styles];
     }