From a51fb51617c0fbfddf82a0061a818261c1023646 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari <olivier.tassinari@gmail.com> Date: Tue, 4 Jul 2023 23:22:34 +0200 Subject: [PATCH] fix: use Material UI vs. MUI where relevant Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com> --- .eslintrc.js | 9 ++-- docs/FAQ.md | 10 ++-- docs/api/deprecations.md | 4 +- docs/dls/component-design-guidelines.md | 12 ++--- docs/dls/contributing-to-storybook.md | 8 ++-- docs/getting-started/app-custom-theme.md | 4 +- .../configure-app-with-plugins.md | 2 +- docs/local-dev/cli-build-system.md | 48 +++++++++---------- docs/plugins/plugin-development.md | 2 +- docs/plugins/structure-of-a-plugin.md | 2 +- docs/releases/v1.13.0.md | 2 +- docs/releases/v1.14.0-changelog.md | 4 +- docs/releases/v1.14.0-next.0-changelog.md | 4 +- docs/releases/v1.15.0-changelog.md | 18 +++---- docs/releases/v1.15.0-next.0-changelog.md | 12 ++--- docs/releases/v1.15.0-next.1-changelog.md | 6 +-- docs/releases/v1.15.0.md | 4 +- docs/releases/v1.9.0-changelog.md | 4 +- docs/tutorials/migrating-away-from-core.md | 4 +- ...021-06-22-spotify-backstage-is-growing.mdx | 2 +- packages/app-defaults/CHANGELOG.md | 8 ++-- packages/cli/CHANGELOG.md | 4 +- packages/cli/config/eslint-factory.js | 2 +- .../lib/builder/buildTypeDefinitionsWorker.ts | 2 +- packages/cli/src/lib/svgrTemplate.ts | 2 +- packages/core-app-api/CHANGELOG.md | 4 +- .../src/app/createSpecializedApp.tsx | 2 +- packages/core-components/CHANGELOG.md | 6 +-- .../LinkButton/LinkButton.stories.tsx | 8 ++-- .../src/components/LinkButton/LinkButton.tsx | 2 +- .../src/layout/ItemCard/ItemCard.tsx | 6 +-- .../src/layout/ItemCard/ItemCardGrid.tsx | 2 +- .../src/layout/ItemCard/ItemCardHeader.tsx | 2 +- .../src/layout/Sidebar/SidebarGroup.tsx | 2 +- packages/core-plugin-api/CHANGELOG.md | 2 +- packages/core-plugin-api/src/icons/types.ts | 8 ++-- packages/test-utils/CHANGELOG.md | 4 +- .../src/testUtils/mockBreakpoint.ts | 6 +-- packages/theme/CHANGELOG.md | 10 ++-- .../theme/src/unified/MuiClassNameSetup.ts | 2 +- packages/theme/src/unified/UnifiedTheme.tsx | 4 +- .../src/unified/UnifiedThemeProvider.tsx | 4 +- packages/theme/src/unified/overrides.ts | 2 +- packages/theme/src/unified/themes.ts | 2 +- packages/theme/src/unified/types.ts | 2 +- packages/theme/src/v4/baseTheme.ts | 6 +-- packages/theme/src/v4/themes.ts | 4 +- packages/theme/src/v4/types.ts | 8 ++-- plugins/api-docs/CHANGELOG.md | 4 +- plugins/cost-insights/src/utils/styles.ts | 2 +- .../src/components/Alert/AlertAssignModal.tsx | 6 +-- plugins/scaffolder-react/CHANGELOG.md | 4 +- plugins/scaffolder/CHANGELOG.md | 2 +- plugins/search-react/CHANGELOG.md | 4 +- plugins/search/CHANGELOG.md | 6 +-- plugins/techdocs/CHANGELOG.md | 2 +- plugins/user-settings/README.md | 2 +- 57 files changed, 156 insertions(+), 153 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 1616404a6f3f0..0d937fc6b45b1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -246,11 +246,14 @@ module.exports = { 1, { forbid: [ - { element: 'button', message: 'use MUI <Button> instead' }, - { element: 'p', message: 'use MUI <Typography> instead' }, + { + element: 'button', + message: 'use Material UI <Button> instead', + }, + { element: 'p', message: 'use Material UI <Typography> instead' }, { element: 'span', - message: 'use a MUI <Typography> variant instead', + message: 'use a Material UI <Typography> variant instead', }, ], }, diff --git a/docs/FAQ.md b/docs/FAQ.md index ffd293f92f88e..3b3ae4bf73cff 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -64,8 +64,8 @@ valuable as you grow. ### Our company has a strong design language system/brand that we want to incorporate. Does Backstage support this? -Yes! The Backstage UI is built using Material-UI. With the theming capabilities -of Material-UI, you are able to adapt the interface to your brand guidelines. +Yes! The Backstage UI is built using Material UI. With the theming capabilities +of Material UI, you are able to adapt the interface to your brand guidelines. ## Technical FAQ @@ -73,11 +73,11 @@ of Material-UI, you are able to adapt the interface to your brand guidelines. Backstage is a large scale [TypeScript](https://www.typescriptlang.org/) application whose frontend parts use [React](https://react.dev/) and -[Material-UI](https://mui.com/), while the backend parts use +[Material UI](https://material-ui.com/), while the backend parts use [Node.js](https://nodejs.org/) and the [Express](https://expressjs.com/) framework. -### Why Material-UI? +### Why Material UI? The short answer is that's what we've been using in Backstage internally. @@ -88,7 +88,7 @@ knew that we would like to use. It strikes a good balance between power, customizability, and ease of use. A core focus of Backstage is to make plugin developers productive with as few -hurdles as possible. Material-UI lets plugin makers get going easily with both +hurdles as possible. Material UI lets plugin makers get going easily with both well-known tech and a large flora of components. ### What is the end-to-end user flow? The happy path story. diff --git a/docs/api/deprecations.md b/docs/api/deprecations.md index 04c3da92bc235..664d7c327d3b4 100644 --- a/docs/api/deprecations.md +++ b/docs/api/deprecations.md @@ -20,12 +20,12 @@ In order to provide more flexibility in what types of themes can be used and how they are applied, the `theme` property on the `AppTheme` type is being deprecated and replaced by a `Provider` property instead. The `Provider` property is a React component that will be mounted at the root of the app -whenever that theme is active. This also removes the tight connection to MUI and +whenever that theme is active. This also removes the tight connection to Material UI and opens up for other type of themes, and removes the hardcoded usage of `<CssBaseline>`. To migrate an existing theme, remove the `theme` property and move it over to a -new `Provider` component, using `ThemeProvider` from MUI to provide the new +new `Provider` component, using `ThemeProvider` from Material UI to provide the new theme, along with `<CssBaseline>`. For example a theme that currently looks like this: diff --git a/docs/dls/component-design-guidelines.md b/docs/dls/component-design-guidelines.md index 65eef4c057eb0..35e2f987d23ba 100644 --- a/docs/dls/component-design-guidelines.md +++ b/docs/dls/component-design-guidelines.md @@ -7,7 +7,7 @@ description: Documentation on Design Be it a new component contribution, or plugin specific components, you'll want to follow these guidelines. We'll cover the three main subjects that define the general look and feel of your components, all of which build on top of the -Material-UI theme features: +Material UI theme features: - Layout - Color palette @@ -17,10 +17,10 @@ Material-UI theme features: Layout refers to how you organize or stack content. Whenever possible, we want to use Backstage's components (check the [Storybook][1] for a list and demo) -first, and otherwise fall back to Material-UI components (check the [MUI docs][2]). +first, and otherwise fall back to Material UI components (check the [Material UI docs][2]). If none of these fit your layout needs, then you can build your own components. -However, using HTML+CSS directly is not recommended; it's better to use MUI +However, using HTML+CSS directly is not recommended; it's better to use Material UI layout components to make your layout theme aware, meaning if someone changes the theme, your layout would react to those changes without requiring updates to your code. @@ -43,13 +43,13 @@ specific styles for that component, that includes paddings, margins and colors. However when making a component from scratch you'll need to reference the theme as much as possible, make sure to use the theme's color palette. Most Backstage -components and all MUI components should use the theme's color palette by default, +components and all Material UI components should use the theme's color palette by default, so unless you need explicit control on the color of a component (say when the component was designed to use the primary color but you want to use the secondary color instead), then the easiest way to access the color palette is to [Override the Component Styles][11] as suggested by Backstage. -It's not a very common use case to override a theme color in a MUI component +It's not a very common use case to override a theme color in a Material UI component but let's say you have a custom Sidebar component with a Paper component that highlights its content with a different color for a side menu or something (usually you use the elevation, but maybe the designer wanted a colorful app). @@ -78,7 +78,7 @@ which tokens you can use as reference from the compiled theme. ## Typography -Most of the time the components from MUI will use the `<Typography />` component +Most of the time the components from Material UI will use the `<Typography />` component which will use the theme's typography properties like font family, size, weight and appropriate color from the palette for the context of that component. This applies for example to buttons that use white font color for contained buttons, or the respective color diff --git a/docs/dls/contributing-to-storybook.md b/docs/dls/contributing-to-storybook.md index b8e1b05ea1a61..dc1135200c32b 100644 --- a/docs/dls/contributing-to-storybook.md +++ b/docs/dls/contributing-to-storybook.md @@ -14,8 +14,8 @@ You'll find our storybook at [http://backstage.io/storybook](http://backstage.io/storybook). As noted in the [design introduction](design.md), Backstage's design is based -off of [Material-UI](https://material-ui.com/). Much of the UI elements use -direct Material-UI, while we've also extended and written custom ones to provide +off of [Material UI](https://material-ui.com/). Much of the UI elements use +direct Material UI, while we've also extended and written custom ones to provide specific functionality. ![Storybook Page](../assets/dls/storybook-page.png) @@ -27,13 +27,13 @@ copied. When custom Backstage components are created, they are placed in the `@backstage/core-components` package and added to the Storybook. -There may be times where an existing Material-UI component (in +There may be times where an existing Material UI component (in `@material-ui/core`) is sufficient and doesn't need to be wrapped or duplicated. However, we may want to identify an _opinionated_ way to use that component inside of Backstage. In these cases, stories showing how to use those existing components will also be put into our storybook. -When a story example using Material-UI becomes more complex, requiring a +When a story example using Material UI becomes more complex, requiring a specific set of colors, variants, parameters, etc., it may become a candidate to be refactored to become a full Backstage core component. diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 1b97d5199b7f8..3b042d5eb464a 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -42,7 +42,7 @@ the "Overriding Backstage and Material UI css rules" section below. You can also create a theme from scratch that matches the `BackstageTheme` type exported by [`@backstage/theme`](https://www.npmjs.com/package/@backstage/theme). See the -[Material-UI docs on theming](https://material-ui.com/customization/theming/) +[Material UI docs on theming](https://material-ui.com/customization/theming/) for more information about how that can be done. ## Using your Custom Theme @@ -162,7 +162,7 @@ const myTheme = createTheme({ ``` For a more complete example of a custom theme including Backstage and -Material-UI component overrides, see the [Aperture +Material UI component overrides, see the [Aperture theme](https://github.com/backstage/demo/blob/master/packages/app/src/theme/aperture.ts) from the [Backstage demo site](https://demo.backstage.io). diff --git a/docs/getting-started/configure-app-with-plugins.md b/docs/getting-started/configure-app-with-plugins.md index e0c698d3a1360..85942a8f0d736 100644 --- a/docs/getting-started/configure-app-with-plugins.md +++ b/docs/getting-started/configure-app-with-plugins.md @@ -84,7 +84,7 @@ For example, if you install the `api-docs` plugin, a matching `SidebarItem` could be something like this: ```tsx title="packages/app/src/components/Root/Root.tsx" -// Import icon from MUI +// Import icon from Material UI import ExtensionIcon from '@material-ui/icons/Extension'; // ... inside the AppSidebar component diff --git a/docs/local-dev/cli-build-system.md b/docs/local-dev/cli-build-system.md index 61e94e9ef43d2..eb1bda79db961 100644 --- a/docs/local-dev/cli-build-system.md +++ b/docs/local-dev/cli-build-system.md @@ -484,30 +484,30 @@ of the build system, including the bundling, tests, builds, and type checking. Loaders are always selected based on the file extension. The following is a list of all supported file extensions: -| Extension | Exports | Purpose | -| ----------- | --------------- | ----------------------------------------------------------------------------- | -| `.ts` | Script Module | TypeScript | -| `.tsx` | Script Module | TypeScript and XML | -| `.js` | Script Module | JavaScript | -| `.jsx` | Script Module | JavaScript and XML | -| `.mjs` | Script Module | ECMAScript Module | -| `.cjs` | Script Module | CommonJS Module | -| `.json` | JSON Data | JSON Data | -| `.yml` | JSON Data | YAML Data | -| `.yaml` | JSON Data | YAML Data | -| `.css` | classes | Style sheet | -| `.eot` | URL Path | Font | -| `.ttf` | URL Path | Font | -| `.woff2` | URL Path | Font | -| `.woff` | URL Path | Font | -| `.bmp` | URL Path | Image | -| `.gif` | URL Path | Image | -| `.jpeg` | URL Path | Image | -| `.jpg` | URL Path | Image | -| `.png` | URL Path | Image | -| `.svg` | URL Path | Image | -| `.md` | URL Path | Markdown File | -| `.icon.svg` | React Component | SVG converted into a [MUI SvgIcon](https://mui.com/components/icons/#svgicon) | +| Extension | Exports | Purpose | +| ----------- | --------------- | -------------------------------------------------------------------------------------- | +| `.ts` | Script Module | TypeScript | +| `.tsx` | Script Module | TypeScript and XML | +| `.js` | Script Module | JavaScript | +| `.jsx` | Script Module | JavaScript and XML | +| `.mjs` | Script Module | ECMAScript Module | +| `.cjs` | Script Module | CommonJS Module | +| `.json` | JSON Data | JSON Data | +| `.yml` | JSON Data | YAML Data | +| `.yaml` | JSON Data | YAML Data | +| `.css` | classes | Style sheet | +| `.eot` | URL Path | Font | +| `.ttf` | URL Path | Font | +| `.woff2` | URL Path | Font | +| `.woff` | URL Path | Font | +| `.bmp` | URL Path | Image | +| `.gif` | URL Path | Image | +| `.jpeg` | URL Path | Image | +| `.jpg` | URL Path | Image | +| `.png` | URL Path | Image | +| `.svg` | URL Path | Image | +| `.md` | URL Path | Markdown File | +| `.icon.svg` | React Component | SVG converted into a [Material UI SvgIcon](https://mui.com/material-ui/icons/#svgicon) | ## Jest Configuration diff --git a/docs/plugins/plugin-development.md b/docs/plugins/plugin-development.md index 362ecc5d5ad32..100f9012bed8f 100644 --- a/docs/plugins/plugin-development.md +++ b/docs/plugins/plugin-development.md @@ -16,7 +16,7 @@ browser APIs or by depending on external modules to do the work. - Consider writing plugins in `TypeScript`. - Plan the directory structure of your plugin so that it becomes easy to manage. - Prefer using the [Backstage components](https://backstage.io/storybook), - otherwise go with [Material-UI](https://material-ui.com/). + otherwise go with [Material UI](https://material-ui.com/). - Check out the shared Backstage APIs before building a new one. ## Plugin concepts / API diff --git a/docs/plugins/structure-of-a-plugin.md b/docs/plugins/structure-of-a-plugin.md index 8878e1c04d87b..0d18942320289 100644 --- a/docs/plugins/structure-of-a-plugin.md +++ b/docs/plugins/structure-of-a-plugin.md @@ -93,7 +93,7 @@ next to them you can split up the UI in as many components as you feel like. We have the `ExampleComponent` to show an example Backstage page component. The `ExampleFetchComponent` showcases the common task of making an async request to -a public API and plot the response data in a table using Material-UI components. +a public API and plot the response data in a table using Material UI components. You may tweak these components, rename them and/or replace them completely. diff --git a/docs/releases/v1.13.0.md b/docs/releases/v1.13.0.md index c8803453d4469..b93920b7b1a7b 100644 --- a/docs/releases/v1.13.0.md +++ b/docs/releases/v1.13.0.md @@ -14,7 +14,7 @@ This release has an important security fix, along with a lot of squashed bugs an ### BREAKING: Removed the `Tabs` core component -The `Tabs` component was removed from `@backstage/core-components`. It was a thin shim that provided very little value and was considered confusing, when the [native Material-UI tabs](https://v4.mui.com/components/tabs/) were already fully usable out of the box. Check out the pull request below for more details. +The `Tabs` component was removed from `@backstage/core-components`. It was a thin shim that provided very little value and was considered confusing, when the [native Material UI tabs](https://v4.mui.com/components/tabs/) were already fully usable out of the box. Check out the pull request below for more details. Contributed by [@tudi2d](https://github.com/tudi2d) in [#16587](https://github.com/backstage/backstage/pull/16587) diff --git a/docs/releases/v1.14.0-changelog.md b/docs/releases/v1.14.0-changelog.md index eae0d82e7171c..ff43be94a48f5 100644 --- a/docs/releases/v1.14.0-changelog.md +++ b/docs/releases/v1.14.0-changelog.md @@ -599,7 +599,7 @@ - 750e45539ad: Add close button & improve search input. - MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. + Material UI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. @@ -641,7 +641,7 @@ - 750e45539ad: Add close button & improve search input. - MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. + Material UI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. diff --git a/docs/releases/v1.14.0-next.0-changelog.md b/docs/releases/v1.14.0-next.0-changelog.md index d89b1c7949920..cac2f64885ac8 100644 --- a/docs/releases/v1.14.0-next.0-changelog.md +++ b/docs/releases/v1.14.0-next.0-changelog.md @@ -175,7 +175,7 @@ - 750e45539ad: Add close button & improve search input. - MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. + Material UI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. @@ -200,7 +200,7 @@ - 750e45539ad: Add close button & improve search input. - MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. + Material UI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. diff --git a/docs/releases/v1.15.0-changelog.md b/docs/releases/v1.15.0-changelog.md index b8503aa1a1a2a..4f644b1941987 100644 --- a/docs/releases/v1.15.0-changelog.md +++ b/docs/releases/v1.15.0-changelog.md @@ -4,9 +4,9 @@ ### Minor Changes -- 1fd38bc4141a: **MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a +- 1fd38bc4141a: **Material UI v5 Support:** Adding platform-wide support for Material UI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + To allow the future support of plugins & components using Material UI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` ```diff Provider: ({ children }) => ( @@ -119,7 +119,7 @@ ### Minor Changes -- 1fd38bc4141a: Test App Wrapper is now using `UnifiedThemeProvider` for supporting MUI v5 next to MUI v4 in tests. +- 1fd38bc4141a: Test App Wrapper is now using `UnifiedThemeProvider` for supporting Material UI v5 next to Material UI v4 in tests. ### Patch Changes @@ -137,9 +137,9 @@ ### Minor Changes -- 1fd38bc4141a: **MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a +- 1fd38bc4141a: **Material UI v5 Support:** Adding platform-wide support for Material UI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + To allow the future support of plugins & components using Material UI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` ```diff Provider: ({ children }) => ( @@ -445,7 +445,7 @@ - 6b571405f806: `scaffolder/next`: Provide some default template components to `rjsf` to allow for standardization and markdown descriptions - 4505dc3b4598: `scaffolder/next`: Don't render `TemplateGroups` when there's no results in with search query - a452bda74d7a: Fixed typescript casting bug for useTemplateParameterSchema hook -- 6b571405f806: `scaffolder/next`: provide a `ScaffolderField` component which is meant to replace some of the `FormControl` components from MUI, making it easier to write `FieldExtensions`. +- 6b571405f806: `scaffolder/next`: provide a `ScaffolderField` component which is meant to replace some of the `FormControl` components from Material UI, making it easier to write `FieldExtensions`. ### Patch Changes @@ -579,7 +579,7 @@ - 75540599124a: Updated example component for a newly scaffolded app. - 5d692f72ebfb: Make sure to include a `fetch` environment for `jsdom` in `jest` tests - 6816352500a7: Add discovery feature to the onboard cli command. -- 20b7da6f1311: Enforcing MUI v5 specific linting to minimize bundle size. +- 20b7da6f1311: Enforcing Material UI v5 specific linting to minimize bundle size. - Updated dependencies - @backstage/types@1.1.0 - @backstage/config-loader@1.3.1 @@ -640,7 +640,7 @@ - 4e697e88f0e2: Add resource utilization to Pod Drawer - 78cbb8ef8aea: Enhance the sidebar item accessibility by using appropriate header semantics. - 66ae4d8ca380: Added `exact` prop to `SidebarSubmenuItem` which causes it to only highlight if the current location is an exact match. -- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in MUI v5 +- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in Material UI v5 - b4cc4b1415e9: SupportButton auto focus first item when opened. - e33beb1f2a8e: Make the documentation pages printable (also handy for exporting to PDF) - Updated dependencies @@ -854,7 +854,7 @@ ### Patch Changes - 865267a6b934: Updated dependency `@asyncapi/react-component` to `1.0.0-next.48`. -- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in MUI v5 +- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in Material UI v5 - af748a148d52: Add support for OpenAPI Specification (OAS) v3.1.0 using swagger-ui v5.0.0. - Updated dependencies - @backstage/core-plugin-api@1.5.2 diff --git a/docs/releases/v1.15.0-next.0-changelog.md b/docs/releases/v1.15.0-next.0-changelog.md index ce28ca0bbfd94..3d35d0b33f7c5 100644 --- a/docs/releases/v1.15.0-next.0-changelog.md +++ b/docs/releases/v1.15.0-next.0-changelog.md @@ -4,9 +4,9 @@ ### Minor Changes -- 1fd38bc4141a: **MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a +- 1fd38bc4141a: **Material UI v5 Support:** Adding platform-wide support for Material UI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + To allow the future support of plugins & components using Material UI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` ```diff Provider: ({ children }) => ( @@ -30,7 +30,7 @@ ### Minor Changes -- 1fd38bc4141a: Test App Wrapper is now using `UnifiedThemeProvider` for supporting MUI v5 next to MUI v4 in tests. +- 1fd38bc4141a: Test App Wrapper is now using `UnifiedThemeProvider` for supporting Material UI v5 next to Material UI v4 in tests. ### Patch Changes @@ -47,9 +47,9 @@ ### Minor Changes -- 1fd38bc4141a: **MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a +- 1fd38bc4141a: **Material UI v5 Support:** Adding platform-wide support for Material UI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + To allow the future support of plugins & components using Material UI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` ```diff Provider: ({ children }) => ( @@ -234,7 +234,7 @@ ### Patch Changes -- 20b7da6f1311: Enforcing MUI v5 specific linting to minimize bundle size. +- 20b7da6f1311: Enforcing Material UI v5 specific linting to minimize bundle size. - Updated dependencies - @backstage/config-loader@1.3.1-next.0 - @backstage/config@1.0.7 diff --git a/docs/releases/v1.15.0-next.1-changelog.md b/docs/releases/v1.15.0-next.1-changelog.md index 950753978db6c..ef788b7e49d13 100644 --- a/docs/releases/v1.15.0-next.1-changelog.md +++ b/docs/releases/v1.15.0-next.1-changelog.md @@ -130,7 +130,7 @@ - 6b571405f806: `scaffolder/next`: Provide some default template components to `rjsf` to allow for standardization and markdown descriptions - 4505dc3b4598: `scaffolder/next`: Don't render `TemplateGroups` when there's no results in with search query -- 6b571405f806: `scaffolder/next`: provide a `ScaffolderField` component which is meant to replace some of the `FormControl` components from MUI, making it easier to write `FieldExtensions`. +- 6b571405f806: `scaffolder/next`: provide a `ScaffolderField` component which is meant to replace some of the `FormControl` components from Material UI, making it easier to write `FieldExtensions`. ### Patch Changes @@ -279,7 +279,7 @@ ### Patch Changes -- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in MUI v5 +- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in Material UI v5 - Updated dependencies - @backstage/errors@1.2.0-next.0 - @backstage/core-plugin-api@1.5.2-next.0 @@ -479,7 +479,7 @@ ### Patch Changes -- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in MUI v5 +- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in Material UI v5 - Updated dependencies - @backstage/plugin-catalog@1.11.1-next.1 - @backstage/core-components@0.13.2-next.1 diff --git a/docs/releases/v1.15.0.md b/docs/releases/v1.15.0.md index eeeec51a8202f..336fe7520b9bf 100644 --- a/docs/releases/v1.15.0.md +++ b/docs/releases/v1.15.0.md @@ -72,10 +72,10 @@ for details and installation instructions. Contributed by [@alde](https://github.com/alde) in [#17828](https://github.com/backstage/backstage/pull/17828) -### More movement toward Material-UI v5 and React v18 compatibility +### More movement toward Material UI v5 and React v18 compatibility There have been some tweaks here or there to types and the theme system to -ensure a smooth future migration toward Material-UI version 5. This should be +ensure a smooth future migration toward Material UI version 5. This should be mostly transparent to adopters, but please let us know if you encounter any oddities around the theme system after upgrading to this release. diff --git a/docs/releases/v1.9.0-changelog.md b/docs/releases/v1.9.0-changelog.md index b0a94e266a166..df14c3d34dab9 100644 --- a/docs/releases/v1.9.0-changelog.md +++ b/docs/releases/v1.9.0-changelog.md @@ -995,7 +995,7 @@ - 64a579a998: Add items prop to SupportButton. This prop can be used to override the items that would otherwise be grabbed from the config. -- 5d3058355d: Add `react/forbid-elements` linter rule for button, suggest MUI `Button` +- 5d3058355d: Add `react/forbid-elements` linter rule for button, suggest Material UI `Button` - 3280711113: Updated dependency `msw` to `^0.49.0`. @@ -2804,7 +2804,7 @@ - d3fea4ae0a: Internal fixes to avoid implicit usage of globals - 2e701b3796: Internal refactor to use `react-router-dom` rather than `react-router`. - a19cffbeed: Update search links to only have header as linkable text -- 5d3058355d: Add `react/forbid-elements` linter rule for button, suggest MUI `Button` +- 5d3058355d: Add `react/forbid-elements` linter rule for button, suggest Material UI `Button` - 3280711113: Updated dependency `msw` to `^0.49.0`. - 786f1b1419: Support older versions of react-router - Updated dependencies diff --git a/docs/tutorials/migrating-away-from-core.md b/docs/tutorials/migrating-away-from-core.md index 32f9dc5ad06bc..c9f221a38cc90 100644 --- a/docs/tutorials/migrating-away-from-core.md +++ b/docs/tutorials/migrating-away-from-core.md @@ -128,11 +128,11 @@ old usages by the `string` type. ### Constrained `IconComponent` type -The `IconComponent` type used to allow all of the props from the MUI `SvgIcon`. +The `IconComponent` type used to allow all of the props from the Material UI `SvgIcon`. This encouraged some bad patterns in open source plugins such as applying colors to the icons, which in turn hurt the ability to replace the icons with custom ones. The `IconComponent` type, which is now exported from `@backstage/core-plugin-api`, now only accepts a `fontSize` prop used to set the -size of the icon. The type is compatible with the MUI `SvgIcon`, but there may +size of the icon. The type is compatible with the Material UI `SvgIcon`, but there may be situations where an icon needs an explicit cast to `IconComponent` in order to narrow the type. diff --git a/microsite/blog/2021-06-22-spotify-backstage-is-growing.mdx b/microsite/blog/2021-06-22-spotify-backstage-is-growing.mdx index c90484c055182..6cae5c907ec4e 100644 --- a/microsite/blog/2021-06-22-spotify-backstage-is-growing.mdx +++ b/microsite/blog/2021-06-22-spotify-backstage-is-growing.mdx @@ -55,7 +55,7 @@ We will continue to post important product announcements, technical documentatio [![Backstage Community Sessions, hosted by Spotify](assets/21-06-22/backstage-community-sessions.png)](https://github.com/backstage/community/#backstage-community) -Earlier this year, we began hosting [Backstage Community Sessions](https://github.com/backstage/community/#backstage-community) — official meetups for anyone who wanted to join them. Since [the very first one](https://youtu.be/4-VX9tDdJYY), the Backstage team has been inspired and humbled by the community’s participation in these sessions — from hearing the [Expedia Group team share their journey adopting Backstage](https://youtu.be/rRphwXeq33Q?t=1509) to discussions about TypeScript and Material-UI. It’s great collaborating through code — but it’s also a lot of fun when you can see each other’s faces and have a conversation. +Earlier this year, we began hosting [Backstage Community Sessions](https://github.com/backstage/community/#backstage-community) — official meetups for anyone who wanted to join them. Since [the very first one](https://youtu.be/4-VX9tDdJYY), the Backstage team has been inspired and humbled by the community’s participation in these sessions — from hearing the [Expedia Group team share their journey adopting Backstage](https://youtu.be/rRphwXeq33Q?t=1509) to discussions about TypeScript and Material UI. It’s great collaborating through code — but it’s also a lot of fun when you can see each other’s faces and have a conversation. And while these sessions have been a success, the feedback we’ve gotten from the community has been very clear: more frequent and more focused conversations. So, later this summer, we’ll be launching standalone Backstage Adopter Sessions and Backstage Contributor Sessions. We hope this will lead to more useful sessions for everyone — and, of course, you are welcome to attend either or both: diff --git a/packages/app-defaults/CHANGELOG.md b/packages/app-defaults/CHANGELOG.md index 210d1a0426620..9a6d99b32ee8a 100644 --- a/packages/app-defaults/CHANGELOG.md +++ b/packages/app-defaults/CHANGELOG.md @@ -15,9 +15,9 @@ ### Minor Changes -- 1fd38bc4141a: **MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a +- 1fd38bc4141a: **Material UI v5 Support:** Adding platform-wide support for Material UI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + To allow the future support of plugins & components using Material UI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` ```diff Provider: ({ children }) => ( @@ -74,9 +74,9 @@ ### Minor Changes -- 1fd38bc4141a: **MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a +- 1fd38bc4141a: **Material UI v5 Support:** Adding platform-wide support for Material UI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + To allow the future support of plugins & components using Material UI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` ```diff Provider: ({ children }) => ( diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 8a89a9e31256f..f9d2877445202 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -26,7 +26,7 @@ - 75540599124a: Updated example component for a newly scaffolded app. - 5d692f72ebfb: Make sure to include a `fetch` environment for `jsdom` in `jest` tests - 6816352500a7: Add discovery feature to the onboard cli command. -- 20b7da6f1311: Enforcing MUI v5 specific linting to minimize bundle size. +- 20b7da6f1311: Enforcing Material UI v5 specific linting to minimize bundle size. - Updated dependencies - @backstage/types@1.1.0 - @backstage/config-loader@1.3.1 @@ -77,7 +77,7 @@ ### Patch Changes -- 20b7da6f1311: Enforcing MUI v5 specific linting to minimize bundle size. +- 20b7da6f1311: Enforcing Material UI v5 specific linting to minimize bundle size. - Updated dependencies - @backstage/config-loader@1.3.1-next.0 - @backstage/config@1.0.7 diff --git a/packages/cli/config/eslint-factory.js b/packages/cli/config/eslint-factory.js index 36b51324fc8ff..58a93620512cb 100644 --- a/packages/cli/config/eslint-factory.js +++ b/packages/cli/config/eslint-factory.js @@ -203,7 +203,7 @@ function createConfigForRole(dir, role, extraConfig = {}) { }, restrictedImports: [ { - // Importing the entire MUI icons packages impedes build performance as the list of icons is huge. + // Importing the entire Material UI icons packages impedes build performance as the list of icons is huge. name: '@material-ui/icons', message: "Please import '@material-ui/icons/<Icon>' instead.", }, diff --git a/packages/cli/src/lib/builder/buildTypeDefinitionsWorker.ts b/packages/cli/src/lib/builder/buildTypeDefinitionsWorker.ts index cf37c2a664179..c3c37d91cf8f8 100644 --- a/packages/cli/src/lib/builder/buildTypeDefinitionsWorker.ts +++ b/packages/cli/src/lib/builder/buildTypeDefinitionsWorker.ts @@ -40,7 +40,7 @@ export async function buildTypeDefinitionsWorker( const { Extractor, ExtractorConfig, CompilerState } = apiExtractor; /** - * All of this monkey patching below is because MUI has these bare package.json file as a method + * All of this monkey patching below is because Material UI has these bare package.json file as a method * for making TypeScript accept imports like `@material-ui/core/Button`, and improve tree-shaking * by declaring them side effect free. * diff --git a/packages/cli/src/lib/svgrTemplate.ts b/packages/cli/src/lib/svgrTemplate.ts index 6af1b95e71357..b583004f81d87 100644 --- a/packages/cli/src/lib/svgrTemplate.ts +++ b/packages/cli/src/lib/svgrTemplate.ts @@ -16,7 +16,7 @@ /** * This template, together with loaders in the bundler and packages, allows - * for SVG to be imported directly as MUI SvgIcon components by suffixing + * for SVG to be imported directly as Material UI SvgIcon components by suffixing * them with .icon.svg */ export function svgrTemplate( diff --git a/packages/core-app-api/CHANGELOG.md b/packages/core-app-api/CHANGELOG.md index 6461268841e1f..700e2afeda8c4 100644 --- a/packages/core-app-api/CHANGELOG.md +++ b/packages/core-app-api/CHANGELOG.md @@ -865,7 +865,7 @@ Deprecated the `SamlSession` and `GithubSession` types. -- 784d8078ab: Removed direct and transitive MUI dependencies. +- 784d8078ab: Removed direct and transitive Material UI dependencies. - Updated dependencies - @backstage/config@0.1.12 - @backstage/core-plugin-api@0.5.0 @@ -1064,7 +1064,7 @@ The first and most commonly used one is `createApp` from the new `@backstage/app-defaults` package, which behaves just like the existing `createApp`. In the future this method is likely to be expanded to add more APIs and other pieces into the default setup, for example the Utility APIs from `@backstage/integration-react`. - The other option that we now provide is to use `createSpecializedApp` from `@backstage/core-app-api`. This is a more low-level API where you need to provide a full set of options, including your own `components`, `icons`, `defaultApis`, and `themes`. The `createSpecializedApp` way of creating an app is particularly useful if you are not using `@backstage/core-components` or MUI, as it allows you to avoid those dependencies completely. + The other option that we now provide is to use `createSpecializedApp` from `@backstage/core-app-api`. This is a more low-level API where you need to provide a full set of options, including your own `components`, `icons`, `defaultApis`, and `themes`. The `createSpecializedApp` way of creating an app is particularly useful if you are not using `@backstage/core-components` or Material UI, as it allows you to avoid those dependencies completely. - 475edb5bc5: move the BehaviorSubject init into the constructor - Updated dependencies diff --git a/packages/core-app-api/src/app/createSpecializedApp.tsx b/packages/core-app-api/src/app/createSpecializedApp.tsx index 40906ef5c7863..717aa3a363353 100644 --- a/packages/core-app-api/src/app/createSpecializedApp.tsx +++ b/packages/core-app-api/src/app/createSpecializedApp.tsx @@ -29,7 +29,7 @@ import { AppOptions, BackstageApp } from './types'; * however, this low-level API allows you to provide a full set of options, * including your own `components`, `icons`, `defaultApis`, and `themes`. This * is particularly useful if you are not using `@backstage/core-components` or - * MUI, as it allows you to avoid those dependencies completely. + * Material UI, as it allows you to avoid those dependencies completely. */ export function createSpecializedApp(options: AppOptions): BackstageApp { return new AppManager(options); diff --git a/packages/core-components/CHANGELOG.md b/packages/core-components/CHANGELOG.md index 9599bad33386b..c12047400b6e6 100644 --- a/packages/core-components/CHANGELOG.md +++ b/packages/core-components/CHANGELOG.md @@ -20,7 +20,7 @@ - 4e697e88f0e2: Add resource utilization to Pod Drawer - 78cbb8ef8aea: Enhance the sidebar item accessibility by using appropriate header semantics. - 66ae4d8ca380: Added `exact` prop to `SidebarSubmenuItem` which causes it to only highlight if the current location is an exact match. -- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in MUI v5 +- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in Material UI v5 - b4cc4b1415e9: SupportButton auto focus first item when opened. - e33beb1f2a8e: Make the documentation pages printable (also handy for exporting to PDF) - Updated dependencies @@ -57,7 +57,7 @@ ### Patch Changes -- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in MUI v5 +- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in Material UI v5 - Updated dependencies - @backstage/errors@1.2.0-next.0 - @backstage/core-plugin-api@1.5.2-next.0 @@ -394,7 +394,7 @@ - 2e701b3796: Internal refactor to use `react-router-dom` rather than `react-router`. - d2e3bf6737: Made AlertDisplay not crash on undefined messages - 64a579a998: Add items prop to SupportButton. This prop can be used to override the items that would otherwise be grabbed from the config. -- 5d3058355d: Add `react/forbid-elements` linter rule for button, suggest MUI `Button` +- 5d3058355d: Add `react/forbid-elements` linter rule for button, suggest Material UI `Button` - 3280711113: Updated dependency `msw` to `^0.49.0`. - 19356df560: Updated dependency `zen-observable` to `^0.9.0`. - c3fa90e184: Updated dependency `zen-observable` to `^0.10.0`. diff --git a/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx index ec9398e47d774..da8ef51db1341 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.stories.tsx @@ -46,7 +46,7 @@ export default { A collection of buttons that should be used in the Backstage interface. These leverage the properties inherited from{' '} <Link to="https://material-ui.com/components/buttons/"> - Material-UI Button + Material UI Button </Link> , but include an opinionated set that align to the Backstage design. </Typography> @@ -131,7 +131,7 @@ export const ButtonLinks = () => { <LinkButton to={link()} color="default" variant="outlined"> Route Ref </LinkButton> - has props for both Material-UI's component as well as for + has props for both Material UI's component as well as for react-router-dom's Route object. </ListItem> @@ -151,7 +151,7 @@ export const ButtonLinks = () => { > View URL </MaterialButton> - links to a defined URL using Material-UI's Button. + links to a defined URL using Material UI's Button. </ListItem> <ListItem> @@ -162,7 +162,7 @@ export const ButtonLinks = () => { > Trigger Event </MaterialButton> - triggers an onClick event using Material-UI's Button. + triggers an onClick event using Material UI's Button. </ListItem> </List> </> diff --git a/packages/core-components/src/components/LinkButton/LinkButton.tsx b/packages/core-components/src/components/LinkButton/LinkButton.tsx index 7da25bcb41f64..a093aa6628511 100644 --- a/packages/core-components/src/components/LinkButton/LinkButton.tsx +++ b/packages/core-components/src/components/LinkButton/LinkButton.tsx @@ -26,7 +26,7 @@ import { Link, LinkProps } from '../Link'; * @public * @remarks * - * See {@link https://v4.mui.com/api/button/#props | Material-UI Button Props} for all properties + * See {@link https://v4.mui.com/api/button/#props | Material UI Button Props} for all properties */ export type LinkButtonProps = MaterialButtonProps & Omit<LinkProps, 'variant' | 'color'>; diff --git a/packages/core-components/src/layout/ItemCard/ItemCard.tsx b/packages/core-components/src/layout/ItemCard/ItemCard.tsx index 3d9963760b4f3..2d1123b19cc45 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCard.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCard.tsx @@ -37,7 +37,7 @@ type ItemCardProps = { }; /** - * This card type has been deprecated. Instead use plain MUI Card and helpers + * This card type has been deprecated. Instead use plain Material UI Card and helpers * where appropriate. * * @example @@ -57,8 +57,8 @@ type ItemCardProps = { * </Card> * ``` * - * @deprecated Use plain MUI `<Card>` and composable helpers instead. - * @see https://material-ui.com/components/cards/ + * @deprecated Use plain Material UI `<Card>` and composable helpers instead. + * @see https://v4.mui.com/components/cards/ */ export function ItemCard(props: ItemCardProps) { const { description, tags, title, type, subtitle, label, onClick, href } = diff --git a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx index a1e6d24aebf4e..30710bdc26c62 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx @@ -50,7 +50,7 @@ export type ItemCardGridProps = Partial<WithStyles<typeof styles>> & { * select among several options. * * @remarks - * The immediate children are expected to be MUI Card components. + * The immediate children are expected to be Material UI Card components. * * Styles for the grid can be overridden using the `classes` prop, e.g.: * diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx index da3d9b7ebe4e4..1e4e7dc316430 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx @@ -65,7 +65,7 @@ export type ItemCardHeaderProps = Partial<WithStyles<typeof styles>> & { * are arranged in a grid for users to select among several options. * * @remarks - * This component expects to be placed within a MUI `<CardMedia>`. + * This component expects to be placed within a Material UI `<CardMedia>`. * * Styles for the header can be overridden using the `classes` prop, e.g.: * diff --git a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx index 1dd61d3170586..01adfd12aa2c9 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx @@ -69,7 +69,7 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>( ); /** - * Returns a MUI `BottomNavigationAction`, which is aware of the current location & the selected item in the `BottomNavigation`, + * Returns a Material UI `BottomNavigationAction`, which is aware of the current location & the selected item in the `BottomNavigation`, * such that it will highlight a `MobileSidebarGroup` either on location change or if the selected item changes. * * @param props `to`: pathname of link; `value`: index of the selected item diff --git a/packages/core-plugin-api/CHANGELOG.md b/packages/core-plugin-api/CHANGELOG.md index 5c3fe8d8be623..1261354a79c07 100644 --- a/packages/core-plugin-api/CHANGELOG.md +++ b/packages/core-plugin-api/CHANGELOG.md @@ -548,7 +548,7 @@ ### Patch Changes -- 784d8078ab: Removed direct and transitive MUI dependencies. +- 784d8078ab: Removed direct and transitive Material UI dependencies. - Updated dependencies - @backstage/config@0.1.12 diff --git a/packages/core-plugin-api/src/icons/types.ts b/packages/core-plugin-api/src/icons/types.ts index 22af0a573721d..aa264294e35f8 100644 --- a/packages/core-plugin-api/src/icons/types.ts +++ b/packages/core-plugin-api/src/icons/types.ts @@ -22,8 +22,8 @@ import { ComponentType } from 'react'; * * @remarks * - * The type is based on SvgIcon from MUI, but both do not what the plugin-api - * package to have a dependency on MUI, nor do we want the props to be as broad + * The type is based on SvgIcon from Material UI, but both do not what the plugin-api + * package to have a dependency on Material UI, nor do we want the props to be as broad * as the SvgIconProps interface. * * If you have the need to forward additional props from SvgIconProps, you can @@ -34,11 +34,11 @@ import { ComponentType } from 'react'; */ export type IconComponent = ComponentType< - /* MUI v4 */ + /* Material UI v4 */ | { fontSize?: 'large' | 'small' | 'default'; } - /* MUI v5: https://mui.com/material-ui/migration/v5-component-changes/#icon */ + /* Material UI v5: https://mui.com/material-ui/migration/v5-component-changes/#icon */ | { fontSize?: 'medium' | 'large' | 'small'; } diff --git a/packages/test-utils/CHANGELOG.md b/packages/test-utils/CHANGELOG.md index 6492a744f79bb..677d4ba824d0c 100644 --- a/packages/test-utils/CHANGELOG.md +++ b/packages/test-utils/CHANGELOG.md @@ -17,7 +17,7 @@ ### Minor Changes -- 1fd38bc4141a: Test App Wrapper is now using `UnifiedThemeProvider` for supporting MUI v5 next to MUI v4 in tests. +- 1fd38bc4141a: Test App Wrapper is now using `UnifiedThemeProvider` for supporting Material UI v5 next to Material UI v4 in tests. ### Patch Changes @@ -59,7 +59,7 @@ ### Minor Changes -- 1fd38bc4141a: Test App Wrapper is now using `UnifiedThemeProvider` for supporting MUI v5 next to MUI v4 in tests. +- 1fd38bc4141a: Test App Wrapper is now using `UnifiedThemeProvider` for supporting Material UI v5 next to Material UI v4 in tests. ### Patch Changes diff --git a/packages/test-utils/src/testUtils/mockBreakpoint.ts b/packages/test-utils/src/testUtils/mockBreakpoint.ts index ee759c07a59b1..78d7c9497fd50 100644 --- a/packages/test-utils/src/testUtils/mockBreakpoint.ts +++ b/packages/test-utils/src/testUtils/mockBreakpoint.ts @@ -16,13 +16,13 @@ /** * This is a mocking method suggested in the Jest docs, as it is not implemented in JSDOM yet. - * It can be used to mock values for the MUI `useMediaQuery` hook if it is used in a tested component. + * It can be used to mock values for the Material UI `useMediaQuery` hook if it is used in a tested component. * * For issues checkout the documentation: * https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom * - * If there are any updates from MUI React on testing `useMediaQuery` this mock should be replaced - * https://material-ui.com/components/use-media-query/#testing + * If there are any updates from Material UI React on testing `useMediaQuery` this mock should be replaced + * https://mui.com/material-ui/react-use-media-query/#testing * * @public */ diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md index ab96891b8fa91..f06991480a42c 100644 --- a/packages/theme/CHANGELOG.md +++ b/packages/theme/CHANGELOG.md @@ -4,9 +4,9 @@ ### Minor Changes -- 1fd38bc4141a: **MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a +- 1fd38bc4141a: **Material UI v5 Support:** Adding platform-wide support for Material UI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + To allow the future support of plugins & components using Material UI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` ```diff Provider: ({ children }) => ( @@ -31,9 +31,9 @@ ### Minor Changes -- 1fd38bc4141a: **MUI v5 Support:** Adding platform-wide support for MUI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a +- 1fd38bc4141a: **Material UI v5 Support:** Adding platform-wide support for Material UI v5 allowing a transition phase for migrating central plugins & components over. We still support v4 instances & plugins by adding a - To allow the future support of plugins & components using MUI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` + To allow the future support of plugins & components using Material UI v5 you want to upgrade your `AppTheme`'s to using the `UnifiedThemeProvider` ```diff Provider: ({ children }) => ( @@ -201,7 +201,7 @@ ### Patch Changes -- 2089de76b: Deprecated `ItemCard`. Added `ItemCardGrid` and `ItemCardHeader` instead, that can be used to compose functionality around regular Material-UI `Card` components instead. +- 2089de76b: Deprecated `ItemCard`. Added `ItemCardGrid` and `ItemCardHeader` instead, that can be used to compose functionality around regular Material UI `Card` components instead. ## 0.2.3 diff --git a/packages/theme/src/unified/MuiClassNameSetup.ts b/packages/theme/src/unified/MuiClassNameSetup.ts index 42b948af32aca..5d7e0b26feac5 100644 --- a/packages/theme/src/unified/MuiClassNameSetup.ts +++ b/packages/theme/src/unified/MuiClassNameSetup.ts @@ -17,7 +17,7 @@ import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className'; /** - * This API is introduced in @mui/material (v5.0.5) as a replacement of deprecated createGenerateClassName & only affects v5 MUI components from `@mui/*` + * This API is introduced in @mui/material (v5.0.5) as a replacement of deprecated createGenerateClassName & only affects v5 Material UI components from `@mui/*` */ ClassNameGenerator.configure(componentName => { return `v5-${componentName}`; diff --git a/packages/theme/src/unified/UnifiedTheme.tsx b/packages/theme/src/unified/UnifiedTheme.tsx index 0c5f80357aef0..e375f64e2ea01 100644 --- a/packages/theme/src/unified/UnifiedTheme.tsx +++ b/packages/theme/src/unified/UnifiedTheme.tsx @@ -87,8 +87,8 @@ export function createUnifiedTheme(options: UnifiedThemeOptions): UnifiedTheme { } /** - * Creates a new {@link UnifiedTheme} using MUI v4 theme options. - * Note that this uses `adaptV4Theme` from MUI v5, which is deprecated. + * Creates a new {@link UnifiedTheme} using Material UI v4 theme options. + * Note that this uses `adaptV4Theme` from Material UI v5, which is deprecated. * * @public */ diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 613f89d5e0f3a..f97328440953a 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -41,14 +41,14 @@ export interface UnifiedThemeProviderProps { // Background at https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5 // Rather than disabling globals and custom seed, we instead only set a production prefix that -// won't collide with MUI 5 styles. We've already got a separate class name generator for v5 set +// won't collide with Material UI 5 styles. We've already got a separate class name generator for v5 set // up in MuiClassNameSetup.ts, so only the production JSS needs deduplication. const generateV4ClassName = createGenerateClassName({ productionPrefix: 'jss4-', }); /** - * Provides themes for all MUI versions supported by the provided unified theme. + * Provides themes for all Material UI versions supported by the provided unified theme. * * @public */ diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index 7417fccedcd25..faaa3f377298b 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -105,7 +105,7 @@ function extractV5StateOverrides( } /** - * Transform MUI v5 component themes into a v4 theme props and overrides. + * Transform Material UI v5 component themes into a v4 theme props and overrides. * * @public */ diff --git a/packages/theme/src/unified/themes.ts b/packages/theme/src/unified/themes.ts index 24e1b1026befe..197a5cbbd0d1d 100644 --- a/packages/theme/src/unified/themes.ts +++ b/packages/theme/src/unified/themes.ts @@ -18,7 +18,7 @@ import { palettes } from '../base'; import { createUnifiedTheme } from './UnifiedTheme'; /** - * Built-in Backstage MUI themes. + * Built-in Backstage Material UI themes. * * @public */ diff --git a/packages/theme/src/unified/types.ts b/packages/theme/src/unified/types.ts index f090a99b83455..0f60c7898442b 100644 --- a/packages/theme/src/unified/types.ts +++ b/packages/theme/src/unified/types.ts @@ -15,7 +15,7 @@ */ /** - * A container of one theme for multiple different MUI versions. + * A container of one theme for multiple different Material UI versions. * * Currently known keys are 'v4' and 'v5'. * diff --git a/packages/theme/src/v4/baseTheme.ts b/packages/theme/src/v4/baseTheme.ts index 8143183ec07dd..ef63e2a5fa4a4 100644 --- a/packages/theme/src/v4/baseTheme.ts +++ b/packages/theme/src/v4/baseTheme.ts @@ -29,7 +29,7 @@ import { defaultComponentThemes } from '../v5'; import { transformV5ComponentThemesToV4 } from '../unified/overrides'; /** - * An old helper for creating MUI v4 theme options. + * An old helper for creating Material UI v4 theme options. * * @public * @deprecated Use {@link createBaseThemeOptions} instead. @@ -47,7 +47,7 @@ export function createThemeOptions(options: SimpleThemeOptions): ThemeOptions { } /** - * * An old helper for creating MUI v4 theme overrides. + * * An old helper for creating Material UI v4 theme overrides. * * @public * @deprecated Use {@link defaultComponentThemes} with {@link transformV5ComponentThemesToV4} instead. @@ -61,7 +61,7 @@ export function createThemeOverrides(theme: Theme): Overrides { } /** - * The old method to create a Backstage MUI v4 theme using a palette. + * The old method to create a Backstage Material UI v4 theme using a palette. * The theme is created with the common Backstage options and component styles. * * @public diff --git a/packages/theme/src/v4/themes.ts b/packages/theme/src/v4/themes.ts index 488ee5883183a..6347606d6c4ce 100644 --- a/packages/theme/src/v4/themes.ts +++ b/packages/theme/src/v4/themes.ts @@ -18,7 +18,7 @@ import { createTheme } from './baseTheme'; import { palettes } from '../base'; /** - * The old MUI v4 Backstage light theme. + * The old Material UI v4 Backstage light theme. * * @public * @deprecated Use {@link themes.light} instead. @@ -28,7 +28,7 @@ export const lightTheme = createTheme({ }); /** - * The old MUI v4 Backstage dark theme. + * The old Material UI v4 Backstage dark theme. * * @public * @deprecated Use {@link themes.dark} instead. diff --git a/packages/theme/src/v4/types.ts b/packages/theme/src/v4/types.ts index d059bc2d712f4..efbbef23c2425 100644 --- a/packages/theme/src/v4/types.ts +++ b/packages/theme/src/v4/types.ts @@ -33,7 +33,7 @@ import { * The full Backstage palette. * * @public - * @deprecated This type is deprecated, the MUI Palette type is now always extended instead. + * @deprecated This type is deprecated, the Material UI Palette type is now always extended instead. */ export type BackstagePalette = MuiPalette & BackstagePaletteAdditions; @@ -41,7 +41,7 @@ export type BackstagePalette = MuiPalette & BackstagePaletteAdditions; * The full Backstage palette options. * * @public - * @deprecated This type is deprecated, the MUI PaletteOptions type is now always extended instead. + * @deprecated This type is deprecated, the Material UI PaletteOptions type is now always extended instead. */ export type BackstagePaletteOptions = MuiPaletteOptions & BackstagePaletteAdditions; @@ -50,7 +50,7 @@ export type BackstagePaletteOptions = MuiPaletteOptions & * Backstage theme options. * * @public - * @deprecated This type is deprecated, the MUI ThemeOptions type is now always extended instead. + * @deprecated This type is deprecated, the Material UI ThemeOptions type is now always extended instead. * @remarks * * This is essentially a partial theme definition made by the user, that then @@ -68,7 +68,7 @@ export interface BackstageThemeOptions extends MuiThemeOptions { * A Backstage theme. * * @public - * @deprecated This type is deprecated, the MUI Theme type is now always extended instead. + * @deprecated This type is deprecated, the Material UI Theme type is now always extended instead. */ export interface BackstageTheme extends MuiTheme { palette: BackstagePalette; diff --git a/plugins/api-docs/CHANGELOG.md b/plugins/api-docs/CHANGELOG.md index 7727fdb12bc85..f42996d448ddb 100644 --- a/plugins/api-docs/CHANGELOG.md +++ b/plugins/api-docs/CHANGELOG.md @@ -17,7 +17,7 @@ ### Patch Changes - 865267a6b934: Updated dependency `@asyncapi/react-component` to `1.0.0-next.48`. -- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in MUI v5 +- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in Material UI v5 - af748a148d52: Add support for OpenAPI Specification (OAS) v3.1.0 using swagger-ui v5.0.0. - Updated dependencies - @backstage/core-plugin-api@1.5.2 @@ -56,7 +56,7 @@ ### Patch Changes -- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in MUI v5 +- 83bdc3a555c1: Replaced usages of `theme.palette.theme.hint` with `theme.palette.text.secondary` as it has been removed in Material UI v5 - Updated dependencies - @backstage/plugin-catalog@1.11.1-next.1 - @backstage/core-components@0.13.2-next.1 diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts index 9b5c53e0201ab..6ccc81c963790 100644 --- a/plugins/cost-insights/src/utils/styles.ts +++ b/plugins/cost-insights/src/utils/styles.ts @@ -82,7 +82,7 @@ export const costInsightsDarkTheme = { }, } as CostInsightsThemeOptions; -// The opposite of MUI's emphasize function - darken darks, lighten lights +// The opposite of Material UI's emphasize function - darken darks, lighten lights export function brighten(color: string, coefficient = 0.2) { return getLuminance(color) > 0.5 ? lighten(color, coefficient) diff --git a/plugins/ilert/src/components/Alert/AlertAssignModal.tsx b/plugins/ilert/src/components/Alert/AlertAssignModal.tsx index d1ecefafa14c6..16e288f0e70c6 100644 --- a/plugins/ilert/src/components/Alert/AlertAssignModal.tsx +++ b/plugins/ilert/src/components/Alert/AlertAssignModal.tsx @@ -22,7 +22,7 @@ import DialogContent from '@material-ui/core/DialogContent'; import DialogTitle from '@material-ui/core/DialogTitle'; import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; -import MUIAlert from '@material-ui/lab/Alert'; +import MdAlert from '@material-ui/lab/Alert'; import Autocomplete from '@material-ui/lab/Autocomplete'; import React from 'react'; import { ilertApiRef } from '../../api'; @@ -111,11 +111,11 @@ export const AlertAssignModal = ({ Select responder to assign </DialogTitle> <DialogContent> - <MUIAlert severity="info"> + <MdAlert severity="info"> <Typography variant="body1" gutterBottom align="justify"> This action will assign the alert to the selected responder. </Typography> - </MUIAlert> + </MdAlert> <Autocomplete disabled={isLoading} options={alertRespondersList} diff --git a/plugins/scaffolder-react/CHANGELOG.md b/plugins/scaffolder-react/CHANGELOG.md index 3b7bce6a1d742..f70f256b59066 100644 --- a/plugins/scaffolder-react/CHANGELOG.md +++ b/plugins/scaffolder-react/CHANGELOG.md @@ -23,7 +23,7 @@ - 6b571405f806: `scaffolder/next`: Provide some default template components to `rjsf` to allow for standardization and markdown descriptions - 4505dc3b4598: `scaffolder/next`: Don't render `TemplateGroups` when there's no results in with search query - a452bda74d7a: Fixed typescript casting bug for useTemplateParameterSchema hook -- 6b571405f806: `scaffolder/next`: provide a `ScaffolderField` component which is meant to replace some of the `FormControl` components from MUI, making it easier to write `FieldExtensions`. +- 6b571405f806: `scaffolder/next`: provide a `ScaffolderField` component which is meant to replace some of the `FormControl` components from Material UI, making it easier to write `FieldExtensions`. ### Patch Changes @@ -81,7 +81,7 @@ - 6b571405f806: `scaffolder/next`: Provide some default template components to `rjsf` to allow for standardization and markdown descriptions - 4505dc3b4598: `scaffolder/next`: Don't render `TemplateGroups` when there's no results in with search query -- 6b571405f806: `scaffolder/next`: provide a `ScaffolderField` component which is meant to replace some of the `FormControl` components from MUI, making it easier to write `FieldExtensions`. +- 6b571405f806: `scaffolder/next`: provide a `ScaffolderField` component which is meant to replace some of the `FormControl` components from Material UI, making it easier to write `FieldExtensions`. ### Patch Changes diff --git a/plugins/scaffolder/CHANGELOG.md b/plugins/scaffolder/CHANGELOG.md index 4e3ff61b5b4e2..d246494d40e42 100644 --- a/plugins/scaffolder/CHANGELOG.md +++ b/plugins/scaffolder/CHANGELOG.md @@ -3060,7 +3060,7 @@ ### Patch Changes - 12d8f27a6: Move logic for constructing the template form to the backend, using a new `./parameter-schema` endpoint that returns the form schema for a given template. -- bc327dc42: Tweak the template cards to be even more compliant with MUI examples, and a little bit more dense. +- bc327dc42: Tweak the template cards to be even more compliant with Material UI examples, and a little bit more dense. - Updated dependencies [12d8f27a6] - Updated dependencies [40c0fdbaa] - Updated dependencies [2a271d89e] diff --git a/plugins/search-react/CHANGELOG.md b/plugins/search-react/CHANGELOG.md index 574560e1d8a88..ffb0f90b0cfd4 100644 --- a/plugins/search-react/CHANGELOG.md +++ b/plugins/search-react/CHANGELOG.md @@ -79,7 +79,7 @@ - 750e45539ad: Add close button & improve search input. - MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. + Material UI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. @@ -125,7 +125,7 @@ - 750e45539ad: Add close button & improve search input. - MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. + Material UI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. diff --git a/plugins/search/CHANGELOG.md b/plugins/search/CHANGELOG.md index e01effe1c5943..1a0b5542405e9 100644 --- a/plugins/search/CHANGELOG.md +++ b/plugins/search/CHANGELOG.md @@ -106,7 +106,7 @@ - 750e45539ad: Add close button & improve search input. - MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. + Material UI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. @@ -156,7 +156,7 @@ - 750e45539ad: Add close button & improve search input. - MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. + Material UI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. @@ -1852,7 +1852,7 @@ ### Patch Changes -- 01707438b: Fix Material-UI warning for search filtering +- 01707438b: Fix Material UI warning for search filtering - Updated dependencies [9c09a364f] - @backstage/plugin-catalog@0.2.10 diff --git a/plugins/techdocs/CHANGELOG.md b/plugins/techdocs/CHANGELOG.md index 55e584f71d8b9..a4d2ca0d60ad9 100644 --- a/plugins/techdocs/CHANGELOG.md +++ b/plugins/techdocs/CHANGELOG.md @@ -587,7 +587,7 @@ - d3fea4ae0a: Internal fixes to avoid implicit usage of globals - 2e701b3796: Internal refactor to use `react-router-dom` rather than `react-router`. - a19cffbeed: Update search links to only have header as linkable text -- 5d3058355d: Add `react/forbid-elements` linter rule for button, suggest MUI `Button` +- 5d3058355d: Add `react/forbid-elements` linter rule for button, suggest Material UI `Button` - 3280711113: Updated dependency `msw` to `^0.49.0`. - 786f1b1419: Support older versions of react-router - Updated dependencies diff --git a/plugins/user-settings/README.md b/plugins/user-settings/README.md index 9a99a69b365bb..1ecaaeb536511 100644 --- a/plugins/user-settings/README.md +++ b/plugins/user-settings/README.md @@ -64,7 +64,7 @@ const AppRoutes = () => ( ); ``` -> **Note that the list of providers expects to be rendered within a MUI [`<List>`](https://material-ui.com/components/lists/)** +> **Note that the list of providers expects to be rendered within a Material UI [`<List>`](https://v4.mui.com/components/lists/)** **Tabs**