diff --git a/.circleci/config.yml b/.circleci/config.yml index 9673cd25b6cd6f..c33615ccb38a71 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,6 +1,6 @@ version: 2.1 orbs: - aws-cli: circleci/aws-cli@4.0 + aws-cli: circleci/aws-cli@4.1 aws-s3: circleci/aws-s3@4.0 parameters: @@ -228,7 +228,7 @@ jobs: name: 'Write "use client" directive' command: yarn rsc:build - run: - name: '`yarn rsc:build` changes detected, "use client" missing from exports' + name: '`yarn rsc:build` changes committed?' command: git add -A && git diff --exit-code --staged - run: name: Generate the documentation @@ -689,9 +689,9 @@ jobs: value: << pipeline.git.branch >> steps: - aws-cli/setup: - aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS - region: AWS_REGION_ARTIFACTS - aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS + aws_access_key_id: $AWS_ACCESS_KEY_ID_ARTIFACTS + region: $AWS_REGION_ARTIFACTS + aws_secret_access_key: $AWS_SECRET_ACCESS_KEY_ARTIFACTS # Upload distributables to S3 - aws-s3/copy: from: mui-material.tgz @@ -718,9 +718,9 @@ jobs: value: << pipeline.git.branch >> steps: - aws-cli/setup: - aws_access_key_id: AWS_ACCESS_KEY_ID_ARTIFACTS - region: AWS_REGION_ARTIFACTS - aws_secret_access_key: AWS_SECRET_ACCESS_KEY_ARTIFACTS + aws_access_key_id: $AWS_ACCESS_KEY_ID_ARTIFACTS + region: $AWS_REGION_ARTIFACTS + aws_secret_access_key: $AWS_SECRET_ACCESS_KEY_ARTIFACTS # persist size snapshot on S3 - aws-s3/copy: arguments: --content-type application/json diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ca9ca51285f964..57edc7787b9695 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -25,7 +25,7 @@ jobs: os: [macos-latest, windows-latest, ubuntu-latest] steps: - run: echo "${{ github.actor }}" - - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 + - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 with: # fetch all tags which are required for `yarn release:changelog` fetch-depth: 0 diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 9f3f3cbd5886db..004b5c0290278d 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -16,10 +16,10 @@ jobs: security-events: write steps: - name: Checkout repository - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 + uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@a09933a12a80f87b87005513f0abb1494c27a716 # v2.21.4 + uses: github/codeql-action/init@00e563ead9f72a8461b24876bee2d0c2e8bd2ee8 # v2.21.5 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@a09933a12a80f87b87005513f0abb1494c27a716 # v2.21.4 + uses: github/codeql-action/analyze@00e563ead9f72a8461b24876bee2d0c2e8bd2ee8 # v2.21.5 diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index ce87502222daf8..1dfa0f3490e45b 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -22,7 +22,7 @@ jobs: steps: - name: Checkout code - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 + uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0 with: persist-credentials: false @@ -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@a09933a12a80f87b87005513f0abb1494c27a716 # v2.21.4 + uses: github/codeql-action/upload-sarif@00e563ead9f72a8461b24876bee2d0c2e8bd2ee8 # v2.21.5 with: sarif_file: results.sarif diff --git a/CHANGELOG.md b/CHANGELOG.md index 46336fe4463103..b44ff828936714 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,244 @@ # [Versions](https://mui.com/versions/) +## 5.14.9 + + + +_Sep 13, 2023_ + +A big thanks to the 18 contributors who made this release possible. Here are some highlights โœจ: + +- ๐ŸŽ‰ Added the [`Drawer` component](https://mui.com/joy-ui/react-drawer/) to Joy UI (#38169) @mnajdova +- โœจ Material UI's [`ButtonGroup` component](https://mui.com/material-ui/react-button-group/) now styles button elements within it correctly (#38520) @ZeeshanTamboli + +### `@mui/material@5.14.9` + +- ​[ButtonGroup] Determine first, last and middle buttons to support different elements with correct styling (#38520) @ZeeshanTamboli +- ​[Modal] Fix console warning when onTransitionEnter , onTransitionExit provided (#38868) @sai6855 +- ​Revert "[Autocomplete] Type multiple values with readonly arrays." (#38827) @mnajdova +- ​[Tabs] Scrollable tabs shouldn't crash when customizing their styles in the theme with slot callbacks (#38544) @brentertz +- ​[AlertTitle][BreadCrumbs] Fix inheritance message in docs (#38876) @sai6855 + +### `@mui/base@5.0.0-beta.15` + +- ​[useSnackbar] Align externalProps handling (#38935) @mj12albert +- ​[useInput] Align ExternalProps naming (#38849) @mj12albert +- ​[FocusTrap] Refactor & cleanup (#38878) @mnajdova +- ​[FocusTrap] Fix `disableEnforceFocus` behavior (#38816) @mnajdova +- ​[Switch] Simplify source (#38910) @oliviertassinari + +### `@mui/joy@5.0.0-beta.6` + +- ​[Drawer] Add Drawer component (#38169) @mnajdova +- ​Reduce height of some variants (#38527) @zanivan +- ​Refine the default theme color palette (#38416) @zanivan +- ​[Dialog] Add `DialogActions`, `DialogTitle` and `DialogContent` (#38382) @siriwatknp +- ​[AccordionGroup] Add missing `variant` and `color` classes (#38814) @sai6855 + +### `@mui/lab@5.0.0-alpha.144` + +- ​Add TypeScript deprecations (#38833) @oliviertassinari +- ​Fix `@mui/x-tree-view` dependency (#38822) @flaviendelangle + +### `@mui/system@5.14.9` + +- ​Remove dead code (#38884) @oliviertassinari +- ​Remove getInitColorSchemeScript leading spaces (#38794) @oliviertassinari + +### `@mui/zero-vite-plugin@0.0.1-alpha.0` + +- ​[vite] Create a package for vite plugin (#38685) @brijeshb42 + +### Docs + +- ​[docs][base-ui] Improve recommended usage guide (#38570) @oliviertassinari +- ​[docs][base-ui] Create hooks contribution guide (#38679) @michaldudak +- ​[docs][base-ui] Structure and style revisions for Component docs (#38826) @samuelsycamore +- ​[docs][base-ui] Add Number Input to the all components page (#38839) @danilo-leal +- ​[docs][base-ui] Mark Popup with the Preview tag (#38851) @michaldudak +- ​[blog] Polish component reference name @oliviertassinari +- ​[blog] Fix missing card (#38834) @oliviertassinari +- ​[Button][docs][material-ui] Update the file upload demo (#38823) @danilo-leal +- ​[docs][DialogTitle] Fix props docs doesn't mention it extends `Typography` props (#38856) @sai6855 +- ​[docs] Improve npm experience (#38906) @oliviertassinari +- ​[docs] Fix redirection to Base UI URLs @oliviertassinari +- ​[docs] Fix use of callouts (#38747) @oliviertassinari +- ​[docs] Fix 301 links for SEO @oliviertassinari +- ​[docs] Remove flag from installation page @oliviertassinari +- ​[docs] Fix strange break line on mobile in between product name @oliviertassinari +- ​[docs] Clearer npm package homepages (#38864) @oliviertassinari +- ​[docs] enableColorScheme prop was removed (#38795) @oliviertassinari +- ​[docs] Fix a11y issues in tables demos (#38829) @michaldudak +- ​[docs][joy-ui] Refine the Messages template (#38807) @zanivan +- ​[docs][joy-ui] Fix copy on the Tutorial page (#38907) @danilo-leal +- ​[docs][joy-ui] Fix grammar and update Usage section in color inversion page (#38850) @ZeeshanTamboli +- ​[docs][joy-ui] Revise the Lists page (#36324) @LadyBluenotes +- ​[docs][joy-ui] Refine the Profile Dashboard template (#38599) @zanivan +- ​[docs][material-ui] Revise the Paper component docs (#38841) @danilo-leal +- ​[docs][material-ui] Revise the Typography page (#38543) @danilo-leal +- ​[docs][material-ui] Revise and split up "Styled engine" doc (#37774) @samuelsycamore +- ​[TextareaAutosize][docs] Fix component creation in render (#38577) @oliviertassinari + +### Examples + +- ​[examples] Add shortcut to open example in online IDE (#38572) @oliviertassinari +- ​[examples][base-ui] Add Base UI + Vite + Tailwind CSS example in TypeScript (#37595) @dvkam + +### Core + +- ​[core] Remove package declaration from same package dependencies (#38951) @DiegoAndai +- ​[core] Remove workspace dependencies from root package.json (#38940) @michaldudak +- ​[core] Fix prop-types generation (#38831) @flaviendelangle +- ​[core] Move types packages to docs' devDependencies (#38914) @michaldudak +- ​[core] Improve DX when browsing the package on npm and GitHub @oliviertassinari +- ​[core] TrapFocus was renamed to FocusTrap @oliviertassinari +- ​[core] Add types extension for clarity @oliviertassinari +- ​[core] Hoist rewriteImportPaths to parent scope @oliviertassinari +- ​[core] Bump aws-cli orb to 4.1 (#38857) @Janpot +- ​[core] Explicitly define package dependencies (#38859) @michaldudak +- ​[core] Fix yarn docs:create-playground script @oliviertassinari +- ​[docs-infra] Improve show code button affordance (#38824) @danilo-leal +- ​[docsโ€“infra] Fix callout container width (#38880) @oliviertassinari +- ​[docs-infra] Catch duplicated trailing splashes in links (#38758) @oliviertassinari +- ​[website] add Michel Engelen to the about us page (#38818) @michelengelen +- ​[website] Add a templates & design kits section to the Material UI page (#38617) @danilo-leal + +All contributors of this release in alphabetical order: @brentertz, @brijeshb42, @danilo-leal, @DiegoAndai, @dvkam, @flaviendelangle, @Janpot, @LadyBluenotes, @michaldudak, @michelengelen, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli + +## 5.14.8 + + + +_Sep 5, 2023_ + +A big thanks to the 25 contributors who made this release possible. + +### `@mui/material@5.14.8` + +- ​ImageItemList fix incorrect (below) rendering (#38452) @omriklein +- ​[Button] Add demo for file upload (#38786) @anle9650 +- ​[Slider] Add missing classes for `Slider` `InputLabel` `InputBase` `Radio` (#38401) @sai6855 +- ​[Select] Merge slotProps.paper with internal Paper props (#38703) @michaldudak +- ​[Tabs] Fix `ref` type (#38717) @ZeeshanTamboli +- ​[TabScrollButton] Extend ButtonBase types (#38719) @ZeeshanTamboli + +### `@mui/base@5.0.0-beta.14` + +- ​[Autocomplete] Type multiple values with readonly arrays. (#38253) @pcorpet +- ​[TextField] Fix unstable height of memoized multiline TextField component (#37135) @amal-qb + +### `@mui/joy@5.0.0-beta.5` + +- ​[Accordion] Fix incorrect display of classname (#38695) @sai6855 +- ​[AspectRatio] Correct `ratio` prop description (#38743) @sai6855 +- ​[Button] Fix disablity of button (#38673) @sai6855 +- ​[design] Stray design tweaks to components (#38476) @zanivan +- ​[Typography] Added position only when Skeleton is a direct child (#38799) @siriwatknp + +### `@mui/lab@5.0.0-alpha.143` + +- ​[TreeView] Use Tree View from MUI X in the lab (#38261) @flaviendelangle +- ​[LoadingButton] Fix HTML rule button > div forbidden nesting (#38584) @oliviertassinari + +### `@mui/system@5.14.8` + +- ​[system] Fix the inconsistent types of the `mergeBreakpointsInOrder` function (#38749) @imevanc +- ​[system] Fix maxWidth incorrectly resolving breakpoints with non-pixel units (#38633) @mj12albert +- ​[typescript] Introduce \*OwnProps interfaces for components (#36798) @szalonna + +### Docs + +- ​Update changelog (#38704) @mj12albert +- ​[docs][Autocomplete] Require referentially stable value (#38734) @michaldudak +- ​[docs][base-ui] Add type parameter to the button in prepareForSlot demo (#38640) @michaldudak +- ​[docs][base-ui] Fix the broken image in the Tailwind CSS guide (#38721) @michaldudak +- ​[docs][base-ui]: Working With Tailwind Guide - revises example code to avoid import errors (#38693) @christophermorin +- ​[docs][base] Add Tailwind CSS + plain CSS demo on the Menu page (#38618) @alisasanib +- ​[blog] Clearer blog release title @oliviertassinari +- ​[blog] Add a post for the Tree View migration (#38407) @flaviendelangle +- ​[docs] Fix broken links to Next.js docs (#38764) @ruflair +- ​[docs] Trim trailing whitespace (#38793) @oliviertassinari +- ​[docs] Fix a typo in lab-tree-view-to-mui-x.md @mbrookes +- ​[docs] Clean up not used Usage files (#38715) @danilo-leal +- ​[docs] Improve theme builder exceptions (#38709) @jyash97 +- ​[docs] Polish Slider demos (#38759) @oliviertassinari +- ​[docs] Fix Joy UI docs link regression (#38761) @oliviertassinari +- ​[docs] Fix typo @oliviertassinari +- ​[docs] Fix e.g. typo (#38748) @oliviertassinari +- ​[docs] Fix Next.js pages router example redirect link (#38750) @sai6855 +- ​[docs] Fix SEO issue broken links @oliviertassinari +- ​[docs] Improve SSR example reference (#38651) @oliviertassinari +- ​[docs][joy-ui] Integrate a count-up feature to the Linear Progress (#38738) @anon-phantom +- ​[docs][joy-ui] Fix Link's `overlay` prop demo (#38702) @danilo-leal +- ​[docs][joy-ui] Polish the Stack page (#38623) @danilo-leal +- ​[docs][material-ui] Adjust simple Slide demo (#38646) @rajgop1 + +### Core + +- ​[core] Re-add nx and setup build caching (#38752) @brijeshb42 +- ​[core] Remove dead code seoTitle @oliviertassinari +- ​[core] Use immutable refs (#38762) @oliviertassinari +- ​[core] Rework `typescript-to-proptypes` to share the AST parsing with `parseStyles` (#38517) @flaviendelangle +- ​[core] Fix CI @oliviertassinari +- ​[core] Remove unnecessary `@types/webpack` package (#38720) @ZeeshanTamboli +- ​[core] Remove duplicate prop @oliviertassinari + +- ​[docs-infra] Fix mobile display in CodeSandbox (#38767) @oliviertassinari +- ​[docs-infra] Remove legacy GA (#37579) @alexfauquette +- ​[docs-infra] Fix emotion :first-child console log (#38690) @oliviertassinari +- ​[docs-infra] Fix leaking callout content (#38712) @danilo-leal +- ​[docs-infra] Remove emoji from callouts (#38694) @danilo-leal + +- ​[website] Fix out of date discount value @oliviertassinari +- ​[website] Fix out-of-date label on Toolpad (#38744) @bharatkashyap +- ​[website] Fine-tune branding buttons box shadows (#38731) @danilo-leal +- ​[website] Fix pricing table style (#38681) @alexfauquette + +All contributors of this release in alphabetical order: @alexfauquette, @alisasanib, @amal-qb, @anle9650, @anon-phantom, @bharatkashyap, @brijeshb42, @christophermorin, @danilo-leal, @flaviendelangle, @imevanc, @jyash97, @mbrookes, @michaldudak, @mj12albert, @oliviertassinari, @omriklein, @pcorpet, @rajgop1, @ruflair, @sai6855, @siriwatknp, @szalonna, @zanivan, @ZeeshanTamboli + +## 5.14.7 + + + +_Aug 29, 2023_ + +A big thanks to the 11 contributors who made this release possible. This release focuses primarily on ๐Ÿ› bug fixes, ๐Ÿ“š documentation, and โš™๏ธ infrastructure improvements. + +### `@mui/material@5.14.7` + +- [Autocomplete] Fix listbox opened unexpectedly when component is `disabled` (#38611) @mj12albert +- [Select][material-ui] Fix select menu moving on scroll when disableScrollLock is true (#37773) @VishruthR + +### `@mui/base@5.0.0-beta.13` + +- [useButton][base-ui] Accept arbitrary props in getRootProps and forward them (#38475) @DiegoAndai + +### `@mui/zero-runtime@0.0.1-alpha.1` + +- [system][zero][tag] Add support for sx prop (#38535) @brijeshb42 + +### Docs + +- [docs] Number Input docs fixes (#38521) @mj12albert +- [docs] Show all the code in the usage section (#38691) @oliviertassinari +- [docs][joy-ui] Change the customization and how-to guides docs tree (#38396) @danilo-leal +- [docs][lab][LoadingButton] Improve `loading` prop documentation (#38625) @sai6855 +- [docs][material-ui] Format `key` prop JSDoc description in `Snackbar` component code correctly (#38603) @jaydenseric + +### Core + +- [core] Add use-client to custom icons (#38132) @mj12albert +- [core] Remove unnecessary `@types/jsdom` (#38657) @renovate[bot] +- [core] Improve sponsors GA labels (#38649) @oliviertassinari +- [core] Fix ESM issues with regression tests (#37963) @Janpot +- [core] Potential fix for intermittent ci crashes in e2e test (#38614) @Janpot +- [docs-infra] Mark unstable components with a chip in the nav drawer (#38573) @michaldudak +- [docs-infra] Adjust the Material You playground demo design (#38636) @danilo-leal +- [docs-infra] Hide the SkipLink button if user prefers reduced motion (#38632) @DerTimonius +- [website] Add tiny fixes the homepage Sponsors section (#38635) @danilo-leal + +All contributors of this release in alphabetical order: @brijeshb42, @danilo-leal, @DerTimonius, @DiegoAndai, @Janpot, @jaydenseric, @mj12albert, @oliviertassinari, @renovate[bot], @sai6855, @VishruthR + ## 5.14.6 @@ -536,10 +775,10 @@ _Jul 11, 2023_ A big thanks to the 15 contributors who made this release possible. Here are some highlights โœจ: -- ๐Ÿ’ซ Material UI, Joy UI, and Base UI are compatible with [NextJS App Router](https://nextjs.org/docs/app) (#37656) @mj12albert +- ๐Ÿ’ซ Material UI, Joy UI, and Base UI are compatible with [Next.js App Router](https://nextjs.org/docs/app) (#37656) @mj12albert - ๐Ÿ“š Added new guides for integrating with Next.js 13 App Router (#37656) @mj12albert - โ“‚๏ธ [Material UI guide](https://mui.com/material-ui/guides/next-js-app-router/) - - ๐Ÿ…™ [Joy UI guide](https://mui.com/joy-ui/guides/next-js-app-router/) + - ๐Ÿ…™ [Joy UI guide](https://mui.com/joy-ui/integrations/next-js-app-router/) - ๐Ÿ…ฑ๏ธ [Base UI guide](https://mui.com/base-ui/guides/next-js-app-router/) - ๐Ÿ› bug fixes, ๐Ÿ“š documentation, and โš™๏ธ infrastructure improvements. @@ -1337,7 +1576,7 @@ _Apr 11, 2023_ A big thanks to the 9 contributors who made this release possible. Here are some highlights โœจ: -- ๐Ÿ’ซ Added [theme scope](https://mui.com/material-ui/guides/styled-engine/#theme-scoping) for using multiple design systems (#36664) @siriwatknp +- ๐Ÿ’ซ Added [theme scope](https://mui.com/material-ui/guides/theme-scoping/) for using multiple design systems (#36664) @siriwatknp - ๐Ÿ› bug fixes and ๐Ÿ“š documentation improvements. ### `@mui/system@5.12.0` @@ -1825,7 +2064,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[docs][joy] List slots in API documentation (#36271) @hbjORbj - ​[docs][joy] Build API documentations (#36008) @hbjORbj - ​[examples] Update Next.js examples to use built-in font (#36315) @Juneezee -- ​[examples] Update curl link in `material-next-ts-v4-v5-migration` example README (#36321) @ZeeshanTamboli +- ​[examples] Update curl link in `material-ui-nextjs-ts-v4-v5-migration` example README (#36321) @ZeeshanTamboli - ​[examples] Convert Next.js \_document class components to function components (#36109) @ossan-engineer ### Core @@ -3083,7 +3322,7 @@ A big thanks to the 7 contributors who made this release possible. Here are some ### `@mui/base@5.0.0-alpha.101` -- ​[TrapFocus] Restore the previously exported type from @mui/material (#34601) @michaldudak +- ​[FocusTrap] Restore the previously exported type from @mui/material (#34601) @michaldudak ### `@mui/joy@5.0.0-alpha.49` @@ -3199,7 +3438,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som #### Breaking changes -- [TrapFocus] Rename TrapFocus to FocusTrap (#34216) @kabernardes +- [FocusTrap] Rename TrapFocus to FocusTrap (#34216) @kabernardes ```diff -import TrapFocus from '@mui/base/TrapFocus'; @@ -3441,7 +3680,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - [Button][base] Prevent too many ref updates (#33882) @michaldudak - [Select][base] Fix typo in listbox blur event handler (#34120) @ZeeshanTamboli -- [TrapFocus] Improve tab test and simplify demo (#34008) @EthanStandel +- [FocusTrap] Improve tab test and simplify demo (#34008) @EthanStandel ### `@mui/joy@5.0.0-alpha.43` @@ -3547,7 +3786,7 @@ A big thanks to the 18 contributors who made this release possible. This release ### `@mui/base@5.0.0-alpha.93` -- ​[TrapFocus] Removes invisible tabbable elements from (#33543) @EthanStandel +- ​[FocusTrap] Removes invisible tabbable elements from (#33543) @EthanStandel - ​[Input][base] Pass the rows prop to the underlying textarea (#33873) @michaldudak - ​[SelectUnstyled] Add ability to post the select's value when submitting a form (#33697) @michaldudak @@ -4892,7 +5131,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som ); ``` -- ​[TrapFocus] Move docs to Base and drop the Unstyled prefix (#31954) @michaldudak +- ​[FocusTrap] Move docs to Base and drop the Unstyled prefix (#31954) @michaldudak Removed the `Unstyled_` prefix from the Base export (it remains in the Material UI export, though). @@ -7859,7 +8098,7 @@ A big thanks to the 11 contributors who made this release possible. Here are som ### `@material-ui/unstyled@5.0.0-alpha.37` - ​[Slider] Improve TS definition (#26642) @mnajdova -- ​[TrapFocus] Capture nodeToRestore via relatedTarget (#26696) @eps1lon +- ​[FocusTrap] Capture nodeToRestore via relatedTarget (#26696) @eps1lon ### `@material-ui/icons@5.0.0-alpha.37` @@ -8929,7 +9168,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som - ​[Timeline] Migrate TimelineContent to emotion (#25781) @siriwatknp - ​[Timeline] Migrate TimelineItem to emotion (#25822) @vicasas - ​[Timeline] Migrate TimelineOppositeContent to emotion (#25816) @vicasas -- ​[TrapFocus] Make isEnabled and getDoc optional (#25784) @m4theushw +- ​[FocusTrap] Make isEnabled and getDoc optional (#25784) @m4theushw ### `@material-ui/styled-engine@5.0.0-alpha.31` @@ -9411,7 +9650,7 @@ A big thanks to the 26 contributors who made this release possible. Here are som ### `@material-ui/unstyled@5.0.0-alpha.26` - ​[Portal] Migrate to unstyled (#24890) @povilass -- ​[TrapFocus] Migrate to unstyled (#24957) @povilass +- ​[FocusTrap] Migrate to unstyled (#24957) @povilass - ​[Backdrop] Migrate to unstyled (#24985) @povilass - ​[Modal] Migrate to emotion + unstyled (#24857) @povilass @@ -10008,7 +10247,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - [ButtonBase] Migrate styles to emotion (#24100) @mnajdova - [Button] Migrate styles to emotion (#24107) @mnajdova - [unstyled] Add utils for generating utility classes (#24126) @mnajdova -- [TrapFocus] Fix trap to only focus on tabbable elements (#23364) @gregnb +- [FocusTrap] Fix trap to only focus on tabbable elements (#23364) @gregnb - [Link] Improve integration with Next.js (#24121) @kelvinsanchez15 - [Select] Fix overflow showing scrollbar (#24085) @Segebre - [Slider] Fix circular type reference in SliderValueLabel (#24190) @eps1lon @@ -10677,7 +10916,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som - [Avatar] Fix usage of srcset property (#23286) @matheuspiment - [ClickAwayListener] Fix mounting behavior in Portals in React 17 (#23315) @eps1lon - [core] Allow React 17 (#23311) @eps1lon -- [Icon] Fix translation, e.g Google Translate (#23237) @cbeltrangomez84 +- [Icon] Fix translation, e.g. Google Translate (#23237) @cbeltrangomez84 - [LinearProgress] Fix Safari's bug during composition of different paint (#23293) @montogeek - [Radio] Fix dot misalignment in Safari (#23239) @anasufana - [styled-engine] Fix tagged template syntax with multiple expressions (#23269) @eps1lon @@ -11941,9 +12180,9 @@ Here are some highlights โœจ: - [Tabs] Document how to make scroll icons visible (#22255) @Sorgrum - [TextField] Add hidden label to multi-line filled textfield (#22284) @fakeharahman - [Toolbar] Custom variant (#22217) @mnajdova -- [TrapFocus] Entangle effects (#22155) @eps1lon -- [TrapFocus] Fix compatibility issues with React 17 (#22270) @eps1lon -- [TrapFocus] Prevent possible crash in React 17 (#22262) @eps1lon +- [FocusTrap] Entangle effects (#22155) @eps1lon +- [FocusTrap] Fix compatibility issues with React 17 (#22270) @eps1lon +- [FocusTrap] Prevent possible crash in React 17 (#22262) @eps1lon ### `@material-ui/icons@v5.0.0-alpha.7` @@ -12028,7 +12267,7 @@ Here are some highlights โœจ: More details in [the documentation](https://mui.com/material-ui/customization/components/#adding-new-component-variants) and [RFC](#21749). -- ๐Ÿ‘ฎ Add documentation for the [TrapFocus](https://mui.com/components/trap-focus/) component (#22062) @oliviertassinari. +- ๐Ÿ‘ฎ Add documentation for the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component (#22062) @oliviertassinari. - โš›๏ธ Prepare support for React v17 (#22093, #22105, #22143, #22111) @eps1lon. - ๐Ÿšง We have undertaken breaking changes. @@ -12205,7 +12444,7 @@ Here are some highlights โœจ: - [CssBaseline] Add text size adjust property (#22089) @Tolsee - [l10n] Add Greek (el-GR) locale (#21988) @tmanolat - [Table] Cell small's right padding is bigger than medium (#22017) @adamlaurencik -- [TrapFocus] Add documentation (#22062) @oliviertassinari +- [FocusTrap] Add documentation (#22062) @oliviertassinari - [Typography] Add custom variants support (#22006) @mnajdova - [useIsFocusVisible] Remove focus-visible if focus is re-targetted (#22102) @eps1lon - [core] Fix various potential issues with multiple windows (#22159) @scottander @@ -12401,7 +12640,7 @@ A big thanks to the 14 contributors who made this release possible. - [List] Fix secondary action position when disableGutters={true} (#21732) @kgregory - [TablePagination] Fix broken labelling if SelectProps provided ids (#21703) @eps1lon - [theme] Fix custom breakpoint in CSS Media Queries (#21759) @nkrivous -- [TrapFocus] Fix disableAutoFocus prop (#21612) @oliviertassinari +- [FocusTrap] Fix disableAutoFocus prop (#21612) @oliviertassinari ### `@material-ui/lab@v5.0.0-alpha.3` @@ -12476,7 +12715,7 @@ A big thanks to the 16 contributors who made this release possible. - [MenuItem] Add types for ListItemClasses (#21654) @eps1lon - [Slider] Fix cannot read property 'focus' of null (#21653) @mageprincess - [TextField] Fix CSS isolation issue (#21665) @Codetalker777 -- [TrapFocus] Fix portal support (#21610) @mnajdova +- [FocusTrap] Fix portal support (#21610) @mnajdova - [TypeScript] Fix version support (#21640) @jakubfiglak ### `@material-ui/lab@v5.0.0-alpha.2` diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md index 816fa38fd39b72..c4600dfeaa9e10 100644 --- a/CHANGELOG.old.md +++ b/CHANGELOG.old.md @@ -279,7 +279,7 @@ A big thanks to the 12 contributors who made this release possible. - [styles] Add support for TypeScript 4.1 (#23692) @ldrick - [ClickAwayListener] Fix mounting behavior in Portals in React 17 (#23367) @eps1lon -- [TrapFocus] Prevent possible crash in React 17 (#22263) @eps1lon +- [FocusTrap] Prevent possible crash in React 17 (#22263) @eps1lon - [Tabs] Fix RTL scrollbar with Chrome 85 (#22830) @ankit ### `@material-ui/styles@v4.11.1` @@ -542,7 +542,7 @@ A big thanks to the 21 contributors who made this release possible. ### Core -- [TrapFocus] Make an unstable version public (#21201) @dmtrKovalenko +- [FocusTrap] Make an unstable version public (#21201) @dmtrKovalenko - [test] Track size of `@material-ui/utils` (#21240) @eps1lon - [core] Batch small changes (#21156) @oliviertassinari - [core] Batch small changes (#21249) @oliviertassinari @@ -729,7 +729,7 @@ Here are some highlights โœจ: - [Tabs] Improve customizability of the scroll buttons (#20783) @netochaves - [TextField] Fix caret color in autofill dark theme (#20857) @CarsonF - [Tooltip] Fix disableTouchListener behavior (#20807) @weslenng -- [unstable_TrapFocus] Guard against dropped memo cache (#20848) @eps1lon +- [FocusTrap] Guard against dropped memo cache (#20848) @eps1lon ### `@material-ui/styles@v4.9.13` @@ -1293,7 +1293,7 @@ Here are some highlights โœจ: - [Autocomplete] Fix list of countries (#19862) @FottyM - [TreeView] Fix conditional nodes support (#19849) @joshwooding -- [Treeview] Add node selection support (#18357) @joshwooding +- [TreeView] Add node selection support (#18357) @joshwooding ### Docs @@ -3443,7 +3443,7 @@ Here are some highlights โœจ: - [Portal] Synchronously call onRendered (#15943) @Arlevoy - [Radio] Fix dot misalignment in IE11 (#15952) @rupert-ong - [theme] Return default value for spacing when no args provided (#15891) @mbrookes -- [TrapFocus] Fix error restoring focus when activeElement is null (#15967) @ryancogswell +- [FocusTrap] Fix error restoring focus when activeElement is null (#15967) @ryancogswell - [core] Export useMediaQuery & useScrollTrigger in index.js (#15958) @adeelibr - [core] Migrate extend ButtonBaseProps typings (#15869) @joshwooding @@ -3963,7 +3963,7 @@ You will learn more about v4 in the final release blog post and our plans for th - [core] Use terser for minification in umd bundle (#15491) @eps1lon - [test] Conform components forward ref to root component (#15425) @eps1lon - [test] Fix a flaky test (#15445) @oliviertassinari -- [test] Keep track of the bundle size of TrapFocus (#15453) @oliviertassinari +- [test] Keep track of the bundle size of FocusTrap (#15453) @oliviertassinari ## 4.0.0-alpha.8 @@ -5540,7 +5540,7 @@ you to add them up quickly in your head without having to worry about decimals. - [docs] Fix search suggestions on dark mode (#13874) @rfbotto - [docs] Add accessibility section to selection-controls with demo (#13896) @wyseguyonline -- [docs] Add support for multiple demo variants e.g JS or Hooks (#13873) @adeelibr +- [docs] Add support for multiple demo variants e.g. JS or Hooks (#13873) @adeelibr - [docs] Remove the withRoot HOC (#13909) @oliviertassinari - [docs] Add material-ui-pickers in pickers page (#13697) @dmtrKovalenko - [docs] Continue #13806 and port back some fix from @system (#13917) @oliviertassinari @@ -5571,7 +5571,7 @@ Here are some highlights โœจ: - [Tooltip] Suppress warning if button is disabled and title is empty (#13785) @rfbotto - [Dialog] Warn if className in PaperProps is set (#13797) @eps1lon - [TextField] Fix textfield label position when empty (#13791) @Studio384 -- [Popper] Save 7 KB gzipped (for people only using it) (#13804) @oliviertassinari +- [Popper] Save 7 kB gzipped (for people only using it) (#13804) @oliviertassinari - [Modal] Handle modal mount interruption (#13778) @amensouissi - [Select] Make value prop required in TypeScript (#13810) @t49tran - [Popover] Fix onEntering event propagation (#13821) @ekoeditaa @@ -5788,7 +5788,7 @@ This new package is a significant step forward. Some of the key features: - Supports 4 different APIs: hooks, styled-components, higher-order components and render props. - Allow accessing the component's props from within the style object. - Replace the usage of the old React APIs with the new ones. -- 15.0 KB gzipped. +- 15.0 kB gzipped. Here is an example: https://codesandbox.io/s/vjzn5z4k77. @@ -9898,7 +9898,7 @@ Here are some highlights โœจ: - New InputAdornment component (#8504). - New [Frequently asked questions](https://github.com/mui/material-ui/blob/4df547d56448cedf70977d6e2463b38eaf64d1c7/docs/src/pages/getting-started/frequently-asked-questions.md) documentation section -- We have saved 1 KB gzip by removing our internal react-transition-group fork (#8785). +- We have saved 1 kB gzip by removing our internal react-transition-group fork (#8785). - We have made one step further in order to upgrade all our development dependencies to react@16 (#8804). ### Breaking change diff --git a/README.md b/README.md index db9cb91f303e9a..2fea4bc287bde6 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,22 @@

- MUI logo + MUI Core logo

MUI Core

-**MUI Core** contains foundational React UI component libraries for shipping new features faster. +**MUI Core** contains foundational React UI component libraries for shipping new features faster: -- [_Material UI_](https://mui.com/material-ui/getting-started/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. +- [Material UI](https://mui.com/material-ui/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. -- [_Joy UI_](https://mui.com/joy-ui/getting-started/) is a beautifully designed library of React UI components. +- [Joy UI](https://mui.com/joy-ui/getting-started/) is a library of beautifully designed React UI components built to spark joy. -- [_Base UI_](https://mui.com/base-ui/getting-started/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features. +- [Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features. -- [_MUI System_](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs. +- [MUI System](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs.
-**[Stable channel v5](https://mui.com/)** - [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE) [![npm latest package](https://img.shields.io/npm/v/@mui/material/latest.svg)](https://www.npmjs.com/package/@mui/material) [![npm next package](https://img.shields.io/npm/v/@mui/material/next.svg)](https://www.npmjs.com/package/@mui/material) @@ -33,23 +31,11 @@
-## Installation +## Documentation ### Material UI -Material UI is available as an [npm package](https://www.npmjs.com/package/@mui/material). - -**npm:** - -```bash -npm install @mui/material @emotion/react @emotion/styled -``` - -**yarn:** - -```bash -yarn add @mui/material @emotion/react @emotion/styled -``` +Visit [https://mui.com/material-ui/](https://mui.com/material-ui/) to view the full documentation.
Older versions @@ -63,56 +49,23 @@ yarn add @mui/material @emotion/react @emotion/styled **Note:** `@next` only points to pre-releases. Use `@latest` for the latest stable release. -### Base UI - -Base UI is available as an [npm package](https://www.npmjs.com/package/@mui/base). +### Joy UI -**npm:** +Visit [https://mui.com/joy-ui/getting-started/](https://mui.com/joy-ui/getting-started/) to view the full documentation. -```bash -npm install @mui/base -``` +**Note**: Joy UI is still in beta. +We are adding new components regularly and you're welcome to contribute! -**yarn:** +### Base UI -```bash -yarn add @mui/base -``` +Visit [https://mui.com/base-ui/](https://mui.com/base-ui/) to view the full documentation. **Note**: Base UI is still in beta. We are adding new components regularly and you're welcome to contribute! ### MUI System -MUI System is available as an [npm package](https://www.npmjs.com/package/@mui/system). - -**npm:** - -```bash -npm install @mui/system @emotion/react @emotion/styled -``` - -**yarn:** - -```bash -yarn add @mui/system @emotion/react @emotion/styled -``` - -Or if you want to use `styled-components` as a styling engine: - -**npm:** - -```bash -npm install @mui/material @mui/styled-engine-sc styled-components -``` - -**yarn:** - -```bash -yarn add @mui/material @mui/styled-engine-sc styled-components -``` - -Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine. +Visit [https://mui.com/system/](https://mui.com/system/) to view the full documentation. ## Sponsors @@ -146,42 +99,15 @@ Gold Sponsors are those who have pledged \$500/month or more to MUI. See the full list of [our backers](https://mui.com/material-ui/discover-more/backers/). -## Getting started with Material UI - -Here is an example of a basic app using Material UI's `Button` component: - -```jsx -import * as React from 'react'; -import Button from '@mui/material/Button'; - -function App() { - return ; -} -``` - -In the interactive demo below, try changing the code and see how it affects the output. -(Hint: change `variant` to `"outlined"` and `color` to `"secondary"`. -For more options, see the [`Button` component page](https://mui.com/material-ui/react-button/) in our docs.) - -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/material-ui-u9sy1h) - ## Questions -For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui) instead of GitHub issues. -Use the "mui" tag on Stack Overflow to make it easier for the community to find your question. +For how-to questions that don't involve making changes to the code base, please use [Stackย Overflow](https://stackoverflow.com/questions/) instead of GitHub issues. ## Examples -Our documentation features [a collection of example projects using Material UI](https://mui.com/material-ui/getting-started/example-projects/). - -## Documentation - -- [Material UI](https://mui.com/material-ui/getting-started/) -- [Joy UI](https://mui.com/joy-ui/getting-started/) -- [Base UI](https://mui.com/base-ui/getting-started/) -- [MUI System](https://mui.com/system/getting-started/) +Our documentation features [a collection of example projects](https://github.com/mui/material-ui/tree/master/examples). -## Premium themes +## Premium templates You can find complete templates and themes in the [MUI Store](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store). @@ -213,30 +139,42 @@ For details of supported versions and contact details for reporting security iss These great services sponsor MUI's core infrastructure: +
- - - GitHub logo + + + GitHub logo [GitHub](https://github.com/) lets us host the Git repository and coordinate contributions. +
+ +
- - - Netlify logo + + + Netlify logo [Netlify](https://www.netlify.com/) lets us distribute the documentation. +
+ +
- - - BrowserStack logo + + + BrowserStack logo [BrowserStack](https://www.browserstack.com/) lets us test in real browsers. -CodeCov logo +
+ +
+CodeCov logo [CodeCov](https://about.codecov.io/) lets us monitor test coverage. + +
diff --git a/apps/zero-runtime-vite-app/README.md b/apps/zero-runtime-vite-app/README.md index 225a4c1bd28553..5b2a039de9e679 100644 --- a/apps/zero-runtime-vite-app/README.md +++ b/apps/zero-runtime-vite-app/README.md @@ -13,7 +13,7 @@ You can either run `yarn release:build` command to build all the packages, or yo Make sure you have also run `yarn release:build` at least once because we also use `@mui/material` and `@mui/system` packages. On subsequent runs, you can only build the above 2 packages using - ```bash -yarn build:zero +yarn build ``` After building, you can run the project by changing into the directory and then diff --git a/apps/zero-runtime-vite-app/package.json b/apps/zero-runtime-vite-app/package.json index 03006262a5664f..786102223aff7e 100644 --- a/apps/zero-runtime-vite-app/package.json +++ b/apps/zero-runtime-vite-app/package.json @@ -4,7 +4,8 @@ "private": true, "type": "module", "scripts": { - "dev": "vite" + "dev": "vite", + "build": "vite build" }, "dependencies": { "@mui/zero-runtime": "file:../../packages/zero-runtime/build", @@ -12,11 +13,13 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@linaria/vite": "^4.5.4", - "@mui/utils": "^5.14.5", - "@mui/material": "^5.14.5", - "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build", - "vite": "4.4.9", - "@vitejs/plugin-react": "^4.0.4" + "@mui/utils": "^5.14.8", + "@mui/material": "^5.14.8", + "@mui/zero-vite-plugin": "file:../../packages/zero-vite-plugin/build", + "@vitejs/plugin-react": "^4.0.4", + "vite": "4.4.9" + }, + "resolutions": { + "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build" } } diff --git a/apps/zero-runtime-vite-app/src/App.tsx b/apps/zero-runtime-vite-app/src/App.tsx index 796560887e6a9f..8f1b97ed3fdf29 100644 --- a/apps/zero-runtime-vite-app/src/App.tsx +++ b/apps/zero-runtime-vite-app/src/App.tsx @@ -9,9 +9,7 @@ const Button = styled('button', { 'color:red', ({ theme }: any) => ({ fontFamily: 'sans-serif', - color: 'primary.main', backgroundColor: [theme.palette.primary.main, 'text.primary', 'background.paper'], - fontSize: (props: any) => (props.isRed ? 'h1.fontSize' : 'h2.fontSize'), }), { fontFamily: 'sans-serif', @@ -34,7 +32,7 @@ const HalfWidth = styled.div({ border: '1px solid #ccc', }); -export default function App() { +export default function App({ isRed }: any) { const [count, setCount] = React.useState(0); const [value, setValue] = React.useState(50); const [isColorPrimary, setIsColorPrimary] = React.useState(true); @@ -106,7 +104,19 @@ export default function App() {
- + ({ + color: theme.palette.primary.main, + fontSize: isRed ? 'h1.fontSize' : 'h2.fontSize', + ':hover': { + backgroundColor: ['primary.dark', 'secondary.main'], + color: { + sm: 'primary.dark', + md: 'secondary.main', + }, + }, + })} + > Every Base UI component available so far.

+

Every Base UI component available so far, sorted alphabetically.

{{"component": "modules/components/BaseUIComponents.js"}} diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js index 9aa53294a34be7..73c984e5efc078 100644 --- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js +++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js @@ -155,7 +155,7 @@ const StyledAutocompleteRoot = styled('div')( padding-right: 5px; overflow: hidden; width: 320px; - + &.focused { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; @@ -264,7 +264,7 @@ const StyledPopupIndicator = styled(Button)( background-color: transparent; align-self: center; padding: 0 2px; - + &:hover { background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]}; cursor: pointer; @@ -289,7 +289,7 @@ const StyledClearIndicator = styled(Button)( background-color: transparent; align-self: center; padding: 0 2px; - + &:hover { background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]}; cursor: pointer; diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx index 1d465838034b49..394748ee3e017d 100644 --- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx +++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx @@ -138,7 +138,7 @@ const StyledAutocompleteRoot = styled('div')( padding-right: 5px; overflow: hidden; width: 320px; - + &.focused { border-color: ${blue[400]}; box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; @@ -247,7 +247,7 @@ const StyledPopupIndicator = styled(Button)( background-color: transparent; align-self: center; padding: 0 2px; - + &:hover { background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]}; cursor: pointer; @@ -272,7 +272,7 @@ const StyledClearIndicator = styled(Button)( background-color: transparent; align-self: center; padding: 0 2px; - + &:hover { background-color: ${theme.palette.mode === 'dark' ? grey[700] : blue[100]}; cursor: pointer; diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md index 8fb75b38c29966..d0a0cb5de11e64 100644 --- a/docs/data/base/components/autocomplete/autocomplete.md +++ b/docs/data/base/components/autocomplete/autocomplete.md @@ -35,8 +35,6 @@ To learn more about implementing a custom Autocomplete, you can explore the [`us ## Hook -### Usage - ```jsx import { useAutocomplete } from '@mui/base/useAutocomplete'; ``` @@ -104,7 +102,7 @@ Learn more about controlled and uncontrolled components in the [React documentat React Portals can be used to render the listbox outside of the DOM hierarchy, making it easier to allow it to "float" above adjacent elements. -Base UI provides a [``](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal. +Base UI provides a [Popper](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal. To render the listbox in Base UI's Popper, the `ref`s must be merged as follows: diff --git a/docs/data/base/components/badge/badge.md b/docs/data/base/components/badge/badge.md index 50e46e3fe349bc..71f557d58fd79c 100644 --- a/docs/data/base/components/badge/badge.md +++ b/docs/data/base/components/badge/badge.md @@ -25,32 +25,15 @@ The Badge component creates a badge that is applied to its child element. ## Component -### Usage - -After [installation](/base-ui/getting-started/quickstart/#installation), you can start building with this component using the following basic elements: - ```jsx import { Badge } from '@mui/base/Badge'; - -export default function MyApp() { - return {/* the element that the badge is attached to */}; -} ``` -### Basics - 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 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 @@ -79,9 +62,10 @@ The following code snippet applies a CSS class called `my-badge` to the badge sl ``` -#### Usage with TypeScript +### Usage with TypeScript -In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component: +In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. +This way, you can safely provide the custom root's props directly on the component: ```tsx slots={{ root: CustomComponent }} customProp /> @@ -99,10 +83,10 @@ The same applies for props specific to custom primitive elements: import { useBadge } from '@mui/base/useBadge'; ``` -The `useBadge` hook lets you apply the functionality of a badge to a fully custom component. +The `useBadge` hook lets you apply the functionality of a Badge to a fully custom component. It returns props to be placed on the custom component, along with fields representing the component's internal state. -Hooks _do not_ support [slot props](#slot-props), but they do support [customization props](#customization). +Hooks _do not_ support [slot props](#custom-structure), but they do support [customization props](#customization). :::info Hooks give you the most room for customization, but require more work to implement. @@ -120,27 +104,27 @@ For the sake of simplicity, demos and code snippets primarily feature components ### Badge content -The `badgeContent` prop defines the content that's displayed inside the badge. -When this content is a number, there are additional props you can use for further customizationโ€”see the [Numerical badges section](#numerical-badges) below. +The `badgeContent` prop defines the content that's displayed inside the Badge. +When this content is a number, there are additional props you can use for further customizationโ€”see the [Numerical Badges section](#numerical-badges) below. -The following demo shows how to create and style a typical numerical badge that's attached to a generic box element: +The following demo shows how to create and style a typical numerical Badge that's attached to a generic box element: {{"demo": "UnstyledBadge", "defaultCodeOpen": false}} ### Badge visibility -You can control the visibility of a badge by using the `invisible` prop. -Setting a badge to `invisible` does not actually hide itโ€”instead, this prop adds the `BaseBadge-invisible` class to the badge, which you can target with styles to hide however you prefer: +You can control the visibility of a Badge by using the `invisible` prop. +Setting a Badge to `invisible` does not actually hide itโ€”instead, this prop adds the `BaseBadge-invisible` class to the Badge, which you can target with styles to hide however you prefer: {{"demo": "BadgeVisibility.js"}} -### Numerical badges +### Numerical Badges The following props are useful when `badgeContent` is a number. #### The showZero prop -By default, badges automatically hide when `badgeContent={0}`. +By default, Badges automatically hide when `badgeContent={0}`. You can override this behavior with the `showZero` prop: {{"demo": "ShowZeroBadge.js"}} @@ -154,7 +138,7 @@ The default is 99. ## Accessibility -Screen readers may not provide users with enough information about a badge's contents. +Screen readers may not provide users with enough information about a Badge's contents. To make your badge accessible, you must provide a full description with `aria-label`, as shown in the demo below: {{"demo": "AccessibleBadges.js"}} diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js index f24ea77300da7e..4f4e2399fafeaf 100644 --- a/docs/data/base/components/button/UnstyledButtonCustom.js +++ b/docs/data/base/components/button/UnstyledButtonCustom.js @@ -53,7 +53,7 @@ const CustomButtonRoot = styled(ButtonRoot)( transition: all 800ms ease; pointer-events: none; } - + & .bg { stroke: var(--main-color); stroke-width: 1; @@ -86,7 +86,7 @@ const CustomButtonRoot = styled(ButtonRoot)( outline-offset: 2px; } - &.${buttonClasses.active} { + &.${buttonClasses.active} { & .bg { fill: var(--active-color); transition: fill 300ms ease-out; diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx index 6733dee6f7e020..72413739662779 100644 --- a/docs/data/base/components/button/UnstyledButtonCustom.tsx +++ b/docs/data/base/components/button/UnstyledButtonCustom.tsx @@ -54,7 +54,7 @@ const CustomButtonRoot = styled(ButtonRoot)( transition: all 800ms ease; pointer-events: none; } - + & .bg { stroke: var(--main-color); stroke-width: 1; @@ -87,7 +87,7 @@ const CustomButtonRoot = styled(ButtonRoot)( outline-offset: 2px; } - &.${buttonClasses.active} { + &.${buttonClasses.active} { & .bg { fill: var(--active-color); transition: fill 300ms ease-out; diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js index 1caf7cb2550212..f7cdde1f0fd0be 100644 --- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js +++ b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js @@ -54,12 +54,11 @@ function Styles() { .CustomButton:active:not(.${buttonClasses.disabled}) { background-color: ${cyan[700]}; } - + .${buttonClasses.disabled} { opacity: 0.5; cursor: not-allowed; - - + } `} ); diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx index 1caf7cb2550212..f7cdde1f0fd0be 100644 --- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx +++ b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx @@ -54,12 +54,11 @@ function Styles() { .CustomButton:active:not(.${buttonClasses.disabled}) { background-color: ${cyan[700]}; } - + .${buttonClasses.disabled} { opacity: 0.5; cursor: not-allowed; - - + } `} ); diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md index ded95fe3b98b7a..38412762441a86 100644 --- a/docs/data/base/components/button/button.md +++ b/docs/data/base/components/button/button.md @@ -23,20 +23,10 @@ The Button component replaces the native HTML `; -} ``` -### Basics - The Button behaves similar to the native HTML `