feat(combobox): add `pending` state #4462

Rocss · 2024-05-16T09:27:57Z

Description

Adds pending property for sp-combobox, enabling the pending state.

Spectrum CSS

Related issue(s)

[Feat]: Support pending state for Combobox #4382

Motivation and context

A combo box can indicate that content is loading if system processes delay the display of the combo box content.

How has this been tested?

Test case 1
1. Go here
2. Observe documentation entries for quiet and pending states are now available
Test case 2
1. Go here
2. Combobox should receive focus when in pending state
3. Your are able to type inside it, however, it does not open the suggestion list while it is pending
4. Toggling the open control does not open the suggestion list
Test case 3
1. Go here
2. Inspect the combobox using Screen Reader (I used VoiceOver on Mac)
3. It reads the "Pending" label together with the Combobox's visible label.
Test case 4
1. Go here
2. Toggle between LTR / RTL
3. The progress circle is correctly positioned near the picker-button
Test case 5
1. Go here
2. Enable disabled control -> all looks good
Test case 6
1. Go here
2. Enable invalid control -> progress circle takes precedence over the alert icon
Test case 7
1. Go here
2. Enable quiet control -> all looks good

Screenshots (if appropriate)

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.

github-actions · 2024-05-16T09:30:05Z

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:

github-actions · 2024-05-16T09:32:17Z

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	221.482 kB	210.775 kB 🏆	210.778 kB
Scripts	53.548 kB	48.466 kB	48.372 kB 🏆
Stylesheet	35.004 kB	30.368 kB 🏆	30.504 kB
Document	5.981 kB	5.335 kB	5.269 kB 🏆
Font	126.949 kB	126.606 kB 🏆	126.633 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

Rocss · 2024-05-16T09:47:52Z

packages/combobox/src/Combobox.ts

@@ -402,6 +440,7 @@ export class Combobox extends Textfield {
                    : ''}"
                ?disabled=${this.disabled}
                ?focused=${this.focused}
+                ?quiet=${this.quiet}


not really related to this PR but a very straight-forward fix for the quiet state

github-actions · 2024-05-16T10:08:15Z

Tachometer results

Chrome

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	709 kB	35.63ms - 36.22ms	-	faster ✔ 5% - 7% 1.91ms - 2.72ms
branch	697 kB	37.97ms - 38.52ms	slower ❌ 5% - 8% 1.91ms - 2.72ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	710 kB	394.66ms - 404.23ms	-	faster ✔ 1% - 4% 3.75ms - 15.36ms
branch	698 kB	405.71ms - 412.29ms	slower ❌ 1% - 4% 3.75ms - 15.36ms	-

Firefox

combobox permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	709 kB	60.15ms - 63.57ms	-	unsure 🔍 -3% - +3% -1.92ms - +1.96ms
branch	697 kB	60.93ms - 62.75ms	unsure 🔍 -3% - +3% -1.96ms - +1.92ms	-

light-dom-test permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	710 kB	725.04ms - 735.00ms	-	slower ❌ 1% - 4% 5.79ms - 27.01ms
branch	698 kB	704.25ms - 722.99ms	faster ✔ 1% - 4% 5.79ms - 27.01ms	-

packages/combobox/src/Combobox.ts

Rajdeepc · 2024-05-20T06:13:07Z

This case shouldn't surface up!
In disabled state pending state should be undefined. Please confirm with design. Thanks

TarunAdobe · 2024-05-20T06:22:39Z

Should a readonly combobox accept a pending state?

Rajdeepc · 2024-05-20T11:43:28Z

Should a readonly combobox accept a pending state?

https://spectrum.adobe.com/page/combo-box/ needs to be updated with pending state. I will convey it to the design team.

packages/combobox/test/combobox.test.ts

Rocss · 2024-05-21T11:12:22Z

Should a readonly combobox accept a pending state?

@TarunAdobe mmmm in my opinion no, but I can not find any design docs on this :( Let's not allow pending if readonly, so that this is consistent with the sp-picker component for now. What do you think?

@Rajdeepc Agree with the disabled and pending not really working at the same time. Seems like in the sp-picker I allowed disabled and pending at the same time. Given that there are no design docs for now on this, should be enforce disabled to have a higher priority here?

Rajdeepc · 2024-05-24T11:52:55Z

Should a readonly combobox accept a pending state?

@TarunAdobe mmmm in my opinion no, but I can not find any design docs on this :( Let's not allow pending if readonly, so that this is consistent with the sp-picker component for now. What do you think?

@Rajdeepc Agree with the disabled and pending not really working at the same time. Seems like in the sp-picker I allowed disabled and pending at the same time. Given that there are no design docs for now on this, should be enforce disabled to have a higher priority here?

I have already send out a note to design to confirm this but yes if it is disabled, pending state should not be visible. It is also not accessible complaint. Let me know if you have any other questions!

TarunAdobe

LGTM!! Thank you so much for your attention to detail. 🫰

rmanole added 4 commits May 16, 2024 11:43

chore: add pending state to combobox

27bb768

chore: adds tests, a11y, docs, refactor stories

c2f6bb7

chore: fix typo

4beb83c

chore: fix a11y test

3630c63

chore: golden image cache

ffbb248

Rocss commented May 16, 2024

View reviewed changes

Rocss linked an issue May 16, 2024 that may be closed by this pull request

[Feat]: Support pending state for Combobox #4382

Closed

1 task

Rocss marked this pull request as ready for review May 16, 2024 10:33

Rocss requested a review from a team May 16, 2024 10:33

Rajdeepc requested changes May 17, 2024

View reviewed changes

packages/combobox/src/Combobox.ts Outdated Show resolved Hide resolved

Rajdeepc requested a review from a team May 20, 2024 05:25

Westbrook reviewed May 20, 2024

View reviewed changes

packages/combobox/test/combobox.test.ts Outdated Show resolved Hide resolved

rmanole added 2 commits May 27, 2024 11:24

Merge branch 'main' into rocss/pending-combobox

d1669ac

chore: do not allow pending state for disabled and readonly

a206358

Rocss requested a review from Rajdeepc May 27, 2024 08:54

Rajdeepc added the Component: Combobox label May 30, 2024

TarunAdobe approved these changes Jun 3, 2024

View reviewed changes

rmanole and others added 5 commits June 3, 2024 15:07

Merge branch 'main' into rocss/pending-combobox

175d980

chore: reset golden image cache

e3c77f8

chore: upgate golden image cache after merge with main

b788634

chore(combobox): merge to main

dee4a36

chore(combobox): updated golden image cache

1164bdd

Rajdeepc approved these changes Jun 5, 2024

View reviewed changes

Rajdeepc merged commit 2d0c388 into main Jun 5, 2024
58 checks passed

Rajdeepc deleted the rocss/pending-combobox branch June 5, 2024 03:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(combobox): add `pending` state #4462

feat(combobox): add `pending` state #4462

Rocss commented May 16, 2024 •

edited

Loading

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024 •

edited

Loading

Rocss May 16, 2024

github-actions bot commented May 16, 2024 •

edited

Loading

combobox permalink

basic-test

light-dom-test permalink

combobox permalink

basic-test

light-dom-test permalink

Rajdeepc commented May 20, 2024 •

edited

Loading

TarunAdobe commented May 20, 2024

Rajdeepc commented May 20, 2024

Rocss commented May 21, 2024 •

edited

Loading

Rajdeepc commented May 24, 2024

TarunAdobe left a comment

feat(combobox): add pending state #4462

feat(combobox): add pending state #4462

Conversation

Rocss commented May 16, 2024 • edited Loading

Description

Related issue(s)

Motivation and context

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

Best practices

github-actions bot commented May 16, 2024

Branch preview

github-actions bot commented May 16, 2024 • edited Loading

Lighthouse scores

Transfer Size

Request Count

Rocss May 16, 2024

Choose a reason for hiding this comment

github-actions bot commented May 16, 2024 • edited Loading

Tachometer results

combobox permalink

basic-test

light-dom-test permalink

combobox permalink

basic-test

light-dom-test permalink

Rajdeepc commented May 20, 2024 • edited Loading

TarunAdobe commented May 20, 2024

Rajdeepc commented May 20, 2024

Rocss commented May 21, 2024 • edited Loading

Rajdeepc commented May 24, 2024

TarunAdobe left a comment

Choose a reason for hiding this comment

feat(combobox): add `pending` state #4462

feat(combobox): add `pending` state #4462

Rocss commented May 16, 2024 •

edited

Loading

github-actions bot commented May 16, 2024 •

edited

Loading

github-actions bot commented May 16, 2024 •

edited

Loading

Rajdeepc commented May 20, 2024 •

edited

Loading

Rocss commented May 21, 2024 •

edited

Loading