Migrate to MUI v9#526
Conversation
|
Warning Rate limit exceeded
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis pull request migrates styling approach across the Oxygen UI documentation stories and sample application components from using direct component props ( 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (5)
packages/oxygen-ui/src/styles/OxygenThemeBase.ts (1)
208-220:⚠️ Potential issue | 🔴 CriticalReplace
.MuiTabs-scrollerVerticalwith the correct MUI v9 class.The class
.MuiTabs-scrollerVerticaldoes not exist in MUI v9. The scroller element uses.MuiTabs-scrollerfor both orientations. For vertical Tabs, the flex container (which holds the tab items) uses.MuiTabs-flexContainerVertical.The
scrolleroverride should either:
- Target
.MuiTabs-scrollerdirectly (if styling applies to both orientations), or- Target
.MuiTabs-flexContainerVertical(if styling the flex container in vertical mode specifically)The
rootoverride applyingalignItems: 'flex-start'to.MuiTabs-verticalmay not be effective if the root element is not a flex container. Review the intended alignment behavior and verify that both overrides target the correct elements.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui/src/styles/OxygenThemeBase.ts` around lines 208 - 220, The MuiTabs styleOverrides are targeting a non-existent v9 class `.MuiTabs-scrollerVertical`; update the scroller override in OxygenThemeBase (MuiTabs.styleOverrides.scroller) to target the correct element—either `.MuiTabs-scroller` if the rule should apply to all orientations, or `.MuiTabs-flexContainerVertical` if it should only affect the vertical tab flex container; also re-evaluate the root override on `.MuiTabs-vertical` (MuiTabs.styleOverrides.root) to ensure it targets a flex container (or move the alignItems rule to the flex container override) so vertical alignment actually takes effect.packages/oxygen-ui-docs/stories/GettingStarted.stories.tsx (1)
77-77:⚠️ Potential issue | 🟡 MinorStale copy: references "MUI v7".
Since this PR upgrades the catalog to MUI v9, update the description text accordingly.
- Components, themes, layouts, hooks, and utilities — everything built on top of MUI v7. + Components, themes, layouts, hooks, and utilities — everything built on top of MUI v9.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui-docs/stories/GettingStarted.stories.tsx` at line 77, Update the stale copy that mentions "MUI v7" in the GettingStarted story by replacing the string "Components, themes, layouts, hooks, and utilities — everything built on top of MUI v7." with the updated text referencing MUI v9 (e.g., change "MUI v7" -> "MUI v9") so the displayed description matches the catalog upgrade.packages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsx (2)
134-134:⚠️ Potential issue | 🟡 MinorInconsistent migration:
gutterBottomstill used.This
Typographyretains thegutterBottomprop while the rest of the PR migrates such usages tosx={{ mb: ... }}. Consider applying the same conversion here for consistency.Proposed change
- <Typography gutterBottom sx={{fontWeight: 'medium'}}> + <Typography sx={{mb: 1, fontWeight: 'medium'}}>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsx` at line 134, The Typography in LoginTemplate.stories.tsx still uses the gutterBottom prop; remove gutterBottom and migrate it to the sx prop (add mb with the same spacing used elsewhere in this PR), e.g. merge with any existing sx by setting sx={{ ...existingSx, mb: <consistentValue> }} so the component uses sx={{ mb: ... }} instead of gutterBottom for consistency with the rest of the migration.
161-163:⚠️ Potential issue | 🟡 MinorInconsistent migration:
gutterBottomstill used.Similar to the rest of the PR, consider replacing
gutterBottomwith explicitsx={{ mb: ... }}for consistency.Proposed change
- <Typography variant="h3" gutterBottom> + <Typography variant="h3" sx={{ mb: 2 }}> Login to Account </Typography>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsx` around lines 161 - 163, Replace the deprecated prop usage on the Typography in the LoginTemplate stories: remove the gutterBottom prop from the <Typography variant="h3"> instance and add an explicit spacing style via the sx prop (e.g. sx={{ mb: 2 }}) to match the PR’s migration pattern; update the Typography component in LoginTemplate.stories.tsx (the h3 title) accordingly so it uses sx for margin-bottom instead of gutterBottom.packages/oxygen-ui-docs/stories/Surfaces/ClickableCard.stories.tsx (1)
69-84:⚠️ Potential issue | 🟡 MinorVerify
mb: 2on header Typography inside a rowStack.The header
Typographysits in a horizontalStackwithalignItems: 'center'alongside the icon and tooltip. Applyingmb: 2only to this child will offset its vertical centering relative to the siblings and add extra space below the card header. If the intent was to preserve the priorgutterBottomspacing, consider whether it's still desired in this row layout, or move the margin to theStack/header wrapper instead.Proposed adjustment
<Typography variant="h5" component="div" - sx={{ mb: 2, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }} + sx={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui-docs/stories/Surfaces/ClickableCard.stories.tsx` around lines 69 - 84, The Typography inside the horizontal Stack has sx={{ mb: 2 }} which breaks vertical centering with siblings (WSO2 icon and Form.DisappearingCardButtonContent); remove the mb: 2 from the Typography or move that vertical margin to the parent Stack (or an outer header wrapper) so the Stack (with alignItems: 'center') keeps everything vertically aligned while preserving any desired bottom spacing on the whole header.
🧹 Nitpick comments (4)
packages/oxygen-ui-docs/stories/HowToAddRuntimeThemeSupport.stories.tsx (1)
220-227: Minor: inconsistent indentation insideBoxwrappers.Across these stories, the second
Typographysibling inside each<Box>is dedented relative to the opening<Box>/first<Typography>(e.g., Lines 224, 305, 391, 443, 517, 592, 710). The JSX is still well-formed, but the indentation no longer reflects the actual nesting and makes the structure harder to read. Consider re-indenting these siblings to sit one level inside theBox.Also applies to: 300-308, 386-394, 438-446, 510-520, 586-596, 703-713
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui-docs/stories/HowToAddRuntimeThemeSupport.stories.tsx` around lines 220 - 227, Re-indent the second <Typography> sibling so it sits one level inside its enclosing <Box> to match the first <Typography> (i.e., the <Typography variant="body2" color="text.secondary"> lines should be indented to the same nesting level as the preceding <Typography variant="h2"> inside each <Box>); update every occurrence where a <Box> contains the h2 <Typography> followed by the body2 <Typography> so the JSX nesting visually reflects the actual structure.packages/oxygen-ui-docs/stories/HowToContribute.stories.tsx (1)
128-131:paragraphremoval drops the<p>semantic element.In MUI,
paragraphset bothmarginBottomandcomponent="p". Replacing it with onlysx: { mb: 2 }loses the paragraph semantics (the Typography will render with its default element forbody2, i.e.,<p>is not guaranteed depending on variant mappings). If the semantic element matters for this documentation snippet, consider also settingcomponent: 'p'.♻️ Suggested change
variant: 'body2', - sx: { mb: 2 }, + component: 'p', + sx: { mb: 2 }, };MUI Typography paragraph prop deprecated replacement component🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui-docs/stories/HowToContribute.stories.tsx` around lines 128 - 131, The defaultProps for CustomCardDescription currently set variant and sx but dropped the paragraph prop; restore paragraph semantics by adding component: 'p' to CustomCardDescription.defaultProps so the Typography renders as a <p> element (keep variant: 'body2' and sx: { mb: 2 }) — update the object assigned to CustomCardDescription.defaultProps accordingly.packages/oxygen-ui-docs/stories/Theming/useTheme.stories.tsx (1)
38-38: Redundant and conflicting spacing mechanisms on wrappingStack.This
Stackuses bothspacing={1}(margin-based) andsx={{ gap: 1 }}(CSSgap), applying two spacing mechanisms on the same axis. When aStackwraps, margin-based spacing produces incorrect offsets on wrapped rows. MUI recommends using theuseFlexGapprop instead, which converts thespacingprop to use CSSgapand handles wrapping correctly.Suggested change
- <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1 }}> + <Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: 'wrap' }}>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui-docs/stories/Theming/useTheme.stories.tsx` at line 38, The Stack is using both spacing={1} and sx={{ gap: 1 }}, which conflicts when wrapping; update the Stack component (in useTheme.stories.tsx) to remove the manual sx.gap and enable MUI's gap-based spacing by adding the useFlexGap prop (e.g., <Stack direction="row" spacing={1} useFlexGap>...), so spacing is implemented via CSS gap and wrapping behaves correctly.packages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsx (1)
112-118: Minor: quote style inconsistency.
flexDirection: "column"uses double quotes while the rest of thissxobject and file use single quotes. Align for consistency.Proposed change
- flexDirection: "column", + flexDirection: 'column',🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsx` around lines 112 - 118, The sx object in LoginTemplate.stories.tsx has inconsistent string quoting for the flexDirection property; change flexDirection: "column" to use single quotes (flexDirection: 'column') to match the file's single-quote style and keep the sx object consistent with other properties like alignItems and display.
🤖 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/oxygen-ui-docs/stories/Templates/Templates.stories.tsx`:
- Line 212: The Grid container in Templates.stories.tsx is using both
spacing={1} and sx={{ gap: 4 }}, causing mixed spacing mechanisms; remove the
spacing prop and consolidate spacing into sx (e.g., replace spacing={1} with an
equivalent gap value in sx or adjust sx.gap to the intended spacing) so the Grid
uses a single layout mechanism; update the Grid JSX (the Grid container element)
to only use sx for spacing.
In `@samples/oxygen-ui-test-app/src/pages/ComponentCreate.tsx`:
- Around line 44-46: The sx props on Stack and Form.Stack are using MUI
breakpoint names instead of valid CSS values — change the maxWidth on Stack and
the width on Form.Stack to real CSS sizes or resolve via theme; for example
replace maxWidth: 'xl' with a numeric pixel/rem value (e.g., 1280) or with
maxWidth: (theme) => theme.breakpoints.values.xl, and replace width: 'md' with a
numeric value (e.g., 768) or width: (theme) => theme.breakpoints.values.md;
alternatively wrap content in MUI Container (which accepts maxWidth="xl")
instead of using Stack for maxWidth. Ensure updates target the Stack component
instance and the Form.Stack instance in ComponentCreate.tsx.
---
Outside diff comments:
In `@packages/oxygen-ui-docs/stories/GettingStarted.stories.tsx`:
- Line 77: Update the stale copy that mentions "MUI v7" in the GettingStarted
story by replacing the string "Components, themes, layouts, hooks, and utilities
— everything built on top of MUI v7." with the updated text referencing MUI v9
(e.g., change "MUI v7" -> "MUI v9") so the displayed description matches the
catalog upgrade.
In `@packages/oxygen-ui-docs/stories/Surfaces/ClickableCard.stories.tsx`:
- Around line 69-84: The Typography inside the horizontal Stack has sx={{ mb: 2
}} which breaks vertical centering with siblings (WSO2 icon and
Form.DisappearingCardButtonContent); remove the mb: 2 from the Typography or
move that vertical margin to the parent Stack (or an outer header wrapper) so
the Stack (with alignItems: 'center') keeps everything vertically aligned while
preserving any desired bottom spacing on the whole header.
In `@packages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsx`:
- Line 134: The Typography in LoginTemplate.stories.tsx still uses the
gutterBottom prop; remove gutterBottom and migrate it to the sx prop (add mb
with the same spacing used elsewhere in this PR), e.g. merge with any existing
sx by setting sx={{ ...existingSx, mb: <consistentValue> }} so the component
uses sx={{ mb: ... }} instead of gutterBottom for consistency with the rest of
the migration.
- Around line 161-163: Replace the deprecated prop usage on the Typography in
the LoginTemplate stories: remove the gutterBottom prop from the <Typography
variant="h3"> instance and add an explicit spacing style via the sx prop (e.g.
sx={{ mb: 2 }}) to match the PR’s migration pattern; update the Typography
component in LoginTemplate.stories.tsx (the h3 title) accordingly so it uses sx
for margin-bottom instead of gutterBottom.
In `@packages/oxygen-ui/src/styles/OxygenThemeBase.ts`:
- Around line 208-220: The MuiTabs styleOverrides are targeting a non-existent
v9 class `.MuiTabs-scrollerVertical`; update the scroller override in
OxygenThemeBase (MuiTabs.styleOverrides.scroller) to target the correct
element—either `.MuiTabs-scroller` if the rule should apply to all orientations,
or `.MuiTabs-flexContainerVertical` if it should only affect the vertical tab
flex container; also re-evaluate the root override on `.MuiTabs-vertical`
(MuiTabs.styleOverrides.root) to ensure it targets a flex container (or move the
alignItems rule to the flex container override) so vertical alignment actually
takes effect.
---
Nitpick comments:
In `@packages/oxygen-ui-docs/stories/HowToAddRuntimeThemeSupport.stories.tsx`:
- Around line 220-227: Re-indent the second <Typography> sibling so it sits one
level inside its enclosing <Box> to match the first <Typography> (i.e., the
<Typography variant="body2" color="text.secondary"> lines should be indented to
the same nesting level as the preceding <Typography variant="h2"> inside each
<Box>); update every occurrence where a <Box> contains the h2 <Typography>
followed by the body2 <Typography> so the JSX nesting visually reflects the
actual structure.
In `@packages/oxygen-ui-docs/stories/HowToContribute.stories.tsx`:
- Around line 128-131: The defaultProps for CustomCardDescription currently set
variant and sx but dropped the paragraph prop; restore paragraph semantics by
adding component: 'p' to CustomCardDescription.defaultProps so the Typography
renders as a <p> element (keep variant: 'body2' and sx: { mb: 2 }) — update the
object assigned to CustomCardDescription.defaultProps accordingly.
In `@packages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsx`:
- Around line 112-118: The sx object in LoginTemplate.stories.tsx has
inconsistent string quoting for the flexDirection property; change
flexDirection: "column" to use single quotes (flexDirection: 'column') to match
the file's single-quote style and keep the sx object consistent with other
properties like alignItems and display.
In `@packages/oxygen-ui-docs/stories/Theming/useTheme.stories.tsx`:
- Line 38: The Stack is using both spacing={1} and sx={{ gap: 1 }}, which
conflicts when wrapping; update the Stack component (in useTheme.stories.tsx) to
remove the manual sx.gap and enable MUI's gap-based spacing by adding the
useFlexGap prop (e.g., <Stack direction="row" spacing={1} useFlexGap>...), so
spacing is implemented via CSS gap and wrapping behaves correctly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 41489448-6bfd-4daf-9b3a-9465c080b525
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (48)
packages/oxygen-ui-docs/stories/AppElements/FormElements.stories.tsxpackages/oxygen-ui-docs/stories/AppElements/useAppShell.stories.tsxpackages/oxygen-ui-docs/stories/DataDisplay/Avatar.stories.tsxpackages/oxygen-ui-docs/stories/DataDisplay/Chip.stories.tsxpackages/oxygen-ui-docs/stories/DataDisplay/Tooltip.stories.tsxpackages/oxygen-ui-docs/stories/Feedback/Progress.stories.tsxpackages/oxygen-ui-docs/stories/GettingStarted.stories.tsxpackages/oxygen-ui-docs/stories/HowToAddRuntimeThemeSupport.stories.tsxpackages/oxygen-ui-docs/stories/HowToContribute.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/Button.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/ButtonGroup.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/FloatingActionButton.stories.tsxpackages/oxygen-ui-docs/stories/Inputs/ToggleButton.stories.tsxpackages/oxygen-ui-docs/stories/Surfaces/ClickableCard.stories.tsxpackages/oxygen-ui-docs/stories/Surfaces/Paper.stories.tsxpackages/oxygen-ui-docs/stories/Templates/CreateServiceFormTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/DashboardTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/EmptyStateTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/FormValidationTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/LoginTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/TabbedContentTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Templates/Templates.stories.tsxpackages/oxygen-ui-docs/stories/Templates/WizardTemplate.stories.tsxpackages/oxygen-ui-docs/stories/Theming/ColorSchemeImage.stories.tsxpackages/oxygen-ui-docs/stories/Theming/ColorSchemeSVG.stories.tsxpackages/oxygen-ui-docs/stories/Theming/ColorSchemeToggle.stories.tsxpackages/oxygen-ui-docs/stories/Theming/Colors.stories.tsxpackages/oxygen-ui-docs/stories/Theming/ThemeSwitcher.stories.tsxpackages/oxygen-ui-docs/stories/Theming/useTheme.stories.tsxpackages/oxygen-ui-docs/stories/Theming/useThemeContent.stories.tsxpackages/oxygen-ui-docs/stories/Welcome.stories.tsxpackages/oxygen-ui/src/components/ListingTable/shared/ListingTableToolbar.tsxpackages/oxygen-ui/src/components/SearchBar/SearchBarWithAdvancedFilter.tsxpackages/oxygen-ui/src/styles/OxygenThemeBase.tspnpm-workspace.yamlsamples/oxygen-ui-test-app/public/config.jssamples/oxygen-ui-test-app/src/components/ComponentCreate/IntegrationTypeCard.tsxsamples/oxygen-ui-test-app/src/components/ComponentCreate/IntegrationWizard.tsxsamples/oxygen-ui-test-app/src/components/ComponentCreate/SampleIntegrationsSection.tsxsamples/oxygen-ui-test-app/src/components/LoginBox.tsxsamples/oxygen-ui-test-app/src/pages/ComponentCreate.tsxsamples/oxygen-ui-test-app/src/pages/HomePage.tsxsamples/oxygen-ui-test-app/src/pages/LogView.tsxsamples/oxygen-ui-test-app/src/pages/LoginPage.tsxsamples/oxygen-ui-test-app/src/pages/LoginPage2.tsxsamples/oxygen-ui-test-app/src/pages/Organizations.tsxsamples/oxygen-ui-test-app/src/pages/ProjectOverview.tsxsamples/oxygen-ui-test-app/src/pages/SettingsPage.tsx
1 participant
This pull request standardizes and improves the usage of the
StackandTypographycomponents across the Oxygen UI documentation stories. The main theme is replacing deprecated or less flexible props (such asalignItems,justifyContent,flexWrap, andparagraph) with the recommendedsxprop for style customization, resulting in more consistent and maintainable code. Additionally, it updates the use offontWeightonTypographyto also use thesxprop, and replaces theparagraphprop with margin-bottom styles.Component style prop modernization:
alignItems,justifyContent, andflexWraponStackcomponents with equivalent styles in thesxprop for more flexibility and consistency throughout the documentation stories. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18]Typography improvements:
paragraphprop onTypographywithsx={{ mb: 2 }}for explicit margin control, and migratedfontWeightusage to thesxprop for better style consistency. [1] [2] [3] [4] [5] [6] [7] [8]General documentation consistency: