diff --git a/docs/data/base/components/accordion/accordion.md b/docs/data/base/components/accordion/accordion.md index 5cd09a01106039..a16c09fe31c10c 100644 --- a/docs/data/base/components/accordion/accordion.md +++ b/docs/data/base/components/accordion/accordion.md @@ -5,11 +5,10 @@ githubLabel: 'component: accordion' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ --- -# Accordion +# Accordion 🚧

Accordions let users show and hide sections of related content on a page.

-:::info -💡 The Base UI Accordion component is still in development. -Help us prioritize the next batch of new components by sharing your needs in [this GitHub issue](https://github.com/mui/material-ui/issues/27170). +:::warning +The Base UI Accordion component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38037) to see it arrive sooner. ::: diff --git a/docs/data/base/components/checkbox/checkbox.md b/docs/data/base/components/checkbox/checkbox.md index 832d430dc191b0..db0b97378ba049 100644 --- a/docs/data/base/components/checkbox/checkbox.md +++ b/docs/data/base/components/checkbox/checkbox.md @@ -5,11 +5,10 @@ githubLabel: 'component: checkbox' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ --- -# Checkbox +# Checkbox 🚧

Checkboxes give users binary choices when presented with multiple options in a series.

-:::info -💡 The Base UI Checkbox component is still in development. -Help us prioritize the next batch of new components by sharing your needs in [this GitHub issue](https://github.com/mui/material-ui/issues/27170). +:::warning +The Base UI Checkbox component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38036) to see it arrive sooner. ::: diff --git a/docs/data/base/components/drawer/drawer.md b/docs/data/base/components/drawer/drawer.md new file mode 100644 index 00000000000000..b1dd173e490884 --- /dev/null +++ b/docs/data/base/components/drawer/drawer.md @@ -0,0 +1,13 @@ +--- +productId: base-ui +title: React Drawer component +githubLabel: 'component: drawer' +--- + +# Drawer 🚧 + +

Navigation drawers (also known as sidebars) provide ergonomic access to different destinations without taking the user out of context.

+ +:::warning +The Base UI Drawer component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38181) to see it arrive sooner. +::: diff --git a/docs/data/base/components/pagination/pagination.md b/docs/data/base/components/pagination/pagination.md new file mode 100644 index 00000000000000..2a65857cf3d012 --- /dev/null +++ b/docs/data/base/components/pagination/pagination.md @@ -0,0 +1,13 @@ +--- +productId: base-ui +title: React Pagination component +githubLabel: 'component: Pagination' +--- + +# Pagination 🚧 + +

The Pagination component lets the user select a specific page from a range of pages.

+ +:::warning +The Base UI Pagination component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38042) to see it arrive sooner. +::: diff --git a/docs/data/base/components/radio-button/radio-button.md b/docs/data/base/components/radio-button/radio-button.md index cae91a14087a1d..9d84636add5311 100644 --- a/docs/data/base/components/radio-button/radio-button.md +++ b/docs/data/base/components/radio-button/radio-button.md @@ -5,11 +5,10 @@ githubLabel: 'component: radio' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radio/ --- -# Radio Button +# Radio Button 🚧

Radio buttons enable the user to select one option from a set.

-:::info -💡 The Base UI Radio Button component is still in development. -Help us prioritize the next batch of new components by sharing your needs in [this GitHub issue](https://github.com/mui/material-ui/issues/27170). +:::warning +The Base UI Radio Button component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38038) to see it arrive sooner. ::: diff --git a/docs/data/base/components/rating/rating.md b/docs/data/base/components/rating/rating.md new file mode 100644 index 00000000000000..b604b0b261433a --- /dev/null +++ b/docs/data/base/components/rating/rating.md @@ -0,0 +1,14 @@ +--- +productId: base-ui +title: React Rating component +githubLabel: 'component: rating' +waiAria: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating +--- + +# Rating 🚧 + +

Rating components provide users with a simple action to give feedback as well as assess the opinions of others.

+ +:::warning +The Base UI Rating component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38043) to see it arrive sooner. +::: diff --git a/docs/data/base/components/toggle-button-group/toggle-button-group.md b/docs/data/base/components/toggle-button-group/toggle-button-group.md new file mode 100644 index 00000000000000..ccca9629c82ec6 --- /dev/null +++ b/docs/data/base/components/toggle-button-group/toggle-button-group.md @@ -0,0 +1,13 @@ +--- +productId: base-ui +title: React Toggle Button Group component +githubLabel: 'component: toggle button' +--- + +# Toggle Button Group 🚧 + +

Toggle Button Groups house sets of buttons with mutually exclusive actions.

+ +:::warning +The Base UI Toggle Button Group component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38044) to see it arrive sooner. +::: diff --git a/docs/data/base/components/tooltip/tooltip.md b/docs/data/base/components/tooltip/tooltip.md new file mode 100644 index 00000000000000..0b644a19926296 --- /dev/null +++ b/docs/data/base/components/tooltip/tooltip.md @@ -0,0 +1,14 @@ +--- +productId: base-ui +title: React Tooltip component +githubLabel: 'component: tooltip' +waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ +--- + +# Tooltip 🚧 + +

Tooltips display informative text when users hover over, focus on, or tap an element.

+ +:::warning +The Base UI Tooltip component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38045) to see it arrive sooner. +::: diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 6ec672858da80e..283a460b6bb833 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -26,22 +26,26 @@ const pages: readonly MuiPage[] = [ children: [ { pathname: '/base-ui/react-autocomplete', title: 'Autocomplete' }, { pathname: '/base-ui/react-button', title: 'Button' }, - { pathname: '/base-ui/react-checkbox', title: 'Checkbox', comingSoon: true }, + { pathname: '/base-ui/react-checkbox', title: 'Checkbox', planned: true }, { pathname: '/base-ui/react-input', title: 'Input' }, - { pathname: '/base-ui/react-radio-button', title: 'Radio Button', comingSoon: true }, + { pathname: '/base-ui/react-radio-button', title: 'Radio Button', planned: true }, + { pathname: '/base-ui/react-rating', title: 'Rating', planned: true }, { pathname: '/base-ui/react-select', title: 'Select' }, { pathname: '/base-ui/react-slider', title: 'Slider' }, { pathname: '/base-ui/react-switch', title: 'Switch' }, + { + pathname: '/base-ui/react-toggle-button-group', + title: 'Toggle Button Group', + planned: true, + }, ], }, { pathname: '/base-ui/components/data-display', subheader: 'data-display', children: [ - { - pathname: '/base-ui/react-badge', - title: 'Badge', - }, + { pathname: '/base-ui/react-badge', title: 'Badge' }, + { pathname: '/base-ui/react-tooltip', title: 'Tooltip', planned: true }, ], }, { @@ -61,7 +65,7 @@ const pages: readonly MuiPage[] = [ { pathname: '/base-ui/react-accordion', title: 'Accordion', - comingSoon: true, + planned: true, }, ], }, @@ -69,7 +73,9 @@ const pages: readonly MuiPage[] = [ pathname: '/base-ui/components/navigation', subheader: 'navigation', children: [ + { pathname: '/base-ui/react-drawer', title: 'Drawer', planned: true }, { pathname: '/base-ui/react-menu', title: 'Menu' }, + { pathname: '/base-ui/react-pagination', title: 'Pagination', planned: true }, { pathname: '/base-ui/react-table-pagination', title: 'Table Pagination' }, { pathname: '/base-ui/react-tabs', title: 'Tabs' }, ], diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts index 4dcf29308805af..3cd9ebaca16fcd 100644 --- a/docs/data/joy/pages.ts +++ b/docs/data/joy/pages.ts @@ -76,14 +76,14 @@ const pages: readonly MuiPage[] = [ { pathname: '/joy-ui/react-linear-progress', title: 'Linear Progress' }, { pathname: '/joy-ui/react-modal' }, { pathname: '/joy-ui/react-skeleton', newFeature: true }, - { pathname: '/joy-ui/react-snackbar', comingSoon: true }, + { pathname: '/joy-ui/react-snackbar', planned: true }, ], }, { pathname: '/joy-ui/components/surfaces', subheader: 'surfaces', children: [ - { pathname: '/joy-ui/react-accordion', comingSoon: true }, + { pathname: '/joy-ui/react-accordion', planned: true }, { pathname: '/joy-ui/react-card' }, { pathname: '/joy-ui/react-sheet' }, ], @@ -93,7 +93,7 @@ const pages: readonly MuiPage[] = [ subheader: 'navigation', children: [ { pathname: '/joy-ui/react-breadcrumbs' }, - { pathname: '/joy-ui/react-drawer', comingSoon: true }, + { pathname: '/joy-ui/react-drawer', planned: true }, { pathname: '/joy-ui/react-link' }, { pathname: '/joy-ui/react-menu' }, { pathname: '/joy-ui/react-tabs' }, diff --git a/docs/pages/base-ui/react-drawer/index.js b/docs/pages/base-ui/react-drawer/index.js new file mode 100644 index 00000000000000..6fb9242afc0d76 --- /dev/null +++ b/docs/pages/base-ui/react-drawer/index.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; +import AppFrame from 'docs/src/modules/components/AppFrame'; +import * as pageProps from 'docs/data/base/components/drawer/drawer.md?@mui/markdown'; + +export default function Page(props) { + const { userLanguage, ...other } = props; + return ; +} + +Page.getLayout = (page) => { + return {page}; +}; diff --git a/docs/pages/base-ui/react-pagination/index.js b/docs/pages/base-ui/react-pagination/index.js new file mode 100644 index 00000000000000..6802aa65bdba1c --- /dev/null +++ b/docs/pages/base-ui/react-pagination/index.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; +import AppFrame from 'docs/src/modules/components/AppFrame'; +import * as pageProps from 'docs/data/base/components/pagination/pagination.md?@mui/markdown'; + +export default function Page(props) { + const { userLanguage, ...other } = props; + return ; +} + +Page.getLayout = (page) => { + return {page}; +}; diff --git a/docs/pages/base-ui/react-rating/index.js b/docs/pages/base-ui/react-rating/index.js new file mode 100644 index 00000000000000..fe97e0880eeb74 --- /dev/null +++ b/docs/pages/base-ui/react-rating/index.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; +import AppFrame from 'docs/src/modules/components/AppFrame'; +import * as pageProps from 'docs/data/base/components/rating/rating.md?@mui/markdown'; + +export default function Page(props) { + const { userLanguage, ...other } = props; + return ; +} + +Page.getLayout = (page) => { + return {page}; +}; diff --git a/docs/pages/base-ui/react-toggle-button-group/index.js b/docs/pages/base-ui/react-toggle-button-group/index.js new file mode 100644 index 00000000000000..76f96fe04395aa --- /dev/null +++ b/docs/pages/base-ui/react-toggle-button-group/index.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; +import AppFrame from 'docs/src/modules/components/AppFrame'; +import * as pageProps from 'docs/data/base/components/toggle-button-group/toggle-button-group.md?@mui/markdown'; + +export default function Page(props) { + const { userLanguage, ...other } = props; + return ; +} + +Page.getLayout = (page) => { + return {page}; +}; diff --git a/docs/pages/base-ui/react-tooltip/index.js b/docs/pages/base-ui/react-tooltip/index.js new file mode 100644 index 00000000000000..16217c806fdbde --- /dev/null +++ b/docs/pages/base-ui/react-tooltip/index.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; +import AppFrame from 'docs/src/modules/components/AppFrame'; +import * as pageProps from 'docs/data/base/components/tooltip/tooltip.md?@mui/markdown'; + +export default function Page(props) { + const { userLanguage, ...other } = props; + return ; +} + +Page.getLayout = (page) => { + return {page}; +}; diff --git a/docs/src/MuiPage.ts b/docs/src/MuiPage.ts index 45170e2d6923f4..59b87721c5ba27 100644 --- a/docs/src/MuiPage.ts +++ b/docs/src/MuiPage.ts @@ -45,10 +45,10 @@ export interface MuiPage { */ newFeature?: boolean; /** - * Indicates if the feature is in development. + * Indicates if the feature is planned for development. * @default false */ - comingSoon?: boolean; + planned?: boolean; } export interface OrderedMuiPage extends MuiPage { diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index d41aafc053277a..3dbdde17ce08a3 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -248,7 +248,7 @@ function reduceChildRoutes(context) { }} legacy={page.legacy} newFeature={page.newFeature} - comingSoon={page.comingSoon} + planned={page.planned} plan={page.plan} icon={page.icon} subheader={subheader} @@ -280,7 +280,7 @@ function reduceChildRoutes(context) { }} legacy={page.legacy} newFeature={page.newFeature} - comingSoon={page.comingSoon} + planned={page.planned} plan={page.plan} icon={page.icon} subheader={Boolean(page.subheader)} diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js index f6a0a225e913bb..59dfcb4f4c1703 100644 --- a/docs/src/modules/components/AppNavDrawerItem.js +++ b/docs/src/modules/components/AppNavDrawerItem.js @@ -258,7 +258,7 @@ export default function AppNavDrawerItem(props) { icon, legacy, newFeature, - comingSoon, + planned, linkProps, onClick, initiallyExpanded = false, @@ -310,7 +310,7 @@ export default function AppNavDrawerItem(props) { {plan === 'premium' && } {legacy && } {newFeature && } - {comingSoon && } + {planned && } {expandable ? ( @@ -325,7 +325,6 @@ export default function AppNavDrawerItem(props) { AppNavDrawerItem.propTypes = { children: PropTypes.node, - comingSoon: PropTypes.bool, depth: PropTypes.number.isRequired, expandable: PropTypes.bool, href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), @@ -336,6 +335,7 @@ AppNavDrawerItem.propTypes = { newFeature: PropTypes.bool, onClick: PropTypes.func, plan: PropTypes.oneOf(['community', 'pro', 'premium']), + planned: PropTypes.bool, subheader: PropTypes.bool.isRequired, title: PropTypes.string.isRequired, topLevel: PropTypes.bool, diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 68405d03d40adc..e4cdd4d1e8ef6f 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -238,17 +238,22 @@ "/base-ui/react-checkbox": "Checkbox", "/base-ui/react-input": "Input", "/base-ui/react-radio-button": "Radio Button", + "/base-ui/react-rating": "Rating", "/base-ui/react-select": "Select", "/base-ui/react-slider": "Slider", "/base-ui/react-switch": "Switch", + "/base-ui/react-toggle-button-group": "Toggle Button Group", "data-display": "Data display", "/base-ui/react-badge": "Badge", + "/base-ui/react-tooltip": "Tooltip", "feedback": "Feedback", "/base-ui/react-snackbar": "Snackbar", "surfaces": "Surfaces", "/base-ui/react-accordion": "Accordion", "navigation": "Navigation", + "/base-ui/react-drawer": "Drawer", "/base-ui/react-menu": "Menu", + "/base-ui/react-pagination": "Pagination", "/base-ui/react-table-pagination": "Table Pagination", "/base-ui/react-tabs": "Tabs", "utils": "Utils",