chore(docs): updated theme methods to use arrow function in trigger method

Rajdeepc commented 1 month ago

Description

updateTheme, updateColor, updateSystem method is changed to reference the parent overlay instead of picker which was getting reference fromtrigger() directive

Related issue(s)

4471

Motivation and context

How has this been tested?

[ ] Test case 1
1. Go here
2. Do this
[ ] Test case 2
1. Go here
2. Do this

Screenshots (if appropriate)

Types of changes

[x] 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

[x] I have signed the Adobe Open Source CLA.
[x] 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.
[x] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[x] All new and existing tests passed.
[x] 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.

github-actions[bot] commented 1 month ago

Branch preview

Visual regression test results

github-actions[bot] commented 1 month ago

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](https://github.com/GoogleChrome/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	222.58 kB	210.477 kB	210.053 kB 🏆
Scripts	54.746 kB	48.236 kB	47.851 kB 🏆
Stylesheet	34.93 kB	30.425 kB	30.398 kB 🏆
Document	5.894 kB	5.183 kB 🏆	5.189 kB
Font	127.01 kB	126.633 kB	126.615 kB 🏆

Request Count

Category	Latest	Main	Branch
Total	45	45	45
Scripts	37	37	37
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

github-actions[bot] commented 1 month ago

Tachometer results

Chrome

## action-bar [_permalink_](#user-content-action-bar) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 484 kB | 49.43ms - 51.27ms | - | faster ✔
3% - 8%
1.39ms - 4.41ms | | branch | 472 kB | 52.06ms - 54.45ms | slower ❌
3% - 9%
1.39ms - 4.41ms | - | ## action-menu [_permalink_](#user-content-action-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 647 kB | 134.30ms - 137.34ms | - | faster ✔
5% - 8%
7.46ms - 11.99ms | | branch | 634 kB | 143.86ms - 147.22ms | slower ❌
5% - 9%
7.46ms - 11.99ms | - | ### test-directive [_permalink_](#user-content-action-menu-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 604 kB | 62.17ms - 63.36ms | - | faster ✔
5% - 8%
3.06ms - 5.13ms | | branch | 591 kB | 66.02ms - 67.70ms | slower ❌
5% - 8%
3.06ms - 5.13ms | - | ### test-lazy [_permalink_](#user-content-action-menu-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 603 kB | 59.80ms - 60.91ms | - | faster ✔
5% - 8%
3.17ms - 4.95ms | | branch | 590 kB | 63.71ms - 65.11ms | slower ❌
5% - 8%
3.17ms - 4.95ms | - | ### test-open-close-directive [_permalink_](#user-content-action-menu-test-open-close-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 789 kB | 1872.42ms - 1875.26ms | - | unsure 🔍
-0% - +0%
-2.64ms - +1.68ms | | branch | 777 kB | 1872.69ms - 1875.95ms | unsure 🔍
-0% - +0%
-1.68ms - +2.64ms | - | ### test-open-close [_permalink_](#user-content-action-menu-test-open-close) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 788 kB | 1859.61ms - 1862.13ms | - | unsure 🔍
-0% - +0%
-2.39ms - +1.88ms | | branch | 775 kB | 1859.40ms - 1862.84ms | unsure 🔍
-0% - +0%
-1.88ms - +2.39ms | - | ## card [_permalink_](#user-content-card) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 502 kB | 37.66ms - 38.30ms | - | unsure 🔍
-2% - +0%
-0.85ms - +0.05ms | | branch | 489 kB | 38.06ms - 38.69ms | unsure 🔍
-0% - +2%
-0.05ms - +0.85ms | - | ## combobox [_permalink_](#user-content-combobox) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 709 kB | 35.33ms - 35.98ms | - | faster ✔
4% - 6%
1.50ms - 2.35ms | | branch | 697 kB | 37.31ms - 37.85ms | slower ❌
4% - 7%
1.50ms - 2.35ms | - | ### light-dom-test [_permalink_](#user-content-combobox-light-dom-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 709 kB | 387.80ms - 392.33ms | - | faster ✔
3% - 5%
12.56ms - 20.70ms | | branch | 697 kB | 403.32ms - 410.07ms | slower ❌
3% - 5%
12.56ms - 20.70ms | - | ## illustrated-message [_permalink_](#user-content-illustrated-message) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 404 kB | 13.53ms - 13.74ms | - | faster ✔
1% - 4%
0.18ms - 0.54ms | | branch | 393 kB | 13.85ms - 14.14ms | slower ❌
1% - 4%
0.18ms - 0.54ms | - | ## menu [_permalink_](#user-content-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 475 kB | 207.44ms - 212.09ms | - | faster ✔
2% - 4%
3.24ms - 8.66ms | | branch | 463 kB | 214.33ms - 217.10ms | slower ❌
2% - 4%
3.24ms - 8.66ms | - | ## overlay [_permalink_](#user-content-overlay) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 683 kB | 423.69ms - 427.52ms | - | faster ✔
0% - 2%
1.79ms - 6.77ms | | branch | 662 kB | 428.29ms - 431.48ms | slower ❌
0% - 2%
1.79ms - 6.77ms | - | ### directive-test [_permalink_](#user-content-overlay-directive-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 785 kB | 22.01ms - 22.42ms | - | faster ✔
8% - 11%
1.95ms - 2.61ms | | branch | 780 kB | 24.24ms - 24.75ms | slower ❌
9% - 12%
1.95ms - 2.61ms | - | ### element-test [_permalink_](#user-content-overlay-element-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 763 kB | 346.87ms - 349.90ms | - | faster ✔
2% - 3%
7.42ms - 11.95ms | | branch | 750 kB | 356.40ms - 359.76ms | slower ❌
2% - 3%
7.42ms - 11.95ms | - | ### lazy-test [_permalink_](#user-content-overlay-lazy-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 561 kB | 40.70ms - 41.59ms | - | faster ✔
5% - 8%
2.13ms - 3.39ms | | branch | 548 kB | 43.45ms - 44.35ms | slower ❌
5% - 8%
2.13ms - 3.39ms | - | ## picker [_permalink_](#user-content-picker) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 513 kB | 522.87ms - 534.32ms | - | faster ✔
1% - 4%
7.00ms - 20.81ms | | branch | 500 kB | 538.63ms - 546.36ms | slower ❌
1% - 4%
7.00ms - 20.81ms | - | ## popover [_permalink_](#user-content-popover) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 384 kB | 11.36ms - 11.46ms | - | faster ✔
3% - 4%
0.34ms - 0.53ms | | branch | 372 kB | 11.77ms - 11.92ms | slower ❌
3% - 5%
0.34ms - 0.53ms | - | ## slider [_permalink_](#user-content-slider) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 480 kB | 75.72ms - 77.33ms | - | faster ✔
2% - 5%
1.37ms - 4.00ms | | branch | 467 kB | 78.16ms - 80.25ms | slower ❌
2% - 5%
1.37ms - 4.00ms | - | ## split-button [_permalink_](#user-content-split-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 723 kB | 1858.27ms - 1862.40ms | - | unsure 🔍
-0% - +0%
-2.49ms - +2.74ms | | branch | 710 kB | 1858.61ms - 1861.81ms | unsure 🔍
-0% - +0%
-2.74ms - +2.49ms | - | ## tooltip [_permalink_](#user-content-tooltip) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 551 kB | 33.62ms - 34.24ms | - | faster ✔
3% - 6%
1.09ms - 2.03ms | | branch | 538 kB | 35.14ms - 35.85ms | slower ❌
3% - 6%
1.09ms - 2.03ms | - | ### test-directive [_permalink_](#user-content-tooltip-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 543 kB | 22.93ms - 23.57ms | - | faster ✔
5% - 8%
1.13ms - 1.92ms | | branch | 534 kB | 24.55ms - 25.01ms | slower ❌
5% - 8%
1.13ms - 1.92ms | - | ### test-element [_permalink_](#user-content-tooltip-test-element) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 656 kB | 52.12ms - 53.09ms | - | faster ✔
3% - 6%
1.91ms - 3.31ms | | branch | 643 kB | 54.71ms - 55.73ms | slower ❌
4% - 6%
1.91ms - 3.31ms | - | ### test-lazy [_permalink_](#user-content-tooltip-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 632 kB | 41.68ms - 42.48ms | - | faster ✔
7% - 9%
3.02ms - 4.20ms | | branch | 619 kB | 45.26ms - 46.12ms | slower ❌
7% - 10%
3.02ms - 4.20ms | - | ## truncated [_permalink_](#user-content-truncated) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 528 kB | 55.41ms - 56.15ms | - | faster ✔
3% - 4%
1.45ms - 2.59ms | | branch | 516 kB | 57.37ms - 58.24ms | slower ❌
3% - 5%
1.45ms - 2.59ms | - |

Firefox

## action-bar [_permalink_](#user-content-action-bar) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 484 kB | 114.17ms - 120.87ms | - | unsure 🔍
-7% - +0%
-7.96ms - +0.52ms | | branch | 472 kB | 118.64ms - 123.84ms | unsure 🔍
-1% - +7%
-0.52ms - +7.96ms | - | ## action-menu [_permalink_](#user-content-action-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 647 kB | 288.55ms - 291.57ms | - | faster ✔
12% - 13%
39.11ms - 45.09ms | | branch | 634 kB | 329.58ms - 334.74ms | slower ❌
13% - 16%
39.11ms - 45.09ms | - | ### test-directive [_permalink_](#user-content-action-menu-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 604 kB | 136.71ms - 139.05ms | - | unsure 🔍
-1% - +1%
-1.55ms - +1.19ms | | branch | 591 kB | 137.35ms - 138.77ms | unsure 🔍
-1% - +1%
-1.19ms - +1.55ms | - | ### test-lazy [_permalink_](#user-content-action-menu-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 603 kB | 137.94ms - 145.54ms | - | unsure 🔍
-0% - +6%
-0.08ms - +7.96ms | | branch | 590 kB | 136.48ms - 139.12ms | unsure 🔍
-6% - -0%
-7.96ms - +0.08ms | - | ### test-open-close-directive [_permalink_](#user-content-action-menu-test-open-close-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 789 kB | 1897.78ms - 1904.14ms | - | slower ❌
0% - 1%
2.71ms - 10.65ms | | branch | 777 kB | 1891.92ms - 1896.64ms | faster ✔
0% - 1%
2.71ms - 10.65ms | - | ### test-open-close [_permalink_](#user-content-action-menu-test-open-close) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 788 kB | 1889.11ms - 1895.05ms | - | unsure 🔍
-0% - +0%
-5.46ms - +2.86ms | | branch | 775 kB | 1890.47ms - 1896.29ms | unsure 🔍
-0% - +0%
-2.86ms - +5.46ms | - | ## card [_permalink_](#user-content-card) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 502 kB | 72.71ms - 76.13ms | - | faster ✔
1% - 9%
0.95ms - 6.81ms | | branch | 489 kB | 75.92ms - 80.68ms | slower ❌
1% - 9%
0.95ms - 6.81ms | - | ## combobox [_permalink_](#user-content-combobox) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 709 kB | 62.77ms - 64.83ms | - | unsure 🔍
-3% - +1%
-2.26ms - +0.50ms | | branch | 697 kB | 63.76ms - 65.60ms | unsure 🔍
-1% - +4%
-0.50ms - +2.26ms | - | ### light-dom-test [_permalink_](#user-content-combobox-light-dom-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 709 kB | 779.49ms - 799.67ms | - | slower ❌
3% - 6%
24.18ms - 45.94ms | | branch | 697 kB | 750.46ms - 758.58ms | faster ✔
3% - 6%
24.18ms - 45.94ms | - | ## illustrated-message [_permalink_](#user-content-illustrated-message) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 404 kB | 26.21ms - 27.63ms | - | unsure 🔍
-4% - +3%
-1.14ms - +0.78ms | | branch | 393 kB | 26.45ms - 27.75ms | unsure 🔍
-3% - +4%
-0.78ms - +1.14ms | - | ## menu [_permalink_](#user-content-menu) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 475 kB | 447.15ms - 458.33ms | - | faster ✔
1% - 5%
2.30ms - 21.54ms | | branch | 463 kB | 456.83ms - 472.49ms | slower ❌
0% - 5%
2.30ms - 21.54ms | - | ## overlay [_permalink_](#user-content-overlay) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 770 kB | 705.10ms - 725.14ms | - | slower ❌
5% - 8%
31.60ms - 56.20ms | | branch | 757 kB | 664.09ms - 678.35ms | faster ✔
4% - 8%
31.60ms - 56.20ms | - | ### directive-test [_permalink_](#user-content-overlay-directive-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 773 kB | 47.99ms - 49.01ms | - | faster ✔
3% - 6%
1.63ms - 3.21ms | | branch | 761 kB | 50.32ms - 51.52ms | slower ❌
3% - 7%
1.63ms - 3.21ms | - | ### element-test [_permalink_](#user-content-overlay-element-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 763 kB | 715.25ms - 726.79ms | - | slower ❌
4% - 7%
28.29ms - 45.87ms | | branch | 750 kB | 677.31ms - 690.57ms | faster ✔
4% - 6%
28.29ms - 45.87ms | - | ### lazy-test [_permalink_](#user-content-overlay-lazy-test) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 561 kB | 91.41ms - 96.23ms | - | faster ✔
4% - 10%
3.52ms - 9.64ms | | branch | 548 kB | 98.52ms - 102.28ms | slower ❌
4% - 10%
3.52ms - 9.64ms | - | ## picker [_permalink_](#user-content-picker) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 513 kB | 1065.03ms - 1090.01ms | - | faster ✔
4% - 6%
42.49ms - 70.03ms | | branch | 500 kB | 1127.98ms - 1139.58ms | slower ❌
4% - 7%
42.49ms - 70.03ms | - | ## popover [_permalink_](#user-content-popover) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 384 kB | 29.14ms - 33.02ms | - | faster ✔
2% - 16%
0.48ms - 5.68ms | | branch | 372 kB | 32.43ms - 35.89ms | slower ❌
1% - 19%
0.48ms - 5.68ms | - | ## slider [_permalink_](#user-content-slider) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 480 kB | 164.21ms - 173.67ms | - | unsure 🔍
-7% - +0%
-11.80ms - +0.72ms | | branch | 467 kB | 170.39ms - 178.57ms | unsure 🔍
-0% - +7%
-0.72ms - +11.80ms | - | ## split-button [_permalink_](#user-content-split-button) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 723 kB | 1881.60ms - 1885.04ms | - | unsure 🔍
+0% - +0%
+1.32ms - +6.64ms | | branch | 710 kB | 1877.31ms - 1881.37ms | unsure 🔍
-0% - -0%
-6.64ms - -1.32ms | - | ## tooltip [_permalink_](#user-content-tooltip) ### test-basic | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 656 kB | 82.31ms - 86.93ms | - | slower ❌
10% - 17%
7.25ms - 12.31ms | | branch | 643 kB | 73.80ms - 75.88ms | faster ✔
9% - 14%
7.25ms - 12.31ms | - | ### test-directive [_permalink_](#user-content-tooltip-test-directive) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 533 kB | 47.92ms - 50.16ms | - | faster ✔
5% - 14%
2.57ms - 7.59ms | | branch | 521 kB | 51.88ms - 56.36ms | slower ❌
5% - 16%
2.57ms - 7.59ms | - | ### test-element [_permalink_](#user-content-tooltip-test-element) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 656 kB | 129.47ms - 136.09ms | - | unsure 🔍
-0% - +6%
-0.11ms - +7.95ms | | branch | 643 kB | 126.55ms - 131.17ms | unsure 🔍
-6% - +0%
-7.95ms - +0.11ms | - | ### test-lazy [_permalink_](#user-content-tooltip-test-lazy) | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 632 kB | 93.65ms - 98.03ms | - | faster ✔
8% - 14%
8.26ms - 14.86ms | | branch | 619 kB | 104.93ms - 109.87ms | slower ❌
8% - 16%
8.26ms - 14.86ms | - | ## truncated [_permalink_](#user-content-truncated) ### basic-test | Version | Bytes | Avg Time | vs remote | vs branch | |---|---|---|---|---| | npm latest | 528 kB | 107.75ms - 114.97ms | - | unsure 🔍
-6% - +3%
-6.59ms - +2.99ms | | branch | 516 kB | 110.01ms - 116.31ms | unsure 🔍
-3% - +6%
-2.99ms - +6.59ms | - |

Rajdeepc commented 1 month ago

Closed by #4475

adobe / spectrum-web-components