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

Jump to bottom

chore: remove 'theme' attribute from sp-theme #4765

Merged
merged 9 commits into from
Oct 17, 2024
Merged

chore: remove 'theme' attribute from sp-theme #4765

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0487c2d
chore: remove 'theme' attribute from sp-theme
rubencarvalho Sep 17, 2024
57c56eb
chore: remove theme references in web test runner
rubencarvalho Sep 24, 2024
aba4922
chore: remove theme references in picker readme
rubencarvalho Sep 24, 2024
d675f4a
chore: remove theme references in circle ci config
rubencarvalho Sep 24, 2024
7c00512
chore: merge main
rubencarvalho Oct 15, 2024
db7d6ef
Merge branch 'ruben/remove-deprecations' into ruben/remove-theme
rubencarvalho Oct 16, 2024
bda47fc
chore: remove lightest and darkest from VRT
rubencarvalho Oct 16, 2024
a671e2c
chore: update 'classic' system to be 'spectrum' (#4830)
rubencarvalho Oct 17, 2024
9426cf2
chore: add system test
rubencarvalho Oct 17, 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
32 changes: 15 additions & 17 deletions .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ commands:
at: /
run-regressions:
parameters:
regression_theme:
regression_system:
type: string
regression_color:
type: string
Expand All @@ -52,9 +52,9 @@ commands:
- restore_cache:
name: Restore Golden Images Cache
keys:
- v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-<< parameters.regression_theme >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
- v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
- v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
- v2-golden-images-main-<< parameters.regression_theme >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
- v2-golden-images-main-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
- v2-golden-images-main-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-
- run:
name: Count baseline images
Expand All @@ -63,7 +63,7 @@ commands:
when: always
name: VRT Run
command: |
yarn test:ci --config web-test-runner.config.vrt.js --group vrt-<< parameters.regression_theme >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>
yarn test:ci --config web-test-runner.config.vrt.js --group vrt-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>
# store results and artifacts before rearranging things for the new cache.
- store_test_results:
path: /root/project/results/
Expand All @@ -85,15 +85,15 @@ commands:
name: Create review site
command: |
branch=$(git symbolic-ref --short HEAD)
node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --system="<< parameters.regression_theme >> << parameters.regression_color >> << parameters.regression_scale >> << parameters.regression_dir >>"
node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --system="<< parameters.regression_system >> << parameters.regression_color >> << parameters.regression_scale >> << parameters.regression_dir >>"
yarn rollup -c test/visual/rollup.config.js
- run:
when: on_fail
name: Publish review site
command: |
cp projects/documentation/content/favicon.ico test/visual
branch=$(git symbolic-ref --short HEAD)
hash=$(echo -n $branch-<< parameters.regression_theme >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >> | md5sum | cut -c 1-32)
hash=$(echo -n $branch-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >> | md5sum | cut -c 1-32)
echo hash
yarn netlify deploy --alias=$hash --cwd test/visual
# move "updated" screenshot into the baseline directory before making the new cache
Expand All @@ -107,12 +107,12 @@ commands:
name: Build Golden Images Revision Cache
paths:
- test/visual/screenshots-baseline
key: v2-golden-images-{{ .Revision }}-<< parameters.regression_theme >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
key: v2-golden-images-{{ .Revision }}-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
- save_cache:
name: Build Golden Images Branch Cache
paths:
- test/visual/screenshots-baseline
key: v2-golden-images-{{ .Branch }}-<< parameters.regression_theme >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}
key: v2-golden-images-{{ .Branch }}-<< parameters.regression_system >>-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}

jobs:
commitlint:
Expand Down Expand Up @@ -243,7 +243,6 @@ jobs:
keys:
- v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-hcm-
- v2-golden-images-main-hcm-
- v2-golden-images-main-spectrum-lightest-medium-ltr-
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did we remove it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We removed the lightest tests, so they are no longer part of our test suite. As a result, we will not be regenerating the v2-golden-images-main-spectrum-lightest-medium-ltr- cache key. While we could change it to light, these are fallback cache keys and are in order. The first two should be sufficient. These caches stay-alive time is 15 days on CircleCI.

- run:
name: Count baseline images
command: find test/visual/screenshots-baseline -type f | wc -l > count_start.txt
Expand Down Expand Up @@ -305,7 +304,7 @@ jobs:
visual:
executor: node
parameters:
theme:
system:
type: string
color:
type: string
Expand All @@ -316,7 +315,7 @@ jobs:
steps:
- downstream
- run-regressions:
regression_theme: << parameters.theme >>
regression_system: << parameters.system >>
regression_color: << parameters.color >>
regression_scale: << parameters.scale >>
regression_dir: << parameters.dir >>
Expand Down Expand Up @@ -349,23 +348,22 @@ workflows:
# Beta docs are only published from main
only: main
- visual:
name: << matrix.theme >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
name: << matrix.system >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
matrix:
parameters:
theme: [spectrum, express]
color: [lightest, light, dark, darkest]
system: [spectrum, express]
color: [light, dark]
scale: [medium, large]
dir: [ltr, rtl]
filters:
branches:
# Forked pull requests have CIRCLE_BRANCH set to pull/XXX
ignore: /pull\/[0-9]+/
- visual:
name: << matrix.theme >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
name: << matrix.system >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
matrix:
parameters:
# Spectrum-two doesn't support the lightest and darkest themes
theme: [spectrum-two]
system: [spectrum-two]
color: [light, dark]
scale: [medium, large]
dir: [ltr, rtl]
Expand Down
2 changes: 1 addition & 1 deletion packages/dialog/test/dialog-base.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ async function styledFixture<T extends Element>(
story: TemplateResult
): Promise<T> {
const test = await fixture<Theme>(html`
<sp-theme theme="spectrum" scale="medium" color="dark">
<sp-theme system="spectrum" scale="medium" color="dark">
${story}
</sp-theme>
`);
Expand Down
2 changes: 1 addition & 1 deletion packages/dialog/test/dialog-wrapper.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ async function styledFixture<T extends Element>(
story: TemplateResult
): Promise<T> {
const test = await fixture<Theme>(html`
<sp-theme theme="classic" scale="medium" color="dark">
<sp-theme system="spectrum" scale="medium" color="dark">
${story}
</sp-theme>
`);
Expand Down
2 changes: 1 addition & 1 deletion packages/overlay/test/overlay-element.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ async function styledFixture<T extends Element>(
story: TemplateResult
): Promise<T> {
const test = await fixture<Theme>(html`
<sp-theme theme="spectrum" scale="medium" color="light">
<sp-theme system="spectrum" scale="medium" color="light">
${story}
</sp-theme>
`);
Expand Down
2 changes: 1 addition & 1 deletion packages/overlay/test/overlay-trigger-hover.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ async function styledFixture<T extends Element>(
story: TemplateResult
): Promise<T> {
const test = await fixture<Theme>(html`
<sp-theme theme="spectrum" scale="medium" color="light">
<sp-theme system="spectrum" scale="medium" color="light">
${story}
</sp-theme>
`);
Expand Down
2 changes: 1 addition & 1 deletion packages/overlay/test/overlay-v1.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ async function styledFixture<T extends Element>(
story: TemplateResult
): Promise<T> {
const test = await fixture<Theme>(html`
<sp-theme theme="spectrum" scale="medium" color="dark">
<sp-theme system="spectrum" scale="medium" color="dark">
${story}
</sp-theme>
`);
Expand Down
106 changes: 49 additions & 57 deletions packages/overlay/test/overlay.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ async function styledFixture<T extends Element>(
story: TemplateResult
): Promise<T> {
const test = await fixture<Theme>(html`
<sp-theme theme="spectrum" scale="medium" color="dark">
<sp-theme system="spectrum" scale="medium" color="dark">
${story}
</sp-theme>
`);
Expand All @@ -68,58 +68,52 @@ describe('Overlays', () => {

describe('shared fixture', () => {
beforeEach(async () => {
testDiv = await styledFixture<HTMLDivElement>(
html`
<div id="top">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}

#top {
margin: 100px;
}

sp-button {
flex: none;
}

#overlay-content {
display: none;
}
</style>
<sp-button id="first-button" variant="primary">
Show Popover
</sp-button>
<div id="overlay-content">
<sp-popover
id="outer-popover"
direction="bottom"
tip
>
<sp-dialog no-divider>
<div class="options-popover-content">
A popover message
</div>
<sp-button id="outer-focus-target">
Test 1
</sp-button>
<sp-button>Test 2</sp-button>
<sp-button>Test 3</sp-button>
</sp-dialog>
</sp-popover>
<sp-tooltip id="hover-1" class="hover-content">
Hover message
</sp-tooltip>
<sp-tooltip id="hover-2" class="hover-content">
Other hover message
</sp-tooltip>
</div>
testDiv = await styledFixture<HTMLDivElement>(html`
<div id="top">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}

#top {
margin: 100px;
}

sp-button {
flex: none;
}

#overlay-content {
display: none;
}
</style>
<sp-button id="first-button" variant="primary">
Show Popover
</sp-button>
<div id="overlay-content">
<sp-popover id="outer-popover" direction="bottom" tip>
<sp-dialog no-divider>
<div class="options-popover-content">
A popover message
</div>
<sp-button id="outer-focus-target">
Test 1
</sp-button>
<sp-button>Test 2</sp-button>
<sp-button>Test 3</sp-button>
</sp-dialog>
</sp-popover>
<sp-tooltip id="hover-1" class="hover-content">
Hover message
</sp-tooltip>
<sp-tooltip id="hover-2" class="hover-content">
Other hover message
</sp-tooltip>
</div>
`
);
</div>
`);
await elementUpdated(testDiv);
});

Expand Down Expand Up @@ -589,11 +583,9 @@ describe('Overlays', () => {

it('opens detached content', async () => {
const textContent = 'This is a detached element that has been overlaid';
const el = await fixture<HTMLButtonElement>(
html`
<button>Trigger</button>
`
);
const el = await fixture<HTMLButtonElement>(html`
<button>Trigger</button>
`);

const content = document.createElement('sp-popover');
content.textContent = textContent;
Expand Down
4 changes: 2 additions & 2 deletions packages/picker-button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ You can customize the icon in an `<sp-picker-button>` by addressing a new icon t

### Rounded

When delivered as part of the `express` theme, an `<sp-picker-button>` with the `rounded` attribute will be given deeply rounded corners:
When delivered as part of the `express` system, an `<sp-picker-button>` with the `rounded` attribute will be given deeply rounded corners:

```html
<sp-picker-button rounded></sp-picker-button>
Expand Down Expand Up @@ -148,7 +148,7 @@ Leveraging the `disabled` attribute will dim the `<sp-picker-button>` and alter

### Invalid

When delivered as part of the `spectrum` theme, an `<sp-picker-button>` with the `invalid` attribute will be given a red border:
When delivered as part of the `spectrum` system, an `<sp-picker-button>` with the `invalid` attribute will be given a red border:

```html
<sp-picker-button invalid></sp-picker-button>
Expand Down
2 changes: 1 addition & 1 deletion packages/table/test/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export async function styledFixture<T extends Element>(
story: TemplateResult
): Promise<T> {
const test = await fixture<Theme>(html`
<sp-theme theme="classic" scale="medium" color="light">
<sp-theme system="spectrum" scale="medium" color="light">
${story}
</sp-theme>
`);
Expand Down
Loading
Loading