diff --git a/.circleci/config.yml b/.circleci/config.yml index 8e6930a6c46ed5..5c1aaf708fee2a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -348,7 +348,7 @@ jobs: <<: *defaults resource_class: 'medium+' docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -378,7 +378,7 @@ jobs: test_e2e: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -397,7 +397,7 @@ jobs: test_e2e_website: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -412,7 +412,7 @@ jobs: test_profile: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -439,7 +439,7 @@ jobs: test_regressions: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -493,7 +493,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack4/ docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -517,7 +517,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack5/ docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -541,7 +541,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/create-react-app/ docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -565,7 +565,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/snowpack/ docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -589,7 +589,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/vite/ docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -613,7 +613,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/esbuild/ docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -641,7 +641,7 @@ jobs: <<: *defaults working_directory: /tmp/material-ui/test/bundling/fixtures/gatsby/ docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: @@ -743,7 +743,7 @@ jobs: test_benchmark: <<: *defaults docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.29.2-focal environment: NODE_ENV: development # Needed if playwright is in `devDependencies` steps: diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index f620c3a73688c9..8db97db602afb6 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@4b3fd9198891cf782111537728021ffc6ae722ba # v1.1.37 + uses: github/codeql-action/upload-sarif@959cbb7472c4d4ad70cdfe6f4976053fe48ab394 # v2.1.37 with: sarif_file: results.sarif diff --git a/.github/workflows/support-stackoverflow.yml b/.github/workflows/support-stackoverflow.yml index 1182dbe3d48179..17d997231655cd 100644 --- a/.github/workflows/support-stackoverflow.yml +++ b/.github/workflows/support-stackoverflow.yml @@ -14,7 +14,7 @@ jobs: contents: read issues: write steps: - - uses: dessant/support-requests@876a4de3922dd57434a451e58ad679f986c5da97 # v2.1.2 + - uses: dessant/support-requests@b1303caf4438e66dea1130aa4c30189dc28e690d # v3.0.0 with: github-token: ${{ secrets.GITHUB_TOKEN }} # Label used to mark issues as support requests diff --git a/CHANGELOG.md b/CHANGELOG.md index 6295cfb544eac1..d3cb726cf121f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,90 @@ # [Versions](https://mui.com/versions/) +## 5.11.4 + + + +_Jan 9, 2023_ + +A big thanks to the 14 contributors who made this release possible. +This release was mostly about 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.11.4` + +- [Autocomplete] Add index to renderOption's AutocompleteRenderOptionState (#35578) @CowDotDev +- [Autocomplete] Fix grammar in console.error in `useAutocomplete` (#35723) @hamirmahal +- [Modal] Fix can't override Backdrop Props using new Slots API (#35140) @ZeeshanTamboli +- [Select] Revert "Update `renderValue` prop's TypeScript type (#34177)" (#35733) @michaldudak +- [Tabs] Throw error only if individual `Tab` is hidden, not the whole `Tabs` (#34026) @Ryczko +- [TextField] Improve WCAG 2.4.7 with error={true} (#35687) @oliviertassinari +- [Tooltip] Remove `data-foo` attribute (#35736) @koolskateguy89 + +### `@mui/joy@5.0.0-alpha.62` + +- [Autocomplete][joy] Specify `type` attribute for popup indicator (#35648) @hbjORbj +- [Joy] Miscellaneous improvements (#35769) @siriwatknp +- [Joy] Improve `onKeyDown` event handler for demo (#35642) @hbjORbj + +### `@mui/base@5.0.0-alpha.113` + +- [Portal][base] Convert code to TypeScript (#35657) @sai6855 + +### Docs + +- [docs] Revise and expand Joy UI Button doc (#35737) @samuelsycamore +- [docs] Document the workaround for crashing a translated page (#35720) @michaldudak +- [docs] Fix API page for `MenuItem` to list all valid props (#35561) @mnajdova +- [docs] Fix ad exception in Joy UI (#35685) @oliviertassinari +- [docs] Fix content wider than screen regression @oliviertassinari +- [examples] Add `Vite.js with TypeScript` example (#35683) @miha53cevic + +### Core + +- [core] Close 2022 developer survey @oliviertassinari +- [core] Fix the product license reference name (#35703) @oliviertassinari +- [core] Use TypeScript AST instead of TTP for component doc building (#35379) @flaviendelangle +- [test] Always use & for nesting styles (#35702) @oliviertassinari +- [website] Improve Lead Designer role description (#35684) @oliviertassinari + +All contributors of this release in alphabetical order: @CowDotDev, @flaviendelangle, @hamirmahal, @hbjORbj, @koolskateguy89, @michaldudak, @miha53cevic, @mnajdova, @oliviertassinari, @Ryczko, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli + +## 5.11.3 + + + +_Jan 2, 2023_ + +A big thanks to the 6 contributors who made this release possible. +This release was mostly about 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.11.3` + +- ​[Select] Update `renderValue` prop's TypeScript type (#34177) @ZeeshanTamboli + +### `@mui/joy@5.0.0-alpha.61` + +- ​[Autocomplete][joy] Export component (#35647) @mbranch + +### Docs + +- ​[blog] Fix handling of markdown links (#35628) @oliviertassinari +- ​[docs] Fix demo code selection through copy shortcut key on Firefox browser (#35670) @ZeeshanTamboli +- ​[docs] Fix layout shift when streaming the page (#35627) @oliviertassinari +- ​[docs] Fix switch name to reflect the color (#35052) @rjhcnf +- ​[docs] Fix anchor link in the card's docs and fix a typo (#35634) @ZeeshanTamboli +- ​[docs] Fix layout shift with modal (#35591) @oliviertassinari +- ​[Joy][docs] Add documentation for `Input` component (#35482) @hbjORbj +- ​[docs][joy] Improved readability on theme tokens page (#35639) @badalsaibo + +### Core + +- ​[core] Disable prefetch of footer links @oliviertassinari +- ​[core] A few SEO fixes (#35672) @oliviertassinari +- ​[core] Remove need for scopePathnames (#35584) @oliviertassinari +- ​[test] Fix Algolia noisy lvl1 anchor (#35686) @oliviertassinari + +All contributors of this release in alphabetical order: @badalsaibo, @hbjORbj, @mbranch, @oliviertassinari, @rjhcnf, @ZeeshanTamboli + ## 5.11.2 diff --git a/benchmark/package.json b/benchmark/package.json index 8fb627e152ef90..c2855a6adf003a 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -11,16 +11,16 @@ "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\"" }, "dependencies": { - "@chakra-ui/system": "^2.3.5", + "@chakra-ui/system": "^2.3.8", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mdx-js/react": "^2.2.1", - "@mui/material": "^5.11.2", + "@mui/material": "^5.11.4", "@mui/styles": "^5.11.2", - "@mui/system": "^5.11.2", + "@mui/system": "^5.11.4", "@styled-system/css": "^5.1.5", "benchmark": "^2.1.4", - "playwright": "^1.29.1", + "playwright": "^1.29.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-is": "^18.2.0", diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md index d6d3e92bd6c59b..4697542fce9970 100644 --- a/docs/data/base/components/button/button.md +++ b/docs/data/base/components/button/button.md @@ -10,14 +10,14 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/

Buttons let users take actions and make choices with a single tap.

-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - ## Introduction The Unstyled Button component replaces the native HTML ` + + + + ); +} diff --git a/docs/data/joy/components/button/BasicButtons.tsx b/docs/data/joy/components/button/BasicButtons.tsx new file mode 100644 index 00000000000000..15c152d5d8029e --- /dev/null +++ b/docs/data/joy/components/button/BasicButtons.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Button from '@mui/joy/Button'; +import Box from '@mui/joy/Box'; + +export default function BasicButtons() { + return ( + + + + + + ); +} diff --git a/docs/data/joy/components/button/BasicButtons.tsx.preview b/docs/data/joy/components/button/BasicButtons.tsx.preview new file mode 100644 index 00000000000000..4d33dc1940fa3f --- /dev/null +++ b/docs/data/joy/components/button/BasicButtons.tsx.preview @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/docs/data/joy/components/button/ButtonDisabled.js b/docs/data/joy/components/button/ButtonDisabled.js index a9a47de487c7a2..e048a8cbf14f45 100644 --- a/docs/data/joy/components/button/ButtonDisabled.js +++ b/docs/data/joy/components/button/ButtonDisabled.js @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; -export default function ButtonVariants() { +export default function DisabledButtons() { return ( - - + + + ); } diff --git a/docs/data/joy/components/button/ButtonLoading.tsx b/docs/data/joy/components/button/ButtonLoading.tsx index 231860dc44b56c..cac8452c703c21 100644 --- a/docs/data/joy/components/button/ButtonLoading.tsx +++ b/docs/data/joy/components/button/ButtonLoading.tsx @@ -1,17 +1,22 @@ import * as React from 'react'; -import Stack from '@mui/joy/Stack'; -import SendIcon from '@mui/icons-material/Send'; +import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; -export default function ButtonLoading() { +export default function LoadingButtons() { return ( - - - - + + + ); } diff --git a/docs/data/joy/components/button/ButtonLoading.tsx.preview b/docs/data/joy/components/button/ButtonLoading.tsx.preview index ca37d5ae89ed8c..7b260fd7a643ab 100644 --- a/docs/data/joy/components/button/ButtonLoading.tsx.preview +++ b/docs/data/joy/components/button/ButtonLoading.tsx.preview @@ -1,6 +1,12 @@ - - + + \ No newline at end of file diff --git a/docs/data/joy/components/button/ButtonLoadingIndicator.js b/docs/data/joy/components/button/ButtonLoadingIndicator.js new file mode 100644 index 00000000000000..231860dc44b56c --- /dev/null +++ b/docs/data/joy/components/button/ButtonLoadingIndicator.js @@ -0,0 +1,17 @@ +import * as React from 'react'; +import Stack from '@mui/joy/Stack'; +import SendIcon from '@mui/icons-material/Send'; +import Button from '@mui/joy/Button'; + +export default function ButtonLoading() { + return ( + + + + + ); +} diff --git a/docs/data/joy/components/button/ButtonLoadingIndicator.tsx b/docs/data/joy/components/button/ButtonLoadingIndicator.tsx new file mode 100644 index 00000000000000..231860dc44b56c --- /dev/null +++ b/docs/data/joy/components/button/ButtonLoadingIndicator.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import Stack from '@mui/joy/Stack'; +import SendIcon from '@mui/icons-material/Send'; +import Button from '@mui/joy/Button'; + +export default function ButtonLoading() { + return ( + + + + + ); +} diff --git a/docs/data/joy/components/button/ButtonLoadingIndicator.tsx.preview b/docs/data/joy/components/button/ButtonLoadingIndicator.tsx.preview new file mode 100644 index 00000000000000..ca37d5ae89ed8c --- /dev/null +++ b/docs/data/joy/components/button/ButtonLoadingIndicator.tsx.preview @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/docs/data/joy/components/button/ButtonsSimple.js b/docs/data/joy/components/button/ButtonsSimple.js new file mode 100644 index 00000000000000..88636b8fb0e9ee --- /dev/null +++ b/docs/data/joy/components/button/ButtonsSimple.js @@ -0,0 +1,12 @@ +import * as React from 'react'; +import Button from '@mui/joy/Button'; +import Box from '@mui/joy/Box'; + +export default function UnstyledButtonsSimple() { + return ( + + + + + ); +} diff --git a/docs/data/joy/components/button/ButtonsSimple.tsx.preview b/docs/data/joy/components/button/ButtonsSimple.tsx.preview new file mode 100644 index 00000000000000..b7b5add52ab6c2 --- /dev/null +++ b/docs/data/joy/components/button/ButtonsSimple.tsx.preview @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md index 36a8db10e4d12c..af047dabd94c79 100644 --- a/docs/data/joy/components/button/button.md +++ b/docs/data/joy/components/button/button.md @@ -8,120 +8,147 @@ unstyled: /base/react-button/ # Button -

Buttons allow users to take actions, and make choices, with a single tap.

+

Buttons let users take actions and make choices with a single tap.

## Introduction Buttons communicate actions that users can take. +The Joy UI Button component replaces the native HTML `; -} ``` +The Joy UI Button behaves similar to the native HTML ` +``` diff --git a/docs/data/joy/components/card/CardCovers.js b/docs/data/joy/components/card/CardCovers.js deleted file mode 100644 index ab94de7b7f5cfe..00000000000000 --- a/docs/data/joy/components/card/CardCovers.js +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import Card from '@mui/joy/Card'; -import CardCover from '@mui/joy/CardCover'; -import CardContent from '@mui/joy/CardContent'; -import Typography from '@mui/joy/Typography'; - -export default function CardCovers() { - return ( - - -
- - 3 - -
-
- -
- - 2 - -
-
- -
- - 1 - -
-
- - - Content - - -
- ); -} diff --git a/docs/data/joy/components/card/CardCovers.tsx b/docs/data/joy/components/card/CardCovers.tsx deleted file mode 100644 index ab94de7b7f5cfe..00000000000000 --- a/docs/data/joy/components/card/CardCovers.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import Card from '@mui/joy/Card'; -import CardCover from '@mui/joy/CardCover'; -import CardContent from '@mui/joy/CardContent'; -import Typography from '@mui/joy/Typography'; - -export default function CardCovers() { - return ( - - -
- - 3 - -
-
- -
- - 2 - -
-
- -
- - 1 - -
-
- - - Content - - -
- ); -} diff --git a/docs/data/joy/components/card/CardLayers3d.js b/docs/data/joy/components/card/CardLayers3d.js new file mode 100644 index 00000000000000..c98afdcf507f35 --- /dev/null +++ b/docs/data/joy/components/card/CardLayers3d.js @@ -0,0 +1,70 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Card from '@mui/joy/Card'; +import CardCover from '@mui/joy/CardCover'; +import CardContent from '@mui/joy/CardContent'; +import Typography from '@mui/joy/Typography'; + +export default function CardLayers3d() { + return ( + div, & > div > div': { + transition: 'inherit', + }, + '&:hover': { + '& > div': { + transform: 'rotateY(30deg)', + '& > div:nth-child(2)': { + transform: 'scaleY(0.9) translate3d(20px, 30px, 40px)', + }, + '& > div:nth-child(3)': { + transform: 'translate3d(45px, 50px, 40px)', + }, + }, + }, + }} + > + + + Card + + + + Card Cover + + + + + Card Content + + + + + ); +} diff --git a/docs/data/joy/components/card/CardLayers3d.tsx b/docs/data/joy/components/card/CardLayers3d.tsx new file mode 100644 index 00000000000000..c98afdcf507f35 --- /dev/null +++ b/docs/data/joy/components/card/CardLayers3d.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Card from '@mui/joy/Card'; +import CardCover from '@mui/joy/CardCover'; +import CardContent from '@mui/joy/CardContent'; +import Typography from '@mui/joy/Typography'; + +export default function CardLayers3d() { + return ( + div, & > div > div': { + transition: 'inherit', + }, + '&:hover': { + '& > div': { + transform: 'rotateY(30deg)', + '& > div:nth-child(2)': { + transform: 'scaleY(0.9) translate3d(20px, 30px, 40px)', + }, + '& > div:nth-child(3)': { + transform: 'translate3d(45px, 50px, 40px)', + }, + }, + }, + }} + > + + + Card + + + + Card Cover + + + + + Card Content + + + + + ); +} diff --git a/docs/data/joy/components/card/CardVariables.js b/docs/data/joy/components/card/CardVariables.js index 3ffc5e8d59501a..558c2df561d582 100644 --- a/docs/data/joy/components/card/CardVariables.js +++ b/docs/data/joy/components/card/CardVariables.js @@ -7,7 +7,10 @@ import CardCover from '@mui/joy/CardCover'; import CardContent from '@mui/joy/CardContent'; import CardOverflow from '@mui/joy/CardOverflow'; import Link from '@mui/joy/Link'; -import TextField from '@mui/joy/TextField'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import FormHelperText from '@mui/joy/FormHelperText'; +import Input from '@mui/joy/Input'; import Typography from '@mui/joy/Typography'; import BrandingProvider from 'docs/src/BrandingProvider'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; @@ -142,37 +145,44 @@ export default function CardVariables() { CSS variables {vars.map((data) => ( - px} - type={data.type} - helperText={ - data.defaultValue ? `Default as ${data.defaultValue}` : undefined - } - onChange={(event) => { - const { value } = event.target; - setSx((prevSx) => { - if (!value) { - const newSx = { ...prevSx }; - // @ts-ignore - delete newSx[data.var]; - return newSx; - } - return { - ...prevSx, - [data.var]: `${value}px`, - }; - }); - }} - sx={{ - maxWidth: 160, - '& .JoyInput-root': { '--Input-paddingInline': '0.5rem' }, - }} - /> + + + {data.var} + + px} + type={data.type} + sx={{ + maxWidth: 160, + '& .JoyInput-root': { '--Input-paddingInline': '0.5rem' }, + }} + onChange={(event) => { + const { value } = event.target; + setSx((prevSx) => { + if (!value) { + const newSx = { ...prevSx }; + // @ts-ignore + delete newSx[data.var]; + return newSx; + } + return { + ...prevSx, + [data.var]: `${value}px`, + }; + }); + }} + /> + {data.defaultValue ? ( + {`Default as ${data.defaultValue}`} + ) : null} + ))} diff --git a/docs/data/joy/components/card/card.md b/docs/data/joy/components/card/card.md index 1a811c9f26e3e0..654858b27e5102 100644 --- a/docs/data/joy/components/card/card.md +++ b/docs/data/joy/components/card/card.md @@ -6,128 +6,158 @@ githubLabel: 'component: card' # Card -

Cards contain content and actions about a single subject.

+

A card is a generic container for grouping related UI elements and content.

## Introduction -Cards are most frequently used for easy to scan, relevant, and actionable information. -Joy UI provides four Card-related components: +The Joy UI Card component includes several complementary utility components to handle various use cases: -- [`Card`](#basic-usage): a container to control the content direction. -- [`CardOverflow`](#overflow): a handy component that takes care of stretching the content to fill all edges of the card. -- [`CardCover`](#back-cover): a container for displaying background images within the card, also used to create gradient layers. -- [`CardContent`](#back-cover): a wrapper that brings content to the front when used with `CardCover`. +- [Card](#basics): a surface-level container for grouping related components. +- [Card Overflow](#overflow): a supplemental wrapper that expands a Card's contents to fill all edges. +- [Card Cover](#card-layers): an optional container for displaying background images and gradient layers behind the Card Content. +- [Card Content](#card-layers): an optional wrapper that brings content to the front (commonly but not always used with the Card Cover). -## Component - -After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: +## Basics ```jsx import Card from '@mui/joy/Card'; -import Typography from '@mui/joy/Typography'; - -export default function MyApp() { - return ( - - Hello world! - - ); -} ``` -### Basic usage - -`Card` is a surface-level component that can house multiple others. -The most common components you'd use with it are `Typography`, `AspectRatio`, and `Button`. +Card is a surface-level container for grouping related components. +The demo below shows a typical Card that groups together Typography, Aspect Ratio, and Button components, among others: {{"demo": "BasicCard.js" }} -### Overflow +## Customization + +### Expand to fill -To have content spanning from edge to edge of the card, wrap it with the `CardOverflow` component. -It automatically takes care of the top and bottom edges if rendered as the first or last child of the parent card. +```jsx +import CardOverflow from '@mui/joy/CardOverflow'; +``` + +By default, the Card component adds padding around the outer edges of its contents. +To eliminate this white space, add the Card Overflow component inside the Card as a wrapper around the content to be expanded. + +Note that Card Overflow only works when it's the first and/or last child of the parent Card. +In the demo below, the top and bottom sections are expanded to fill the edges: {{"demo": "OverflowCard.js" }} -### Back cover +### Card layers -The `CardCover` component is responsible for housing the content that covers the whole card. -Think of card covers as a background layer that stay behind the `CardContent`. +```jsx +import CardCover from '@mui/joy/CardCover'; +import CardContent from '@mui/joy/CardContent'; +``` -{{"demo": "CardCovers.js" }} +The default Card provides a single flat surface for other components to sit on top of. +Use the Card Cover and Card Content components to expose multiple layers between a Card and the UI elements on its surface. -### Media +Card Cover makes it possible to add images, videos, and color and gradient overlays underneath the Card Content. +Hover your mouse on the demo below to see how the layers are stacked: -Use a plain image or a video element inside the `CardCover` to display media. -It uses [`object-fit: cover`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) on the image as a default value. +{{"demo": "CardLayers3d.js" }} -{{"demo": "MediaCover.js" }} +#### Images and videos + +Use an image or a video element inside the Card Cover to display media. +The component uses [`object-fit: cover`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) to fill the whole Card by default. -### Gradient overlay +{{"demo": "MediaCover.js" }} -To create a gradient overlay, frequently seen when a colorful image is used as background, insert an additional `CardCover` component. +#### Gradient overlay -:::warning -Make sure to darken the gradient overlay up to have enough contrast between the background image and the text content. -::: +To create a gradient overlay—frequently seen when a bright image is used as a background—insert an additional Card Cover component between the image layer and the content layer. +You can add any number of Card Covers to create more sophisticated stacked layers this way. {{"demo": "GradientCover.js" }} -### Row +### Horizontal alignment -To show a horizontal card, use the `row` prop. -The `CardOverflow` will adapt based on its position. +Card contents are arranged in a column by default. +For horizontal alignment, add the `row` prop to the Card. +If present, the [Card Overflow](#expand-to-fill) component will adapt accordingly. {{"demo": "RowCard.js" }} ### Actions -#### Multiple actions +Cards often include actions that users can take, like proceeding to a new page or section of the app. +There may be individual (discrete) actions _within_ a given card, or _the entire card itself_ may trigger an action when clicked or tapped. -By default, whenever you have additional action elements such as links and buttons, they stay on top of the whole interactive area. -In some cases, you might have to manually control each element's `z-index`. +The following sections explain how to approach each of these scenarios. -:::success -Use the CSS pseudo-class [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) to style the card when any of its children are focused. -::: +#### Discrete actions + +By default, action elements like links and buttons sit above the surface-level interactive area of the Card. +In some cases, you might have to adjust the z-index to bring these elements to the front—for instance, the Favorite Icon Button in the demo below needs a higher z-index in order to sit on top of its Aspect Ratio sibling: {{"demo": "MultipleInteractionCard.js" }} -#### Whole card area +:::success +You can use the CSS pseudo-class [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) to apply styles to the Card when any of its children receive focus. +::: -To make the entire card area clickable, wrap the card's title with the `Link` component. -Then, add the `overlay` prop to expand it. +#### Whole Card actions -By doing that, you ensure good keyboard navigation support given that the `focus-visible` styles also apply to the entire card. -Learn more about best accessibility practices with cards in the [Inclusive Component's documentation](https://inclusive-components.design/cards/). +To make the entire Card clickable, add a [Link](/joy-ui/react-link/) component to the title (or some other important text content) inside the Card. +Then add the `overlay` prop to the Link to spread it across the Card as a whole. -{{"demo": "InteractiveCard.js" }} +:::info +This approach helps to ensure proper keyboard navigation support by applying `focus-visible` styles to the Card itself. +Learn more about this and other best practices for accessible cards in the [Inclusive Components blog](https://inclusive-components.design/cards/). +::: -## CSS variables +{{"demo": "InteractiveCard.js" }} -Play around with all the CSS variables available in the component to see how the design changes. +## CSS variable playground -You can use those to customize the component on both the `sx` prop and the theme. +Play around with the CSS variables available to the Card component to see how the design changes. +You can use these to customize the component with both the `sx` prop and the theme. :::success -If you want to adjust a card's padding or border-radius, it's preferable to do it using the variables below instead of using CSS properties directly. -That's because the variables will also be used to calculate a proper radius for the card's children. +If you need to adjust a Card's padding or border radius, it's preferable to do so using these variables rather than plain CSS properties. +This is because the variables are also used to calculate a proper radius for the Card's children, to prevent a mismatch between their relative proportions. ::: {{"demo": "CardVariables.js" , "hideToolbar": true}} ## Common examples -### Container responsive - -This demo uses a similar technique to [the flexbox holy albatross](https://heydonworks.com/article/the-flexbox-holy-albatross/) to stack the elements when the container's width is below a specified number. +### Instagram post -{{"demo": "ContainerResponsive.js" }} +{{"demo": "InstagramPost.js" }} ### Dribbble shot {{"demo": "DribbbleShot.js" }} -### Instagram post +### Resizable container -{{"demo": "InstagramPost.js" }} +This demo uses a technique similar to Heydon Pickering's [Flexbox Holy Albatross](https://heydonworks.com/article/the-flexbox-holy-albatross/) to create a stretchable Card that switches between vertical and horizontal alignment when its width passes a specified threshold—without using media queries to define breakpoints. +Try resizing it by clicking and dragging the bottom-right corner to see how it behaves. + +{{"demo": "ContainerResponsive.js" }} + +## Anatomy + +The Card component and all of its supplementary components are composed of a single root `
`: + +```html +
+
+ +
+
+ +
+
+ +
+
+``` + +:::info +Keep in mind that [Card Overflow](#expand-to-fill) must be the first or last child of a Card in order to function—accordingly, it will have a `data-first-child` or `data-last-child` attribute appended to its `
`. +::: diff --git a/docs/data/joy/components/checkbox/CheckboxUsage.js b/docs/data/joy/components/checkbox/CheckboxUsage.js index b0606fcd9b2fb8..2bf7a268f8b256 100644 --- a/docs/data/joy/components/checkbox/CheckboxUsage.js +++ b/docs/data/joy/components/checkbox/CheckboxUsage.js @@ -10,13 +10,13 @@ export default function CheckboxUsage() { { propName: 'variant', knob: 'select', - defaultValue: 'soft', + defaultValue: 'outlined', options: ['plain', 'outlined', 'soft', 'solid'], }, { propName: 'color', knob: 'color', - defaultValue: 'primary', + defaultValue: 'neutral', }, { propName: 'size', diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js index 14f23cbf27cdb0..90f81a4924205f 100644 --- a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js +++ b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js @@ -46,7 +46,7 @@ export default function ExampleButtonCheckbox() { label={item} checked={value.includes(item)} color="neutral" - variant="plain" + variant={value.includes(item) ? 'outlined' : 'plain'} onChange={(event) => { if (event.target.checked) { setValue((val) => [...val, item]); @@ -57,11 +57,8 @@ export default function ExampleButtonCheckbox() { slotProps={{ action: ({ checked }) => ({ sx: { - bgcolor: checked ? 'background.surface' : 'transparent', + bgcolor: checked ? 'background.level1' : 'transparent', boxShadow: checked ? 'sm' : 'none', - '&:hover': { - bgcolor: checked ? 'background.surface' : 'transparent', - }, }, }), }} diff --git a/docs/data/joy/components/input/BasicInput.js b/docs/data/joy/components/input/BasicInput.js new file mode 100644 index 00000000000000..7de6710986ced3 --- /dev/null +++ b/docs/data/joy/components/input/BasicInput.js @@ -0,0 +1,6 @@ +import * as React from 'react'; +import Input from '@mui/joy/Input'; + +export default function BasicInput() { + return ; +} diff --git a/docs/data/joy/components/input/BasicInput.tsx b/docs/data/joy/components/input/BasicInput.tsx new file mode 100644 index 00000000000000..7de6710986ced3 --- /dev/null +++ b/docs/data/joy/components/input/BasicInput.tsx @@ -0,0 +1,6 @@ +import * as React from 'react'; +import Input from '@mui/joy/Input'; + +export default function BasicInput() { + return ; +} diff --git a/docs/data/joy/components/input/BasicInput.tsx.preview b/docs/data/joy/components/input/BasicInput.tsx.preview new file mode 100644 index 00000000000000..c02c7c3762aebe --- /dev/null +++ b/docs/data/joy/components/input/BasicInput.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/joy/components/input/InputColors.js b/docs/data/joy/components/input/InputColors.js new file mode 100644 index 00000000000000..c13f97c4fa43b2 --- /dev/null +++ b/docs/data/joy/components/input/InputColors.js @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Input from '@mui/joy/Input'; + +export default function InputColors() { + return ( + + + + + + + ); +} diff --git a/docs/data/joy/components/input/InputColors.tsx b/docs/data/joy/components/input/InputColors.tsx new file mode 100644 index 00000000000000..c13f97c4fa43b2 --- /dev/null +++ b/docs/data/joy/components/input/InputColors.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Input from '@mui/joy/Input'; + +export default function InputColors() { + return ( + + + + + + + ); +} diff --git a/docs/data/joy/components/input/InputColors.tsx.preview b/docs/data/joy/components/input/InputColors.tsx.preview new file mode 100644 index 00000000000000..4ae6ad599226a9 --- /dev/null +++ b/docs/data/joy/components/input/InputColors.tsx.preview @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/docs/data/joy/components/input/InputDecorators.js b/docs/data/joy/components/input/InputDecorators.js new file mode 100644 index 00000000000000..48c7eb82123de3 --- /dev/null +++ b/docs/data/joy/components/input/InputDecorators.js @@ -0,0 +1,31 @@ +import * as React from 'react'; +import Divider from '@mui/joy/Divider'; +import Input from '@mui/joy/Input'; +import Select from '@mui/joy/Select'; +import Option from '@mui/joy/Option'; + +export default function InputDecorators() { + const [currency, setCurrency] = React.useState('dollar'); + return ( + + + + + } + sx={{ width: 300 }} + /> + ); +} diff --git a/docs/data/joy/components/input/InputDecorators.tsx b/docs/data/joy/components/input/InputDecorators.tsx new file mode 100644 index 00000000000000..64f1337e341098 --- /dev/null +++ b/docs/data/joy/components/input/InputDecorators.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import Divider from '@mui/joy/Divider'; +import Input from '@mui/joy/Input'; +import Select from '@mui/joy/Select'; +import Option from '@mui/joy/Option'; + +export default function InputDecorators() { + const [currency, setCurrency] = React.useState('dollar'); + return ( + + + + + } + sx={{ width: 300 }} + /> + ); +} diff --git a/docs/data/joy/components/text-field/TextFieldComposition.js b/docs/data/joy/components/input/InputField.js similarity index 89% rename from docs/data/joy/components/text-field/TextFieldComposition.js rename to docs/data/joy/components/input/InputField.js index 112e731c471acb..563cc7b2f3db53 100644 --- a/docs/data/joy/components/text-field/TextFieldComposition.js +++ b/docs/data/joy/components/input/InputField.js @@ -4,7 +4,7 @@ import FormLabel from '@mui/joy/FormLabel'; import FormHelperText from '@mui/joy/FormHelperText'; import Input from '@mui/joy/Input'; -export default function TextFieldComposition() { +export default function InputField() { return ( Label diff --git a/docs/data/joy/components/text-field/TextFieldComposition.tsx b/docs/data/joy/components/input/InputField.tsx similarity index 89% rename from docs/data/joy/components/text-field/TextFieldComposition.tsx rename to docs/data/joy/components/input/InputField.tsx index 112e731c471acb..563cc7b2f3db53 100644 --- a/docs/data/joy/components/text-field/TextFieldComposition.tsx +++ b/docs/data/joy/components/input/InputField.tsx @@ -4,7 +4,7 @@ import FormLabel from '@mui/joy/FormLabel'; import FormHelperText from '@mui/joy/FormHelperText'; import Input from '@mui/joy/Input'; -export default function TextFieldComposition() { +export default function InputField() { return ( Label diff --git a/docs/data/joy/components/text-field/TextFieldComposition.tsx.preview b/docs/data/joy/components/input/InputField.tsx.preview similarity index 100% rename from docs/data/joy/components/text-field/TextFieldComposition.tsx.preview rename to docs/data/joy/components/input/InputField.tsx.preview diff --git a/docs/data/joy/components/input/InputFormProps.js b/docs/data/joy/components/input/InputFormProps.js new file mode 100644 index 00000000000000..a198681d470d5c --- /dev/null +++ b/docs/data/joy/components/input/InputFormProps.js @@ -0,0 +1,33 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Input from '@mui/joy/Input'; + +export default function InputFormProps() { + return ( + +
{ + event.preventDefault(); + }} + > + + + +
+
+ ); +} diff --git a/docs/data/joy/components/input/InputFormProps.tsx b/docs/data/joy/components/input/InputFormProps.tsx new file mode 100644 index 00000000000000..a198681d470d5c --- /dev/null +++ b/docs/data/joy/components/input/InputFormProps.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Input from '@mui/joy/Input'; + +export default function InputFormProps() { + return ( + +
{ + event.preventDefault(); + }} + > + + + +
+
+ ); +} diff --git a/docs/data/joy/components/input/InputFormProps.tsx.preview b/docs/data/joy/components/input/InputFormProps.tsx.preview new file mode 100644 index 00000000000000..b56827f175d39d --- /dev/null +++ b/docs/data/joy/components/input/InputFormProps.tsx.preview @@ -0,0 +1,13 @@ +
{ + event.preventDefault(); + }} +> + + + +
\ No newline at end of file diff --git a/docs/data/joy/components/input/InputSizes.js b/docs/data/joy/components/input/InputSizes.js new file mode 100644 index 00000000000000..018fa03368ffd7 --- /dev/null +++ b/docs/data/joy/components/input/InputSizes.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Input from '@mui/joy/Input'; +import Stack from '@mui/joy/Stack'; + +export default function InputSizes() { + return ( + + + + + + ); +} diff --git a/docs/data/joy/components/input/InputSizes.tsx b/docs/data/joy/components/input/InputSizes.tsx new file mode 100644 index 00000000000000..018fa03368ffd7 --- /dev/null +++ b/docs/data/joy/components/input/InputSizes.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Input from '@mui/joy/Input'; +import Stack from '@mui/joy/Stack'; + +export default function InputSizes() { + return ( + + + + + + ); +} diff --git a/docs/data/joy/components/input/InputSizes.tsx.preview b/docs/data/joy/components/input/InputSizes.tsx.preview new file mode 100644 index 00000000000000..7dfbc51f0b5cfa --- /dev/null +++ b/docs/data/joy/components/input/InputSizes.tsx.preview @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/docs/data/joy/components/input/InputSlotProps.js b/docs/data/joy/components/input/InputSlotProps.js new file mode 100644 index 00000000000000..afe4da94c17298 --- /dev/null +++ b/docs/data/joy/components/input/InputSlotProps.js @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Input from '@mui/joy/Input'; + +export default function InputSlotProps() { + return ( + + ); +} diff --git a/docs/data/joy/components/input/InputSlotProps.tsx b/docs/data/joy/components/input/InputSlotProps.tsx new file mode 100644 index 00000000000000..afe4da94c17298 --- /dev/null +++ b/docs/data/joy/components/input/InputSlotProps.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Input from '@mui/joy/Input'; + +export default function InputSlotProps() { + return ( + + ); +} diff --git a/docs/data/joy/components/input/InputSlotProps.tsx.preview b/docs/data/joy/components/input/InputSlotProps.tsx.preview new file mode 100644 index 00000000000000..074cffa80faeb2 --- /dev/null +++ b/docs/data/joy/components/input/InputSlotProps.tsx.preview @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/data/joy/components/input/InputSubscription.js b/docs/data/joy/components/input/InputSubscription.js new file mode 100644 index 00000000000000..5280acf6e6d2c5 --- /dev/null +++ b/docs/data/joy/components/input/InputSubscription.js @@ -0,0 +1,77 @@ +import * as React from 'react'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import FormHelperText from '@mui/joy/FormHelperText'; +import Input from '@mui/joy/Input'; +import Button from '@mui/joy/Button'; + +export default function InputSubscription() { + const [data, setData] = React.useState({ + email: '', + status: 'initial', + }); + + const handleSubmit = (event) => { + event.preventDefault(); + setData((current) => ({ ...current, status: 'loading' })); + try { + // Replace timeout with real backend operation + setTimeout(() => { + setData({ email: '', status: 'sent' }); + }, 1500); + } catch (error) { + setData((current) => ({ ...current, status: 'failure' })); + } + }; + + return ( +
+ + ({ + '--FormLabel-color': theme.vars.palette.primary.plainColor, + })} + > + MUI Newsletter + + + setData({ email: event.target.value, status: 'initial' }) + } + error={data.status === 'failure'} + endDecorator={ + + } + /> + {data.status === 'failure' && ( + ({ color: theme.vars.palette.danger[400] })} + > + Oops! something went wrong, please try again later. + + )} + + {data.status === 'sent' && ( + ({ color: theme.vars.palette.primary[400] })} + > + You are all set! + + )} + +
+ ); +} diff --git a/docs/data/joy/components/input/InputSubscription.preview b/docs/data/joy/components/input/InputSubscription.preview new file mode 100644 index 00000000000000..ac2260335145a2 --- /dev/null +++ b/docs/data/joy/components/input/InputSubscription.preview @@ -0,0 +1,8 @@ + + Subscribe + + } +/> \ No newline at end of file diff --git a/docs/data/joy/components/input/InputSubscription.tsx b/docs/data/joy/components/input/InputSubscription.tsx new file mode 100644 index 00000000000000..f07edccb1a352d --- /dev/null +++ b/docs/data/joy/components/input/InputSubscription.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import FormHelperText from '@mui/joy/FormHelperText'; +import Input from '@mui/joy/Input'; +import Button from '@mui/joy/Button'; + +export default function InputSubscription() { + const [data, setData] = React.useState<{ + email: string; + status: 'initial' | 'loading' | 'failure' | 'sent'; + }>({ + email: '', + status: 'initial', + }); + + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + setData((current) => ({ ...current, status: 'loading' })); + try { + // Replace timeout with real backend operation + setTimeout(() => { + setData({ email: '', status: 'sent' }); + }, 1500); + } catch (error) { + setData((current) => ({ ...current, status: 'failure' })); + } + }; + + return ( +
+ + ({ + '--FormLabel-color': theme.vars.palette.primary.plainColor, + })} + > + MUI Newsletter + + + setData({ email: event.target.value, status: 'initial' }) + } + error={data.status === 'failure'} + endDecorator={ + + } + /> + {data.status === 'failure' && ( + ({ color: theme.vars.palette.danger[400] })} + > + Oops! something went wrong, please try again later. + + )} + {data.status === 'sent' && ( + ({ color: theme.vars.palette.primary[400] })} + > + You are all set! + + )} + +
+ ); +} diff --git a/docs/data/joy/components/text-field/TextFieldUsage.js b/docs/data/joy/components/input/InputUsage.js similarity index 66% rename from docs/data/joy/components/text-field/TextFieldUsage.js rename to docs/data/joy/components/input/InputUsage.js index bef0dc3ef343ac..766d20007f102c 100644 --- a/docs/data/joy/components/text-field/TextFieldUsage.js +++ b/docs/data/joy/components/input/InputUsage.js @@ -1,12 +1,11 @@ import * as React from 'react'; import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; +import Input from '@mui/joy/Input'; -export default function TextFieldUsage() { +export default function InputUsage() { return ( ( - - - - )} + renderDemo={(props) => } /> ); } diff --git a/docs/data/joy/components/input/InputValidation.js b/docs/data/joy/components/input/InputValidation.js new file mode 100644 index 00000000000000..daec7adf96e884 --- /dev/null +++ b/docs/data/joy/components/input/InputValidation.js @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Input from '@mui/joy/Input'; + +export default function InputValidation() { + return ( + + + + ); +} diff --git a/docs/data/joy/components/input/InputValidation.tsx b/docs/data/joy/components/input/InputValidation.tsx new file mode 100644 index 00000000000000..daec7adf96e884 --- /dev/null +++ b/docs/data/joy/components/input/InputValidation.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Input from '@mui/joy/Input'; + +export default function InputValidation() { + return ( + + + + ); +} diff --git a/docs/data/joy/components/input/InputValidation.tsx.preview b/docs/data/joy/components/input/InputValidation.tsx.preview new file mode 100644 index 00000000000000..8b8c0b28d7458d --- /dev/null +++ b/docs/data/joy/components/input/InputValidation.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/joy/components/input/InputVariables.js b/docs/data/joy/components/input/InputVariables.js new file mode 100644 index 00000000000000..07a23b039ac1c9 --- /dev/null +++ b/docs/data/joy/components/input/InputVariables.js @@ -0,0 +1,69 @@ +import * as React from 'react'; +import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo'; +import Box from '@mui/joy/Box'; +import Input from '@mui/joy/Input'; +import Button from '@mui/joy/Button'; +import MailIcon from '@mui/icons-material/Mail'; + +export default function InputVariables() { + return ( + `} + endDecorator={}${formattedSx ? `${formattedSx}>` : '\n>'}`} + data={[ + { + var: '--Input-radius', + defaultValue: '8px', + }, + { + var: '--Input-gap', + defaultValue: '8px', + }, + { + var: '--Input-placeholderOpacity', + defaultValue: 0.5, + inputAttributes: { + min: 0.1, + max: 1, + step: 0.1, + }, + }, + { + var: '--Input-focusedThickness', + defaultValue: '2px', + }, + { + var: '--Input-minHeight', + defaultValue: '40px', + }, + { + var: '--Input-paddingInline', + defaultValue: '12px', + }, + { + var: '--Input-decorator-childHeight', + defaultValue: '32px', + }, + ]} + renderDemo={(sx) => ( + + } + endDecorator={} + placeholder="Type in here…" + sx={sx} + /> + + )} + /> + ); +} diff --git a/docs/data/joy/components/input/InputVariants.js b/docs/data/joy/components/input/InputVariants.js new file mode 100644 index 00000000000000..9adc36009ed771 --- /dev/null +++ b/docs/data/joy/components/input/InputVariants.js @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Input from '@mui/joy/Input'; + +export default function InputVariants() { + return ( + + + + + + + ); +} diff --git a/docs/data/joy/components/input/InputVariants.tsx b/docs/data/joy/components/input/InputVariants.tsx new file mode 100644 index 00000000000000..9adc36009ed771 --- /dev/null +++ b/docs/data/joy/components/input/InputVariants.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; +import Input from '@mui/joy/Input'; + +export default function InputVariants() { + return ( + + + + + + + ); +} diff --git a/docs/data/joy/components/input/InputVariants.tsx.preview b/docs/data/joy/components/input/InputVariants.tsx.preview new file mode 100644 index 00000000000000..d4e040e53497f2 --- /dev/null +++ b/docs/data/joy/components/input/InputVariants.tsx.preview @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/docs/data/joy/components/input/input.md b/docs/data/joy/components/input/input.md new file mode 100644 index 00000000000000..88b3133b5a8992 --- /dev/null +++ b/docs/data/joy/components/input/input.md @@ -0,0 +1,130 @@ +--- +product: joy-ui +title: React Input component +unstyled: /base/react-input/ +--- + +# Input + +

An input is a UI element that accepts text data from the user.

+ +## Introduction + +The Input component replaces the native HTML `` tag, and offers expanded customization and accessibility features. + +{{"demo": "InputUsage.js", "hideToolbar": true, "bg": "gradient"}} + +{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} + +## Basics + +```jsx +import Input from '@mui/joy/Input'; +``` + +{{"demo": "BasicInput.js"}} + +## Customization + +### Variants + +The input component supports the four global variants: solid (default), soft, outlined, and plain. + +{{"demo": "InputVariants.js"}} + +:::info +To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants). +::: + +### Sizes + +The input component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`. + +{{"demo": "InputSizes.js"}} + +:::info +To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes). +::: + +### Colors + +Toggle the palette that's being used to color the by text field by using the `color` prop. + +{{"demo": "InputColors.js"}} + +### Form props + +Standard form attributes are supported e.g. `required`, `disabled`, etc. + +{{"demo": "InputFormProps.js"}} + +### Validation + +To toggle the error state, use the `error` prop. + +{{"demo": "InputValidation.js"}} + +Note that using the `color` prop with danger as value gets the same result: + +```js + +``` + +### Decorators + +Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the input. + +It's usually more common to see input components using decorators at the top and bottom. + +{{"demo": "InputDecorators.js"}} + +## Inner HTML input + +To pass any props to the inner HTML ``, use `slotProps={{ input: { ...props } }}`. + +{{"demo": "InputSlotProps.js"}} + +## Common examples + +### Newsletter Subscription + +{{"demo": "InputSubscription.js"}} + +## CSS variables + +Play around with all the CSS variables available in the input component to see how the design changes. + +You can use those to customize the component on both the `sx` prop and the theme. + +{{"demo": "InputVariables.js", "hideToolbar": true}} + +## Accessibility + +In order for the input to be accessible, **it should be linked to a label**. + +The `FormControl` automatically generates a unique id that links the input with the `FormLabel` and `FormHelperText` components: + +{{"demo": "InputField.js"}} + +Alternatively, you can do it manually by targeting the input slot: + +```jsx + + +``` + +## Anatomy + +The Input component is composed of a root `
` with an input `` nested inside. + +```html +
+ +
+``` diff --git a/docs/data/joy/components/list/list.md b/docs/data/joy/components/list/list.md index 29f490031bddb4..ce8dc25d82aa6c 100644 --- a/docs/data/joy/components/list/list.md +++ b/docs/data/joy/components/list/list.md @@ -170,6 +170,10 @@ The `ListItemButton` and the secondary action render as siblings, that way, the Use the `selected` prop to signal whether a `ListItemButton` is selected or not. It applies `color="primary"` and a few extra styles (e.g. font weight) to visually communicate the selected state. +:::info +A selected `ListItemButton` does not apply `:hover` and `:active` global variant styles. +::: + {{"demo": "SelectedList.js"}} ## CSS variables diff --git a/docs/data/joy/components/modal/BasicModalDialog.js b/docs/data/joy/components/modal/BasicModalDialog.js index cf7d007063ecf7..3d92f05c44ed1d 100644 --- a/docs/data/joy/components/modal/BasicModalDialog.js +++ b/docs/data/joy/components/modal/BasicModalDialog.js @@ -1,6 +1,8 @@ import * as React from 'react'; import Button from '@mui/joy/Button'; -import TextField from '@mui/joy/TextField'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Input from '@mui/joy/Input'; import Modal from '@mui/joy/Modal'; import ModalDialog from '@mui/joy/ModalDialog'; import Stack from '@mui/joy/Stack'; @@ -54,8 +56,14 @@ export default function BasicModalDialog() { }} > - - + + Name + + + + Description + + diff --git a/docs/data/joy/components/tabs/TabsUnderlineExample.js b/docs/data/joy/components/tabs/TabsUnderlineExample.js new file mode 100644 index 00000000000000..fc54348b068310 --- /dev/null +++ b/docs/data/joy/components/tabs/TabsUnderlineExample.js @@ -0,0 +1,38 @@ +import * as React from 'react'; +import Tabs from '@mui/joy/Tabs'; +import TabList from '@mui/joy/TabList'; +import Tab, { tabClasses } from '@mui/joy/Tab'; + +export default function TabsUnderlineExample() { + return ( + + + Feature + Specifications + Review + Support + + + ); +} diff --git a/docs/data/joy/components/tabs/TabsUnderlineExample.tsx b/docs/data/joy/components/tabs/TabsUnderlineExample.tsx new file mode 100644 index 00000000000000..fc54348b068310 --- /dev/null +++ b/docs/data/joy/components/tabs/TabsUnderlineExample.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import Tabs from '@mui/joy/Tabs'; +import TabList from '@mui/joy/TabList'; +import Tab, { tabClasses } from '@mui/joy/Tab'; + +export default function TabsUnderlineExample() { + return ( + + + Feature + Specifications + Review + Support + + + ); +} diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md index aa7ff5d3ba6566..f63627fba6c17a 100644 --- a/docs/data/joy/components/tabs/tabs.md +++ b/docs/data/joy/components/tabs/tabs.md @@ -56,6 +56,10 @@ To target the initially selected tab, specify the `value` prop to the `TabPanel` Both `TabList` and `Tab` accept [global variant](/joy-ui/main-features/global-variants/) values, so you can mix and match to get the desired result. +:::info +A selected `Tab` does not apply `:hover` and `:active` global variant styles. +::: + {{"demo": "TabsVariants.js"}} :::info @@ -116,6 +120,10 @@ You can use those to customize the component on both the `sx` prop and the theme ## Common examples +### Underline tabs + +{{"demo": "TabsUnderlineExample.js"}} + ### Pricing tabs {{"demo": "TabsPricingExample.js"}} diff --git a/docs/data/joy/components/text-field/TextFieldColors.js b/docs/data/joy/components/text-field/TextFieldColors.js deleted file mode 100644 index c197ceb1828d21..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldColors.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldColors() { - return ( - - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldColors.tsx b/docs/data/joy/components/text-field/TextFieldColors.tsx deleted file mode 100644 index c197ceb1828d21..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldColors.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldColors() { - return ( - - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldDecorators.js b/docs/data/joy/components/text-field/TextFieldDecorators.js deleted file mode 100644 index 039e621a93d0e1..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldDecorators.js +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/joy/Stack'; -import TextField from '@mui/joy/TextField'; -import Chip from '@mui/joy/Chip'; -import PersonRoundedIcon from '@mui/icons-material/PersonRounded'; -import EditIcon from '@mui/icons-material/Edit'; -import CheckIcon from '@mui/icons-material/Check'; - -export default function TextFieldDecorator() { - return ( - - } - endDecorator={ - - New stuff - - } - /> - } - endDecorator={} - /> - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldDecorators.tsx b/docs/data/joy/components/text-field/TextFieldDecorators.tsx deleted file mode 100644 index 039e621a93d0e1..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldDecorators.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/joy/Stack'; -import TextField from '@mui/joy/TextField'; -import Chip from '@mui/joy/Chip'; -import PersonRoundedIcon from '@mui/icons-material/PersonRounded'; -import EditIcon from '@mui/icons-material/Edit'; -import CheckIcon from '@mui/icons-material/Check'; - -export default function TextFieldDecorator() { - return ( - - } - endDecorator={ - - New stuff - - } - /> - } - endDecorator={} - /> - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFormProps.js b/docs/data/joy/components/text-field/TextFieldFormProps.js deleted file mode 100644 index 234fbe1c7e5b01..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFormProps.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldFormProps() { - return ( - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFormProps.tsx b/docs/data/joy/components/text-field/TextFieldFormProps.tsx deleted file mode 100644 index 234fbe1c7e5b01..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFormProps.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldFormProps() { - return ( - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFormProps.tsx.preview b/docs/data/joy/components/text-field/TextFieldFormProps.tsx.preview deleted file mode 100644 index 4d65b24104290e..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFormProps.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/TextFieldFullwidth.js b/docs/data/joy/components/text-field/TextFieldFullwidth.js deleted file mode 100644 index d3b5e22a5cfbe9..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFullwidth.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldFullWidth() { - return ( - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFullwidth.tsx b/docs/data/joy/components/text-field/TextFieldFullwidth.tsx deleted file mode 100644 index d3b5e22a5cfbe9..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFullwidth.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldFullWidth() { - return ( - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldFullwidth.tsx.preview b/docs/data/joy/components/text-field/TextFieldFullwidth.tsx.preview deleted file mode 100644 index d2406d8341f0f5..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldFullwidth.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/TextFieldSizes.js b/docs/data/joy/components/text-field/TextFieldSizes.js deleted file mode 100644 index 4a13aeb7435182..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldSizes.js +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldSizes() { - return ( - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldSizes.tsx b/docs/data/joy/components/text-field/TextFieldSizes.tsx deleted file mode 100644 index 4a13aeb7435182..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldSizes.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldSizes() { - return ( - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldSizes.tsx.preview b/docs/data/joy/components/text-field/TextFieldSizes.tsx.preview deleted file mode 100644 index bb1dfc9e32264c..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldSizes.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/TextFieldValidation.js b/docs/data/joy/components/text-field/TextFieldValidation.js deleted file mode 100644 index bd832ed2a13d12..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldValidation.js +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldValidator() { - return ( - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldValidation.tsx b/docs/data/joy/components/text-field/TextFieldValidation.tsx deleted file mode 100644 index bd832ed2a13d12..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldValidation.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldValidator() { - return ( - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldValidation.tsx.preview b/docs/data/joy/components/text-field/TextFieldValidation.tsx.preview deleted file mode 100644 index 449a117d4cdd9a..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldValidation.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/TextFieldVariants.js b/docs/data/joy/components/text-field/TextFieldVariants.js deleted file mode 100644 index 0a62259e7de2fb..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldVariants.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldVariants() { - return ( - - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldVariants.tsx b/docs/data/joy/components/text-field/TextFieldVariants.tsx deleted file mode 100644 index 0a62259e7de2fb..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldVariants.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import TextField from '@mui/joy/TextField'; - -export default function TextFieldVariants() { - return ( - - - - - - - ); -} diff --git a/docs/data/joy/components/text-field/TextFieldVariants.tsx.preview b/docs/data/joy/components/text-field/TextFieldVariants.tsx.preview deleted file mode 100644 index e9a252c68f4f13..00000000000000 --- a/docs/data/joy/components/text-field/TextFieldVariants.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/joy/components/text-field/text-field-pt.md b/docs/data/joy/components/text-field/text-field-pt.md deleted file mode 100644 index e2fc3ed7ca2ffb..00000000000000 --- a/docs/data/joy/components/text-field/text-field-pt.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -product: joy-ui -title: React Text field component -githubLabel: 'component: text field' -unstyled: /base/react-input/ ---- - -# Text field - -

Text fields let users enter and edit text.

- -## Introduction - -Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. - -{{"demo": "TextFieldUsage.js"}} - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Component - -After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: - -```jsx -import TextField from '@mui/joy/TextField'; - -export default function MyApp() { - return ; -} -``` - -### Variants - -The text field component supports the four global variants: solid (default), soft, outlined, and plain. - -{{"demo": "TextFieldVariants.js"}} - -### Sizes - -The text field component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`. - -{{"demo": "TextFieldSizes.js"}} - -### Colors - -Toggle the palette that's being used to color the by text field by using the `color` prop. - -{{"demo": "TextFieldColors.js"}} - -### Form props - -Standard form attributes are supported e.g. `required`, `disabled`, `type`, etc. as well as a `helperText` which is used to give context about a field's input, such as how the input will be used. - -{{"demo": "TextFieldFormProps.js"}} - -### Validation - -To toggle the error state, use the `error` prop. And, to provide feedback about the error to the user, use the `helperText` prop. - -{{"demo": "TextFieldValidation.js"}} - -### Input decorators - -Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the text field. - -{{"demo": "TextFieldDecorators.js"}} - -### Full width - -To make the text field take up the full width of its container, use the `fullWidth` prop. - -{{"demo": "TextFieldFullwidth.js"}} diff --git a/docs/data/joy/components/text-field/text-field-zh.md b/docs/data/joy/components/text-field/text-field-zh.md deleted file mode 100644 index e2fc3ed7ca2ffb..00000000000000 --- a/docs/data/joy/components/text-field/text-field-zh.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -product: joy-ui -title: React Text field component -githubLabel: 'component: text field' -unstyled: /base/react-input/ ---- - -# Text field - -

Text fields let users enter and edit text.

- -## Introduction - -Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. - -{{"demo": "TextFieldUsage.js"}} - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Component - -After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: - -```jsx -import TextField from '@mui/joy/TextField'; - -export default function MyApp() { - return ; -} -``` - -### Variants - -The text field component supports the four global variants: solid (default), soft, outlined, and plain. - -{{"demo": "TextFieldVariants.js"}} - -### Sizes - -The text field component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`. - -{{"demo": "TextFieldSizes.js"}} - -### Colors - -Toggle the palette that's being used to color the by text field by using the `color` prop. - -{{"demo": "TextFieldColors.js"}} - -### Form props - -Standard form attributes are supported e.g. `required`, `disabled`, `type`, etc. as well as a `helperText` which is used to give context about a field's input, such as how the input will be used. - -{{"demo": "TextFieldFormProps.js"}} - -### Validation - -To toggle the error state, use the `error` prop. And, to provide feedback about the error to the user, use the `helperText` prop. - -{{"demo": "TextFieldValidation.js"}} - -### Input decorators - -Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the text field. - -{{"demo": "TextFieldDecorators.js"}} - -### Full width - -To make the text field take up the full width of its container, use the `fullWidth` prop. - -{{"demo": "TextFieldFullwidth.js"}} diff --git a/docs/data/joy/components/text-field/text-field.md b/docs/data/joy/components/text-field/text-field.md index 5f7d8c11378b70..c3b2a2ac6c6ad8 100644 --- a/docs/data/joy/components/text-field/text-field.md +++ b/docs/data/joy/components/text-field/text-field.md @@ -2,80 +2,78 @@ product: joy-ui title: React Text Field component githubLabel: 'component: text field' -unstyled: /base/react-input/ --- # Text Field

Text fields let users enter and edit text.

-## Introduction +:::warning +**TextField** component has been removed in [`@mui/joy@5.0.0-alpha.63`](https://github.com/mui/material-ui/releases/tag/v5.11.5). We recommend using [`Input`](/joy-ui/react-input/), `FormControl` and `FormLabel` instead. -Text fields allow users to enter text into a UI. -They typically appear in forms and dialogs. +To learn more why it has been removed, visit the [RFC](https://github.com/mui/material-ui/issues/34176). +::: -{{"demo": "TextFieldUsage.js", "hideToolbar": true, "bg": "gradient"}} +## Migration -{{"component": "modules/components/ComponentLinkHeader.js"}} +### Codemod -## Component +Run this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#joy-text-field-to-input) in your project's terminal: -After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: - -```jsx -import TextField from '@mui/joy/TextField'; - -export default function MyApp() { - return ; -} +```sh +npx @mui/codemod v5.0.0/joy-text-field-to-input ``` -### Composition - -`TextField` is composed of smallar components-`FormControl`, `FormLabel`, `FormerHelperText`, and `Input`. -You can either use each one of them separately or plainly use the `TextField` itself. - -{{"demo": "TextFieldComposition.js"}} - -### Variants - -The text field component supports the four global variants: `solid` (default), `soft`, `outlined`, and `plain`. - -{{"demo": "TextFieldVariants.js"}} - -### Sizes - -The text field component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`. - -{{"demo": "TextFieldSizes.js"}} - -### Colors - -Toggle the palette that's being used to color the by text field by using the `color` prop. - -{{"demo": "TextFieldColors.js"}} - -### Form props - -Standard form attributes are supported e.g. `required`, `disabled`, `type`, etc. as well as a `helperText` which is used to give context about a field's input, such as how the input will be used. - -{{"demo": "TextFieldFormProps.js"}} - -### Validation - -To toggle the error state, use the `error` prop. -And, to provide feedback about the error to the user, use the `helperText` prop. - -{{"demo": "TextFieldValidation.js"}} - -### Input decorators - -Use the `startDecorator` and/or `endDecorator` props to add supporting icons or elements to the text field. - -{{"demo": "TextFieldDecorators.js"}} - -### Full width - -To make the text field take up the full width of its container, use the `fullWidth` prop. - -{{"demo": "TextFieldFullwidth.js"}} +It will go through all files under `` and replace `` with the `` composition. + +### Manual + +Replace the `TextField` with composition: + +```diff +-import TextField from '@mui/joy/TextField'; ++import FormControl from '@mui/joy/FormControl'; ++import FormLabel from '@mui/joy/FormLabel'; ++import FormHelperText from '@mui/joy/FormHelperText'; ++import Input from '@mui/joy/Input'; + +- ++ ++ ++ Label ++ ++ ++ ++ Help! ++ ++ +``` diff --git a/docs/data/joy/components/typography/typography.md b/docs/data/joy/components/typography/typography.md index a9725e20ea6783..1936cc9d95900f 100644 --- a/docs/data/joy/components/typography/typography.md +++ b/docs/data/joy/components/typography/typography.md @@ -27,7 +27,7 @@ export default function MyApp() { ### System props -As a CSS utility component, `Typography` supports every [`system`](/system/properties/) properties. +As a CSS utility component, `Typography` supports every [`system`](/system/properties/) property. ```jsx diff --git a/docs/data/joy/customization/approaches/approaches.md b/docs/data/joy/customization/approaches/approaches.md index ed79a29b517c6c..b8d407be11708b 100644 --- a/docs/data/joy/customization/approaches/approaches.md +++ b/docs/data/joy/customization/approaches/approaches.md @@ -80,10 +80,12 @@ const theme = extendTheme({ components: { // The component identifier always start with `Joy${ComponentName}`. JoyButton: { - styleOverrides: ({ theme }) => ({ - // theme.vars.* return the CSS variables. - fontSize: theme.vars.fontSize.lg, // 'var(--joy-fontSize-lg)' - }), + styleOverrides: { + root: ({ theme }) => { + // theme.vars.* return the CSS variables. + fontSize: theme.vars.fontSize.lg, // 'var(--joy-fontSize-lg)' + }, + }, }, }, }); diff --git a/docs/data/joy/getting-started/tutorial/LoginFinal.js b/docs/data/joy/getting-started/tutorial/LoginFinal.js index ebb448485e35c4..3a656d0da6f631 100644 --- a/docs/data/joy/getting-started/tutorial/LoginFinal.js +++ b/docs/data/joy/getting-started/tutorial/LoginFinal.js @@ -2,7 +2,9 @@ import * as React from 'react'; import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; import Sheet from '@mui/joy/Sheet'; import Typography from '@mui/joy/Typography'; -import TextField from '@mui/joy/TextField'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Input from '@mui/joy/Input'; import Button from '@mui/joy/Button'; import Link from '@mui/joy/Link'; @@ -57,20 +59,25 @@ export default function App() { Sign in to continue.
- - + + Email + + + + Password + + + Sign up} diff --git a/docs/data/joy/getting-started/tutorial/tutorial-pt.md b/docs/data/joy/getting-started/tutorial/tutorial-pt.md index 3d617a69f43ff1..faeb189c137be3 100644 --- a/docs/data/joy/getting-started/tutorial/tutorial-pt.md +++ b/docs/data/joy/getting-started/tutorial/tutorial-pt.md @@ -88,13 +88,15 @@ import Typography from '@mui/joy/Typography'; ; ``` -### 4. Using `TextField` to create user name and password inputs +### 4. Using `FormControl`, `FormLabel` and `Input` to create user name and password inputs -The `TextField` component is made of the `FormLabel`, `Input` and `FormHelperText` components. +The `FormControl`, `FormLabel` and `Input` components can be used together to provide you with a sophisticated field for user input. ```jsx // ...other imports -import TextField from '@mui/joy/TextField'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Input from '@mui/joy/Input'; ...typography - - + + Email + + + + Password + + ; ``` diff --git a/docs/data/joy/getting-started/tutorial/tutorial-zh.md b/docs/data/joy/getting-started/tutorial/tutorial-zh.md index 3d617a69f43ff1..faeb189c137be3 100644 --- a/docs/data/joy/getting-started/tutorial/tutorial-zh.md +++ b/docs/data/joy/getting-started/tutorial/tutorial-zh.md @@ -88,13 +88,15 @@ import Typography from '@mui/joy/Typography'; ; ``` -### 4. Using `TextField` to create user name and password inputs +### 4. Using `FormControl`, `FormLabel` and `Input` to create user name and password inputs -The `TextField` component is made of the `FormLabel`, `Input` and `FormHelperText` components. +The `FormControl`, `FormLabel` and `Input` components can be used together to provide you with a sophisticated field for user input. ```jsx // ...other imports -import TextField from '@mui/joy/TextField'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Input from '@mui/joy/Input'; ...typography - - + + Email + + + + Password + + ; ``` diff --git a/docs/data/joy/getting-started/tutorial/tutorial.md b/docs/data/joy/getting-started/tutorial/tutorial.md index 72649be3d90539..1cf167cb0a5181 100644 --- a/docs/data/joy/getting-started/tutorial/tutorial.md +++ b/docs/data/joy/getting-started/tutorial/tutorial.md @@ -118,33 +118,38 @@ Try changing the values for the `level` and `component` props to see how they af (Note that while `level` only accepts the 13 values listed above, you can pass any HTML tag to `component`, as well as custom React components.) ::: -## Add Text Field for user inputs +## Add text field for user inputs -The [Text Field](/joy-ui/react-text-field/) component bundles together the Form Control, Form Label, Input, and Form Helper Text components to provide you with a sophisticated field for user input. +The Form Control, Form Label, and Input components can be used together to provide you with a sophisticated field for user input. -Add an import for Text Field with the rest of your imports: +Add imports for Form Control, Form Label, and Input with the rest of your imports: ```jsx -import TextField from '@mui/joy/TextField'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Input from '@mui/joy/Input'; ``` -Insert these two Text Fields below the `
` from the previous step, inside the Sheet: +Insert these two text fields below the `
` from the previous step, inside the Sheet: ```jsx - - + + Email + + + + Password + + ``` ## Import Button and Link for user actions @@ -158,7 +163,7 @@ import Button from '@mui/joy/Button'; import Link from '@mui/joy/Link'; ``` -Add the following Button, Typography, and Link components after the Text Fields from the previous step, still nested inside the Sheet. +Add the following Button, Typography, and Link components after the text fields from the previous step, still nested inside the Sheet. Notice that the Link is appended to the Typography inside of [the `endDecorator` prop](/joy-ui/react-typography/#decorators): ```jsx @@ -238,7 +243,6 @@ Here's a recap of the components used: - [Typography](/joy-ui/react-typography/) - [Button](/joy-ui/react-button/) - [Link](/joy-ui/react-link/) -- [Text Field](/joy-ui/react-text-field/) Here are some of the major features introduced: diff --git a/docs/data/joy/guides/using-icon-libraries/using-icon-libraries.md b/docs/data/joy/guides/using-icon-libraries/using-icon-libraries.md index e475fd18a5e892..9b01caf7f7bc18 100644 --- a/docs/data/joy/guides/using-icon-libraries/using-icon-libraries.md +++ b/docs/data/joy/guides/using-icon-libraries/using-icon-libraries.md @@ -2,7 +2,7 @@

Learn how to use your favorite icon library with Joy UI.

-## MUI Material Icons +## Material UI Icons [@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material) includes the 2,100+ official [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) converted to [SVG Icon](/material-ui/api/svg-icon/) components. @@ -56,7 +56,7 @@ Here is an example of how you can do it, if you use [`webpack`](https://webpack. //... + resolve: { + alias: { -+ '@mui/material': '@mui/joy' ++ '@mui/material': '@mui/joy', + }, + }, }; @@ -72,7 +72,7 @@ If you use TypeScript, you will need to update the TSConfig. + "paths": { + "@mui/material": ["./node_modules/@mui/joy"] + } - }, + } } ``` @@ -125,10 +125,9 @@ Joy UI components can control those variables based on their size and variant to Here is a collection of well-known icon libraries that you can use with Joy UI. -### React Icons +### react-icons -- [Browse icons](https://react-icons.github.io/react-icons/search) -- [Installation](https://react-icons.github.io/react-icons) +- [Installation](https://react-icons.github.io/react-icons/)