move tag-container outside select-button #2346
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mayank99
force-pushed
the
mayank/select-tag-3
branch
from
880d4f8
to
377e247
Compare
mayank99
requested review from
r100-stack and
smmr-dn
and removed request for
a team
r100-stack
reviewed
Nov 18, 2024
Comment on lines
+18
to
+20
| - <span class='iui-content'> | ||
| - <div class='iui-select-tag-container'>…</div> | ||
| - </span> |
There was a problem hiding this comment.
nit: the indentation can be changed to make it easier to read.
Suggested change
| - <span class='iui-content'> | |
| - <div class='iui-select-tag-container'>…</div> | |
| - </span> | |
| - <span class='iui-content'> | |
| - <div class='iui-select-tag-container'>…</div> | |
| - </span> |
There was a problem hiding this comment.
For the small size, I noticed that the ::before for the higher click target is not present. Also, the text seems larger. Are these some issues on my end?
EDIT: I think the selectors near this one need to be updated:
r100-stack
approved these changes
Nov 18, 2024
smmr-dn
approved these changes
Nov 19, 2024
|
Let's leave this one out of 3.16.0. It can go in the next minor after that. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes
This is another step towards #907.
The main change is that the tag-container is rendered outside the select-button, then positioned on top of the select-button (using
grid-area). This opens up the possibility of rendering a "clear" (❌) button inside the individual tags, without leading to nested interactive elements (invalid).To facilitate this change, I had to add some CSS for making it overlap the select-button and have the correct padding. It relies on the
~combinator which I'm not super happy about, and there is some duplicated CSS as well (becauseComboBoxhas slightly different markup fromSelect). These are things we could improve in the future.Since there is nothing else in the select-button, it poses a challenge for the accessible name/label. I solved it by moving the already existing visually-hidden live region inside the select-button. This ensures that the select-button is properly labeled and compatible with the existing handling of concatenated labels in
InputGrid/LabeledSelect.Testing
Updated affected unit tests and visual tests.
One noticeable visual change is that the small select is now 24px tall (correct) instead of 26px (incorrect).
Docs
Added changesets.