feat(Chips): replace Chip with grey Label

[LightOfHeaven1994]

Replace deprecated Chip with Label component
It will look the same as it is now, but using non-deprecated component now

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ed0c3ddc-071f-4cce-9f4b-a04b544b4c69

📥 Commits

Reviewing files that changed from the base of the PR and between 0a091d4 and eec9da1.

⛔ Files ignored due to path filters (2)

• packages/components/src/FilterChips/__snapshots__/FilterChips.test.js.snap is excluded by !**/*.snap
• packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• packages/components/src/FilterChips/FilterChips.tsx
• packages/components/src/FilterChips/filter-chips.scss

✅ Files skipped from review due to trivial changes (1)

• packages/components/src/FilterChips/filter-chips.scss

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/components/src/FilterChips/FilterChips.tsx

---

Summary by CodeRabbit

• Refactor
  • Updated filter chips component implementation to use current UI framework components.
  • All existing functionality and visual appearance remain unchanged.
  • Component styles updated to support the new implementation.

Walkthrough

Replaced PatternFly Chip/ChipGroup with Label/LabelGroup in FilterChips; moved group closability to LabelGroup; switched individual deletion from chip onClick to label onClose (still calling event.stopPropagation() and emitting the same onDelete payloads); adjusted SCSS selector for label badges.

Changes

Cohort / File(s)	Summary
FilterChips component packages/components/src/FilterChips/FilterChips.tsx	Replaced ChipGroup/Chip with LabelGroup/Label for grouped and plain chips. Moved per-group closability to LabelGroup and changed per-chip removal handler from onClick to onClose on Label. Preserved event.stopPropagation() and existing onDelete payload shapes; added variant="outline" to labels.
Styles packages/components/src/FilterChips/filter-chips.scss	Retargeted the badge left-margin selector from .pf-v6-c-chip to .pf-v6-c-label so badge spacing applies with labels; adjusted related label/outline styling variable overrides (including dark-theme adjustments).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(Chips): replace Chip with grey Label' directly summarizes the main change: replacing the deprecated Chip component with Label.
Description check	✅ Passed	The description 'Replace deprecated Chip with Label component' is directly related to the changeset, explaining the motivation and including a visual reference.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.5.0)

packages/components/src/FilterChips/filter-chips.scss

ConfigurationError: Could not find "stylelint-config-recommended-scss". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:29:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:241:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:208:25)
at augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:73:26)
at augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:126:30)
at getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:32)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:204:19)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/components/src/FilterChips/FilterChips.tsx`:
- Around line 72-74: Grouped chips are using chip.color directly while plain
chips use a default 'grey', causing inconsistent visuals; update the
grouped-chip rendering in FilterChips (where you pass icon={chip.icon}
color={chip.color}) to apply the same default (e.g., color={chip.color ??
'grey'} or set a default when destructuring chip) so both grouped and plain
chips use 'grey' when color is absent.
- Around line 87-89: Remove the three debug console.log statements in the
FilterChips component that print plainFilters, groupedFilters, and the 'updated'
message (these are in FilterChips.tsx near the render/update logic); delete
those console.log calls entirely (or replace them with a conditional debug
logger behind a feature flag) and ensure the remaining code has proper
punctuation (add the missing semicolon if any statement remains on that line).
This keeps filter data out of the production console and fixes the missing
semicolon.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 01a8bdd2-d543-4c4d-a6a4-543d951dbc8f

📥 Commits

Reviewing files that changed from the base of the PR and between c776f30 and 30a2246.

⛔ Files ignored due to path filters (2)

• packages/components/src/FilterChips/__snapshots__/FilterChips.test.js.snap is excluded by !**/*.snap
• packages/components/src/PrimaryToolbar/__snapshots__/PrimaryToolbar.test.js.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• packages/components/src/FilterChips/FilterChips.tsx
• packages/components/src/FilterChips/filter-chips.scss

[nlcwong]

LGTM!

[bastilian]

Awesome! LGTM! Thank you for updating these components @LightOfHeaven1994