fix: use Material UI vs. MUI where relevant

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
rmartine-ias · Jul 4, 2023 · a51fb51 · a51fb51
1 parent b5344d2
commit a51fb51
Show file tree

Hide file tree

Showing 57 changed files with 156 additions and 153 deletions.
diff --git 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
@@ -64,20 +64,20 @@ 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
 
 ### What technology does Backstage use?
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.