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.

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: refactor sp-theme #4743

Merged
merged 10 commits into from
Sep 17, 2024
Merged

chore: refactor sp-theme #4743

merged 10 commits into from
Sep 17, 2024

Conversation

rubencarvalho
Copy link
Collaborator

@rubencarvalho rubencarvalho commented Sep 12, 2024

Description

Removed unnecessary polyfills and refactored the sp-theme code.

Related issue(s)

  • Falls under the scope of a larger Spectrum 2 icon task SWC-456

Motivation and context

Our sp-theme needs some love, we will probably build upon it to enable more complex functionality in our system (e.g., using context). So this is just a first step on cleaning it up a bit.

How has this been tested?

Existing tests, as this is purely a refactor.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

Copy link

Branch preview

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

@coveralls
Copy link
Collaborator

coveralls commented Sep 12, 2024

Pull Request Test Coverage Report for Build 10902516554

Details

  • 195 of 195 (100.0%) changed or added relevant lines in 2 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.03%) to 98.205%

Totals Coverage Status
Change from base Build 10901330019: 0.03%
Covered Lines: 32568
Relevant Lines: 32989

💛 - Coveralls

@rubencarvalho rubencarvalho force-pushed the ruben/chore-theme-refactor branch from 8b4b023 to 7c0fd57 Compare September 12, 2024 11:51
Copy link

github-actions bot commented Sep 12, 2024

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.99 0.99 0.99
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category Latest Main Branch
Total 226.113 kB 216.968 kB 216.596 kB 🏆
Scripts 55.782 kB 52.463 kB 51.99 kB 🏆
Stylesheet 34.334 kB 30.074 kB 🏆 30.117 kB
Document 6.206 kB 5.464 kB 5.458 kB 🏆
Font 126.846 kB 126.615 kB 🏆 126.627 kB

Request Count

Category Latest Main Branch
Total 52 52 52
Scripts 41 41 41
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2

Copy link

github-actions bot commented Sep 12, 2024

Tachometer results

Chrome

action-bar permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 501 kB 49.96ms - 50.84ms - faster ✔
4% - 7%
1.92ms - 3.87ms
branch 477 kB 52.43ms - 54.17ms slower ❌
4% - 8%
1.92ms - 3.87ms
-

action-menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 669 kB 137.60ms - 141.28ms - faster ✔
4% - 7%
5.19ms - 9.70ms
branch 659 kB 145.58ms - 148.18ms slower ❌
4% - 7%
5.19ms - 9.70ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 623 kB 65.57ms - 66.70ms - faster ✔
6% - 15%
3.95ms - 11.75ms
branch 616 kB 70.13ms - 77.84ms slower ❌
6% - 18%
3.95ms - 11.75ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 622 kB 64.77ms - 68.45ms - faster ✔
4% - 10%
2.96ms - 7.08ms
branch 615 kB 70.70ms - 72.56ms slower ❌
4% - 11%
2.96ms - 7.08ms
-

test-open-close-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 815 kB 1879.19ms - 1882.43ms - unsure 🔍
+0% - +0%
+3.26ms - +7.49ms
branch 802 kB 1874.06ms - 1876.80ms unsure 🔍
-0% - -0%
-7.49ms - -3.26ms
-

test-open-close permalink

Version Bytes Avg Time vs remote vs branch
npm latest 813 kB 1876.00ms - 1879.02ms - unsure 🔍
-0% - +0%
-2.46ms - +1.59ms
branch 801 kB 1876.59ms - 1879.29ms unsure 🔍
-0% - +0%
-1.59ms - +2.46ms
-

breadcrumbs permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 686 kB 483.91ms - 489.87ms - faster ✔
1% - 3%
5.50ms - 15.08ms
branch 676 kB 493.43ms - 500.94ms slower ❌
1% - 3%
5.50ms - 15.08ms
-

combobox permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 731 kB 36.86ms - 37.37ms - faster ✔
3% - 5%
1.06ms - 2.10ms
branch 718 kB 38.24ms - 39.14ms slower ❌
3% - 6%
1.06ms - 2.10ms
-

light-dom-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 732 kB 385.85ms - 391.57ms - faster ✔
2% - 5%
8.09ms - 18.25ms
branch 719 kB 397.68ms - 406.08ms slower ❌
2% - 5%
8.09ms - 18.25ms
-

contextual-help permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 658 kB 50.64ms - 52.72ms - faster ✔
5% - 10%
2.62ms - 5.62ms
branch 645 kB 54.72ms - 56.88ms slower ❌
5% - 11%
2.62ms - 5.62ms
-

menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 494 kB 217.59ms - 220.68ms - faster ✔
2% - 4%
3.84ms - 9.95ms
branch 470 kB 223.39ms - 228.67ms slower ❌
2% - 5%
3.84ms - 9.95ms
-

overlay permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 711 kB 429.41ms - 434.95ms - faster ✔
1% - 3%
4.33ms - 11.33ms
branch 699 kB 437.86ms - 442.15ms slower ❌
1% - 3%
4.33ms - 11.33ms
-

directive-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 792 kB 22.18ms - 22.63ms - faster ✔
11% - 14%
2.93ms - 3.62ms
branch 778 kB 25.42ms - 25.94ms slower ❌
13% - 16%
2.93ms - 3.62ms
-

element-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 782 kB 346.49ms - 350.31ms - faster ✔
3% - 5%
9.52ms - 16.83ms
branch 767 kB 358.46ms - 364.69ms slower ❌
3% - 5%
9.52ms - 16.83ms
-

lazy-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 578 kB 41.16ms - 44.70ms - faster ✔
2% - 10%
0.97ms - 4.77ms
branch 564 kB 45.10ms - 46.50ms slower ❌
2% - 11%
0.97ms - 4.77ms
-

picker permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 536 kB 497.60ms - 506.36ms - faster ✔
2% - 5%
10.34ms - 24.17ms
branch 526 kB 513.87ms - 524.59ms slower ❌
2% - 5%
10.34ms - 24.17ms
-

popover permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 396 kB 11.26ms - 12.00ms - unsure 🔍
-9% - +1%
-1.14ms - +0.14ms
branch 374 kB 11.60ms - 12.65ms unsure 🔍
-1% - +10%
-0.14ms - +1.14ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 495 kB 76.10ms - 77.68ms - faster ✔
3% - 6%
2.70ms - 5.11ms
branch 470 kB 79.88ms - 81.70ms slower ❌
3% - 7%
2.70ms - 5.11ms
-

split-button permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 749 kB 1863.92ms - 1868.35ms - unsure 🔍
-0% - +0%
-5.54ms - +1.04ms
branch 736 kB 1865.95ms - 1870.82ms unsure 🔍
-0% - +0%
-1.04ms - +5.54ms
-

tooltip permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 565 kB 33.72ms - 34.24ms - faster ✔
4% - 6%
1.25ms - 2.12ms
branch 555 kB 35.32ms - 36.01ms slower ❌
4% - 6%
1.25ms - 2.12ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 548 kB 22.99ms - 23.46ms - faster ✔
7% - 10%
1.79ms - 2.53ms
branch 537 kB 25.10ms - 25.67ms slower ❌
8% - 11%
1.79ms - 2.53ms
-

test-element permalink

Version Bytes Avg Time vs remote vs branch
npm latest 673 kB 51.40ms - 52.48ms - faster ✔
4% - 7%
2.33ms - 3.92ms
branch 660 kB 54.49ms - 55.65ms slower ❌
4% - 8%
2.33ms - 3.92ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 649 kB 41.75ms - 42.53ms - faster ✔
7% - 9%
3.00ms - 4.18ms
branch 635 kB 45.28ms - 46.18ms slower ❌
7% - 10%
3.00ms - 4.18ms
-

truncated permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 546 kB 58.54ms - 60.98ms - faster ✔
3% - 10%
1.88ms - 6.28ms
branch 519 kB 62.01ms - 65.68ms slower ❌
3% - 11%
1.88ms - 6.28ms
-
Firefox

action-bar permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 501 kB 109.94ms - 115.22ms - faster ✔
3% - 10%
3.77ms - 11.75ms
branch 477 kB 117.34ms - 123.34ms slower ❌
3% - 11%
3.77ms - 11.75ms
-

action-menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 669 kB 272.82ms - 275.74ms - faster ✔
12% - 14%
38.29ms - 44.11ms
branch 659 kB 312.97ms - 317.99ms slower ❌
14% - 16%
38.29ms - 44.11ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 623 kB 132.15ms - 134.05ms - unsure 🔍
-2% - +0%
-2.47ms - +0.15ms
branch 616 kB 133.36ms - 135.16ms unsure 🔍
-0% - +2%
-0.15ms - +2.47ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 622 kB 133.04ms - 139.28ms - unsure 🔍
-2% - +4%
-2.16ms - +5.44ms
branch 615 kB 132.36ms - 136.68ms unsure 🔍
-4% - +2%
-5.44ms - +2.16ms
-

test-open-close-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 815 kB 1902.12ms - 1910.20ms - slower ❌
1% - 1%
13.01ms - 23.11ms
branch 802 kB 1885.07ms - 1891.13ms faster ✔
1% - 1%
13.01ms - 23.11ms
-

test-open-close permalink

Version Bytes Avg Time vs remote vs branch
npm latest 813 kB 1894.33ms - 1901.79ms - unsure 🔍
-0% - +0%
-4.61ms - +4.01ms
branch 801 kB 1896.21ms - 1900.51ms unsure 🔍
-0% - +0%
-4.01ms - +4.61ms
-

breadcrumbs permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 686 kB 769.11ms - 790.21ms - faster ✔
1% - 5%
10.55ms - 36.73ms
branch 676 kB 795.56ms - 811.04ms slower ❌
1% - 5%
10.55ms - 36.73ms
-

combobox permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 731 kB 65.49ms - 70.19ms - unsure 🔍
-7% - +2%
-5.14ms - +1.18ms
branch 718 kB 67.71ms - 71.93ms unsure 🔍
-2% - +8%
-1.18ms - +5.14ms
-

light-dom-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 732 kB 767.23ms - 799.17ms - unsure 🔍
-1% - +5%
-9.36ms - +37.72ms
branch 719 kB 751.72ms - 786.32ms unsure 🔍
-5% - +1%
-37.72ms - +9.36ms
-

contextual-help permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 658 kB 111.20ms - 116.72ms - faster ✔
2% - 8%
2.24ms - 10.12ms
branch 645 kB 117.33ms - 122.95ms slower ❌
2% - 9%
2.24ms - 10.12ms
-

menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 494 kB 464.00ms - 479.92ms - faster ✔
0% - 6%
1.67ms - 28.49ms
branch 470 kB 476.24ms - 497.84ms slower ❌
0% - 6%
1.67ms - 28.49ms
-

overlay permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 789 kB 626.56ms - 647.72ms - slower ❌
1% - 5%
8.93ms - 31.07ms
branch 774 kB 613.88ms - 620.40ms faster ✔
1% - 5%
8.93ms - 31.07ms
-

directive-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 792 kB 45.73ms - 46.31ms - faster ✔
7% - 10%
3.49ms - 4.83ms
branch 778 kB 49.57ms - 50.79ms slower ❌
8% - 11%
3.49ms - 4.83ms
-

element-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 782 kB 649.44ms - 657.76ms - slower ❌
3% - 5%
19.60ms - 29.68ms
branch 767 kB 626.11ms - 631.81ms faster ✔
3% - 5%
19.60ms - 29.68ms
-

lazy-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 578 kB 90.35ms - 97.89ms - unsure 🔍
-5% - +4%
-4.26ms - +3.74ms
branch 564 kB 93.05ms - 95.71ms unsure 🔍
-4% - +5%
-3.74ms - +4.26ms
-

picker permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 536 kB 980.97ms - 1006.79ms - faster ✔
4% - 6%
39.62ms - 67.26ms
branch 526 kB 1042.38ms - 1052.26ms slower ❌
4% - 7%
39.62ms - 67.26ms
-

popover permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 396 kB 29.22ms - 32.22ms - unsure 🔍
-13% - +3%
-4.13ms - +0.93ms
branch 374 kB 30.29ms - 34.35ms unsure 🔍
-3% - +14%
-0.93ms - +4.13ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 495 kB 161.38ms - 168.42ms - unsure 🔍
-5% - +1%
-7.99ms - +1.59ms
branch 470 kB 164.84ms - 171.36ms unsure 🔍
-1% - +5%
-1.59ms - +7.99ms
-

split-button permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 749 kB 1872.28ms - 1875.96ms - unsure 🔍
-0% - -0%
-6.65ms - -1.11ms
branch 736 kB 1875.93ms - 1880.07ms unsure 🔍
+0% - +0%
+1.11ms - +6.65ms
-

tooltip permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 673 kB 78.17ms - 82.43ms - slower ❌
8% - 15%
6.14ms - 10.90ms
branch 659 kB 70.70ms - 72.86ms faster ✔
8% - 13%
6.14ms - 10.90ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 548 kB 45.84ms - 47.76ms - faster ✔
12% - 21%
6.60ms - 12.16ms
branch 537 kB 53.57ms - 58.79ms slower ❌
14% - 26%
6.60ms - 12.16ms
-

test-element permalink

Version Bytes Avg Time vs remote vs branch
npm latest 673 kB 112.23ms - 118.57ms - faster ✔
2% - 10%
2.77ms - 11.99ms
branch 660 kB 119.44ms - 126.12ms slower ❌
2% - 11%
2.77ms - 11.99ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 649 kB 89.87ms - 94.33ms - faster ✔
3% - 9%
2.74ms - 8.74ms
branch 635 kB 95.83ms - 99.85ms slower ❌
3% - 10%
2.74ms - 8.74ms
-

truncated permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 546 kB 99.39ms - 104.33ms - faster ✔
1% - 7%
0.67ms - 8.05ms
branch 519 kB 103.48ms - 108.96ms slower ❌
1% - 8%
0.67ms - 8.05ms
-

@rubencarvalho rubencarvalho force-pushed the ruben/chore-theme-refactor branch from 828abce to b68d601 Compare September 12, 2024 15:48
@rubencarvalho rubencarvalho marked this pull request as ready for review September 12, 2024 15:58
@rubencarvalho rubencarvalho requested a review from a team as a code owner September 12, 2024 15:58
'https://opensource.adobe.com/spectrum-web-components/tools/themes/#deprecation',
{ level: 'deprecation' }
);
if (value === 'spectrum-two') {
Copy link
Contributor

@jnjosh jnjosh Sep 12, 2024

Choose a reason for hiding this comment

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

This reads weird to me in that if you are on spectrum-two you'd get two warnings, one saying deprecated and one saying beta? I guess that's only if they use the theme property though. Anyway, Beta seems like a long term possibility so I wonder if it makes sense to just create a warnBetaSystem which would make the call site clearer too.

Copy link
Contributor

@jnjosh jnjosh Sep 12, 2024

Choose a reason for hiding this comment

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

It does look to me like this would get called even if they used system instead of theme though, so probably worth breaking it a part? Or something?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Oops, you are right. After moving this debugging code around it ended up becoming messy. I have now cleaned it up, so it now only warns once about the deprecated use of theme.
Following your suggestion, I also created a dedicated beta warning (for S2) that we can remove if we want. Do we want to remove this beta warning? cc: @Rajdeepc

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes it make sense to remove the beta warning for now! We will add this step by step once we start rolling things for S2. Thanks for doing this! Appreciate it

@TarunAdobe TarunAdobe self-requested a review September 13, 2024 06:42
packages/switch/package.json Outdated Show resolved Hide resolved
packages/switch/src/Switch.ts Outdated Show resolved Hide resolved
{ level: 'deprecation' }
);
if (value === 'spectrum-two') {
window.__swc.warn(
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need this warning now?

Copy link
Collaborator Author

@rubencarvalho rubencarvalho Sep 13, 2024

Choose a reason for hiding this comment

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

I am not sure, maybe we remove on 1.0.0?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes let's remove on 1.0.0? Maybe add this to the TODO list.

@rubencarvalho rubencarvalho force-pushed the ruben/chore-theme-refactor branch from ce72753 to b68d601 Compare September 13, 2024 21:41
TarunAdobe
TarunAdobe previously approved these changes Sep 14, 2024
Copy link
Contributor

@TarunAdobe TarunAdobe left a comment

Choose a reason for hiding this comment

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

good stuff!!!

Rajdeepc
Rajdeepc previously approved these changes Sep 16, 2024
Rajdeepc
Rajdeepc previously approved these changes Sep 17, 2024
Copy link
Contributor

@Rajdeepc Rajdeepc left a comment

Choose a reason for hiding this comment

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

Let's land this!

@rubencarvalho rubencarvalho merged commit 47b2d61 into main Sep 17, 2024
61 checks passed
@rubencarvalho rubencarvalho deleted the ruben/chore-theme-refactor branch September 17, 2024 13:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants