From 84466c35b1cfef528ff61f3d00387fabc40ccb45 Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Thu, 14 Apr 2022 16:01:53 -0500 Subject: [PATCH 01/13] adds overview page to base docs --- .../base/getting-started/overview/overview.md | 23 +++++++++++++++++++ docs/data/base/pages.ts | 2 +- docs/pages/base/getting-started/overview.js | 11 +++++++++ 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 docs/data/base/getting-started/overview/overview.md create mode 100644 docs/pages/base/getting-started/overview.js diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md new file mode 100644 index 00000000000000..f8ad8fbf10ff92 --- /dev/null +++ b/docs/data/base/getting-started/overview/overview.md @@ -0,0 +1,23 @@ +# MUI Base - Overview + +

MUI Base is a library of blank ("unstyled") React UI components and low-level hooks, ideally suited for implementing a custom design system.

+ +## Introduction + +MUI Base is library of unstyled React UI components. +It features the same robust engineering as Material UI, but without implementing Material Design. + +With MUI Base, developers can rapidly build UIs with custom design systems, without the need to override any default style settings. + +## Why use MUI Base? + +MUI Base is ideally suited for developers working with a custom design system. + +The library includes prebuilt, unstyled components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. + +### MUI Base vs. Material UI + +MUI Base features many of the same components as Material UI, but _without the Material Design implementation_. + +You could think of MUI Base as the "skeletal" version of Material UI—components with no built-in style choices. +This makes MUI Base a better option than Material UI if you need to customize the design significantly beyond the Material Design specifications. diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 3db7b31f325827..dfa859353cbdb2 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -4,7 +4,7 @@ const pages = [ { pathname: '/base/getting-started', icon: 'DescriptionIcon', - children: [{ pathname: '/base/getting-started/installation' }], + children: [{ pathname: '/base/getting-started/overview', title: 'Overview' }, { pathname: '/base/getting-started/installation', title: 'Installation' }], }, { pathname: '/base/react-', diff --git a/docs/pages/base/getting-started/overview.js b/docs/pages/base/getting-started/overview.js new file mode 100644 index 00000000000000..da4dcbd50200d0 --- /dev/null +++ b/docs/pages/base/getting-started/overview.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/overview/overview.md?@mui/markdown'; + +export default function Page() { + return ; +} From 248d5f601c497a262a1e65605411f7e9a44635ef Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Thu, 14 Apr 2022 16:05:02 -0500 Subject: [PATCH 02/13] clean up pages.ts --- docs/data/base/pages.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index dfa859353cbdb2..84efd2d3450b52 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -4,7 +4,10 @@ const pages = [ { pathname: '/base/getting-started', icon: 'DescriptionIcon', - children: [{ pathname: '/base/getting-started/overview', title: 'Overview' }, { pathname: '/base/getting-started/installation', title: 'Installation' }], + children: [ + { pathname: '/base/getting-started/overview', title: 'Overview' }, + { pathname: '/base/getting-started/installation', title: 'Installation' } + ], }, { pathname: '/base/react-', From 2c8b4286475b2bb10fa8defb5400ed95028ae0f3 Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Thu, 14 Apr 2022 16:14:39 -0500 Subject: [PATCH 03/13] foundational --- docs/data/base/getting-started/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index f8ad8fbf10ff92..c22f0bb06c3eb8 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -19,5 +19,5 @@ The library includes prebuilt, unstyled components with production-ready functio MUI Base features many of the same components as Material UI, but _without the Material Design implementation_. -You could think of MUI Base as the "skeletal" version of Material UI—components with no built-in style choices. +You could think of MUI Base as the "skeletal" version of Material UI—foundational components with no built-in style choices. This makes MUI Base a better option than Material UI if you need to customize the design significantly beyond the Material Design specifications. From 990d9973053a8b104743b0be9232963774386b0d Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Thu, 14 Apr 2022 16:22:01 -0500 Subject: [PATCH 04/13] prettier --- docs/data/base/pages.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 84efd2d3450b52..2b5794cd48a54f 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -5,8 +5,8 @@ const pages = [ pathname: '/base/getting-started', icon: 'DescriptionIcon', children: [ - { pathname: '/base/getting-started/overview', title: 'Overview' }, - { pathname: '/base/getting-started/installation', title: 'Installation' } + { pathname: '/base/getting-started/overview', title: 'Overview' }, + { pathname: '/base/getting-started/installation', title: 'Installation' }, ], }, { From 48ba637e270e4c8996a15ec79226ac0d69d8b11d Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Thu, 14 Apr 2022 16:29:36 -0500 Subject: [PATCH 05/13] i18n --- docs/translations/translations.json | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 8aa4bd1b6c6f1d..61f3037a1a98df 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -181,6 +181,7 @@ "/system/styles/basics": "Basics", "/system/styles/advanced": "Advanced", "/base/getting-started": "Getting started", + "/base/getting-started/overview": "Overview", "/base/getting-started/installation": "Installation", "/base/react-": "Components", "inputs": "Inputs", From 0d4eb5650da8e5024c34bf45f2ea4557745ebecd Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Mon, 18 Apr 2022 14:16:18 -0500 Subject: [PATCH 06/13] Update docs/data/base/getting-started/overview/overview.md Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com> --- docs/data/base/getting-started/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index c22f0bb06c3eb8..655e975ab4197e 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -7,7 +7,7 @@ MUI Base is library of unstyled React UI components. It features the same robust engineering as Material UI, but without implementing Material Design. -With MUI Base, developers can rapidly build UIs with custom design systems, without the need to override any default style settings. +With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engines or settings. ## Why use MUI Base? From 80d02cbbb54ed67c3878cac9204a48080345e8ba Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Mon, 18 Apr 2022 15:45:17 -0500 Subject: [PATCH 07/13] update description --- docs/data/base/getting-started/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 655e975ab4197e..0e4979b33f98e3 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -1,6 +1,6 @@ # MUI Base - Overview -

MUI Base is a library of blank ("unstyled") React UI components and low-level hooks, ideally suited for implementing a custom design system.

+

MUI Base is a library of blank ("unstyled") React UI components and low-level hooks.

## Introduction From 26d86aa4aa8dacf76f95155470f703094b0c1741 Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Mon, 18 Apr 2022 16:20:36 -0500 Subject: [PATCH 08/13] second draft after Danilo's review --- .../base/getting-started/overview/overview.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 0e4979b33f98e3..18a53f9225873a 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -7,17 +7,24 @@ MUI Base is library of unstyled React UI components. It features the same robust engineering as Material UI, but without implementing Material Design. +MUI Base includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. + With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engines or settings. -## Why use MUI Base? +## Advantages of MUI Base + +- **Ship faster:** MUI Base gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. -MUI Base is ideally suited for developers working with a custom design system. +- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, MUI Base has no built-in styling solution. + This means you have complete control over how to implement styles in your app. -The library includes prebuilt, unstyled components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +- **Accessibility:** MUI Base components are built with accessibility in mind. + We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. ### MUI Base vs. Material UI MUI Base features many of the same components as Material UI, but _without the Material Design implementation_. -You could think of MUI Base as the "skeletal" version of Material UI—foundational components with no built-in style choices. -This makes MUI Base a better option than Material UI if you need to customize the design significantly beyond the Material Design specifications. +You could think of MUI Base as the "skeletal" version of Material UI—foundational components with no default theme or built-in style engine. + +This makes Base a great choice if you need complete control over how your app's CSS is implemented. From e8df4260088072fd3a1a9da6ec903e400c4ecd5d Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Mon, 18 Apr 2022 16:22:30 -0500 Subject: [PATCH 09/13] simplify wording --- docs/data/base/getting-started/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 18a53f9225873a..81a13cf1e1c547 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -16,7 +16,7 @@ With MUI Base, you can rapidly build on top of our foundational components using - **Ship faster:** MUI Base gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. - **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, MUI Base has no built-in styling solution. - This means you have complete control over how to implement styles in your app. + This means you have complete control over your app's CSS. - **Accessibility:** MUI Base components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. From e3274a4806b8c6ec5f8cb1a276095a7212ebc0c1 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Tue, 19 Apr 2022 13:01:19 -0500 Subject: [PATCH 10/13] danilo's review Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com> --- docs/data/base/getting-started/overview/overview.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 81a13cf1e1c547..1e7c6dc57eea88 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -4,10 +4,10 @@ ## Introduction -MUI Base is library of unstyled React UI components. +MUI Base is a library of unstyled React UI components. It features the same robust engineering as Material UI, but without implementing Material Design. -MUI Base includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +It includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engines or settings. From 170a690ccf77297ee1f466f308c8ef949c5312a8 Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Tue, 19 Apr 2022 22:09:52 -0500 Subject: [PATCH 11/13] prettier --- docs/src/components/pricing/FAQ.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/src/components/pricing/FAQ.tsx b/docs/src/components/pricing/FAQ.tsx index 5654abb3b0af81..953c5482490490 100644 --- a/docs/src/components/pricing/FAQ.tsx +++ b/docs/src/components/pricing/FAQ.tsx @@ -73,10 +73,8 @@ const faqData = [ After you purchase a license, you'll receive a license key by email Once you have the license key, you need to follow the{' '} - - instructions - {' '} - necessary to set it up. + instructions necessary + to set it up. ), }, From 761322664277c6e3a8db1699da703f81d3de41c4 Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Mon, 25 Apr 2022 11:10:22 -0500 Subject: [PATCH 12/13] add alpha note, elaborate on base vs material ui --- docs/data/base/getting-started/overview/overview.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 1e7c6dc57eea88..85b1e3affd616a 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -11,6 +11,12 @@ It includes prebuilt components with production-ready functionality, along with With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engines or settings. +> **Note:** _as of Q2 2022, Base is currently still in alpha._ +> +> We're adding new components regularly, and you're welcome to contribute! +> +> Look for the [`package: base` label](https://github.com/mui/material-ui/labels/package%3A%20base) on open [issues](https://github.com/mui/material-ui/issues) and [pull requests](https://github.com/mui/material-ui/pulls) in the `@mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own. + ## Advantages of MUI Base - **Ship faster:** MUI Base gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. @@ -25,6 +31,7 @@ With MUI Base, you can rapidly build on top of our foundational components using MUI Base features many of the same components as Material UI, but _without the Material Design implementation_. -You could think of MUI Base as the "skeletal" version of Material UI—foundational components with no default theme or built-in style engine. +Base is not packaged with any default theme or built-in style engine. +This makes it a great choice if you need complete control over how your app's CSS is implemented. -This makes Base a great choice if you need complete control over how your app's CSS is implemented. +You could think of MUI Base as the "skeletal" version of Material UI—in fact, future versions of Material UI will use Base components and hooks for their foundational structure. From 504e129d605841b9cfe336424c418a89409c9695 Mon Sep 17 00:00:00 2001 From: Sam Sycamore Date: Mon, 25 Apr 2022 11:33:58 -0500 Subject: [PATCH 13/13] headless --- docs/data/base/getting-started/overview/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 85b1e3affd616a..f628ed0140f939 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -34,4 +34,4 @@ MUI Base features many of the same components as Material UI, but _without the M Base is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. -You could think of MUI Base as the "skeletal" version of Material UI—in fact, future versions of Material UI will use Base components and hooks for their foundational structure. +You could think of MUI Base as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI will use Base components and hooks for their foundational structure.