[docs] Add Base installation page #30969

siriwatknp · 2022-02-08T07:12:14Z

Added installation page for Base as a starting point for naming discussion 😂

What should be the name of the product?

The conclusion is to go with "MUI Base" for now.
The version identifier is shortened (remove .0.0), otherwise it causes double lines.

@michaldudak feel free to add more content here or in separate PRs (your call). This PR is intended to be a template for other pages.

Note: please neglect ProductDrawer refinement from this PR

Preview: https://deploy-preview-30969--material-ui.netlify.app/base/getting-started/installation/

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2022-02-08T07:14:39Z

No bundle size changes

Generated by 🚫 dangerJS against 72937bb

siriwatknp · 2022-02-08T09:21:22Z

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';


Depends on #30960

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:

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

=> https://mui.com/base/

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.

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.

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.

docs/data/base/getting-started/installation/installation.md

Co-authored-by: Marija Najdova <mnajdova@gmail.com>

…base/init-page

siriwatknp · 2022-02-22T10:23:57Z

@michaldudak I have changed to Base UI instead. I think it is ready for review.

mnajdova · 2022-02-22T11:43:11Z

@michaldudak I have changed to Base UI instead. I think it is ready for review.

I would use MUI Base everywhere and merge. Until we are certain about the name, why using a new one?

michaldudak · 2022-02-22T11:53:17Z

Agree - let's use MUI Base for now.

oliviertassinari · 2022-02-22T12:56:03Z

docs/src/modules/components/AppNavDrawer.js

@@ -480,13 +462,17 @@ function AppNavDrawer(props) {
            onClick={(event) => {
              setAnchorEl(event.currentTarget);
            }}
-            endIcon={<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />}
+            endIcon={


Off-topic.

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

layout.shift.mp4

I can stretch the space a little bit more.

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

siriwatknp · 2022-02-22T14:27:41Z

@michaldudak I have changed to Base UI instead. I think it is ready for review.

I would use MUI Base everywhere and merge. Until we are certain about the name, why using a new one?

I might have misunderstood the previous comments, will change to MUI Base

siriwatknp · 2022-02-23T10:55:57Z

@michaldudak It is changed to MUI Base, do you see anything that might be missing?

michaldudak

Just two comments from my side

michaldudak · 2022-02-23T10:57:45Z

docs/src/modules/components/AppNavDrawer.js

            sx={(theme) => ({
              py: 0.1,
              minWidth: 0,
              fontSize: theme.typography.pxToRem(13),
              fontWeight: 500,
-              lineHeight: 0,
+              // lineHeight: 0,


Is this to be removed?

yes, thanks!.

michaldudak · 2022-02-23T11:01:57Z

docs/src/modules/components/AppNavDrawer.js

                metadata="MUI Core"
                versionSelector={renderVersionSelector([
-                  { text: `v${basePkgJson.version}`, current: true },
+                  { text: `v${basePkgJson.version.replace('.0.0', '')}`, current: true },


How will it work with versions like *.0.1?

@siriwatknp should we maybe extend a bit the width of the drawer instead of this?

@michaldudak with 5.0.1, you won't have alpha-XX which works fine in one line.

@mnajdova need to increase the width for 12px to make it in one line.

@danilo-leal what do you think?

About the width increase, sure!
Are we removing the alpha word then?

At this point, I don't think so. It should show the version from the package.

Ok, great! It seemed like we would, asked for clarification!

docs/src/modules/components/AppNavDrawer.js

init Base installation page

b2a4378

siriwatknp requested a review from a team February 8, 2022 07:12

siriwatknp marked this pull request as draft February 8, 2022 07:12

siriwatknp commented Feb 8, 2022

View reviewed changes

oliviertassinari added the docs Improvements or additions to the documentation label Feb 8, 2022

mnajdova reviewed Feb 14, 2022

View reviewed changes

docs/data/base/getting-started/installation/installation.md Outdated Show resolved Hide resolved

siriwatknp and others added 3 commits February 21, 2022 16:23

Update docs/data/base/getting-started/installation/installation.md

6a11625

Co-authored-by: Marija Najdova <mnajdova@gmail.com>

Merge branch 'master' of https://github.com/mui-org/material-ui into …

cc20bb8

…base/init-page

update content

21e63fb

siriwatknp marked this pull request as ready for review February 22, 2022 10:22

siriwatknp requested review from michaldudak and danilo-leal February 22, 2022 10:22

fix styles

38b11bd

oliviertassinari mentioned this pull request Feb 22, 2022

[docs] Docs restructure #30091

Closed

32 tasks

danilo-leal requested a review from mapache-salvaje February 22, 2022 12:08

oliviertassinari reviewed Feb 22, 2022

View reviewed changes

siriwatknp added 2 commits February 22, 2022 21:31

revert to MUI Base and remove 0.0 version to shorten word

f826462

enable base space

1cd3568

michaldudak reviewed Feb 23, 2022

View reviewed changes

siriwatknp commented Feb 23, 2022

View reviewed changes

docs/src/modules/components/AppNavDrawer.js Outdated Show resolved Hide resolved

Apply suggestions from code review

d9faebd

michaldudak approved these changes Feb 23, 2022

View reviewed changes

increase width and use full version

d878a32

danilo-leal reviewed Feb 23, 2022

View reviewed changes

docs/src/modules/components/AppNavDrawer.js Outdated Show resolved Hide resolved

siriwatknp added 3 commits February 24, 2022 09:04

use CSS variables

87ec394

fix glitch

50ec175

fix spacing issue

6ef5c9a

siriwatknp commented Feb 24, 2022

View reviewed changes

docs/src/modules/components/AppNavDrawer.js Outdated Show resolved Hide resolved

Apply suggestions from code review

72937bb

siriwatknp merged commit d588f5b into mui:master Feb 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Add Base installation page #30969

[docs] Add Base installation page #30969

siriwatknp commented Feb 8, 2022 •

edited

Loading

mui-bot commented Feb 8, 2022 •

edited

Loading

siriwatknp Feb 8, 2022

oliviertassinari Feb 8, 2022 •

edited

Loading

hbjORbj Feb 8, 2022 •

edited

Loading

michaldudak Feb 9, 2022 •

edited

Loading

danilo-leal Feb 9, 2022

siriwatknp commented Feb 22, 2022

mnajdova commented Feb 22, 2022 •

edited

Loading

michaldudak commented Feb 22, 2022

oliviertassinari Feb 22, 2022 •

edited

Loading

siriwatknp Feb 22, 2022

siriwatknp Feb 23, 2022

siriwatknp commented Feb 22, 2022

siriwatknp commented Feb 23, 2022

michaldudak left a comment

michaldudak Feb 23, 2022

siriwatknp Feb 23, 2022

michaldudak Feb 23, 2022 •

edited

Loading

mnajdova Feb 23, 2022

siriwatknp Feb 23, 2022

danilo-leal Feb 23, 2022

siriwatknp Feb 23, 2022

danilo-leal Feb 23, 2022

[docs] Add Base installation page #30969

[docs] Add Base installation page #30969

Conversation

siriwatknp commented Feb 8, 2022 • edited Loading

What should be the name of the product?

mui-bot commented Feb 8, 2022 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Feb 8, 2022 • edited Loading

Choose a reason for hiding this comment

hbjORbj Feb 8, 2022 • edited Loading

Choose a reason for hiding this comment

michaldudak Feb 9, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp commented Feb 22, 2022

mnajdova commented Feb 22, 2022 • edited Loading

michaldudak commented Feb 22, 2022

oliviertassinari Feb 22, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp commented Feb 22, 2022

siriwatknp commented Feb 23, 2022

michaldudak left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaldudak Feb 23, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp commented Feb 8, 2022 •

edited

Loading

mui-bot commented Feb 8, 2022 •

edited

Loading

oliviertassinari Feb 8, 2022 •

edited

Loading

hbjORbj Feb 8, 2022 •

edited

Loading

michaldudak Feb 9, 2022 •

edited

Loading

mnajdova commented Feb 22, 2022 •

edited

Loading

oliviertassinari Feb 22, 2022 •

edited

Loading

michaldudak Feb 23, 2022 •

edited

Loading