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

fix: use Material UI vs. MUI where relevant

Browse Source 
Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
This commit is contained in:
Olivier Tassinari
2023-07-04 23:22:34 +02:00
parent b5344d21db
commit a51fb51617
57 changed files with 156 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+6 -3
View File
@@ -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',
},
],
},
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.
microsite/blog/2021-06-22-spotify-backstage-is-growing.mdx
+1 -1
View File
@@ -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:
packages/app-defaults/CHANGELOG.md
+4 -4
View File
@@ -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 }) => (
packages/cli/CHANGELOG.md
+2 -2
View File
@@ -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
packages/cli/config/eslint-factory.js
+1 -1
View File
@@ -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.",
},
packages/cli/src/lib/builder/buildTypeDefinitionsWorker.ts
+1 -1
View File
@@ -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.
*
packages/cli/src/lib/svgrTemplate.ts
+1 -1
View File
@@ -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(
packages/core-app-api/CHANGELOG.md
+2 -2
View File
@@ -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
packages/core-app-api/src/app/createSpecializedApp.tsx
+1 -1
View File
@@ -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);
packages/core-components/CHANGELOG.md
+3 -3
View File
@@ -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`.
packages/core-components/src/components/LinkButton/LinkButton.stories.tsx
+4 -4
View File
@@ -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>
&nbsp; has props for both Material-UI's component as well as for
&nbsp; 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>
&nbsp; links to a defined URL using Material-UI's Button.
&nbsp; links to a defined URL using Material UI's Button.
</ListItem>
<ListItem>
@@ -162,7 +162,7 @@ export const ButtonLinks = () => {
>
Trigger Event
</MaterialButton>
&nbsp; triggers an onClick event using Material-UI's Button.
&nbsp; triggers an onClick event using Material UI's Button.
</ListItem>
</List>
</>
packages/core-components/src/components/LinkButton/LinkButton.tsx
+1 -1
View File
@@ -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'>;
packages/core-components/src/layout/ItemCard/ItemCard.tsx
+3 -3
View File
@@ -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 } =
packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx
+1 -1
View File
@@ -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.:
*
packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx
+1 -1
View File
@@ -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.:
*
packages/core-components/src/layout/Sidebar/SidebarGroup.tsx
+1 -1
View File
@@ -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
packages/core-plugin-api/CHANGELOG.md
+1 -1
View File
@@ -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
packages/core-plugin-api/src/icons/types.ts
+4 -4
View File
@@ -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';
}
packages/test-utils/CHANGELOG.md
+2 -2
View File
@@ -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
packages/test-utils/src/testUtils/mockBreakpoint.ts
+3 -3
View File
@@ -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
*/
packages/theme/CHANGELOG.md
+5 -5
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 }) => (
@@ -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
packages/theme/src/unified/MuiClassNameSetup.ts
+1 -1
View File
@@ -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}`;
packages/theme/src/unified/UnifiedTheme.tsx
+2 -2
View File
@@ -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
*/
packages/theme/src/unified/UnifiedThemeProvider.tsx
+2 -2
View File
@@ -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
*/
packages/theme/src/unified/overrides.ts
+1 -1
View File
@@ -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
*/
packages/theme/src/unified/themes.ts
+1 -1
View File
@@ -18,7 +18,7 @@ import { palettes } from '../base';
import { createUnifiedTheme } from './UnifiedTheme';
/**
* Built-in Backstage MUI themes.
* Built-in Backstage Material UI themes.
*
* @public
*/
packages/theme/src/unified/types.ts
+1 -1
View File
@@ -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'.
*
packages/theme/src/v4/baseTheme.ts
+3 -3
View File
@@ -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
packages/theme/src/v4/themes.ts
+2 -2
View File
@@ -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.
packages/theme/src/v4/types.ts
+4 -4
View File
@@ -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;
plugins/api-docs/CHANGELOG.md
+2 -2
View File
@@ -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
plugins/cost-insights/src/utils/styles.ts
+1 -1
View File
@@ -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)
plugins/ilert/src/components/Alert/AlertAssignModal.tsx
+3 -3
View File
@@ -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}
plugins/scaffolder-react/CHANGELOG.md
+2 -2
View File
@@ -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
plugins/scaffolder/CHANGELOG.md
+1 -1
View File
@@ -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]
plugins/search-react/CHANGELOG.md
+2 -2
View File
@@ -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.
plugins/search/CHANGELOG.md
+3 -3
View File
@@ -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
plugins/techdocs/CHANGELOG.md
+1 -1
View File
@@ -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
plugins/user-settings/README.md
+1 -1
View File
@@ -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**