Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove global vars references internally #4974

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

chore: remove global vars references internally #4974

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a5550bb
chore: removed global vars references internally
TarunAdobe Dec 5, 2024
b8ccb0a
chore: update global image hash
TarunAdobe Dec 5, 2024
8f4f4a6
chore: fixed typo
TarunAdobe Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Open in desktop
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: a095ed1ef88686fdb24936dad763598ac7981193
default: a5550bbb530d05f322cecf24d1fb8c9e8c9ed99b
wireit_cache_name:
type: string
default: wireit
Expand Down
2 changes: 1 addition & 1 deletion packages/card/src/card.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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-600, 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-600, 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-600, 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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
</style>
<overlay-trigger type="modal" open="click">
<sp-dialog-wrapper
Expand Down
Loading
Loading