NO-JIRA: fix radius of button groups

[zhuje]

Before

After

Summary by CodeRabbit

• Style
  • Updated button group styling to use sharper corners instead of pill-shaped borders, providing a more refined visual appearance across the interface.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added MuiButtonGroup theme customization to the Patternfly-to-Material-UI theme mapper, introducing styleOverrides for button group container and internal button elements to adjust border-radius properties across root, grouped, firstButton, lastButton, and middleButton variants.

Changes

Cohort / File(s)	Summary
Button Group Theme Styling web/src/components/dashboards/perses/PersesWrapper.tsx	Introduced new MuiButtonGroup ThemeOptions configuration in mapPatterflyThemeToMUI with styleOverrides for multiple button group variants, adjusting border-radius to tiny values with !important flags to override default pill-shaped styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰✨ Buttons now sit in squarer groups,
Their rounded edges fade away,
A tiny radius reigns supreme,
!important whispers: "Stay this way!"
Theme customization hops with glee! 🎨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title directly describes the main change: fixing the radius styling of button groups in the MUI theme configuration, which is precisely what the code changes accomplish.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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]

🧹 Nitpick comments (1)

web/src/components/dashboards/perses/PersesWrapper.tsx (1)

221-242: root's & .MuiButton-root descendant selector is redundant given the direct slot overrides.

The grouped, firstButton, lastButton, and middleButton slots already target each button in the group directly with !important, so the inner & .MuiButton-root rule inside root is fully redundant — both ultimately apply the same property and value to the same DOM nodes.

MUI v6 explicitly designed firstButton/lastButton/middleButton so users can override styles via styleOverrides without needing to fight specificity inside the root slot. The descendant-selector approach in root is the old MUI v5 pattern and can be dropped here.

♻️ Proposed simplification

      MuiButtonGroup: {
        styleOverrides: {
-         root: {
-           // Remove border-radius from button groups to prevent pill shape
-           '& .MuiButton-root': {
-             borderRadius: 'var(--pf-t--global--border--radius--tiny) !important',
-           },
-         },
          grouped: {
-           borderRadius: 'var(--pf-t--global--border--radius--tiny)  !important',
+           borderRadius: 'var(--pf-t--global--border--radius--tiny) !important',
          },
          firstButton: {
-           borderRadius: 'var(--pf-t--global--border--radius--tiny)  !important',
+           borderRadius: 'var(--pf-t--global--border--radius--tiny) !important',
          },
          lastButton: {
-           borderRadius: 'var(--pf-t--global--border--radius--tiny)  !important',
+           borderRadius: 'var(--pf-t--global--border--radius--tiny) !important',
          },
          middleButton: {
-           borderRadius: 'var(--pf-t--global--border--radius--tiny)  !important',
+           borderRadius: 'var(--pf-t--global--border--radius--tiny) !important',
          },
        },
      },

The diff also fixes the double-space before !important in the slot values (lines 230, 233, 236, 239) to be consistent with the rest of the overrides in this file.

🤖 Prompt for AI Agents

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

In `@web/src/components/dashboards/perses/PersesWrapper.tsx` around lines 221 -
242, Remove the redundant descendant selector in
MuiButtonGroup.styleOverrides.root — delete the '& .MuiButton-root' rule since
the grouped/firstButton/lastButton/middleButton slot overrides already apply the
same borderRadius; also normalize spacing by removing the extra space before
'!important' in the grouped, firstButton, lastButton and middleButton values so
they match the rest of the overrides (refer to MuiButtonGroup, styleOverrides,
and the grouped/firstButton/lastButton/middleButton slots).

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@web/src/components/dashboards/perses/PersesWrapper.tsx`:
- Around line 221-242: Remove the redundant descendant selector in
MuiButtonGroup.styleOverrides.root — delete the '& .MuiButton-root' rule since
the grouped/firstButton/lastButton/middleButton slot overrides already apply the
same borderRadius; also normalize spacing by removing the extra space before
'!important' in the grouped, firstButton, lastButton and middleButton values so
they match the rest of the overrides (refer to MuiButtonGroup, styleOverrides,
and the grouped/firstButton/lastButton/middleButton slots).

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Cache: Disabled due to data retention organization setting

Knowledge base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between 57f0b76 and 610ba55.

📒 Files selected for processing (1)

• web/src/components/dashboards/perses/PersesWrapper.tsx

[etmurasaki]

/label qe-approved

[etmurasaki]

image used to test: quay.io/rh-ee-emurasak/monitoring-console-plugin:PR784

[jgbernalp]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jgbernalp, zhuje

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [jgbernalp,zhuje]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[jgbernalp]

/test e2e-aws-ovn

[jgbernalp]

/override ci/prow/e2e-aws-ovn

[openshift-ci]

@jgbernalp: Overrode contexts on behalf of jgbernalp: ci/prow/e2e-aws-ovn

Details

In response to this:

/override ci/prow/e2e-aws-ovn

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[PeterYurkovich]

/retitle NO-JIRA: fix radius of button groups

[openshift-ci-robot]

@zhuje: This pull request explicitly references no jira issue.

Details

In response to this:

Before

After

Summary by CodeRabbit

• Style
• Updated button group styling to use sharper corners instead of pill-shaped borders, providing a more refined visual appearance across the interface.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

@zhuje: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.