From bc35128302b5bd61fa35f89d371aeed91e6a5748 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 13 Jul 2023 09:21:29 -0300 Subject: [PATCH] [docs-infra] Update installation commands to use the new tabs code component (#37927) --- .../getting-started/quickstart/quickstart.md | 16 +++--- .../installation/installation.md | 21 ++++---- .../components/about-the-lab/about-the-lab.md | 12 +++-- .../material-icons/material-icons.md | 12 ++++- .../installation/installation.md | 42 ++++++--------- .../installation/installation.md | 20 +++---- .../modules/components/ExampleCollection.js | 4 +- .../components/HighlightedCodeWithTabs.tsx | 54 ++++++++++--------- 8 files changed, 90 insertions(+), 91 deletions(-) diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md index f68f8ec2812c93..4c23ba8e98c824 100644 --- a/docs/data/base/getting-started/quickstart/quickstart.md +++ b/docs/data/base/getting-started/quickstart/quickstart.md @@ -10,24 +10,22 @@ If you're using Next.js 13.4 or later, check out the [Next.js App Router guide]( `@mui/base` is completely standalone – run one of the following commands to add Base UI to your React project: -### With npm + -```bash +```bash npm npm install @mui/base ``` -### With yarn - -```bash +```bash yarn yarn add @mui/base ``` -### With pnpm - -```bash -pnpm add @mui/base +```bash pnpm +pnpm install @mui/base ``` + + ### Peer dependencies diff --git a/docs/data/joy/getting-started/installation/installation.md b/docs/data/joy/getting-started/installation/installation.md index 49201c247250da..69b2ecf9f54939 100644 --- a/docs/data/joy/getting-started/installation/installation.md +++ b/docs/data/joy/getting-started/installation/installation.md @@ -4,18 +4,17 @@ Run one of the following commands to add Joy UI to your project: -## npm - -```bash + +```bash npm npm install @mui/joy @emotion/react @emotion/styled ``` -## yarn - -```bash +```bash yarn yarn add @mui/joy @emotion/react @emotion/styled ``` + + ## Peer dependencies @@ -35,18 +34,18 @@ Joy UI is designed to use the [Public Sans](https://fonts.google.com/specimen/Pu font by default. You may add it to your project with npm or yarn via [Fontsource](https://fontsource.org/), or with the Google Fonts CDN. -### npm + -```bash +```bash npm npm install @fontsource/public-sans ``` -### yarn - -```bash +```bash yarn yarn add @fontsource/public-sans ``` + + Then you can import it in your entry point like this: ```tsx diff --git a/docs/data/material/components/about-the-lab/about-the-lab.md b/docs/data/material/components/about-the-lab/about-the-lab.md index 4f9694a617d624..806df83afd67aa 100644 --- a/docs/data/material/components/about-the-lab/about-the-lab.md +++ b/docs/data/material/components/about-the-lab/about-the-lab.md @@ -17,18 +17,20 @@ For a component to be ready to move to the core, the following criteria are cons ## Installation -To install and save in your `package.json` dependencies, run the command below using **npm**: +To install and save in your `package.json` dependencies, run one of the following commands: -```bash + + +```bash npm npm install @mui/lab @mui/material ``` -Or **yarn**: - -```bash +```bash yarn yarn add @mui/lab @mui/material ``` + + Note that the lab has a peer dependency on the Material UI components. ## TypeScript diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md index cee3764c3ea7ea..a63000e8ec360d 100644 --- a/docs/data/material/components/material-icons/material-icons.md +++ b/docs/data/material/components/material-icons/material-icons.md @@ -16,12 +16,20 @@ githubLabel: 'package: icons' [@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material) includes the 2,100+ official [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) converted to [`SvgIcon`](/material-ui/api/svg-icon/) components. It depends on `@mui/material`, which requires Emotion packages. -Use the following command to install it: +Use one of the following commands to install it: -```bash + + +```bash npm npm install @mui/icons-material @mui/material @emotion/styled @emotion/react ``` +```bash yarn +yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react +``` + + + See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly.
diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md index e484a191b1754b..ced7457daa40a1 100644 --- a/docs/data/material/getting-started/installation/installation.md +++ b/docs/data/material/getting-started/installation/installation.md @@ -14,35 +14,35 @@ If you're using Next.js 13.4 or later, check out the [Next.js App Router guide]( Run one of the following commands to add Material UI to your project: -### npm + -```bash +```bash npm npm install @mui/material @emotion/react @emotion/styled ``` -### yarn - -```bash +```bash yarn yarn add @mui/material @emotion/react @emotion/styled ``` + + ## With styled-components Material UI uses [Emotion](https://emotion.sh/) as its default styling engine. If you want to use [styled-components](https://styled-components.com/) instead, run one of the following commands: -### npm + -```bash +```bash npm npm install @mui/material @mui/styled-engine-sc styled-components ``` -### yarn - -```bash +```bash yarn yarn add @mui/material @mui/styled-engine-sc styled-components ``` + + :::warning Visit the [Styled engine guide](/material-ui/guides/styled-engine/) for more information about how to configure styled-components. ::: @@ -66,17 +66,7 @@ Material UI is designed to use the [Roboto](https://fonts.google.com/specimen/Ro font by default. You may add it to your project with npm or yarn via [Fontsource](https://fontsource.org/), or with the Google Fonts CDN. -### npm - -```bash -npm install @fontsource/roboto -``` - -### yarn - -```bash -yarn add @fontsource/roboto -``` +{{"component": "modules/components/HighlightedCodeWithTabs", "tabs": [{"tab":"npm", "code":"npm install @fontsource/roboto", "language": "bash"}, {"tab":"yarn", "code": "yarn add @fontsource/roboto"}]}} Then you can import it in your entry point like this: @@ -107,18 +97,18 @@ To install the Roboto font in your project using the Google Web Fonts CDN, add t To use the [font Icon component](/material-ui/icons/#icon-font-icons) or the prebuilt SVG Material Icons (such as those found in the [icon demos](/material-ui/icons/)), you must first install the [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) font. You can do so with npm or yarn, or with the Google Web Fonts CDN. -### npm + -```bash +```bash npm npm install @mui/icons-material ``` -### yarn - -```bash +```bash yarn yarn add @mui/icons-material ``` + + ### Google Web Fonts To install the Material Icons font in your project using the Google Web Fonts CDN, add the following code snippet inside your project's `` tag: diff --git a/docs/data/system/getting-started/installation/installation.md b/docs/data/system/getting-started/installation/installation.md index e0b1f0513651fc..130941fbc874aa 100644 --- a/docs/data/system/getting-started/installation/installation.md +++ b/docs/data/system/getting-started/installation/installation.md @@ -6,35 +6,35 @@ Run one of the following commands to add MUI System to your project: -### npm + -```bash +```bash npm npm install @mui/system @emotion/react @emotion/styled ``` -### yarn - -```bash +```bash yarn yarn add @mui/system @emotion/react @emotion/styled ``` + + ## With styled-components MUI System uses [Emotion](https://emotion.sh/) as its default styling engine. If you want to use [styled-components](https://styled-components.com/) instead, run one of the following commands: -### npm + -```bash +```bash npm npm install @mui/system @mui/styled-engine-sc styled-components ``` -### yarn - -```bash +```bash yarn yarn add @mui/system @mui/styled-engine-sc styled-components ``` + + :::warning Visit the [Styled engine guide](/material-ui/guides/styled-engine/) for more information about how to configure styled-components. ::: diff --git a/docs/src/modules/components/ExampleCollection.js b/docs/src/modules/components/ExampleCollection.js index c3392485ba8e0a..7f1ce16bd625b1 100644 --- a/docs/src/modules/components/ExampleCollection.js +++ b/docs/src/modules/components/ExampleCollection.js @@ -96,13 +96,13 @@ export default function ExampleCollection() { backgroundImage: 'none', borderRadius: 1, border: '1px solid', - borderColor: 'grey.200', + borderColor: 'divider', boxShadow: 'none', }, (theme) => theme.applyDarkStyles({ bgcolor: 'transparent', - borderColor: 'primaryDark.700', + borderColor: 'divider', }), ]} > diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx index f755499236ce9f..d371ec81803169 100644 --- a/docs/src/modules/components/HighlightedCodeWithTabs.tsx +++ b/docs/src/modules/components/HighlightedCodeWithTabs.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; -import { styled } from '@mui/material/styles'; +import { styled, alpha } from '@mui/material/styles'; import Tabs, { TabsOwnProps } from '@mui/base/Tabs'; import TabsList from '@mui/base/TabsList'; import TabPanel from '@mui/base/TabPanel'; @@ -8,18 +7,21 @@ import Tab from '@mui/base/Tab'; import HighlightedCode from './HighlightedCode'; const StyledTabList = styled(TabsList)(({ theme }) => ({ + padding: 6, display: 'flex', - backgroundColor: (theme.vars || theme).palette.primaryDark[600], + border: '1px solid', + borderColor: (theme.vars || theme).palette.primaryDark[700], + backgroundColor: (theme.vars || theme).palette.primaryDark[900], borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, borderTopRightRadius: (theme.vars || theme).shape.borderRadius, ...theme.applyDarkStyles({ - backgroundColor: (theme.vars || theme).palette.primaryDark[700], + backgroundColor: alpha(theme.palette.primaryDark[800], 0.5), }), })); const StyledTabPanel = styled(TabPanel)<{ ownerState: { mounted: boolean } }>(({ ownerState }) => ({ '& pre': { - marginTop: 0, + marginTop: -1, borderTopLeftRadius: 0, borderTopRightRadius: 0, '& code': { @@ -30,41 +32,42 @@ const StyledTabPanel = styled(TabPanel)<{ ownerState: { mounted: boolean } }>(({ const StyledTab = styled(Tab)<{ ownerState: { mounted: boolean } }>(({ theme, ownerState }) => theme.unstable_sx({ - py: 1.5, - px: 2, + p: 0.8, border: 'none', - borderBottom: '2px solid transparent', - bgcolor: 'primaryDark.800', - color: 'rgba(255 255 255 / 0.6)', - fontSize: '0.75rem', - fontWeight: 'semiBold', + bgcolor: 'transparent', + color: (theme.vars || theme).palette.grey[600], + fontSize: theme.typography.pxToRem(12), + fontWeight: theme.typography.fontWeightSemiBold, fontFamily: theme.typography.fontFamilyCode, outline: 'none', - minWidth: 80, + minWidth: 52, cursor: 'pointer', - '&:first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': - { - borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, - }, + borderRadius: '8px', + position: 'relative', '&:not(:first-child)': { - marginLeft: '1px', - }, - '&:last-child': { - borderTopRightRadius: (theme.vars || theme).shape.borderRadius, + marginLeft: 0.5, }, ...(ownerState.mounted && { '&.Mui-selected': { - color: '#fff', - borderColor: (theme.vars || theme).palette.primary.light, + color: '#FFF', + '&:after': { + content: "''", + position: 'absolute', + left: 0, + bottom: '-6px', + height: 2, + width: '100%', + bgcolor: (theme.vars || theme).palette.primary.light, + }, }, }), '&:hover': { - backgroundColor: 'rgba(255 255 255 / 0.08)', + backgroundColor: alpha(theme.palette.primaryDark[500], 0.5), }, '&:focus-visible': { outline: '2px solid', outlineOffset: '-2px', - outlineColor: (theme.vars || theme).palette.primary.main, + outlineColor: (theme.vars || theme).palette.primary.light, }, }), ); @@ -123,7 +126,6 @@ export default function HighlightedCodeWithTabs({ {tab} ))} - {tabs.map(({ tab, language, code }) => (