Skip to content

Commit

Permalink
chore: remove global vars references internally (#4974)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TarunAdobe
TarunAdobe authored Jan 29, 2025
1 parent 3651e57 commit bbb3733
Show file tree
Hide file tree
Showing 13 changed files with 210 additions and 314 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ parameters:
# 3. Commit this change to the PR branch where the changes exist.
current_golden_images_hash:
type: string
default: 266fb37749bc59cbde0e81148dddea4d1bae2053
default: 55b312b59925c0a6e24b7947114dcdb8cf61a9d2
wireit_cache_name:
type: string
default: wireit
Expand Down
2 changes: 1 addition & 1 deletion packages/card/src/card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
);
}

Expand Down
157 changes: 63 additions & 94 deletions packages/color-wheel/test/color-wheel.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,34 +36,28 @@ ignoreResizeObserverLoopError(before, after);
describe('ColorWheel', () => {
testForLitDevWarnings(
async () =>
await fixture<ColorWheel>(
html`
<sp-color-wheel></sp-color-wheel>
`
)
await fixture<ColorWheel>(html`
<sp-color-wheel></sp-color-wheel>
`)
);
it('loads default color-wheel accessibly', async () => {
const el = await fixture<ColorWheel>(
html`
<sp-color-wheel></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel></sp-color-wheel>
`);

await elementUpdated(el);

await expect(el).to.be.accessible();
});

it('manages a single tab stop', async () => {
const test = await fixture<HTMLDivElement>(
html`
<div>
<input type="text" id="test-input-1" />
<sp-color-wheel></sp-color-wheel>
<input type="text" id="test-input-2" />
</div>
`
);
const test = await fixture<HTMLDivElement>(html`
<div>
<input type="text" id="test-input-1" />
<sp-color-wheel></sp-color-wheel>
<input type="text" id="test-input-2" />
</div>
`);
const el = test.querySelector('sp-color-wheel') as ColorWheel;
const input1 = test.querySelector(
'input:nth-of-type(1)'
Expand Down Expand Up @@ -113,11 +107,9 @@ describe('ColorWheel', () => {
expect(document.activeElement).to.equal(input1);
});
it('manages [focused]', async () => {
const el = await fixture<ColorWheel>(
html`
<sp-color-wheel></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel></sp-color-wheel>
`);

await elementUpdated(el);

Expand Down Expand Up @@ -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<ColorWheel>(
html`
<sp-color-wheel
@change=${() => changeSpy()}
@input=${() => inputSpy()}
></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel
@change=${() => changeSpy()}
@input=${() => inputSpy()}
></sp-color-wheel>
`);

await elementUpdated(el);
el.focus();
Expand All @@ -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<ColorWheel>(
html`
<sp-color-wheel
@change=${() => changeSpy()}
@input=${() => inputSpy()}
></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel
@change=${() => changeSpy()}
@input=${() => inputSpy()}
></sp-color-wheel>
`);

await elementUpdated(el);

Expand All @@ -210,11 +198,9 @@ describe('ColorWheel', () => {
expect(changeSpy.callCount).to.equal(1);
});
it('accepts "Arrow*" keypresses', async () => {
const el = await fixture<ColorWheel>(
html`
<sp-color-wheel></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel></sp-color-wheel>
`);

await elementUpdated(el);

Expand Down Expand Up @@ -259,11 +245,9 @@ describe('ColorWheel', () => {
expect(el.value).to.equal(0);
});
it('accepts "Arrow*" keypresses in dir="rtl"', async () => {
const el = await fixture<ColorWheel>(
html`
<sp-color-wheel dir="rtl"></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel dir="rtl"></sp-color-wheel>
`);

await elementUpdated(el);

Expand Down Expand Up @@ -308,11 +292,9 @@ describe('ColorWheel', () => {
expect(el.value).to.equal(0);
});
it('accepts "Arrow*" keypresses with alteration', async () => {
const el = await fixture<ColorWheel>(
html`
<sp-color-wheel></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel></sp-color-wheel>
`);

await elementUpdated(el);
el.focus();
Expand Down Expand Up @@ -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<ColorWheel>(
html`
<sp-color-wheel
.color=${color}
style="--mod-colorwheel-width: 160px; --mod-colorwheel-height: 160px;"
></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel
.color=${color}
style="--mod-colorwheel-width: 160px; --mod-colorwheel-height: 160px;"
></sp-color-wheel>
`);

await elementUpdated(el);

Expand Down Expand Up @@ -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<ColorWheel>(
html`
<sp-color-wheel
.color=${color}
@change=${(event: Event) => {
event?.preventDefault();
}}
style="--spectrum-global-dimension-size-125: 10px;"
></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel
.color=${color}
@change=${(event: Event) => {
event?.preventDefault();
}}
></sp-color-wheel>
`);

await elementUpdated(el);

Expand Down Expand Up @@ -559,11 +536,9 @@ describe('ColorWheel', () => {
];
colorFormats.map((format) => {
it(`maintains \`color\` format as ${format.name}`, async () => {
const el = await fixture<ColorWheel>(
html`
<sp-color-wheel></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel></sp-color-wheel>
`);

el.color = format.color;
if (format.name.startsWith('Hex')) {
Expand All @@ -572,21 +547,17 @@ describe('ColorWheel', () => {
});
});
it(`maintains \`color\` format as TinyColor`, async () => {
const el = await fixture<ColorWheel>(
html`
<sp-color-wheel></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel></sp-color-wheel>
`);
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<ColorWheel>(
html`
<sp-color-wheel></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel></sp-color-wheel>
`);
const hue = 300;
const hsl = `hsl(${hue}, 60%, 100%)`;
el.color = hsl;
Expand Down Expand Up @@ -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<ColorWheel>(
html`
<sp-color-wheel></sp-color-wheel>
`
);
const el = await fixture<ColorWheel>(html`
<sp-color-wheel></sp-color-wheel>
`);

await elementUpdated(el);

Expand Down
12 changes: 3 additions & 9 deletions packages/divider/stories/divider.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,7 @@ export const small = (): TemplateResult => {

export const verticalSmall = (): TemplateResult => {
return html`
<div
style="height: var(--spectrum-global-dimension-size-400, 32px); display: flex;"
>
<div style="height: var(--spectrum-spacing-500, 32px); display: flex;">
<sp-action-button quiet>
<sp-icon-align-left slot="icon"></sp-icon-align-left>
</sp-action-button>
Expand All @@ -79,9 +77,7 @@ export const verticalSmall = (): TemplateResult => {

export const verticalMedium = (): TemplateResult => {
return html`
<div
style="height: var(--spectrum-global-dimension-size-400, 32px); display: flex;"
>
<div style="height: var(--spectrum-spacing-500, 32px); display: flex;">
<sp-action-button quiet>
<sp-icon-align-left slot="icon"></sp-icon-align-left>
</sp-action-button>
Expand All @@ -99,9 +95,7 @@ export const verticalMedium = (): TemplateResult => {

export const verticalLarge = (): TemplateResult => {
return html`
<div
style="height: var(--spectrum-global-dimension-size-400, 32px); display: flex;"
>
<div style="height: var(--spectrum-spacing-500, 32px); display: flex;">
<sp-action-button quiet>
<sp-icon-align-left slot="icon"></sp-icon-align-left>
</sp-action-button>
Expand Down
4 changes: 2 additions & 2 deletions packages/iconset/stories/icons-demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
);
}
Expand Down
29 changes: 0 additions & 29 deletions packages/overlay/stories/overlay.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -508,35 +508,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;
}
</style>
<overlay-trigger type="modal" open="click">
<sp-dialog-wrapper
Expand Down
Loading

0 comments on commit bbb3733

Please sign in to comment.