ECHOES-1361 Implement FilterTags component

[gregaubert]

Part of

---

Summary by Gitar

• New Component:
  • Added FilterTag component for displaying active filter criteria with a dismissible button.
• Component Configuration:
  • Added design tokens for filter-tag max-width in design-tokens/tokens/component/base.json.
• Refactored Utility:
  • Updated DismissButton to support size variants (small/medium) and custom visibility for hover/focus states.
• Developer Experience:
  • Included comprehensive FilterTag-stories.tsx, unit tests in FilterTag-test.tsx, and i18n keys for the dismiss action.

_{This will update automatically on new commits.}

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	a94d028
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a325475fd97de0008a87991
😎 Deploy Preview	https://deploy-preview-704--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1361

[jeremy-davis-sonarsource]

There's a bunch of unrelated changes to .gitar , .agents and gitignore that I'm not sure you intended to include!

Looks great!

[gregaubert]

Yeah the changes .gitar and .agents are intended, I'm trying to improve/fine-tune the guidelines as I use them

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube

[gitar-bot]

Code Review ✅ Approved 9 resolved / 9 findings

Implements the FilterTag component and associated design tokens while resolving several layout and naming inconsistencies. The current DismissButton refactor introduces a font-size change that risks resizing icons in existing implementations.

✅ 9 resolved

✅ Edge Case: isDisabled doesn't visually disable the tag label

📄 src/components/filter-tags/FilterTag.tsx:43 📄 src/components/filter-tags/FilterTag.tsx:72-82 📄 src/components/filter-tags/FilterTag.tsx:106-118
FilterTagProps.isDisabled is documented as "Whether the filter tag and its dismiss button are disabled." However, in the implementation only FilterTagDismissButton receives the disabled attribute and the corresponding :disabled styling (greyed text, not-allowed cursor). FilterTagWrapper and FilterTagLabel are rendered with their default colors, so the label text still appears active (color-text-default) when isDisabled is true. If the intended behavior is for the whole tag to appear disabled, pass the disabled state down to the wrapper/label styling (e.g. apply color-text-disabled to the label and adjust the wrapper background/border when disabled). The existing test only asserts button is disabled, so this gap is not covered.

✅ Quality: FilterTag deviates from forwardRef convention

📄 src/components/filter-tags/FilterTag.tsx:55-56 📄 src/components/filter-tags/FilterTag.tsx:63-71
FilterTag declares ref as a direct prop on FilterTagProps and spreads it onto the root element. This is valid in React 19 (the repo is on react ^19), so it functions correctly. However, every other component in the codebase (e.g. Badge.tsx, Button.tsx) uses forwardRef for ref forwarding. For consistency and to ease future maintenance, consider following the established forwardRef pattern, or—if intentionally adopting the React 19 ref-as-prop style—do so as a deliberate, documented convention change rather than a one-off.

✅ Quality: data-visible-state always rendered as "false" when disabled

📄 src/common/components/DismissButton.tsx:68 📄 src/common/components/DismissButton.tsx:52-58
data-visible-state={hasVisibleStateStyles ?? undefined} does not omit the attribute when the feature is off. Because hasVisibleStateStyles defaults to false (a defined boolean), false ?? undefined evaluates to false, so React renders data-visible-state="false" on every DismissButton that doesn't opt in (Banner, Toast, MessageCallout, etc.). The nullish coalescing is therefore dead code. While harmless (the CSS only matches [data-visible-state='true']), the intent was clearly to omit the attribute. Use || undefined so the attribute is dropped entirely when false.

✅ Quality: FilterTagProps ordering: className not last, before callbacks

📄 src/components/filters/FilterTag.tsx:29-43
Per the repo props-interface ordering convention, fields must be ordered: required/semantic props, then boolean flags, then callbacks (on*), then layout/style props with className last. In FilterTagProps the order is children, className, labelDismiss, onDismiss, ref — className is placed second (ahead of the labelDismiss semantic prop and the onDismiss callback) instead of last. Reorder to children, labelDismiss, onDismiss, className, ref.

✅ Quality: DismissButton still uses forwardRef while its signature is modified

📄 src/common/components/DismissButton.tsx:51-58
This PR modifies DismissButton's public signature (adds size and hasVisibleStateStyles props) but keeps the deprecated forwardRef wrapper. Per the React 19 convention used for new code in this repo, ref should be a regular prop accepted in the destructured props rather than via forwardRef. Since the PR is already touching this component's signature, it is a good candidate to migrate DismissButton off forwardRef (accept ref in props and remove the wrapper).

...and 4 more resolved from earlier reviews

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}