diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 687d3d23580606..f26b3a7062eaee 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -19,7 +19,7 @@ jobs: uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@7df0ce34898d659f95c0c4a09eaa8d4e32ee64db # v2.2.12 + uses: github/codeql-action/init@b2c19fb9a2a485599ccf4ed5d65527d94bc57226 # v2.3.0 with: languages: typescript config-file: ./.github/codeql/codeql-config.yml @@ -30,4 +30,4 @@ jobs: # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs # queries: security-extended,security-and-quality - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@7df0ce34898d659f95c0c4a09eaa8d4e32ee64db # v2.2.12 + uses: github/codeql-action/analyze@b2c19fb9a2a485599ccf4ed5d65527d94bc57226 # v2.3.0 diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index e271bd42d5a8d8..b34828a54bf706 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -43,6 +43,6 @@ jobs: # Upload the results to GitHub's code scanning dashboard. - name: Upload to code-scanning - uses: github/codeql-action/upload-sarif@7df0ce34898d659f95c0c4a09eaa8d4e32ee64db # v2.2.12 + uses: github/codeql-action/upload-sarif@b2c19fb9a2a485599ccf4ed5d65527d94bc57226 # v2.3.0 with: sarif_file: results.sarif diff --git a/CHANGELOG.md b/CHANGELOG.md index 3184fb515cdbc3..810c550c19494a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,73 @@ # [Versions](https://mui.com/versions/) +## 5.12.2 + + + +_Apr 25, 2023_ + +A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: + +- ⚠️ **[BREAKING CHANGE]** The `Unstyled` suffix has been removed from Base UI component names, including names of types and other related identifiers – a codemod script is provided to assist with the change. +- 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.12.2` + +- ​[FormControl] Fix `filled` when value is set through `inputProps` (#36741) @sai6855 +- ​[Slider] `onChange` handler should be called only when value has changed (#36706) @gitstart +- ​[Table] Fix `Sorting & Selecting` tables (#36898) @oliviertassinari + +### `@mui/base@5.0.0-alpha.127` + +#### Breaking changes + +- ​[base] Remove unstyled suffix from Base components + Codemod script (#36873) @hbjORbj + + The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers. + + You can use this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js) to help with the migration: + + ```sh + npx @mui/codemod v5.0.0/base-remove-unstyled-suffix + ``` + +#### Changes + +- ​[codemod][base] Improve the removal of `component` prop codemod script (#36952) @hbjORbj +- ​[codemod][base] Write a migration script for removal of `component` prop from components (#36831) @hbjORbj +- ​[Base][useButton] Allow useButton params to be completely optional (#36922) @mj12albert + +### `@mui/joy@5.0.0-alpha.77` + +- ​[Joy][Chip] Chip button not showing up in Firefox browser (#36930) @TakhyunKim +- ​[Joy] Add `invertedColors` to Menu and Alert (#36975) @siriwatknp +- ​[joy][Select] Set focus visible on select options when navigating with arrow keys (#36689) @gitstart + +### Docs + +- ​[docs] Fix console error introduced by #36408 (#36980) @alexfauquette +- ​[docs] Add stray Joy UI documentation improvements (#36921) @danilo-leal +- ​[docs] Add Joy profile dashboard template (#36931) @siriwatknp +- ​[docs] Fix 404 links (#36969) @oliviertassinari +- ​[docs] Clarify when bundle size optimization is needed (#36823) @oliviertassinari +- ​[docs] Fix Chakra UI theme scoping typo (#36950) @mj12albert +- ​[docs] Add snackbar example using sonner (#36926) @PupoSDC +- ​[docs] Adjust the Material Icons page design and formatting (#36937) @danilo-leal +- ​[docs] Allows to customize menu with any icon (#36408) @alexfauquette +- ​[docs] Add info about passing ref to input element (#36913) @tomaskebrle +- ​[docs][material] Tabs API section cleanup (#36942) @mnajdova + +### Core + +- ​[core] Fix CI failure on `master` (#37016) @hbjORbj +- ​[typescript] Add the missing explicit component return types (#36924) @michaldudak +- ​[website] Update main data grid demo on X landing page (#37001) @cherniavskii +- ​[website] Design role updates (#36997) @danilo-leal +- ​[website] X component section improvements (#36598) @danilo-leal +- ​[website] Developer Advocate role filled @oliviertassinari + +All contributors of this release in alphabetical order: @alexfauquette, @cherniavskii, @danilo-leal, @gitstart, @hbjORbj, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @PupoSDC, @sai6855, @siriwatknp, @TakhyunKim, @tomaskebrle + ## 5.12.1 diff --git a/benchmark/package.json b/benchmark/package.json index 2564efd6386540..db5a7f7e7325cd 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -15,7 +15,7 @@ "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@mdx-js/react": "^2.3.0", - "@mui/material": "^5.12.1", + "@mui/material": "^5.12.2", "@mui/styles": "^5.12.0", "@mui/system": "^5.12.1", "@styled-system/css": "^5.1.5", @@ -28,7 +28,7 @@ "react-redux": "^8.0.5", "redux": "^4.2.1", "serve-handler": "^6.1.5", - "styled-components": "^5.3.9", + "styled-components": "^5.3.10", "theme-ui": "^0.15.7", "webpack": "^5.75.0", "webpack-cli": "^4.10.0" diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js index c61ac293a61ca6..9fed8aea783a01 100644 --- a/docs/data/base/components/badge/AccessibleBadges.js +++ b/docs/data/base/components/badge/AccessibleBadges.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; import MailIcon from '@mui/icons-material/Mail'; function notificationsLabel(count) { @@ -31,7 +31,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -43,7 +43,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx index d772df26b81ee8..916eb4afeae278 100644 --- a/docs/data/base/components/badge/AccessibleBadges.tsx +++ b/docs/data/base/components/badge/AccessibleBadges.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; import MailIcon from '@mui/icons-material/Mail'; function notificationsLabel(count: number) { @@ -31,7 +31,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -43,7 +43,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js index e97901513f315b..90b5a24ac4ff68 100644 --- a/docs/data/base/components/badge/BadgeMax.js +++ b/docs/data/base/components/badge/BadgeMax.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import { styled } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; import MailIcon from '@mui/icons-material/Mail'; export default function BadgeMax() { @@ -28,7 +28,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -40,7 +40,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx index e97901513f315b..90b5a24ac4ff68 100644 --- a/docs/data/base/components/badge/BadgeMax.tsx +++ b/docs/data/base/components/badge/BadgeMax.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import { styled } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; import MailIcon from '@mui/icons-material/Mail'; export default function BadgeMax() { @@ -28,7 +28,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -40,7 +40,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js index 8a774397991655..254d91ecbf5538 100644 --- a/docs/data/base/components/badge/BadgeVisibility.js +++ b/docs/data/base/components/badge/BadgeVisibility.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { styled } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; import ButtonGroup from '@mui/material/ButtonGroup'; import Button from '@mui/material/Button'; import AddIcon from '@mui/icons-material/Add'; @@ -27,7 +27,7 @@ export default function BadgeVisibility() { '& > *': { marginBottom: 2, }, - [`& .${badgeUnstyledClasses.root}`]: { + [`& .${badgeClasses.root}`]: { marginRight: 4, }, }} @@ -77,7 +77,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -89,7 +89,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; @@ -110,7 +110,7 @@ const StyledBadge = styled(BadgeUnstyled)( transform-origin: 100% 0; } - & .${badgeUnstyledClasses.invisible} { + & .${badgeClasses.invisible} { opacity: 0; pointer-events: none; } diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx index 8a774397991655..254d91ecbf5538 100644 --- a/docs/data/base/components/badge/BadgeVisibility.tsx +++ b/docs/data/base/components/badge/BadgeVisibility.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { styled } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; import ButtonGroup from '@mui/material/ButtonGroup'; import Button from '@mui/material/Button'; import AddIcon from '@mui/icons-material/Add'; @@ -27,7 +27,7 @@ export default function BadgeVisibility() { '& > *': { marginBottom: 2, }, - [`& .${badgeUnstyledClasses.root}`]: { + [`& .${badgeClasses.root}`]: { marginRight: 4, }, }} @@ -77,7 +77,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -89,7 +89,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; @@ -110,7 +110,7 @@ const StyledBadge = styled(BadgeUnstyled)( transform-origin: 100% 0; } - & .${badgeUnstyledClasses.invisible} { + & .${badgeClasses.invisible} { opacity: 0; pointer-events: none; } diff --git a/docs/data/base/components/badge/ShowZeroBadge.js b/docs/data/base/components/badge/ShowZeroBadge.js index 8574a6d3dc51b7..4982c5a6461bc1 100644 --- a/docs/data/base/components/badge/ShowZeroBadge.js +++ b/docs/data/base/components/badge/ShowZeroBadge.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import { styled } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; import MailIcon from '@mui/icons-material/Mail'; export default function ShowZeroBadge() { @@ -26,7 +26,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -38,7 +38,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; @@ -59,7 +59,7 @@ const StyledBadge = styled(BadgeUnstyled)( transform-origin: 100% 0; } - & .${badgeUnstyledClasses.invisible} { + & .${badgeClasses.invisible} { display: none; } `, diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx b/docs/data/base/components/badge/ShowZeroBadge.tsx index 8574a6d3dc51b7..4982c5a6461bc1 100644 --- a/docs/data/base/components/badge/ShowZeroBadge.tsx +++ b/docs/data/base/components/badge/ShowZeroBadge.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import { styled } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; import MailIcon from '@mui/icons-material/Mail'; export default function ShowZeroBadge() { @@ -26,7 +26,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -38,7 +38,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; @@ -59,7 +59,7 @@ const StyledBadge = styled(BadgeUnstyled)( transform-origin: 100% 0; } - & .${badgeUnstyledClasses.invisible} { + & .${badgeClasses.invisible} { display: none; } `, diff --git a/docs/data/base/components/badge/UnstyledBadge.js b/docs/data/base/components/badge/UnstyledBadge.js index 90a7210fbde549..13358f49052d19 100644 --- a/docs/data/base/components/badge/UnstyledBadge.js +++ b/docs/data/base/components/badge/UnstyledBadge.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, Box } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; function BadgeContent() { return ( @@ -37,7 +37,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -50,7 +50,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; diff --git a/docs/data/base/components/badge/UnstyledBadge.tsx b/docs/data/base/components/badge/UnstyledBadge.tsx index 90a7210fbde549..13358f49052d19 100644 --- a/docs/data/base/components/badge/UnstyledBadge.tsx +++ b/docs/data/base/components/badge/UnstyledBadge.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, Box } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; function BadgeContent() { return ( @@ -37,7 +37,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -50,7 +50,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction.js index 984d54b6a81dfc..b05ce3e7c2b501 100644 --- a/docs/data/base/components/badge/UnstyledBadgeIntroduction.js +++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, Box } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; function BadgeContent() { return ( @@ -37,7 +37,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -50,7 +50,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx index 984d54b6a81dfc..b05ce3e7c2b501 100644 --- a/docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx +++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, Box } from '@mui/system'; -import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled'; +import Badge, { badgeClasses } from '@mui/base/Badge'; function BadgeContent() { return ( @@ -37,7 +37,7 @@ const grey = { 900: '#24292f', }; -const StyledBadge = styled(BadgeUnstyled)( +const StyledBadge = styled(Badge)( ({ theme }) => ` box-sizing: border-box; margin: 0; @@ -50,7 +50,7 @@ const StyledBadge = styled(BadgeUnstyled)( display: inline-block; line-height: 1; - & .${badgeUnstyledClasses.badge} { + & .${badgeClasses.badge} { z-index: auto; position: absolute; top: 0; diff --git a/docs/data/base/components/badge/badge.md b/docs/data/base/components/badge/badge.md index 3243a5ea0fe1d6..35937ce0265851 100644 --- a/docs/data/base/components/badge/badge.md +++ b/docs/data/base/components/badge/badge.md @@ -1,14 +1,14 @@ --- product: base -title: Unstyled React Badge component and hook -components: BadgeUnstyled +title: React Badge component and hook +components: Badge hooks: useBadge githubLabel: 'component: badge' --- -# Unstyled badge +# Badge -

The Unstyled Badge component generates a small label that is attached to its child element.

+

The Badge component generates a small label that is attached to its child element.

{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} @@ -19,7 +19,7 @@ githubLabel: 'component: badge' A badge is a small descriptor for UI elements. It typically sits on or near an element and indicates the status of that element by displaying a number, icon, or other short set of characters. -The Unstyled Badge component creates a badge that is applied to its child element. +The Badge component creates a badge that is applied to its child element. {{"demo": "UnstyledBadgeIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}} @@ -30,29 +30,27 @@ The Unstyled Badge component creates a badge that is applied to its child elemen After [installation](/base/getting-started/installation/), you can start building with this component using the following basic elements: ```jsx -import BadgeUnstyled from '@mui/base/BadgeUnstyled'; +import Badge from '@mui/base/Badge'; export default function MyApp() { - return ( - {/* the element that the badge is attached to */} - ); + return {/* the element that the badge is attached to */}; } ``` ### Basics -The Unstyled Badge wraps around the UI element that it's attached to. +The Badge wraps around the UI element that it's attached to. For instance, if the badge indicates the number of emails in an inbox, then the component will be structured like this: ```jsx - + - + ``` ### Anatomy -The Unstyled Badge component is composed of a root `` that houses the element that the badge is attached to, followed by a `` slot to represent the badge itself: +The Badge component is composed of a root `` that houses the element that the badge is attached to, followed by a `` slot to represent the badge itself: ```html @@ -71,13 +69,13 @@ See [Usage](/base/getting-started/usage/) for full details. Use the `component` prop to override the root slot with a custom element: ```jsx - + ``` Use the `slots` prop to override any interior slots in addition to the root: ```jsx - + ``` :::warning @@ -88,7 +86,7 @@ Use the `slotProps` prop to pass custom props to internal slots. The following code snippet applies a CSS class called `my-badge` to the badge slot: ```jsx - + ``` ## Hook diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js index 7ebad32a539b62..ec343d488f0ff3 100644 --- a/docs/data/base/components/button/UnstyledButtonCustom.js +++ b/docs/data/base/components/button/UnstyledButtonCustom.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; +import Button, { buttonClasses } from '@mui/base/Button'; import { styled } from '@mui/system'; const ButtonRoot = React.forwardRef(function ButtonRoot(props, ref) { @@ -22,7 +22,7 @@ ButtonRoot.propTypes = { }; const SvgButton = React.forwardRef(function SvgButton(props, ref) { - return ; + return ; } ``` ### Basics -The Unstyled Button behaves similar to the native HTML ` - + ``` -The following demo shows how to create and style a form that uses Unstyled Form Control to wrap the elements of the form. -Note that it also uses the `useFormControlUnstyledContext` hook in order to pass props to the custom Unstyled Input—see the [Hook](#hook) section below for more details. +The following demo shows how to create and style a form that uses Form Control to wrap the elements of the form. +Note that it also uses the `useFormControlContext` hook in order to pass props to the custom Input—see the [Hook](#hook) section below for more details. {{"demo": "BasicFormControl.js"}} ## Hook ```jsx -import { useFormControlUnstyledContext } from '@mui/base/FormControlUnstyled'; +import { useFormControlContext } from '@mui/base/FormControl'; ``` -The `useFormControlUnstyledContext` hook reads the context provided by Unstyled Form Control. +The `useFormControlContext` hook reads the context provided by Form Control. This hook lets you work with custom input components inside of the Form Control. You can also use it to read the form control's state and react to its changes in a custom component. @@ -82,19 +80,19 @@ The demo below shows how to integrate this hook with its component counterpart: {{"demo": "UseFormControl.js", "defaultCodeOpen": false}} Note that even though Form Control supports both controlled and uncontrolled-style APIs -(i.e. it accepts `value` and `defaultValue` props), `useFormControlUnstyledContext` returns only the controlled `value`. -This way, you don't have to implement both in your custom input—Unstyled Form Control does this for you. +(i.e. it accepts `value` and `defaultValue` props), `useFormControlContext` returns only the controlled `value`. +This way, you don't have to implement both in your custom input—Form Control does this for you. -`useFormControlUnstyledContext` returns an object with the following fields: +`useFormControlContext` returns an object with the following fields: -| Name | Type | Description | -| :--------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | boolean | Represents the value of the FormControlUnstyled's `disabled` prop. | -| `error` | boolean | Represents the value of the Unstyled Form Control component's `error` prop. Note that it is not calculated automatically (i.e. it's not set when `required: true` and `value: ''`). | -| `filled` | boolean | Set to `true` if `value` is not empty. | -| `focused` | boolean | Set to `true` if the wrapped input has received focus. | -| `required` | boolean | Represents the value of the Unstyled Form Control component's `required` prop. | -| `value` | unknown | The current value of the form control. | +| Name | Type | Description | +| :--------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | boolean | Represents the value of the FormControl's `disabled` prop. | +| `error` | boolean | Represents the value of the Form Control component's `error` prop. Note that it is not calculated automatically (i.e. it's not set when `required: true` and `value: ''`). | +| `filled` | boolean | Set to `true` if `value` is not empty. | +| `focused` | boolean | Set to `true` if the wrapped input has received focus. | +| `required` | boolean | Represents the value of the Form Control component's `required` prop. | +| `value` | unknown | The current value of the form control. | The following callbacks are also part of the returned object—they are meant to be used when creating custom inputs: @@ -116,6 +114,6 @@ For the sake of simplicity, demos and code snippets primarily feature components You can access the state of the form control by providing a function as a child of the Form Control. The state will be provided as a parameter to this function. -The following demo shows how to access the state of the form control in an Unstyled Input component nested inside of the Form Control: +The following demo shows how to access the state of the form control in an Input component nested inside of the Form Control: {{"demo": "FormControlFunctionChild.js"}} diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js index 65d35f210cdcbf..694f34ba264a14 100644 --- a/docs/data/base/components/input/InputAdornments.js +++ b/docs/data/base/components/input/InputAdornments.js @@ -1,8 +1,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; -import ButtonUnstyled from '@mui/base/ButtonUnstyled'; -import InputUnstyled, { inputUnstyledClasses } from '@mui/base/InputUnstyled'; +import Button from '@mui/base/Button'; +import Input, { inputClasses } from '@mui/base/Input'; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; import { styled } from '@mui/system'; @@ -42,7 +42,7 @@ const StyledInputRoot = styled('div')( justify-content: center; - &.${inputUnstyledClasses.focused} { + &.${inputClasses.focused} { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } @@ -74,7 +74,7 @@ const StyledInputElement = styled('input')( `, ); -const IconButton = styled(ButtonUnstyled)( +const IconButton = styled(Button)( ({ theme }) => ` display: inline-flex; align-items: center; @@ -96,7 +96,7 @@ const InputAdornment = styled('div')` const CustomInput = React.forwardRef(function CustomInput(props, ref) { const { slots, ...other } = props; return ( - ` display: inline-flex; align-items: center; @@ -96,12 +93,12 @@ const InputAdornment = styled('div')` `; const CustomInput = React.forwardRef(function CustomInput( - props: InputUnstyledProps, + props: InputProps, ref: React.ForwardedRef, ) { const { slots, ...other } = props; return ( - , ) { return ( - , ) { return ( - - ); + return ; }); export default function UnstyledInputBasic() { diff --git a/docs/data/base/components/input/UnstyledInputBasic.tsx b/docs/data/base/components/input/UnstyledInputBasic.tsx index fad30aeca15e33..375e4cc049d325 100644 --- a/docs/data/base/components/input/UnstyledInputBasic.tsx +++ b/docs/data/base/components/input/UnstyledInputBasic.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import InputUnstyled, { InputUnstyledProps } from '@mui/base/InputUnstyled'; +import Input, { InputProps } from '@mui/base/Input'; import { styled } from '@mui/system'; const blue = { @@ -54,12 +54,10 @@ const StyledInputElement = styled('input')( ); const CustomInput = React.forwardRef(function CustomInput( - props: InputUnstyledProps, + props: InputProps, ref: React.ForwardedRef, ) { - return ( - - ); + return ; }); export default function UnstyledInputBasic() { diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.js b/docs/data/base/components/input/UnstyledInputIntroduction.js index 5f994e6f84bfdb..72cb1d0add4eb2 100644 --- a/docs/data/base/components/input/UnstyledInputIntroduction.js +++ b/docs/data/base/components/input/UnstyledInputIntroduction.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import InputUnstyled from '@mui/base/InputUnstyled'; +import Input from '@mui/base/Input'; import { styled } from '@mui/system'; const blue = { @@ -54,9 +54,7 @@ const StyledInputElement = styled('input')( ); const CustomInput = React.forwardRef(function CustomInput(props, ref) { - return ( - - ); + return ; }); export default function UnstyledInputIntroduction() { diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.tsx b/docs/data/base/components/input/UnstyledInputIntroduction.tsx index ca0eb2ad9aca71..a69ce7d4a30120 100644 --- a/docs/data/base/components/input/UnstyledInputIntroduction.tsx +++ b/docs/data/base/components/input/UnstyledInputIntroduction.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import InputUnstyled from '@mui/base/InputUnstyled'; +import Input from '@mui/base/Input'; import { styled } from '@mui/system'; const blue = { @@ -57,9 +57,7 @@ const CustomInput = React.forwardRef(function CustomInput( props: React.InputHTMLAttributes, ref: React.ForwardedRef, ) { - return ( - - ); + return ; }); export default function UnstyledInputIntroduction() { diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md index 440d7a46a25c92..6100658cbe7f75 100644 --- a/docs/data/base/components/input/input.md +++ b/docs/data/base/components/input/input.md @@ -1,14 +1,14 @@ --- product: base -title: Unstyled React Input component and hook -components: InputUnstyled +title: React Input component and hook +components: Input hooks: useInput githubLabel: 'component: input' --- -# Unstyled Input +# Input -

The Unstyled Input component provides users with a field to enter and edit text.

+

The Input component provides users with a field to enter and edit text.

{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} @@ -17,7 +17,7 @@ githubLabel: 'component: input' ## Introduction An input is a UI element that accepts text data from the user. -The Unstyled Input component replaces the native HTML `` tag, and offers expanded customization and accessibility features. +The Input component replaces the native HTML `` tag, and offers expanded customization and accessibility features. It can also be transformed into a `