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 5 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 Base UI, 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/src/modules/components/AppLayoutDocs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ 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';
Expand Down
80 changes: 33 additions & 47 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
>
Base UI <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 @@ -403,7 +385,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 @@ -480,13 +462,17 @@ function AppNavDrawer(props) {
onClick={(event) => {
setAnchorEl(event.currentTarget);
}}
endIcon={<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />}
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,
lineHeight: 0,
// lineHeight: 0,
Copy link
Member

Choose a reason for hiding this comment

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

Is this to be removed?

Copy link
Member Author

Choose a reason for hiding this comment

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

yes, thanks!.

color:
theme.palette.mode === 'dark'
? theme.palette.primary[300]
Expand Down Expand Up @@ -610,7 +596,7 @@ function AppNavDrawer(props) {
)}
{router.asPath.startsWith('/base/') && (
<ProductIdentifier
name="Base"
name="Base UI"
metadata="MUI Core"
versionSelector={renderVersionSelector([
{ text: `v${basePkgJson.version}`, current: true },
Expand Down