diff --git a/.circleci/config.yml b/.circleci/config.yml index 5d5ded227d..219c93142a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -14,7 +14,7 @@ parameters: # 3. Commit this change to the PR branch where the changes exist. current_golden_images_hash: type: string - default: a095ed1ef88686fdb24936dad763598ac7981193 + default: a5550bbb530d05f322cecf24d1fb8c9e8c9ed99b wireit_cache_name: type: string default: wireit diff --git a/packages/card/src/card.css b/packages/card/src/card.css index 6eb3084ae9..4d33dc0f5f 100644 --- a/packages/card/src/card.css +++ b/packages/card/src/card.css @@ -40,7 +40,7 @@ We need to add the declaration to the slot as well */ slot[name='description'] { font-size: var( --spectrum-card-subtitle-text-size, - var(--spectrum-global-dimension-font-size-50) + var(--spectrum-font-size-50) ); } diff --git a/packages/color-wheel/test/color-wheel.test.ts b/packages/color-wheel/test/color-wheel.test.ts index 128cbfae6a..d86f6b7c52 100644 --- a/packages/color-wheel/test/color-wheel.test.ts +++ b/packages/color-wheel/test/color-wheel.test.ts @@ -36,18 +36,14 @@ ignoreResizeObserverLoopError(before, after); describe('ColorWheel', () => { testForLitDevWarnings( async () => - await fixture( - html` - - ` - ) + await fixture(html` + + `) ); it('loads default color-wheel accessibly', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); @@ -55,15 +51,13 @@ describe('ColorWheel', () => { }); it('manages a single tab stop', async () => { - const test = await fixture( - html` -
- - - -
- ` - ); + const test = await fixture(html` +
+ + + +
+ `); const el = test.querySelector('sp-color-wheel') as ColorWheel; const input1 = test.querySelector( 'input:nth-of-type(1)' @@ -113,11 +107,9 @@ describe('ColorWheel', () => { expect(document.activeElement).to.equal(input1); }); it('manages [focused]', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); @@ -146,14 +138,12 @@ describe('ColorWheel', () => { it('dispatches input and change events in response to "Arrow*" keypresses', async () => { const inputSpy = spy(); const changeSpy = spy(); - const el = await fixture( - html` - changeSpy()} - @input=${() => inputSpy()} - > - ` - ); + const el = await fixture(html` + changeSpy()} + @input=${() => inputSpy()} + > + `); await elementUpdated(el); el.focus(); @@ -178,14 +168,12 @@ describe('ColorWheel', () => { // screen reader interactions dispatch events as found in the following test const inputSpy = spy(); const changeSpy = spy(); - const el = await fixture( - html` - changeSpy()} - @input=${() => inputSpy()} - > - ` - ); + const el = await fixture(html` + changeSpy()} + @input=${() => inputSpy()} + > + `); await elementUpdated(el); @@ -210,11 +198,9 @@ describe('ColorWheel', () => { expect(changeSpy.callCount).to.equal(1); }); it('accepts "Arrow*" keypresses', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); @@ -259,11 +245,9 @@ describe('ColorWheel', () => { expect(el.value).to.equal(0); }); it('accepts "Arrow*" keypresses in dir="rtl"', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); @@ -308,11 +292,9 @@ describe('ColorWheel', () => { expect(el.value).to.equal(0); }); it('accepts "Arrow*" keypresses with alteration', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); el.focus(); @@ -370,14 +352,12 @@ describe('ColorWheel', () => { }); it('accepts pointer events', async () => { const color = new TinyColor({ h: '0', s: '20%', l: '70%' }); - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); @@ -478,17 +458,14 @@ describe('ColorWheel', () => { }); it('can have `change` events prevented', async () => { const color = new TinyColor({ h: '0', s: '20%', l: '70%' }); - const el = await fixture( - html` - { - event?.preventDefault(); - }} - style="--spectrum-global-dimension-size-125: 10px;" - > - ` - ); + const el = await fixture(html` + { + event?.preventDefault(); + }} + > + `); await elementUpdated(el); @@ -559,11 +536,9 @@ describe('ColorWheel', () => { ]; colorFormats.map((format) => { it(`maintains \`color\` format as ${format.name}`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); el.color = format.color; if (format.name.startsWith('Hex')) { @@ -572,21 +547,17 @@ describe('ColorWheel', () => { }); }); it(`maintains \`color\` format as TinyColor`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const color = new TinyColor('rgb(204, 51, 204)'); el.color = color; expect(color.equals(el.color)); }); it(`maintains hue value`, async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); const hue = 300; const hsl = `hsl(${hue}, 60%, 100%)`; el.color = hsl; @@ -629,11 +600,9 @@ describe('ColorWheel', () => { expect(tinyHSLA.equals(el.color)).to.be.true; }); it('should flip orientation with dir="rtl"', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); diff --git a/packages/divider/stories/divider.stories.ts b/packages/divider/stories/divider.stories.ts index df6e9e38ed..d757b993dd 100644 --- a/packages/divider/stories/divider.stories.ts +++ b/packages/divider/stories/divider.stories.ts @@ -59,9 +59,7 @@ export const small = (): TemplateResult => { export const verticalSmall = (): TemplateResult => { return html` -
+
@@ -79,9 +77,7 @@ export const verticalSmall = (): TemplateResult => { export const verticalMedium = (): TemplateResult => { return html` -
+
@@ -99,9 +95,7 @@ export const verticalMedium = (): TemplateResult => { export const verticalLarge = (): TemplateResult => { return html` -
+
diff --git a/packages/iconset/stories/icons-demo.ts b/packages/iconset/stories/icons-demo.ts index fe52522e5a..92e119be29 100644 --- a/packages/iconset/stories/icons-demo.ts +++ b/packages/iconset/stories/icons-demo.ts @@ -186,7 +186,7 @@ export class IconsDemo extends SpectrumElement { text-align: center; border-radius: var( --spectrum-alias-focus-ring-gap, - var(--spectrum-global-dimension-static-size-25) + var(--spectrum-spacing-50) ); } :host([package]) .icon { @@ -208,7 +208,7 @@ export class IconsDemo extends SpectrumElement { outline-offset: calc( var( --spectrum-alias-focus-ring-gap, - var(--spectrum-global-dimension-static-size-25) + var(--spectrum-spacing-50) ) * 2 ); } diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts index e69bf049ca..df925928c1 100644 --- a/packages/overlay/stories/overlay.stories.ts +++ b/packages/overlay/stories/overlay.stories.ts @@ -478,35 +478,6 @@ export const complexModal = (): TemplateResult => { display: grid; place-content: center; } - active-overlay > * { - --spectrum-global-animation-duration-100: 0ms; - --spectrum-global-animation-duration-200: 0ms; - --spectrum-global-animation-duration-300: 0ms; - --spectrum-global-animation-duration-400: 0ms; - --spectrum-global-animation-duration-500: 0ms; - --spectrum-global-animation-duration-600: 0ms; - --spectrum-global-animation-duration-700: 0ms; - --spectrum-global-animation-duration-800: 0ms; - --spectrum-global-animation-duration-900: 0ms; - --spectrum-global-animation-duration-1000: 0ms; - --spectrum-global-animation-duration-2000: 0ms; - --spectrum-global-animation-duration-4000: 0ms; - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 0ms; - --spectrum-animation-duration-200: 0ms; - --spectrum-animation-duration-300: 0ms; - --spectrum-animation-duration-400: 0ms; - --spectrum-animation-duration-500: 0ms; - --spectrum-animation-duration-600: 0ms; - --spectrum-animation-duration-700: 0ms; - --spectrum-animation-duration-800: 0ms; - --spectrum-animation-duration-900: 0ms; - --spectrum-animation-duration-1000: 0ms; - --spectrum-animation-duration-2000: 0ms; - --spectrum-animation-duration-4000: 0ms; - --spectrum-coachmark-animation-indicator-ring-duration: 0ms; - --swc-test-duration: 1ms; - } { expect(closedSpy.calledOnce, 'longpress content returned').to.be.true; }); it('describes longpress interaction accessibly', async () => { - const el = await fixture( - html` - - - Trigger with hold affordance - - - - - - - - - - - - - - - - ` - ); + const el = await fixture(html` + + + Trigger with hold affordance + + + + + + + + + + + + + + + + `); await nextFrame(); await nextFrame(); const trigger = el.querySelector('[slot="trigger"]') as HTMLElement; @@ -390,32 +388,30 @@ describe('Overlay Trigger - Longpress', () => { ); }); it('removes longpress `aria-describedby` description element when longpress content is removed', async () => { - const el = await fixture( - html` - - - Trigger with hold affordance - - - - - - - - - - - - - - - - ` - ); + const el = await fixture(html` + + + Trigger with hold affordance + + + + + + + + + + + + + + + + `); const trigger = el.querySelector('[slot="trigger"]') as HTMLElement; const content = el.querySelector( '[slot="longpress-content"]' @@ -460,48 +456,42 @@ describe('Overlay Trigger - Longpress', () => { expect(el.childNodes.length, 'always').to.equal(6); }); it('recognises multiple overlay triggers in a11y tree', async () => { - const el = await fixture( - html` -
- - - First button - - - - - - - - - - - - Second button - - - - - - - - - -
- ` - ); + const el = await fixture(html` +
+ + + First button + + + + + + + + + + + + Second button + + + + + + + + + +
+ `); await elementUpdated(el); const div = document.getElementById('container') as HTMLElement; @@ -518,42 +508,34 @@ describe('Overlay Trigger - Longpress', () => { ); }); it('describes interactions differently to the user', async () => { - const test = await fixture( - html` -
- - - - Trigger with hold affordance - - - - - - - - - - - - - - - - -
- ` - ); + const test = await fixture(html` +
+ + + + Trigger with hold affordance + + + + + + + + + + + + + + + + +
+ `); const el = test.querySelector('overlay-trigger') as OverlayTrigger; const first = test.querySelector('#first') as HTMLElement; const firstRect = first.getBoundingClientRect(); diff --git a/packages/switch/src/switch-legacy.css b/packages/switch/src/switch-legacy.css index 27d28a59aa..0eb93e832b 100644 --- a/packages/switch/src/switch-legacy.css +++ b/packages/switch/src/switch-legacy.css @@ -14,9 +14,8 @@ governing permissions and limitations under the License. /* This rule includes all of the transitions from spectrum-css except the * one for the transform attribute, which causes issue in Edge. */ - transition: background var(--spectrum-global-animation-duration-100, 0.13s) - ease-in-out, - border var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out, - box-shadow var(--spectrum-global-animation-duration-100, 0.13s) - ease-in-out; + transition: + background var(--spectrum-animation-duration-100, 0.13s) ease-in-out, + border var(--spectrum-animation-duration-100, 0.13s) ease-in-out, + box-shadow var(--spectrum-animation-duration-100, 0.13s) ease-in-out; } diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css index fc9f4b6c3c..cab92a8fee 100644 --- a/packages/textfield/src/textfield.css +++ b/packages/textfield/src/textfield.css @@ -69,10 +69,8 @@ textarea { :host([multiline]) textarea { transition: - box-shadow var(--spectrum-global-animation-duration-100, 0.13s) - ease-in-out, - border-color var(--spectrum-global-animation-duration-100, 0.13s) - ease-in-out; + box-shadow var(--spectrum-animation-duration-100, 0.13s) ease-in-out, + border-color var(--spectrum-animation-duration-100, 0.13s) ease-in-out; } :host([multiline]:not([quiet])) #textfield:after { diff --git a/projects/css-custom-vars-viewer/src/CssTable.ts b/projects/css-custom-vars-viewer/src/CssTable.ts index c4faef2ab5..f2b216d561 100644 --- a/projects/css-custom-vars-viewer/src/CssTable.ts +++ b/projects/css-custom-vars-viewer/src/CssTable.ts @@ -45,12 +45,12 @@ export class CssTable extends SpectrumElement { sp-toast { position: fixed; z-index: 300; - bottom: var(--spectrum-global-dimension-size-200); + bottom: var(--spectrum-spacing-400); left: 50%; transform: translateX(-50%); } sp-table { - height: var(--spectrum-global-dimension-size-4600); + height: calc(var(--spectrum-spacing-1000) * 5); } sp-swatch { pointer-events: none; @@ -88,11 +88,11 @@ export class CssTable extends SpectrumElement { ( a: { customVar: string; - sets: Object; + sets: object; }, b: { customVar: string; - sets: Object; + sets: object; } ): number => { const doSortKey = sortKey; diff --git a/projects/css-custom-vars-viewer/src/CustomVarsViewer.ts b/projects/css-custom-vars-viewer/src/CustomVarsViewer.ts index 2bd7a06be3..5703b90d0d 100644 --- a/projects/css-custom-vars-viewer/src/CustomVarsViewer.ts +++ b/projects/css-custom-vars-viewer/src/CustomVarsViewer.ts @@ -56,13 +56,13 @@ export class CustomVarsViewer extends SpectrumElement { static override styles = css` :host { display: block; - padding: var(--spectrum-global-dimension-size-300); + padding: var(--spectrum-spacing-200); } .picker-container { - padding-bottom: var(--spectrum-global-dimension-size-50); + padding-bottom: var(--spectrum-component-edge-to-visual-only-75); } sp-swatch-group { - padding: var(--spectrum-global-dimension-size-100); + padding: var(--spectrum-spacing-200); } `; diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts index 98d6c82cdc..8b7dd8c48d 100644 --- a/projects/story-decorator/src/StoryDecorator.ts +++ b/projects/story-decorator/src/StoryDecorator.ts @@ -48,7 +48,7 @@ const urlParams = new URLSearchParams(queryString); export let dir: 'ltr' | 'rtl' = (urlParams.get('sp_dir') as 'ltr' | 'rtl') || 'ltr'; -export let theme: SystemVariant = +export const theme: SystemVariant = (urlParams.get('sp_theme') as SystemVariant) || 'spectrum'; export let system: SystemVariant = (urlParams.get('sp_system') as SystemVariant) || 'spectrum'; @@ -57,8 +57,8 @@ export let color: Color = (matchMedia(DARK_MODE).matches ? 'dark' : 'light'); export let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium'; export let reduceMotion = urlParams.get('sp_reduceMotion') === 'true'; -export let screenshot = urlParams.get('sp_screenshot') === 'true'; -export let locale = urlParams.get('sp_locale') || 'en-US'; +export const screenshot = urlParams.get('sp_screenshot') === 'true'; +export const locale = urlParams.get('sp_locale') || 'en-US'; window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || { defaultSystemVariant: system, @@ -70,18 +70,6 @@ window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || { }; const reduceMotionProperties = css` - --spectrum-global-animation-duration-100: 0ms; - --spectrum-global-animation-duration-200: 0ms; - --spectrum-global-animation-duration-300: 0ms; - --spectrum-global-animation-duration-400: 0ms; - --spectrum-global-animation-duration-500: 0ms; - --spectrum-global-animation-duration-600: 0ms; - --spectrum-global-animation-duration-700: 0ms; - --spectrum-global-animation-duration-800: 0ms; - --spectrum-global-animation-duration-900: 0ms; - --spectrum-global-animation-duration-1000: 0ms; - --spectrum-global-animation-duration-2000: 0ms; - --spectrum-global-animation-duration-4000: 0ms; --spectrum-animation-duration-0: 0ms; --spectrum-animation-duration-100: 0ms; --spectrum-animation-duration-200: 0ms; diff --git a/test/testing-helpers.ts b/test/testing-helpers.ts index 8a4eb9f391..34ac3b0dd9 100644 --- a/test/testing-helpers.ts +++ b/test/testing-helpers.ts @@ -61,8 +61,9 @@ export async function testForMemoryLeaks( if ( !window.gc || !('measureUserAgentSpecificMemory' in performance) - ) + ) { this.skip(); + } this.timeout(10000); @@ -228,15 +229,21 @@ export async function isOnTopLayer(element: HTMLElement): Promise { let popoverOpen = false; try { popoverOpen = closestDialog.matches(':popover-open'); - } catch (error) {} + } catch (error) { + // do nothing + } let open = false; try { open = closestDialog.matches(':open'); - } catch (error) {} + } catch (error) { + // do nothing + } let modal = false; try { modal = closestDialog.matches(':modal'); - } catch (error) {} + } catch (error) { + // do nothing + } let polyfill = false; if (!popoverOpen && !open && !modal) { const style = getComputedStyle(closestDialog); @@ -294,18 +301,6 @@ export async function fixture( ${story}