Skip to content

feat(Chips): replace Chip with grey Label#2291

Merged
LightOfHeaven1994 merged 1 commit intoRedHatInsights:masterfrom
LightOfHeaven1994:labels-as-chips
Mar 27, 2026
Merged

feat(Chips): replace Chip with grey Label#2291
LightOfHeaven1994 merged 1 commit intoRedHatInsights:masterfrom
LightOfHeaven1994:labels-as-chips

Conversation

@LightOfHeaven1994
Copy link
Copy Markdown
Contributor

@LightOfHeaven1994 LightOfHeaven1994 commented Mar 25, 2026

Replace deprecated Chip with Label component
It will look the same as it is now, but using non-deprecated component now
Screenshot 2026-03-27 at 14 27 55

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 25, 2026

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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@LightOfHeaven1994 LightOfHeaven1994 force-pushed the labels-as-chips branch 2 times, most recently from 8b58d43 to d5b0da7 Compare March 25, 2026 11:09
@nlcwong
Copy link
Copy Markdown

nlcwong commented Mar 25, 2026

LGTM!

Copy link
Copy Markdown
Member

@bastilian bastilian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@LightOfHeaven1994 LightOfHeaven1994 merged commit 6c27dfc into RedHatInsights:master Mar 27, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants