paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 23 Packages Projects Releases Wiki Activity

Merge pull request #18558 from oliviertassinari/mui-material-ui

Browse Source 
fix: use Material UI vs. MUI where relevant
This commit is contained in:
Ben Lambert
2023-07-10 14:20:33 +02:00
committed by GitHub
parent 4301035182 8174cf4c0e
commit 823bf5235e
57 changed files with 165 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/FAQ.md
+5 -5
View File
@@ -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.
docs/api/deprecations.md
+2 -2
View File
@@ -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:
docs/dls/component-design-guidelines.md
+6 -6
View File
@@ -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
docs/dls/contributing-to-storybook.md
+4 -4
View File
@@ -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.
docs/getting-started/app-custom-theme.md
+2 -2
View File
@@ -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).
docs/getting-started/configure-app-with-plugins.md
+1 -1
View File
@@ -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
docs/local-dev/cli-build-system.md
+24 -24
View File
@@ -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
docs/plugins/plugin-development.md
+1 -1
View File
@@ -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
docs/plugins/structure-of-a-plugin.md
+1 -1
View File
@@ -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.
docs/releases/v1.13.0.md
+1 -1
View File
@@ -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)
docs/releases/v1.14.0-changelog.md
+2 -2
View File
@@ -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.
docs/releases/v1.14.0-next.0-changelog.md
+2 -2
View File
@@ -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.
docs/releases/v1.15.0-changelog.md
+9 -9
View File
@@ -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
docs/releases/v1.15.0-next.0-changelog.md
+6 -6
View File
@@ -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
docs/releases/v1.15.0-next.1-changelog.md
+3 -3
View File
@@ -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
docs/releases/v1.15.0.md
+2 -2
View File
@@ -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.
docs/releases/v1.9.0-changelog.md
+2 -2
View File
@@ -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
docs/tutorials/migrating-away-from-core.md
+2 -2
View File
@@ -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.