Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add Base installation page #30969

Merged
merged 13 commits into from
Feb 24, 2022
Merged

[docs] Add Base installation page #30969

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b2a4378
init Base installation page
siriwatknp Feb 8, 2022
6a11625
Update docs/data/base/getting-started/installation/installation.md
siriwatknp Feb 21, 2022
cc20bb8
Merge branch 'master' of https://github.com/mui-org/material-ui into …
siriwatknp Feb 22, 2022
21e63fb
update content
siriwatknp Feb 22, 2022
38b11bd
fix styles
siriwatknp Feb 22, 2022
f826462
revert to MUI Base and remove 0.0 version to shorten word
siriwatknp Feb 22, 2022
1cd3568
enable base space
siriwatknp Feb 23, 2022
d9faebd
Apply suggestions from code review
siriwatknp Feb 23, 2022
d878a32
increase width and use full version
siriwatknp Feb 23, 2022
87ec394
use CSS variables
siriwatknp Feb 24, 2022
50ec175
fix glitch
siriwatknp Feb 24, 2022
6ef5c9a
fix spacing issue
siriwatknp Feb 24, 2022
72937bb
Apply suggestions from code review
siriwatknp Feb 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions docs/data/base/getting-started/installation/installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Installation

<p class="description">Install MUI Base, the unstyled components & foundation hooks for building accessible UIs</p>

## npm

To install and save in your `package.json` dependencies, run:

```sh
// with npm
npm install @mui/base

// with yarn
yarn add @mui/base
```

<!-- #react-peer-version -->

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.
5 changes: 5 additions & 0 deletions docs/data/base/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
11 changes: 11 additions & 0 deletions docs/pages/base/getting-started/installation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
}
2 changes: 1 addition & 1 deletion docs/pages/blog/2021.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion docs/src/featureToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
4 changes: 2 additions & 2 deletions docs/src/modules/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -173,7 +173,7 @@ const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) =>
return {
[theme.breakpoints.up('lg')]: {
flexShrink: 0,
width: 280,
width: 'var(--MuiDocs-navDrawer-width)',
},
};
});
Expand Down
19 changes: 13 additions & 6 deletions docs/src/modules/components/AppLayoutDocs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 }) => ({
Expand All @@ -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))`,
},
}));

Expand All @@ -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 && {
Expand Down Expand Up @@ -90,14 +88,23 @@ function AppLayoutDocs(props) {
productName = 'Material UI';
}
if (asPathWithoutLang.startsWith('/base')) {
productName = 'Base UI';
productName = 'MUI Base';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Depends on #30960

Copy link
Member

@oliviertassinari oliviertassinari Feb 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think that 1. is an option as it's not self-sustained: need to be able to search it on Google and find what you are looking for.

For 2 vs. 3. No preferences, both could fly.

Maybe the only note I would have is either /base in the URL is enough or either it should match the name. I think that depending on the option, here is what a great URL would look like:

  1. => https://mui.com/base-ui/
  2. => https://mui.com/base/

Copy link
Member

@hbjORbj hbjORbj Feb 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With "MUI Core" and "MUI X" above and below, I think "MUI Base" would match better with consistency.

p.s. I think renaming System to "MUI System" and "Data Grid" to "MUI Data Grid" would make the names look more in order as well.

Copy link
Member

@michaldudak michaldudak Feb 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree with @oliviertassinari - option 1 isn't the best. I don't have a strong preference. Also, since we decided not to follow the "MUI *" pattern for all the products, it opens up the possibility to rename Base to something more distinct.

Let's keep MUI Base for now so we don't keep the PR open for too long. It's easy to change it later on.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm with Michal, to not use too much time here to discuss the name and instead maybe focus on the installation walkthrough itself. We can better resolve naming by looking at everything at once holistically later.

}
if (asPathWithoutLang.startsWith('/x')) {
productName = 'MUI X';
}

return (
<AppFrame>
<GlobalStyles
styles={{
':root': {
'--MuiDocs-navDrawer-width': '300px',
'--MuiDocs-toc-width': '240px',
'--MuiDocs-header-height': '64px',
},
}}
/>
<AdManager>
<Head title={`${title} - ${productName}`} description={description} />
{disableAd ? null : (
Expand Down
162 changes: 77 additions & 85 deletions docs/src/modules/components/AppNavDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ function ProductDrawerButton(props) {
};

return (
<div>
<React.Fragment>
<Button
id="mui-product-selector"
aria-controls="drawer-open-button"
Expand All @@ -128,7 +128,6 @@ function ProductDrawerButton(props) {
minWidth: 0,
fontSize: theme.typography.pxToRem(13),
fontWeight: 500,
lineHeight: 0,
color:
theme.palette.mode === 'dark' ? theme.palette.primary[300] : theme.palette.primary[600],
'& svg': {
Expand Down Expand Up @@ -188,14 +187,12 @@ function ProductDrawerButton(props) {
description="Ready-to-use foundational components, free forever."
/>
<LinksWrapper>
{FEATURE_TOGGLE.enable_mui_base_scope && (
<Link
href={ROUTES.baseDocs}
// eslint-disable-next-line material-ui/no-hardcoded-labels
>
Base <KeyboardArrowRight fontSize="small" />
</Link>
)}
<Link
href={ROUTES.baseDocs}
// eslint-disable-next-line material-ui/no-hardcoded-labels
>
MUI Base <KeyboardArrowRight fontSize="small" />
</Link>
<Link
href={ROUTES.materialDocs}
// eslint-disable-next-line material-ui/no-hardcoded-labels
Expand Down Expand Up @@ -236,7 +233,7 @@ function ProductDrawerButton(props) {
</LinksWrapper>
</li>
</Menu>
</div>
</React.Fragment>
);
}

Expand All @@ -245,38 +242,23 @@ ProductDrawerButton.propTypes = {
};

const ProductIdentifier = ({ name, metadata, versionSelector }) => (
<Box
sx={{
width: '100%',
display: 'flex',
flex: 'auto',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<div>
<Typography
sx={(theme) => ({
ml: 1,
color: theme.palette.grey[600],
fontSize: theme.typography.pxToRem(11),
fontWeight: 700,
textTransform: 'uppercase',
letterSpacing: '.08rem',
})}
>
{metadata}
</Typography>
<Box
sx={{
display: 'flex',
alignItems: 'end',
}}
>
<ProductDrawerButton productName={name} />
{versionSelector}
</Box>
</div>
<Box sx={{ flexGrow: 1 }}>
<Typography
sx={(theme) => ({
ml: 1,
color: theme.palette.grey[600],
fontSize: theme.typography.pxToRem(11),
fontWeight: 700,
textTransform: 'uppercase',
letterSpacing: '.08rem',
})}
>
{metadata}
</Typography>
<Box sx={{ display: 'flex' }}>
<ProductDrawerButton productName={name} />
{versionSelector}
</Box>
</Box>
);

Expand Down Expand Up @@ -345,7 +327,8 @@ const ToolbarIE11 = styled('div')({ display: 'flex' });
const ToolbarDiv = styled('div')(({ theme }) => {
return {
padding: theme.spacing(1.45, 2),
height: 64,
paddingRight: 0,
height: 'var(--MuiDocs-header-height)',
display: 'flex',
flexGrow: 1,
flexDirection: 'row',
Expand All @@ -367,7 +350,7 @@ const StyledDrawer = styled(Drawer)(({ theme }) => {

const SwipeableDrawerPaperComponent = styled('div')(({ theme }) => {
return {
width: 280,
width: 'var(--MuiDocs-navDrawer-width)',
boxShadow: 'none',
[theme.breakpoints.up('xs')]: {
borderRadius: '0px 10px 10px 0px',
Expand Down Expand Up @@ -403,7 +386,7 @@ function reduceChildRoutes(context) {
return items;
}

if (page.children && page.children.length > 1) {
if (page.children && page.children.length >= 1) {
const title = pageToTitleI18n(page, t);
const topLevel = activePage
? activePage.pathname.indexOf(`${page.pathname}`) === 0 ||
Expand Down Expand Up @@ -469,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;
}
Expand All @@ -480,42 +463,48 @@ function AppNavDrawer(props) {
onClick={(event) => {
setAnchorEl(event.currentTarget);
}}
endIcon={<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />}
sx={(theme) => ({
py: 0.1,
minWidth: 0,
fontSize: theme.typography.pxToRem(13),
fontWeight: 500,
lineHeight: 0,
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 ${
endIcon={
Copy link
Member

@oliviertassinari oliviertassinari Feb 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Off-topic.

I have noticed this behavior for Windows users, I'm not sure how to solve this layout constraint issue:

layout.shift.mp4

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can stretch the space a little bit more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen Shot 2565-02-23 at 09 38 18

I have to remove.0.0, otherwise I can't think of a way to reduce the space.

versions.length > 1 ? (
<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />
) : null
}
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}
</Button>
Expand Down Expand Up @@ -581,10 +570,13 @@ function AppNavDrawer(props) {
</Box>
</NextLink>
{!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/') && (
<ProductIdentifier
name="Material UI"
Expand All @@ -610,7 +602,7 @@ function AppNavDrawer(props) {
)}
{router.asPath.startsWith('/base/') && (
<ProductIdentifier
name="Base"
name="MUI Base"
metadata="MUI Core"
versionSelector={renderVersionSelector([
{ text: `v${basePkgJson.version}`, current: true },
Expand Down
Loading