RG-2440 TagsInput: chevron button, vertical gap

[aleksei-berezkin]

This PR brings the following visual changes. We don't have the explicit Figma specs for them.

• (red) For the proper popup show/hide behaviour, I changed the popup attachment from the text input element to the tags-input container. This changed the popup alignment: now its left border is aligned with that of the tags-input container.
• (violet) Vertical gap works not only between tags but between tags and the input field as well, adding an additional 4px space between them.

[Copilot]

Pull request overview

Adds a dedicated chevron button for TagsInput/Select and adjusts layout/popup positioning to eliminate the vertical gap and support multiline tag layouts.

Changes:

• Introduced reusable ChevronButton component and migrated Select to use it.
• Updated TagsInput layout (padding/gaps) and added an overlaid chevron button plus popup targeting tweaks.
• Expanded tests/stories and refreshed screenshot baselines for the updated visuals.

Reviewed changes

Copilot reviewed 40 out of 40 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/tags-input/tags-input.tsx	Adds chevron button into TagsInput, tweaks click handling and popup target/shift for better alignment.
src/tags-input/tags-input.test.tsx	Adds coverage for opening/closing via chevron click.
src/tags-input/tags-input.css	Adds spacing and absolute-positioned chevron styles to support multiline and right padding.
src/tags-input/tag-input.stories.tsx	Adds new scenarios (L height in basic + Multiline story) to validate UI changes.
src/select/select.tsx	Replaces inline chevron <Button> with shared ChevronButton.
src/select/select.css	Removes old chevron-specific styles now handled by shared component CSS.
src/select/chevron-button.tsx	New shared chevron button wrapper around Button.
src/select/chevron-button.css	New CSS for shared chevron button/icon styling.
packages/screenshots/testplane/firefox/components/tags input/with too long tag labels/with too long tag labels.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/firefox/components/tags input/with too long tag labels/with too long tag labels-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/firefox/components/tags input/with icons/with icons.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/firefox/components/tags input/with icons/with icons-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/firefox/components/tags input/with error/with error.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/firefox/components/tags input/with error/with error-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/firefox/components/tags input/multiline/multiline.png	Adds new baseline screenshot for multiline scenario.
packages/screenshots/testplane/firefox/components/tags input/multiline/multiline-dark.png	Adds new baseline screenshot for multiline scenario (dark).
packages/screenshots/testplane/firefox/components/tags input/disabled/disabled.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/firefox/components/tags input/disabled/disabled-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/firefox/components/tags input/basic/basic.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/firefox/components/tags input/basic/basic-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/firefox/components/tags input/auto open/auto open.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/firefox/components/tags input/auto open/auto open-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/firefox/components/tags input/auto open in a dialog/auto open in a dialog.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/firefox/components/tags input/auto open in a dialog/auto open in a dialog-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/chrome/components/tags input/with too long tag labels/with too long tag labels.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/chrome/components/tags input/with too long tag labels/with too long tag labels-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/chrome/components/tags input/with icons/with icons.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/chrome/components/tags input/with icons/with icons-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/chrome/components/tags input/with error/with error.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/chrome/components/tags input/with error/with error-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/chrome/components/tags input/multiline/multiline.png	Adds new baseline screenshot for multiline scenario.
packages/screenshots/testplane/chrome/components/tags input/multiline/multiline-dark.png	Adds new baseline screenshot for multiline scenario (dark).
packages/screenshots/testplane/chrome/components/tags input/disabled/disabled.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/chrome/components/tags input/disabled/disabled-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/chrome/components/tags input/basic/basic.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/chrome/components/tags input/basic/basic-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/chrome/components/tags input/auto open/auto open.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/chrome/components/tags input/auto open/auto open-dark.png	Updates baseline screenshot for new chevron/layout (dark).
packages/screenshots/testplane/chrome/components/tags input/auto open in a dialog/auto open in a dialog.png	Updates baseline screenshot for new chevron/layout.
packages/screenshots/testplane/chrome/components/tags input/auto open in a dialog/auto open in a dialog-dark.png	Updates baseline screenshot for new chevron/layout (dark).

Comments suppressed due to low confidence (5)

src/tags-input/tags-input.tsx:1

• The new chevron is rendered without disabled or an explicit click handler. This can lead to inconsistent behavior (e.g., the button appears interactive/focusable even when TagsInput is disabled, or relies on event bubbling to toggle). Pass disabled={this.props.disabled} and wire onClick to the same toggle handler used to open/close the popup so the button behavior is explicit and matches the component state.
  src/tags-input/tags-input.tsx:1
• this.node is a mutable ref value, but ref mutations don't trigger re-renders. If this.node is undefined during the render where this prop is set, Select may keep receiving undefined as targetElement and anchor the popup incorrectly. Consider storing the node in state (set in the ref callback) to force a re-render, or passing a supported stable reference mechanism (e.g., if Select supports a callback like getTargetElement, use that).
  src/tags-input/tags-input.css:1
• The chevron is hard-positioned with right: 0, but the component already has RTL-specific padding adjustments. In RTL, the chevron should typically move to the left side. Use logical properties (e.g., inset-inline-end: 0) or add an RTL override to switch to left: 0; right: auto; so the chevron placement matches the text direction.
  src/select/chevron-button.css:1
• Previously select.css used doubled selectors (.chevron.chevron, .chevronIcon.chevronIcon), which is a common technique to increase specificity over base Button styles. The new rules may be overridden by Button defaults depending on CSS load order, causing padding/transition/color regressions. Consider restoring the specificity bump in this module (e.g., .chevronButton.chevronButton / .chevronIcon.chevronIcon) or otherwise ensure these styles reliably win.
  src/tags-input/tags-input.test.tsx:1
• This test locates the chevron via a CSS-module class, which is brittle (renaming CSS classes breaks tests without functional changes). Prefer querying by accessible semantics (e.g., getByRole('button', {name: ...}) if the Button exposes an accessible name) or add a stable data-testid to the chevron button and query that.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.