Merge Target for Packages using the latest Spectrum CSS v3.0.0 dependency

.circleci/config.yml

@@ -49,13 +49,15 @@ commands:
                 type: string
             regression_scale:
                 type: string
+            regression_dir:
+                type: string
         steps:
             - restore_cache:
                   name: Restore Golden Images Cache
                   keys:
-                      - v2-golden-images-<< parameters.regression_color >>-<< parameters.regression_scale >>-e3f040631ba658a7f0b64afa1fc64ac3530e16d7
-                      - v2-golden-images-main-<< parameters.regression_color >>-<< parameters.regression_scale >>-
-            - run: yarn test:visual:ci --color=<< parameters.regression_color >> --scale=<< parameters.regression_scale >>
+                      - v2-golden-images-62c088d67e000a9812a4a2cf0a854ce4a521b4d0-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>
+                      - v2-golden-images-main-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
+            - run: yarn test:visual:ci --color=<< parameters.regression_color >> --scale=<< parameters.regression_scale >> --dir=<< parameters.regression_dir >>
             - run:
                   when: on_fail
                   command: cp -RT test/visual/screenshots-current/ci test/visual/screenshots-baseline/ci && exit 1
@@ -64,12 +66,12 @@ commands:
                   name: Build Golden Images Revision Cache
                   paths:
                       - test/visual/screenshots-baseline/ci
-                  key: v2-golden-images-<< parameters.regression_color >>-<< parameters.regression_scale >>-{{ .Revision }}
+                  key: v2-golden-images-{{ .Revision }}-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>
             - save_cache:
                   name: Build Golden Images Branch Cache
                   paths:
                       - test/visual/screenshots-baseline/ci
-                  key: v2-golden-images-{{ .Branch }}-<< parameters.regression_color >>-<< parameters.regression_scale >>-{{ epoch }}
+                  key: v2-golden-images-{{ .Branch }}-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
             - store_artifacts:
                   path: test/visual/screenshots-current
 
@@ -104,77 +106,165 @@ jobs:
                       - project/documentation/dist
                       - .cache/ms-playwright
 
-    visual-lightest-medium:
+    visual-lightest-medium-ltr:
         executor: node
 
         steps:
             - downstream
             - run-regressions:
                   regression_color: lightest
                   regression_scale: medium
+                  regression_dir: ltr
 
-    visual-lightest-large:
+    visual-lightest-medium-rtl:
+        executor: node
+
+        steps:
+            - downstream
+            - run-regressions:
+                  regression_color: lightest
+                  regression_scale: medium
+                  regression_dir: rtl
+
+    visual-lightest-large-ltr:
         executor: node
 
         steps:
             - downstream
             - run-regressions:
                   regression_color: lightest
                   regression_scale: large
+                  regression_dir: ltr
 
-    visual-light-medium:
+    visual-lightest-large-rtl:
+        executor: node
+
+        steps:
+            - downstream
+            - run-regressions:
+                  regression_color: lightest
+                  regression_scale: large
+                  regression_dir: rtl
+
+    visual-light-medium-ltr:
         executor: node
 
         steps:
             - downstream
             - run-regressions:
                   regression_color: light
                   regression_scale: medium
+                  regression_dir: ltr
 
-    visual-light-large:
+    visual-light-medium-rtl:
+        executor: node
+
+        steps:
+            - downstream
+            - run-regressions:
+                  regression_color: light
+                  regression_scale: medium
+                  regression_dir: rtl
+
+    visual-light-large-ltr:
+        executor: node
+
+        steps:
+            - downstream
+            - run-regressions:
+                  regression_color: light
+                  regression_scale: large
+                  regression_dir: ltr
+
+    visual-light-large-rtl:
         executor: node
 
         steps:
             - downstream
             - run-regressions:
                   regression_color: light
                   regression_scale: large
+                  regression_dir: rtl
+
+    visual-dark-medium-ltr:
+        executor: node
+
+        steps:
+            - downstream
+            - run-regressions:
+                  regression_color: dark
+                  regression_scale: medium
+                  regression_dir: ltr
 
-    visual-dark-medium:
+    visual-dark-medium-rtl:
         executor: node
 
         steps:
             - downstream
             - run-regressions:
                   regression_color: dark
                   regression_scale: medium
+                  regression_dir: rtl
 
-    visual-dark-large:
+    visual-dark-large-ltr:
         executor: node
 
         steps:
             - downstream
             - run-regressions:
                   regression_color: dark
                   regression_scale: large
+                  regression_dir: ltr
 
-    visual-darkest-medium:
+    visual-dark-large-rtl:
+        executor: node
+
+        steps:
+            - downstream
+            - run-regressions:
+                  regression_color: dark
+                  regression_scale: large
+                  regression_dir: rtl
+
+    visual-darkest-medium-ltr:
+        executor: node
+
+        steps:
+            - downstream
+            - run-regressions:
+                  regression_color: darkest
+                  regression_scale: medium
+                  regression_dir: ltr
+
+    visual-darkest-medium-rtl:
         executor: node
 
         steps:
             - downstream
             - run-regressions:
                   regression_color: darkest
                   regression_scale: medium
+                  regression_dir: rtl
+
+    visual-darkest-large-ltr:
+        executor: node
+
+        steps:
+            - downstream
+            - run-regressions:
+                  regression_color: darkest
+                  regression_scale: large
+                  regression_dir: ltr
 
-    visual-darkest-large:
+    visual-darkest-large-rtl:
         executor: node
 
         steps:
             - downstream
             - run-regressions:
                   regression_color: darkest
                   regression_scale: large
+                  regression_dir: rtl
 
     publish-docs:
         executor: node
@@ -191,28 +281,52 @@ workflows:
     build:
         jobs:
             - build
-            - visual-lightest-medium:
+            - visual-lightest-medium-ltr:
+                  requires:
+                      - build
+            - visual-lightest-large-ltr:
+                  requires:
+                      - build
+            - visual-light-medium-ltr:
+                  requires:
+                      - build
+            - visual-light-large-ltr:
+                  requires:
+                      - build
+            - visual-dark-medium-ltr:
+                  requires:
+                      - build
+            - visual-dark-large-ltr:
+                  requires:
+                      - build
+            - visual-darkest-medium-ltr:
+                  requires:
+                      - build
+            - visual-darkest-large-ltr:
+                  requires:
+                      - build
+            - visual-lightest-medium-rtl:
                   requires:
                       - build
-            - visual-lightest-large:
+            - visual-lightest-large-rtl:
                   requires:
                       - build
-            - visual-light-medium:
+            - visual-light-medium-rtl:
                   requires:
                       - build
-            - visual-light-large:
+            - visual-light-large-rtl:
                   requires:
                       - build
-            - visual-dark-medium:
+            - visual-dark-medium-rtl:
                   requires:
                       - build
-            - visual-dark-large:
+            - visual-dark-large-rtl:
                   requires:
                       - build
-            - visual-darkest-medium:
+            - visual-darkest-medium-rtl:
                   requires:
                       - build
-            - visual-darkest-large:
+            - visual-darkest-large-rtl:
                   requires:
                       - build
             - publish-docs:

.storybook/preview-head.html

@@ -18,12 +18,17 @@
     }
     /* @TODO: Implement more default storybook styling here using spectrum theme variables */
     #root-theme {
+        overflow-x: hidden;
         display: block;
         padding: 8px;
         box-sizing: border-box;
         width: 100vw;
         min-height: 100vh;
         background-color: var(--spectrum-global-color-gray-100);
+        color: var(
+            --spectrum-body-text-color,
+            var(--spectrum-alias-text-color)
+        );
     }
     .sbdocs-preview #root-theme {
         width: 100%;

.storybook/preview.js

@@ -34,13 +34,25 @@ const scaleOptions = {
     Large: 'large',
 };
 let defaultScale = scaleOptions.Medium;
+const directionOptions = {
+    LTR: 'ltr',
+    RTL: 'rtl',
+};
+let defaultDirection = 'ltr';
 addDecorator((story) => {
     const color = select('Color', colorOptions, defaultColor, 'Theme');
     defaultColor = color;
     const scale = select('Scale', scaleOptions, defaultScale, 'Theme');
     defaultScale = scale;
+    const dir = select(
+        'Text direction',
+        directionOptions,
+        defaultDirection,
+        'Theme'
+    );
+    defaultDirection = dir;
     return html`
-        <sp-theme id="root-theme" color=${color} scale=${scale}>
+        <sp-theme id="root-theme" color=${color} scale=${scale} dir=${dir}>
             ${story()}
         </sp-theme>
     `;

documentation/src/components/code-example.ts

@@ -26,6 +26,7 @@ import DarkThemeStyles from 'prismjs/themes/prism-okaidia.css';
 import LightThemeStyles from 'prismjs/themes/prism.css';
 import Styles from './code-example.css';
 import { stripIndent } from 'common-tags';
+import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';
 
 class Code extends LitElement {
     @property()
@@ -75,7 +76,7 @@ export class LightCode extends Code {
 }
 
 @customElement('code-example')
-export class CodeExample extends LitElement {
+export class CodeExample extends FocusVisiblePolyfillMixin(LitElement) {
     @query('#markup')
     private markup?: HTMLDivElement;
 
@@ -146,9 +147,9 @@ export class CodeExample extends LitElement {
                       </div>
                   `
                 : undefined}
-            <div id="markup">
+            <bdo id="markup" dir="ltr">
                 ${highlightedCode}
-            </div>
+            </bdo>
         `;
     }