Repository navigation
Conversation
Extract the shared noop handler, operator/multiselect option lists, and enteredTextLabel into pages/control-group/common.tsx and import them from both the permutations and labels dev pages. Restore the permutations page to match main aside from the dedup: drop the inline label permutations (covered by the dedicated labels page) and the expandToViewport additions.
Give the grouped Select and Multiselect stable data-testid hooks so visual regression tests can target them unambiguously; both grouped and standalone controls share aria-labels, so aria-label alone cannot disambiguate them.
Add two grouped controls below the grouped select and multiselect: one led by an Autosuggest and one led by an Input. These cover the inline label + focus ring interaction for Autosuggest and Input as the leading control. Both leading controls get data-testid hooks for later visual tests.
…page Replace the h2 section headings with a page-level description, add the shared FocusTarget so keyboard tests can tab into the controls, and extract the permutations page's direction settings into common.tsx (useControlGroupDirection hook + DirectionSettings) so the labels page can also render vertically.
A ControlGroup with an inline label that leads with a Multiselect
overlapped the Multiselect's inline token row. The group's single label
pulls in the shared `inline-label` mixin's `padding-block-end: 2px`,
tuned for a normal text trigger, but a grouped Multiselect always renders
inline tokens whose row sits higher, so the label hung too low.
Mirror the proven Multiselect customization at the control-group layer:
add an `inline-label-inline-tokens` modifier (padding-block-end: 0 and
translateY(-1.5px), copied verbatim from src/select/parts/styles.scss) and
apply it from index.tsx only when a child resolves to a Multiselect
(detected by displayName). Plain-trigger groups keep the base offset and
are visually unchanged. The shared forms mixin is untouched.
Verification (from worktree root):
- npm run lint:stylelint -> exit 0
- npm run quick-build -> exit 0 (TypeScript + SCSS clean; recompiles lib)
- eslint on index.tsx + test -> exit 0 (import sort autofixed)
- jest control-group.test.tsx -> both new assertions pass (clearance class
applied with a Multiselect child, absent with plain children). Two
pre-existing getByRole('group') ambiguity failures are unrelated to this
change (confirmed identical on HEAD) and left as-is.
Visual check: on the control-group labels dev page the Threshold group's
label no longer overlaps the Multiselect inline token, in both horizontal
and vertical direction; other grouped labels and the standalone Labels
Multiselect are unchanged.
jperals
commented
Oct 6, 2026
| @@ -0,0 +1,57 @@ | |||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | |||
Member
Author
There was a problem hiding this comment.
Parts extracted from pages/control-group/permutations.page.tsx for reuse
|
|
||
| // Specific Styling for Inline Label Text to not overlap with Inline Tokens | ||
| .inline-label-inline-tokens { | ||
| padding-block-end: 0; |
Member
Author
There was a problem hiding this comment.
This part is used by multiselect with inline tokens. Here it was extracted for reuse, since a control group can contain a multiselect with inline tokens, so the inline label has to be slightly shifted upwards as well to prevent it from overlapping the tokens.
A control group's inline label must paint above a focused control's focus ring but below that control's open dropdown. The ring and an inline dropdown share the control slot's stacking context, so no slot z-index satisfies both. Instead, Select, Multiselect, and Autosuggest now portal the dropdown when grouped (effective expandToViewport = prop || isGrouped), so it escapes the slot's isolation and paints over the group label while the focus ring stays under it. This mirrors Multiselect forcing inline tokens when grouped. The effective value also feeds getDropdownMinWidth so the portaled grouped dropdown keeps the right min-width. The public expandToViewport prop, its defaults, and the Dropdown component are unchanged; standalone controls are unaffected. The labels dev page no longer needs expandToViewport.
Add a test to the Select, Multiselect, and Autosuggest control-group suites asserting that a grouped control portals its dropdown even when expandToViewport is not set (found with expandToViewport, absent inline).
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5110 +/- ##
=======================================
Coverage 97.70% 97.70%
=======================================
Files 990 991 +1
Lines 31818 31832 +14
Branches 11753 11756 +3
=======================================
+ Hits 31089 31103 +14
- Misses 683 722 +39
+ Partials 46 7 -39 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Wrap the labels dev page in the default I18nProvider via SimplePage i18n={{}}
so the Autosuggest clear button gets its default aria-label instead of
rendering unlabeled.
Add a minimal internal ControlGroupWrapper under test-utils/dom/internal with a findInlineLabel method, and use it in the control group unit tests to locate the inline label instead of querying by text.
jperals
commented
Oct 7, 2026
|
|
||
| import styles from '../../../internal/components/control-group/styles.selectors.js'; | ||
|
|
||
| export default class ControlGroupWrapper extends ComponentWrapper { |
Member
Author
There was a problem hiding this comment.
First iteration of the test utils including only findInlineLabel. The rest of methods will be included along with their corresponding features, and this file will be moved outside of internal when the control group is released.
This branch was successfully deployed
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Description
Related doc:
kMUBQtg6r1WVHow has this been tested?
Added dev page. Visual regression tests for this page will be added separately.
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.