From b2a4378a4143781ce54121098c58b1560c465551 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 8 Feb 2022 14:05:01 +0700 Subject: [PATCH 01/12] init Base installation page --- .../installation/installation.md | 19 +++++++++++++++++++ docs/data/base/pages.ts | 5 +++++ .../base/getting-started/installation.js | 11 +++++++++++ docs/src/modules/components/AppLayoutDocs.js | 2 +- docs/src/modules/components/AppNavDrawer.js | 16 +++++++--------- 5 files changed, 43 insertions(+), 10 deletions(-) create mode 100644 docs/data/base/getting-started/installation/installation.md create mode 100644 docs/pages/base/getting-started/installation.js diff --git a/docs/data/base/getting-started/installation/installation.md b/docs/data/base/getting-started/installation/installation.md new file mode 100644 index 00000000000000..f24977c0cebc3f --- /dev/null +++ b/docs/data/base/getting-started/installation/installation.md @@ -0,0 +1,19 @@ +# Installation + +

Install MUI Base, the foundation components & hooks to build amazing UI.

+ +## npm + +To install and save in your `package.json` dependencies, run: + +```sh +// with npm +npm install @mui/base + +// with yarn +yarn add @mui/base +``` + + + +Please note that [react](https://www.npmjs.com/package/react) >= 17.0.0 and [react-dom](https://www.npmjs.com/package/react-dom) >= 17.0.0 are peer dependencies. diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 8951bdb06eaa01..e7bea2ca80ebc8 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -1,6 +1,11 @@ import pagesApi from './pagesApi'; const pages = [ + { + pathname: '/base/getting-started', + icon: 'DescriptionIcon', + children: [{ pathname: '/base/getting-started/installation' }], + }, { title: 'Component API', pathname: '/base/api', diff --git a/docs/pages/base/getting-started/installation.js b/docs/pages/base/getting-started/installation.js new file mode 100644 index 00000000000000..187bbfcb6e730d --- /dev/null +++ b/docs/pages/base/getting-started/installation.js @@ -0,0 +1,11 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import { + demos, + docs, + demoComponents, +} from 'docs/data/base/getting-started/installation/installation.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index 1094b848f7c055..4316637924ea8d 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -92,7 +92,7 @@ function AppLayoutDocs(props) { productName = 'Material UI'; } if (asPathWithoutLang.startsWith('/base')) { - productName = 'Base UI'; + productName = 'MUI Base'; } if (asPathWithoutLang.startsWith('/x')) { productName = 'MUI X'; diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 034c86e3b58f9c..40aa78a4808ef5 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -188,14 +188,12 @@ function ProductDrawerButton(props) { description="Ready-to-use foundational components, free forever." /> - {FEATURE_TOGGLE.enable_mui_base_scope && ( - - Base - - )} + + Base + 1) { + if (page.children && page.children.length >= 1) { const title = pageToTitleI18n(page, t); const topLevel = activePage ? activePage.pathname.indexOf(`${page.pathname}`) === 0 || From 6a11625471a254df53d50959d27ee037910b24ac Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Mon, 21 Feb 2022 16:23:23 +0700 Subject: [PATCH 02/12] Update docs/data/base/getting-started/installation/installation.md Co-authored-by: Marija Najdova --- docs/data/base/getting-started/installation/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/getting-started/installation/installation.md b/docs/data/base/getting-started/installation/installation.md index f24977c0cebc3f..c1d0e3f4bf233e 100644 --- a/docs/data/base/getting-started/installation/installation.md +++ b/docs/data/base/getting-started/installation/installation.md @@ -1,6 +1,6 @@ # Installation -

Install MUI Base, the foundation components & hooks to build amazing UI.

+

Install MUI Base, the foundation components & hooks to build amazing UIs.

## npm From 21e63fb614960b0e20300443f57e963de127cf5e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 22 Feb 2022 17:00:15 +0700 Subject: [PATCH 03/12] update content --- .../getting-started/installation/installation.md | 2 +- docs/src/modules/components/AppNavDrawer.js | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/data/base/getting-started/installation/installation.md b/docs/data/base/getting-started/installation/installation.md index c1d0e3f4bf233e..2da73b3ade19ac 100644 --- a/docs/data/base/getting-started/installation/installation.md +++ b/docs/data/base/getting-started/installation/installation.md @@ -1,6 +1,6 @@ # Installation -

Install MUI Base, the foundation components & hooks to build amazing UIs.

+

Install Base UI, the unstyled components & foundation hooks for building accessible UIs

## npm diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index ebfa20b17a2638..718ddbc6128593 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -192,7 +192,7 @@ function ProductDrawerButton(props) { href={ROUTES.baseDocs} // eslint-disable-next-line material-ui/no-hardcoded-labels > - Base + Base UI { setAnchorEl(event.currentTarget); }} - endIcon={} + endIcon={ + versions.length > 1 ? ( + + ) : null + } sx={(theme) => ({ py: 0.1, minWidth: 0, fontSize: theme.typography.pxToRem(13), fontWeight: 500, - lineHeight: 0, + // lineHeight: 0, color: theme.palette.mode === 'dark' ? theme.palette.primary[300] @@ -608,7 +612,7 @@ function AppNavDrawer(props) { )} {router.asPath.startsWith('/base/') && ( Date: Tue, 22 Feb 2022 17:32:12 +0700 Subject: [PATCH 04/12] fix styles --- docs/src/modules/components/AppNavDrawer.js | 54 ++++++++------------- 1 file changed, 19 insertions(+), 35 deletions(-) diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 718ddbc6128593..a93228863a204c 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -115,7 +115,7 @@ function ProductDrawerButton(props) { }; return ( -
+
+ ); } @@ -243,38 +242,23 @@ ProductDrawerButton.propTypes = { }; const ProductIdentifier = ({ name, metadata, versionSelector }) => ( - -
- ({ - ml: 1, - color: theme.palette.grey[600], - fontSize: theme.typography.pxToRem(11), - fontWeight: 700, - textTransform: 'uppercase', - letterSpacing: '.08rem', - })} - > - {metadata} - - - - {versionSelector} - -
+ + ({ + ml: 1, + color: theme.palette.grey[600], + fontSize: theme.typography.pxToRem(11), + fontWeight: 700, + textTransform: 'uppercase', + letterSpacing: '.08rem', + })} + > + {metadata} + + + + {versionSelector} + ); From f826462d7c00b51996992b3cecdc47ad14c1b9b8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 22 Feb 2022 21:31:21 +0700 Subject: [PATCH 05/12] revert to MUI Base and remove 0.0 version to shorten word --- docs/data/base/getting-started/installation/installation.md | 2 +- docs/pages/blog/2021.md | 2 +- docs/src/modules/components/AppNavDrawer.js | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/data/base/getting-started/installation/installation.md b/docs/data/base/getting-started/installation/installation.md index 2da73b3ade19ac..28e20d4aacb935 100644 --- a/docs/data/base/getting-started/installation/installation.md +++ b/docs/data/base/getting-started/installation/installation.md @@ -1,6 +1,6 @@ # Installation -

Install Base UI, the unstyled components & foundation hooks for building accessible UIs

+

Install MUI Base, the unstyled components & foundation hooks for building accessible UIs

## npm diff --git a/docs/pages/blog/2021.md b/docs/pages/blog/2021.md index 6bf94a40ef90fd..9c3266b873e5ca 100644 --- a/docs/pages/blog/2021.md +++ b/docs/pages/blog/2021.md @@ -116,7 +116,7 @@ Here is a breakdown of our [roadmap](/discover-more/roadmap/). The release of v5 has introduced a significant API churn in the community. While our [versioning frequency](/versions/#release-frequency) aims for one major per year, we hope we can iterate on v5 during the whole year of 2022 without any breaking changes, e.g. taking full advantage of the new style engine. -#### Base UI +#### MUI Base To continue improving the customization experience, we will double down on the version of the components without styles: `@mui/base`. These components and hooks contain the main functionalities and accessibility, without being opinionated about how styles are applied or what styles. diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index a93228863a204c..4e4eeac0ff20ed 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -191,7 +191,7 @@ function ProductDrawerButton(props) { href={ROUTES.baseDocs} // eslint-disable-next-line material-ui/no-hardcoded-labels > - Base UI + MUI Base )} From 1cd3568b79efb44aa5b6231002498c1f4770ff17 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 23 Feb 2022 12:56:02 +0700 Subject: [PATCH 06/12] enable base space --- docs/src/featureToggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js index 640aac9ad6e3d9..e14ecdb926826d 100644 --- a/docs/src/featureToggle.js +++ b/docs/src/featureToggle.js @@ -7,6 +7,6 @@ module.exports = { // TODO: cleanup once migration is done enable_product_scope: true, // related to new structure change enable_redirects: false, // related to new structure change - enable_mui_base_scope: false, // will be enabled after the migration + enable_mui_base_scope: true, // will be enabled after the migration enable_system_scope: false, // will be enabled after the migration }; From d9faebdc4ac00c83f6e67bbb3cbcc110bf834d33 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 23 Feb 2022 18:17:57 +0700 Subject: [PATCH 07/12] Apply suggestions from code review --- docs/src/modules/components/AppNavDrawer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 4e4eeac0ff20ed..a5de7d356df881 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -472,7 +472,6 @@ function AppNavDrawer(props) { minWidth: 0, fontSize: theme.typography.pxToRem(13), fontWeight: 500, - // lineHeight: 0, color: theme.palette.mode === 'dark' ? theme.palette.primary[300] From d878a3260bba1a00862e6db2922c39d60765c38b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 23 Feb 2022 18:50:01 +0700 Subject: [PATCH 08/12] increase width and use full version --- docs/src/modules/components/AppNavDrawer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index a5de7d356df881..35f03a6b7f8b20 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -349,7 +349,7 @@ const StyledDrawer = styled(Drawer)(({ theme }) => { const SwipeableDrawerPaperComponent = styled('div')(({ theme }) => { return { - width: 280, + width: 292, boxShadow: 'none', [theme.breakpoints.up('xs')]: { borderRadius: '0px 10px 10px 0px', @@ -598,7 +598,7 @@ function AppNavDrawer(props) { name="MUI Base" metadata="MUI Core" versionSelector={renderVersionSelector([ - { text: `v${basePkgJson.version.replace('.0.0', '')}`, current: true }, + { text: `v${basePkgJson.version}`, current: true }, ])} /> )} From 87ec39448192988e517cfd10f5739baa9a871bb2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 24 Feb 2022 09:04:13 +0700 Subject: [PATCH 09/12] use CSS variables --- docs/src/modules/components/AppFrame.js | 4 ++-- docs/src/modules/components/AppLayoutDocs.js | 17 ++++++++++++----- docs/src/modules/components/AppNavDrawer.js | 4 ++-- .../modules/components/AppTableOfContents.js | 4 +--- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index 96150a7af261b5..1d904be4d8b95e 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -129,7 +129,7 @@ const StyledAppBar = styled(AppBar, { }), ...(!disablePermanent && { [theme.breakpoints.up('lg')]: { - width: 'calc(100% - 240px)', + width: 'calc(100% - var(--MuiDocs-navDrawer-width))', }, }), boxShadow: 'none', @@ -173,7 +173,7 @@ const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) => return { [theme.breakpoints.up('lg')]: { flexShrink: 0, - width: 280, + width: 'var(--MuiDocs-navDrawer-width)', }, }; }); diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index 7dcaa169e896a0..ca956b49a9e108 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { useRouter } from 'next/router'; import { styled } from '@mui/material/styles'; import { exactProp } from '@mui/utils'; +import GlobalStyles from '@mui/material/GlobalStyles'; import NoSsr from '@mui/material/NoSsr'; import Head from 'docs/src/modules/components/Head'; import AppFrame from 'docs/src/modules/components/AppFrame'; @@ -14,9 +15,6 @@ import AdManager from 'docs/src/modules/components/AdManager'; import AdGuest from 'docs/src/modules/components/AdGuest'; import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter'; -const TOC_WIDTH = 240; -const NAV_WIDTH = 280; - const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'disableToc', })(({ disableToc, theme }) => ({ @@ -28,7 +26,7 @@ const Main = styled('main', { }, }), [theme.breakpoints.up('lg')]: { - width: `calc(100% - ${NAV_WIDTH}px)`, + width: `calc(100% - var(--MuiDocs-navDrawer-width))`, }, })); @@ -46,7 +44,7 @@ const StyledAppContainer = styled(AppContainer, { }, ...(!disableToc && { [theme.breakpoints.up('sm')]: { - width: `calc(100% - ${TOC_WIDTH}px)`, + width: `calc(100% - var(--MuiDocs-toc-width))`, }, }), ...(!disableToc && { @@ -98,6 +96,15 @@ function AppLayoutDocs(props) { return ( + {disableAd ? null : ( diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 35f03a6b7f8b20..8f6de7b83a22f3 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -327,7 +327,7 @@ const ToolbarIE11 = styled('div')({ display: 'flex' }); const ToolbarDiv = styled('div')(({ theme }) => { return { padding: theme.spacing(1.45, 2), - height: 64, + height: 'var(--MuiDocs-header-height)', display: 'flex', flexGrow: 1, flexDirection: 'row', @@ -349,7 +349,7 @@ const StyledDrawer = styled(Drawer)(({ theme }) => { const SwipeableDrawerPaperComponent = styled('div')(({ theme }) => { return { - width: 292, + width: 'var(--MuiDocs-navDrawer-width)', boxShadow: 'none', [theme.breakpoints.up('xs')]: { borderRadius: '0px 10px 10px 0px', diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index 1b7652403f3167..661eb069883d8f 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -11,10 +11,8 @@ import { useTranslate } from 'docs/src/modules/utils/i18n'; import TableOfContentsBanner from 'docs/src/components/banner/TableOfContentsBanner'; const Nav = styled('nav')(({ theme }) => ({ - top: 60, + top: 'var(--MuiDocs-header-height)', order: 1, - // Fix IE11 position sticky issue. - marginTop: 60, width: 240, flexShrink: 0, position: 'sticky', From 50ec175ad9374efb65aec6d5b69282a82bd822e6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 24 Feb 2022 11:54:57 +0700 Subject: [PATCH 10/12] fix glitch --- docs/src/modules/components/AppLayoutDocs.js | 2 +- docs/src/modules/components/AppNavDrawer.js | 1 + docs/src/modules/components/AppTableOfContents.js | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index ca956b49a9e108..3b50cded8af4b3 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -99,7 +99,7 @@ function AppLayoutDocs(props) { { return { padding: theme.spacing(1.45, 2), + paddingRight: 0, height: 'var(--MuiDocs-header-height)', display: 'flex', flexGrow: 1, diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index 661eb069883d8f..36d49eda95add8 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -16,7 +16,7 @@ const Nav = styled('nav')(({ theme }) => ({ width: 240, flexShrink: 0, position: 'sticky', - height: 'calc(100vh - 70px)', + height: 'calc(100vh - var(--MuiDocs-header-height))', overflowY: 'auto', padding: theme.spacing(2, 4, 2, 0), display: 'none', From 6ef5c9a21df2e395e046ec50e9444337cddce57c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 24 Feb 2022 14:19:03 +0700 Subject: [PATCH 11/12] fix spacing issue --- docs/src/modules/components/AppNavDrawer.js | 78 +++++++++++---------- 1 file changed, 42 insertions(+), 36 deletions(-) diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 736215b02ed752..0d7cb14aa5fd07 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -452,7 +452,7 @@ function AppNavDrawer(props) { const navItems = renderNavItems({ onClose, pages, activePage, depth: 0, t }); - const renderVersionSelector = (versions = []) => { + const renderVersionSelector = (versions = [], sx) => { if (!versions?.length) { return null; } @@ -468,40 +468,43 @@ function AppNavDrawer(props) { ) : null } - sx={(theme) => ({ - py: 0.1, - minWidth: 0, - fontSize: theme.typography.pxToRem(13), - fontWeight: 500, - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[300] - : theme.palette.primary[600], - '& svg': { - ml: -0.6, - width: 18, - height: 18, - }, - ...(!isProductScoped && { - px: 1, - py: 0.4, - border: `1px solid ${ + sx={[ + (theme) => ({ + py: 0.1, + minWidth: 0, + fontSize: theme.typography.pxToRem(13), + fontWeight: 500, + color: theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[200] - }`, - '&:hover': { - borderColor: - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[600] - : theme.palette.grey[300], - background: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.4) - : theme.palette.grey[50], + ? theme.palette.primary[300] + : theme.palette.primary[600], + '& svg': { + ml: -0.6, + width: 18, + height: 18, }, + ...(!isProductScoped && { + px: 1, + py: 0.4, + border: `1px solid ${ + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[700] + : theme.palette.grey[200] + }`, + '&:hover': { + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[600] + : theme.palette.grey[300], + background: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primaryDark[700], 0.4) + : theme.palette.grey[50], + }, + }), }), - })} + ...(Array.isArray(sx) ? sx : [sx]), + ]} > {versions[0].text} @@ -567,10 +570,13 @@ function AppNavDrawer(props) { {!isProductScoped && - renderVersionSelector([ - { text: `v${process.env.LIB_VERSION}`, current: true }, - { text: 'v4', href: `https://v4.mui.com${languagePrefix}/` }, - ])} + renderVersionSelector( + [ + { text: `v${process.env.LIB_VERSION}`, current: true }, + { text: 'v4', href: `https://v4.mui.com${languagePrefix}/` }, + ], + { mr: 1 }, + )} {router.asPath.startsWith('/material/') && ( Date: Thu, 24 Feb 2022 14:42:47 +0700 Subject: [PATCH 12/12] Apply suggestions from code review --- docs/src/modules/components/AppNavDrawer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 0d7cb14aa5fd07..f518317601ecbd 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -575,7 +575,7 @@ function AppNavDrawer(props) { { text: `v${process.env.LIB_VERSION}`, current: true }, { text: 'v4', href: `https://v4.mui.com${languagePrefix}/` }, ], - { mr: 1 }, + { mr: 2 }, )} {router.asPath.startsWith('/material/') && (