From 176fa12120cb55c3a88c785b5c1c1aef790788cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Tue, 16 Apr 2024 11:28:02 +0200 Subject: [PATCH 1/2] [docs] Remove or hide pages describing the old API --- .../base/getting-started/overview/overview.md | 2 +- .../getting-started/quickstart/quickstart.md | 208 ------------------ .../base/getting-started/support/support.md | 9 +- docs/data/base/getting-started/usage/usage.md | 86 ++------ .../next-js-app-router/next-js-app-router.md | 23 +- docs/data/base/pages.ts | 18 +- docs/pages/base-ui.tsx | 3 - .../productBaseUI/BaseUICustomization.tsx | 15 +- 8 files changed, 43 insertions(+), 321 deletions(-) diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index b0292531a..a1173039a 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -17,7 +17,7 @@ Base UI includes prebuilt components with production-ready functionality, along With Base UI, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. :::info -Base UI is currently in beta. +Base UI is currently in alpha. We're adding new components and features regularly, and you're welcome to contribute! diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md index 79a02e87a..031145202 100644 --- a/docs/data/base/getting-started/quickstart/quickstart.md +++ b/docs/data/base/getting-started/quickstart/quickstart.md @@ -38,211 +38,3 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht "react-dom": "^17.0.0 || ^18.0.0" }, ``` - -## Implementing a Button - -This is a quick tutorial that goes through the basics of using and styling Base UI components by replicating a button from GitHub's UI, using their [Primer design system](https://primer.style/components/button/) as a reference. - -{{"demo": "Tutorial.js", "defaultCodeOpen": false, "hideToolbar": true}} - -### Components and hooks - -Base UI provides a `; -} -``` - -#### useButton hook - -```tsx -import * as React from 'react'; -import { useButton } from '@base_ui/react/useButton'; - -export default function App() { - const { getRootProps } = useButton(); - return ( - - ); -} -``` - -Base UI comes with no styles or styling solution—here's what the Button component looks like out of the box: - -{{"demo": "BaseButton.js", "defaultCodeOpen": false}} - -You can use any styling method of your choice to make fully customizable components for your app. See [Customization](/base-ui/getting-started/customization/) for more details on customization strategies. - -Here are some styling examples: - -### Styling with CSS - -Pass a `className` prop and use it as a styling hook: - -```css -/* styles.css */ - -.btn { - background-color: #1f883d; - /* the rest of the styles */ -} -``` - -```tsx -/* App.js */ - - -``` - -Base UI components like the Button come with a classes object (for example `buttonClasses`) that provides class hooks for styling a particular state. - -```css -/* To style the disabled state: */ - -.${buttonClasses.disabled} { /* ".base-Button-disabled" */ - cursor: not-allowed; -} -``` - -The demo below shows how to create the Primer button using plain CSS with Base UI's Button component and `useButton` hook: - -{{"demo": "BaseButtonPlainCss.js", "defaultCodeOpen": false}} - -### Styling with Tailwind CSS - -After installing Tailwind CSS, pass its utility classes to `className`, as shown below: - -```tsx - -``` - -The demo below shows how to build the Primer button using Tailwind CSS: - -{{"demo": "BaseButtonTailwind.js", "hideToolbar": true, "bg": "inline"}} - -### Styling with MUI System - -[MUI System](https://mui.com/system/getting-started/) is a small set of CSS utilities that provide a styled-components-like API for building out designs that adhere to a theme. - -MUI System's core utility is a [`styled` function](https://mui.com/system/styled/) that's equivalent to the `styled()` function in emotion and styled-components. -Interpolations or arguments that are functions called by `styled` receive the `theme` from an upper `ThemeProvider`. - -```tsx -import * as React from 'react'; -import { ThemeProvider } from '@emotion/react'; -import { styled } from '@mui/system'; -import { Button } from '@base_ui/react/Button'; - -const theme = { - palette: { - primary: 'green', - text: '#fff', - }, -}; - -const GitHubButton = styled(Button)( - ({ theme }) => ` - background-color: ${theme.palette.primary /* => 'green' */}; - ${/* ... the rest of the styles */} - `, -); - -export default function App() { - return ( - - Create Repository - - ); -} - -``` - -Most of the demos in the Base UI docs are styled with MUI System in this way. -You can inspect the `theme` object used on this site in your browser console, or explore the default structure in the Material UI [Default theme](https://mui.com/material-ui/customization/default-theme/) documentation. - -The demos below show how to create the Primer button using MUI System: - -#### Button Component with MUI System - -```tsx -import * as React from 'react'; -import { Button } from '@base_ui/react/Button'; -import { styled } from '@mui/system'; - -const GitHubButton = styled(Button)( - ({ theme }) => ` - background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'}; - ${/* ... the rest of the styles */} - `, -); - -export default function App() { - return ( - Create Repository - ); -} -``` - -#### useButton hook with MUI System - -```tsx -import * as React from 'react'; -import { useButton } from '@base_ui/react/useButton'; -import { styled } from '@mui/system'; - -const GitHubButton = styled('button')( - ({ theme }) => ` - background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'}; - ${/* ... the rest of the styles */} - `, -); - -export default function App() { - const { getRootProps } = useButton(/* props*/); - - return ( - - Create Repository - - ); -} -``` - -### Using the sx prop - -MUI System supports the [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/), which provides a quick way to apply ad-hoc styles using theme-aware values to any component created with `styled`. - -```tsx -const GitHubButton = styled(Button)( - ({ theme }) => ` - background-color: ${theme.palette.mode === 'dark' ? '#238636' : '#1f883d'}; - margin: 0; - `, -); - -export default function App() { - return ( - margin: 16px */ }}> - Create Repository - - ); -} -``` - -The demo below shows how to build the Primer button using MUI System along with the `sx` prop: - -{{"demo": "BaseButtonMuiSystem.js", "defaultCodeOpen": false}} - -Read the [MUI System Usage](https://mui.com/system/getting-started/usage/) doc for further details. diff --git a/docs/data/base/getting-started/support/support.md b/docs/data/base/getting-started/support/support.md index 7cc3e5072..3bebff71f 100644 --- a/docs/data/base/getting-started/support/support.md +++ b/docs/data/base/getting-started/support/support.md @@ -67,18 +67,13 @@ This includes issues introduced by external sources, like browser upgrades or ch ### Supported versions -- Base UI v5: ⚠️ Beta version. -- Base UI v4 🅧 Never existed. -- Base UI v3 🅧 Never existed. -- Base UI v2: 🅧 Never existed. -- Base UI v1: 🅧 Never existed. -- Base UI v0.x: 🅧 Never existed. +- Base UI v1: ⚠️ Alpha version. ## Community ### Social media -The Base UI community is active on both [X/Twitter](https://twitter.com/MaterialUI) and [LinkedIn](https://www.linkedin.com/company/mui/). +The Base UI community is active on both [X/Twitter](https://twitter.com/BaseUI) and [LinkedIn](https://www.linkedin.com/company/mui/). These are great platforms to share what you're working on and connect with other developers. ### Discord diff --git a/docs/data/base/getting-started/usage/usage.md b/docs/data/base/getting-started/usage/usage.md index 65a0a34a4..7ed7f2920 100644 --- a/docs/data/base/getting-started/usage/usage.md +++ b/docs/data/base/getting-started/usage/usage.md @@ -18,64 +18,40 @@ Base components are self-supporting and fully functional in isolation. Each component has its own unique API, but all _non-utility_ components accept the following shared props: -### slots +### render -The `slots` prop is an object that lets you override any interior subcomponents—known as **slots**—of the base component itself. +The `render` prop lets you override the rendered element of the component. -:::info -Each component contains a root slot, and other appropriate slots based on the nature of the component. -For example, the Base UI Badge contains two slots: - -- `root`: the container element that wraps the children. -- `badge`: the badge element itself. - - ::: - -You can use the `slots` prop to override default slots with either custom components or HTML elements. - -For example, the Base UI Badge component renders a `` by default. -The code snippet below shows how to override this by assigning a `
` to the root slot: +For example, the Base UI Switch component renders a ` {/* Next.js can render this */} - + ); } diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 741451b88..d05845c0f 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -8,7 +8,7 @@ const pages: readonly MuiPage[] = [ { pathname: '/base-ui/getting-started', title: 'Overview' }, { pathname: '/base-ui/getting-started/quickstart', title: 'Quickstart' }, { pathname: '/base-ui/getting-started/usage', title: 'Usage' }, - { pathname: '/base-ui/getting-started/customization', title: 'Customization' }, + // { pathname: '/base-ui/getting-started/customization', title: 'Customization' }, { pathname: '/base-ui/getting-started/accessibility', title: 'Accessibility' }, { pathname: '/base-ui/getting-started/support' }, ], @@ -95,14 +95,14 @@ const pages: readonly MuiPage[] = [ pathname: '/base-ui/guides', title: 'How-to guides', children: [ - { - pathname: '/base-ui/guides/working-with-tailwind-css', - title: 'Working with Tailwind CSS', - }, - { - pathname: '/base-ui/guides/overriding-component-structure', - title: 'Overriding component structure', - }, + // { + // pathname: '/base-ui/guides/working-with-tailwind-css', + // title: 'Working with Tailwind CSS', + // }, + // { + // pathname: '/base-ui/guides/overriding-component-structure', + // title: 'Overriding component structure', + // }, { pathname: '/base-ui/guides/next-js-app-router', title: 'Next.js App Router', diff --git a/docs/pages/base-ui.tsx b/docs/pages/base-ui.tsx index 91f8644f6..4fe569d87 100644 --- a/docs/pages/base-ui.tsx +++ b/docs/pages/base-ui.tsx @@ -7,7 +7,6 @@ import AppFooter from 'docs/src/layouts/AppFooter'; import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner'; import BaseUIHero from 'docs/src/components/productBaseUI/BaseUIHero'; import BaseUISummary from 'docs/src/components/productBaseUI/BaseUISummary'; -import BaseUIComponents from 'docs/src/components/productBaseUI/BaseUIComponents'; import BaseUICustomization from 'docs/src/components/productBaseUI/BaseUICustomization'; import BaseUIEnd from 'docs/src/components/productBaseUI/BaseUIEnd'; import BaseUITestimonial from 'docs/src/components/productBaseUI/BaseUITestimonial'; @@ -32,8 +31,6 @@ export default function BaseUI() { - - diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx index 42a49b5b5..0975209e2 100644 --- a/docs/src/components/productBaseUI/BaseUICustomization.tsx +++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx @@ -102,9 +102,9 @@ function App() { return ( } + render={} > - } /> + } /> ) @@ -231,8 +231,8 @@ export default function BaseUICustomization() { setIndex(1)}> } - title="Overriding subcomponent slots" - description="Default DOM structure doesn't suit your needs? Replace any node with the element you prefer using the `render` prop." + title="Overriding subcomponents" + description="Default DOM structure doesn't suit your needs? Replace any node with the element you prefer using the render prop." /> setIndex(2)}> @@ -262,11 +262,8 @@ export default function BaseUICustomization() { }), })} > - } - > - } /> + }> + } /> From ba8d286af9a7557a788b341d650d0f952f15e965 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Tue, 16 Apr 2024 11:35:17 +0200 Subject: [PATCH 2/2] i18n --- docs/translations/translations.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/translations/translations.json b/docs/translations/translations.json index b737d5bde..6e2f4fe7e 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -215,7 +215,6 @@ "/base-ui/getting-started": "Overview", "/base-ui/getting-started/quickstart": "Quickstart", "/base-ui/getting-started/usage": "Usage", - "/base-ui/getting-started/customization": "Customization", "/base-ui/getting-started/accessibility": "Accessibility", "/base-ui/getting-started/support": "Support", "/base-ui/react-": "Components", @@ -225,8 +224,6 @@ "/base-ui/react-number-field": "Number Field", "/base-ui/react-switch": "Switch", "/base-ui/guides": "How-to guides", - "/base-ui/guides/working-with-tailwind-css": "Working with Tailwind CSS", - "/base-ui/guides/overriding-component-structure": "Overriding component structure", "/base-ui/guides/next-js-app-router": "Next.js App Router" } }