Skip to content

fix(apollo-react): use MUI CSS classes for color variants [MST-14544] - #1110

Open
alextran1 wants to merge 1 commit into
mainfrom
fix/apollo-react-chip-colors
Open

fix(apollo-react): use MUI CSS classes for color variants [MST-14544]#1110
alextran1 wants to merge 1 commit into
mainfrom
fix/apollo-react-chip-colors

Conversation

@alextran1

Copy link
Copy Markdown
Contributor

Description

Update CSS styles to use MUI Chip's CSS classes to display the different color variants:

  • Primary
  • Secondary
  • Success
  • Info
  • Warning
  • Error

Demo

Before:
Screenshot 2026-09-01 at 3 20 05 PM

After:
Screenshot 2026-09-01 at 3 19 58 PM

Copilot AI lite review requested due to automatic review settings September 1, 2026 22:27
@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

Apollo Coded App preview deployments are ready.

Project Status Preview Updated (PT)
apollo-design Ready Preview · Logs Sep 01, 2026, 03:36:39 PM
apollo-docs Ready Preview · Logs Sep 01, 2026, 03:36:39 PM
apollo-landing Ready Preview · Logs Sep 01, 2026, 03:36:39 PM
apollo-vertex Ready Preview · Logs Sep 01, 2026, 03:36:39 PM

@github-actions github-actions Bot added the size:S 10-29 changed lines. label Sep 1, 2026
@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

Dependency License Review

  • 1951 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1722
ISC 88
Apache-2.0 55
BSD-3-Clause 27
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
MIT-0 3
CC0-1.0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.3.2 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🟡 Changes recommended

The new filled variant text colors don’t propagate to icons/delete icons due to a conflicting root override, causing incorrect/low-contrast icon coloring on colored chips.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR updates the apollo-react MUI theme override for Chip to style semantic color variants using MUI’s own Chip color/variant CSS classes, improving consistency for primary/secondary/success/info/warning/error filled chips.

Changes:

  • Switch variant targeting from custom classes (e.g. .warning, .success) to MUI’s MuiChip-filled + MuiChip-colorX class combinations.
  • Add explicit filled styling for primary and secondary chips (including hover states).
  • Keep outlined colored behavior delegated to MUI’s built-in outlined styling (border/text with transparent fill).
File summaries
File Description
packages/apollo-react/src/material/theme/overrides/MuiChip.ts Updates Chip theme overrides to apply filled color-variant styling via MUI Chip CSS classes.
Review details
  • Files reviewed: 1/1 changed files
  • Comments generated: 1
  • Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines +101 to +105
'&.MuiChip-filled.MuiChip-colorPrimary': {
color: palette.semantic.colorForegroundOnAccent,
background: palette.semantic.colorPrimary,
fontWeight: token.FontFamily.FontWeightSemibold,
'&:hover': {
@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package Coverage New-line coverage Packed (gzip) Unpacked vs main
@uipath/apollo-core 41.59 MB 49.70 MB ±0
@uipath/apollo-react 39.8% — (24 untracked) 7.56 MB 29.11 MB +98 B
@uipath/apollo-ui-icons 2.85 MB 6.91 MB ±0
@uipath/apollo-wind 428.2 KB 2.75 MB +5 B
@uipath/ap-chat 85.8% 43.46 MB 56.09 MB −13 B

"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.

@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

Storybook visual diff

⚠️ Visual changes detected: 7 changed (of 230 compared, 223 unchanged). View report

Baseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs

Updated (PT): Sep 01, 2026, 03:45:36 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg:apollo-react size:S 10-29 changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants