diff --git a/.circleci/config.yml b/.circleci/config.yml index c10fe610fb550f..7d6bcd9d4eb56e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -62,7 +62,7 @@ commands: browsers: type: boolean default: false - description: 'Set to true if you intend to any browser (e.g. with playwright).' + description: 'Set to true if you intend to any browser (for example with playwright).' steps: - run: diff --git a/.vale.ini b/.vale.ini index d1720b276aac71..b61c3be62bf326 100644 --- a/.vale.ini +++ b/.vale.ini @@ -1,28 +1,23 @@ -# Config vale. More information at https://docs.errata.ai/vale/config +# Vale config. More information at https://vale.sh/docs/topics/config/ StylesPath = .github/styles -MinAlertLevel = suggestion +MinAlertLevel = warning -# The docs/writing-rules.zip is generated by `pnpm docs:zipRules` -Packages = Google, docs/writing-rules.zip +# The docs/mui-vale.zip is generated by `pnpm docs:zipRules` +Packages = Google,docs/mui-vale.zip [*.md] -# Ignore code injection which start with {{... +# Ignore code injections that start with {{... BlockIgnores = {{.* -BasedOnStyles = writing-rules +BasedOnStyles = MUI -# Google: -Google.FirstPerson = YES # Avoid first-person pronouns such as I, me, ...'. -Google.GenderBias = YES # Avoid gendered profession -Google.OxfordComma = YES -Google.Quotes = YES # Commas and periods go inside quotation marks. -Google.Spelling = YES # In general, use American spelling (word ending with 'nised' or 'logue') -Google.We = YES # Try to avoid using first-person plural -Google.Latin = YES # Try to avoid latin expressions e.g. and i.e. +# Google errors: +Google.GenderBias = YES # No Gender bias +# Google warings: +Google.FirstPerson = YES # Avoid first-person +Google.We = YES # Avoid first-person plural +Google.Will = YES # Avoid future tense +Google.OxfordComma = YES # Prefer Oxford comma -# Those rules are not repected a lot -# Google.Passive = YES # In general, use active voice instead of passive voice. -Google.Will = YES # Avoid using will - -# False positives with "1st" nearly no use in our doc -# Google.Units = YES # Put a nonbreaking space between the number and the unit \ No newline at end of file +[CHANGELOG*.md] +MUI.CorrectReferenceAllCases = NO diff --git a/CHANGELOG.md b/CHANGELOG.md index ac0384bc25c34f..c3b4f3bae85e37 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ _Mar 13, 2024_ A big thanks to the 18 contributors who made this release possible. Here are some highights ✨ -- The Material UI free Checkout template got a design uplift (#41447) @zanivan +- The Material UI free Checkout template got a design uplift (#41447) @zanivan ### `@mui/material@5.15.13` @@ -69,21 +69,21 @@ A big thanks to the 18 contributors who made this release possible. Here are som ### Core -- [pigment] Make all Pigment CSS packages public (#41404) @brijeshb42 +- [pigment] Make all Pigment CSS packages public (#41404) @brijeshb42 - [pigment] Rename directories to match package names (#41453) @brijeshb42 - [pigment-css] Example fix leading spaces (#41439) @oliviertassinari - [code-infra] Add short note about e2e-website workflow schedule (#41355) @Janpot - [code-infra] Add alias for icon types (#41248) @Janpot - [code-infra] Reduce concurrency of typescript:ci further (#41392) @Janpot - [code-infra] Reduce concurrency for test_types ci job (#41385) @Janpot -- [code-infra] Adapt API code generator to Base UI repo needs (#41475) @michaldudak +- [code-infra] Adapt API code generator to Base UI repo needs (#41475) @michaldudak - [docs-infra] Don't generate preview files for the templates (#41379) @mnajdova -- [docs-infra] Fix pigment css apps path in the render mui demos script (#41476) @mnajdova +- [docs-infra] Fix Pigment CSS apps path in the render mui demos script (#41476) @mnajdova - [docs-infra] move feedback to ESM (#41381) @alexfauquette - [docs-infra] Improve color contrast throughout (#41387) @danilo-leal - [docs-infra] Simplify Algolia crawler config (#41312) @oliviertassinari - [docs-infra] Adjust the tabs and layout selection design (#41084) @danilo-leal -- [blog] Update the Base UI post with links to dedicated repo (#41358) @danilo-leal +- [blog] Update the Base UI post with links to dedicated repo (#41358) @danilo-leal - [website] Update the Careers page role (#41384) @danilo-leal - [website] Compress about images @oliviertassinari - [website] Improve color contrast on the homepage (#41465) @danilo-leal @@ -125,7 +125,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - ​[pigment-css] Rename zero-runtime to pigmentcss (#41317) @brijeshb42 - ​Fix createSpacing return type (#41318) @matystroia - ​[zero] Add support for styled tagged-template literals (#41268) @brijeshb42 -- ​[zero] Set up Material UI migration demos (#41267) @siriwatknp +- ​[zero] Set up Material UI migration demos (#41267) @siriwatknp - ​[zero] Move extendTheme to already existing @mui/zero-runtime/utils (#41254) @brijeshb42 - ​[zero] Remove `object` intersection from CSS Fallback (#41271) @siriwatknp - ​[zero] Minor wording changes in README (#41253) @brijeshb42 @@ -162,7 +162,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - ​[docs-infra] Fix missing non breaking spaces @oliviertassinari - ​[docs-infra] Add design customizations to the disclosure element (#41285) @danilo-leal - ​[docs-infra] Adjust headings dark mode color (#41292) @danilo-leal -- ​[docs-infra] Fix Stack Overflow breaking space @oliviertassinari +- ​[docs-infra] Fix Stack Overflow breaking space @oliviertassinari - ​[docs-infra] Fix product selector popup not closing on route change (#41166) @divyammadhok - ​[docs-infra] Improve fix blank links ad @oliviertassinari - ​[docs-infra] Support interfaces for X docs (#41069) @alexfauquette @@ -269,7 +269,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [docs-infra] Reduce scrollbar width on ROC (#41148) @oliviertassinari - [docs-infra] Add external link arrow (#41129) @siriwatknp - [docs-infra] Fix external link arrow (#41181) @alexfauquette -- [docs-infra] Flag NPM and Github as wrong spellings @oliviertassinari +- [docs-infra] Flag npm and GitHub as wrong spellings @oliviertassinari - [docs-infra] Fix display when the default props is undefined (#41114) @oliviertassinari - [docs-infra] Remove random layout assignment (#40862) @alexfauquette - [docs-infra] Add spacing and contrast improvements (#41191) @danilo-leal @@ -317,7 +317,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - Fix 301 redirection to StackBlitz @oliviertassinari - Fix h1 on Joy UI templates @oliviertassinari - Have MUI workspace own the CodeSandbox @oliviertassinari -- Add notification for mui x v7 beta (#41001) @joserodolfofreitas +- Add notification for MUI X v7 beta (#41001) @joserodolfofreitas - Fix 301 links @oliviertassinari - Fix Next.js v13.5.1 SEO regression (#40302) @oliviertassinari - Add a 404 page (#40884) @danilo-leal @@ -1594,7 +1594,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - [docs] Update Autocomplete demo for React 18 (#39162) @oliviertassinari - [docs-infra] Tweak feedback footer section design (#36556) @danilo-leal - [docs-infra] Improve code syntax highlight (#39181) @oliviertassinari -- [docs][base] Add Tailwind CSS + plain CSS demo on the TextArea page (#39046) @alisasanib +- [docs][base] Add Tailwind CSS + plain CSS demo on the TextArea page (#39046) @alisasanib - [docs][base-ui] Fix style for root div of multiline input (#39182) @ttlpta - [docs][base-ui] Improve Select's country select demo (#38983) @oliviertassinari - [docs][joy-ui] Add scrollable tabs example (#39260) @siriwatknp @@ -1664,7 +1664,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements ### Docs - Improve focus trap demo (#38985) @oliviertassinari -- Add Tailwind CSS + plain CSS demo on the Tabs page (#39000) @alisasanib +- Add Tailwind CSS + plain CSS demo on the Tabs page (#39000) @alisasanib - Improve the default theme viewer design (#39049) @danilo-leal - Add live demo with CssVarsProvider (#38792) @oliviertassinari - Fix wrong hash on Card's page (#39151) @mnajdova @@ -1730,7 +1730,7 @@ A big thanks to the 16 contributors who made this release possible. This release ### Docs -- ​<!-- 21 -->[docs][base] Add Tailwind CSS + plain CSS demo on the NumberInput page (#38928) @alisasanib +- ​<!-- 21 -->[docs][base] Add Tailwind CSS + plain CSS demo on the NumberInput page (#38928) @alisasanib - ​<!-- 13 -->[docs][Dialog] Add non-modal dialog docs & demo (#38684) @mnajdova - ​<!-- 12 -->[docs] Fix number input wrong demo @oliviertassinari - ​<!-- 11 -->[docs] Exclude joy-ui LinearProgressCountup from visual regression (#38969) @siriwatknp @@ -1837,7 +1837,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som ### Examples - ​<!-- 14 -->[examples] Add shortcut to open example in online IDE (#38572) @oliviertassinari -- ​<!-- 61 -->[examples][base-ui] Add Base UI + Vite + Tailwind CSS example in TypeScript (#37595) @dvkam +- ​<!-- 61 -->[examples][base-ui] Add Base UI + Vite + Tailwind CSS example in TypeScript (#37595) @dvkam ### Core @@ -1906,9 +1906,9 @@ A big thanks to the 25 contributors who made this release possible. - ​<!-- 52 -->Update changelog (#38704) @mj12albert - ​<!-- 49 -->[docs][Autocomplete] Require referentially stable value (#38734) @michaldudak - ​<!-- 48 -->[docs][base-ui] Add type parameter to the button in prepareForSlot demo (#38640) @michaldudak -- ​<!-- 47 -->[docs][base-ui] Fix the broken image in the Tailwind CSS guide (#38721) @michaldudak +- ​<!-- 47 -->[docs][base-ui] Fix the broken image in the Tailwind CSS guide (#38721) @michaldudak - ​<!-- 46 -->[docs][base-ui]: Working With Tailwind Guide - revises example code to avoid import errors (#38693) @christophermorin -- ​<!-- 45 -->[docs][base] Add Tailwind CSS + plain CSS demo on the Menu page (#38618) @alisasanib +- ​<!-- 45 -->[docs][base] Add Tailwind CSS + plain CSS demo on the Menu page (#38618) @alisasanib - ​<!-- 44 -->[blog] Clearer blog release title @oliviertassinari - ​<!-- 43 -->[blog] Add a post for the Tree View migration (#38407) @flaviendelangle - ​<!-- 34 -->[docs] Fix broken links to Next.js docs (#38764) @ruflair @@ -2043,10 +2043,10 @@ A big thanks to the 21 contributors who made this release possible. Here are som - [docs][base-ui] Fix Menu Hooks demo (#38479) @homerchen19 - [docs][base-ui] Correct the MUI System quickstart example (#38496) @michaldudak - [docs][base-ui] Add Tailwind & plain CSS demos for Autocomplete page (#38157) @mj12albert -- [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Input page (#38302) @alisasanib -- [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Snackbar, Badge, Switch pages (#38425) @alisasanib -- [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Slider page (#38413) @alisasanib -- [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Select page (#38367) @alisasanib +- [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Input page (#38302) @alisasanib +- [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Snackbar, Badge, Switch pages (#38425) @alisasanib +- [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Slider page (#38413) @alisasanib +- [docs][base-ui] Add Tailwind CSS + plain CSS demo on the Select page (#38367) @alisasanib - [docs][joy-ui] Fix typo: Classname -> Class name for consistency (#38510) @alexfauquette - [docs][joy-ui] Revise the theme color page (#38402) @danilo-leal - [docs][joy-ui] Sort templates by popularity (#38490) @oliviertassinari @@ -2071,7 +2071,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - [docs] Fix typo in Base UI @oliviertassinari - [docs] Update the backers page (#38505) @danilo-leal - [docs] Add stray design adjustments to the docs (#38501) @danilo-leal -- [docs] Use IBM Plex Sans in Tailwind CSS demos (#38464) @mnajdova +- [docs] Use IBM Plex Sans in Tailwind CSS demos (#38464) @mnajdova - [docs] Fix SEO issues reported by ahrefs (#38423) @oliviertassinari ### Examples @@ -2158,7 +2158,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - ​<!-- 14 -->[docs][material-ui] Remove incorrect `aria-label`s in extended variant examples of Floating Action Button (#37170) @ashleykolodziej - ​<!-- 13 -->[docs][material-ui] Adjust slightly the installation page content (#38380) @danilo-leal - ​<!-- 12 -->[docs][Switch] Fix the readOnly class name in docs (#38277) @michaldudak -- ​<!-- 11 -->[docs][TablePagination] Add Tailwind CSS & plain CSS introduction demo (#38286) @mnajdova +- ​<!-- 11 -->[docs][TablePagination] Add Tailwind CSS & plain CSS introduction demo (#38286) @mnajdova ### Examples @@ -2244,7 +2244,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som ### Docs - ​<!-- 33 -->[docs][AppBar] Fix `ResponsiveAppBar` demo logo href (#38346) @iownthegame -- ​<!-- 30 -->[docs][base] Add Tailwind CSS + plain CSS demo on the Button page (#38240) @alisasanib +- ​<!-- 30 -->[docs][base] Add Tailwind CSS + plain CSS demo on the Button page (#38240) @alisasanib - ​<!-- 29 -->[docs][Menu][base] Remove `Unstyled` prefix from demos' function names (#38270) @sai6855 - ​<!-- 22 -->[docs] Add themeable component guide (#37908) @siriwatknp - ​<!-- 21 -->[docs] Fix Joy UI demo background color (#38307) @oliviertassinari @@ -2339,7 +2339,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - ​<!-- 39 -->[docs][material] Revise and update Examples doc (#38205) @samuelsycamore - ​<!-- 38 -->[docs] Fix typo in notifications.json @mbrookes - ​<!-- 37 -->[docs-infra] Remove leftover standardNavIcon (#38252) @DiegoAndai -- ​<!-- 34 -->[docs][base] Add Tailwind CSS & plain CSS demos on the Popper page (#37953) @zanivan +- ​<!-- 34 -->[docs][base] Add Tailwind CSS & plain CSS demos on the Popper page (#37953) @zanivan - ​<!-- 31 -->[docs][Button][joy] Improve `loading` prop documentation (#38156) @sai6855 - ​<!-- 25 -->[docs] Prepare docs infra for Tree View migration to X (#38202) @flaviendelangle - ​<!-- 24 -->[docs] Fix SEO issues reported by ahrefs @oliviertassinari @@ -2394,14 +2394,14 @@ A big thanks to the 23 contributors who made this release possible. ### Docs - ​<!-- 37 -->[docs] Add listbox placement demo for Select (#38130) @sai6855 -- ​<!-- 36 -->[docs][base] Add Tailwind CSS & plain CSS demo on the Tabs page (#37910) @mnajdova -- ​<!-- 35 -->[docs][base] Add Tailwind CSS & plain CSS demos on the Textarea page (#37943) @zanivan +- ​<!-- 36 -->[docs][base] Add Tailwind CSS & plain CSS demo on the Tabs page (#37910) @mnajdova +- ​<!-- 35 -->[docs][base] Add Tailwind CSS & plain CSS demos on the Textarea page (#37943) @zanivan - ​<!-- 29 -->[docs] Fix Joy UI menu example (#38140) @harikrishnanp - ​<!-- 28 -->[docs] Remove translations section from contributing guide (#38125) @nikohoffren -- ​<!-- 27 -->[docs] Fix Base UI Button Tailwind CSS padding @oliviertassinari +- ​<!-- 27 -->[docs] Fix Base UI Button Tailwind CSS padding @oliviertassinari - ​<!-- 26 -->[docs] Mention in hompage hero that Core is free (#38075) @mbrookes - ​<!-- 25 -->[docs] Fix a typo in notifications.json (#38078) @mbrookes -- ​<!-- 24 -->[docs] Add Tailwind CSS & plain CSS demo on the table pagination page (#37937) @mnajdova +- ​<!-- 24 -->[docs] Add Tailwind CSS & plain CSS demo on the table pagination page (#37937) @mnajdova - ​<!-- 23 -->[docs] Implement the new API display design (#37405) @alexfauquette - ​<!-- 22 -->[docs] Update migration installation code blocks (#38028) @danilo-leal - ​<!-- 21 -->[docs][joy] Revise the Joy UI Link page (#37829) @danilo-leal @@ -2473,7 +2473,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som ### Docs -- ​<!-- 52 -->[docs][base] Add Tailwind CSS & plain CSS demo on the form control page (#37914) @mnajdova +- ​<!-- 52 -->[docs][base] Add Tailwind CSS & plain CSS demo on the form control page (#37914) @mnajdova - ​<!-- 51 -->[docs][base] Make Base UI Select demos denser (#37836) @zanivan - ​<!-- 38 -->[docs] Link Material UI from the landing page (#37971) @oliviertassinari - ​<!-- 37 -->[docs] Fix the empty /components page (#38010) @brijeshb42 @@ -2485,7 +2485,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som - ​<!-- 31 -->[docs] Link charts in the roadmap (#37944) @oliviertassinari - ​<!-- 30 -->[docs] Improve changelog @oliviertassinari - ​<!-- 29 -->[docs] Improve the Select docs (#37279) @michaldudak -- ​<!-- 16 -->[docs][menu] Add Tailwind CSS & plain CSS demo on the Menu page (#37856) @mnajdova +- ​<!-- 16 -->[docs][menu] Add Tailwind CSS & plain CSS demo on the Menu page (#37856) @mnajdova - ​<!-- 15 -->[example] Update EmotionCacheProvider to work with GlobalStyles (#37962) @siriwatknp ### Core @@ -2559,15 +2559,15 @@ A big thanks to the 15 contributors who made this release possible. Here are som - [docs] Polish Ukraine banner (#37905) @oliviertassinari - [docs] Reduce Ukraine banner size (#34795) @oliviertassinari - [docs] Add callouts about controlled vs uncontrolled components in Core docs (#37849) @samuelsycamore -- [docs] Add missing Portal elements to Tailwind CSS interoperability guide (#37807) @enrique-ramirez +- [docs] Add missing Portal elements to Tailwind CSS interoperability guide (#37807) @enrique-ramirez - [docs] Small pickers migration improvement (#37815) @alexfauquette - [docs] Fix pickers product name (#37825) @LukasTy - [docs][Joy][Link] Set `variant` and `color` defaults for the playground (#37817) @Studio384 - [docs][Joy][Table] Add `undefined` as an option to `stripe` (#37816) @Studio384 -- [docs][base] Add Tailwind CSS & plain CSS demo on the Snackbar page (#37812) @mnajdova -- [docs][base] Add Tailwind CSS & plain CSS demo on Badge page (#37768) @mnajdova +- [docs][base] Add Tailwind CSS & plain CSS demo on the Snackbar page (#37812) @mnajdova +- [docs][base] Add Tailwind CSS & plain CSS demo on Badge page (#37768) @mnajdova - [docs][base] Fix Nested modal demo positioning (#37506) @gitstart -- [docs][base] Add Tailwind CSS & plain CSS demo on the Switch page (#37728) @mnajdova +- [docs][base] Add Tailwind CSS & plain CSS demo on the Switch page (#37728) @mnajdova - [docs-infra] Remove code tags in ToC (#37834) @cherniavskii - [docs-infra] Fixes in API pages generation (#37813) @mnajdova - [docs-infra] Add test case when using sh (#37818) @oliviertassinari @@ -2628,10 +2628,10 @@ This release focuses primarily on 🐛 bug fixes, 📚 documentation, and ⚙️ ### Docs - [docs][base] Add demo for using the Button as a link (#37317) @AdamSundberg -- [docs][base] Add Tailwind CSS + plain CSS demo on the Select page (#37725) @mnajdova +- [docs][base] Add Tailwind CSS + plain CSS demo on the Select page (#37725) @mnajdova - [docs][base] Make Base UI input demos denser (#37750) @zanivan - [docs][base] Make Base UI button demos denser (#37689) @zanivan -- [docs][base] Add Tailwind CSS & plain CSS demos on the Input page (#37685) @mnajdova +- [docs][base] Add Tailwind CSS & plain CSS demos on the Input page (#37685) @mnajdova - [docs][base] Fix horizontal scrolling on the mobile input page (#37688) @zanivan - [docs] Improve Base UI index page (#37761) @oliviertassinari - [docs] Fix incorrect package URL in README of example material-vite (#37755) @Dlouxgit @@ -2640,7 +2640,7 @@ This release focuses primarily on 🐛 bug fixes, 📚 documentation, and ⚙️ - [docs][material] Rename custom tab panel in Tabs demo to prevent confusion with @mui/lab (#37638) @MUK-Dev - [docs][tabs] Document how to use routing with Tabs in Base UI (#37369) @michaldudak - [docs] Rename product to productId (#37801) @siriwatknp -- [docs][base] Add Tailwind CSS & plain CSS demo on the Slider page (#37736) @mnajdova +- [docs][base] Add Tailwind CSS & plain CSS demo on the Slider page (#37736) @mnajdova ### Core @@ -2723,7 +2723,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som - ​<!-- 40 -->[docs][base] Add page for all Base UI components (#37536) @danilo-leal - ​<!-- 33 -->[docs] Fix scrollbar on snackbar page (#37657) @oliviertassinari - ​<!-- 32 -->[docs] Switch order of snackbar buttons in demos (#37389) @Primajin -- ​<!-- 31 -->[docs] Add support for Tailwind CSS and plain CSS demos (#37319) @mnajdova +- ​<!-- 31 -->[docs] Add support for Tailwind CSS and plain CSS demos (#37319) @mnajdova - ​<!-- 30 -->[docs] Tree view color fix for dark mode in Gmail example (#37051) @PunitSoniME - ​<!-- 29 -->[docs] Inline the Base UI demo (#37603) @oliviertassinari - ​<!-- 28 -->[docs] Fix typo in themed components page (#37598) @vinayr @@ -3811,7 +3811,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​<!-- 27 -->[docs][base] List slots in API documentation (#36104) @hbjORbj - ​<!-- 26 -->[docs] Add missing sandbox adapter deps resolving (#36291) @LukasTy - ​<!-- 25 -->[docs] Allow to pass navigation bar banner from outside (#36299) @MBilalShafi -- ​<!-- 24 -->[docs] Fix code on the Working with Tailwind CSS guide (#36090) @mnajdova +- ​<!-- 24 -->[docs] Fix code on the Working with Tailwind CSS guide (#36090) @mnajdova - ​<!-- 23 -->[docs] Remove See Slots Section text from Material UI slots description (#36284) @hbjORbj - ​<!-- 22 -->[docs] Fix emotion warning `:first-child` (#36263) @siriwatknp - ​<!-- 21 -->[docs][joy] Improve the descriptions of props in API docs (#36307) @hbjORbj @@ -4922,7 +4922,7 @@ A big thanks to the 10 contributors who made this release possible. Here are som - [base] Make CSS class prefixes consistent (#33411) @michaldudak **This is a breaking change for anyone who depends on the class names applied to Base components.** - If you use the `<component>UnstyledClasses` objects, you won't notice a difference. Only if you depend on the resulting class names (e.g. in CSS stylesheets), you'll have to adjust your code. + If you use the `<component>UnstyledClasses` objects, you won't notice a difference. Only if you depend on the resulting class names (for example in CSS stylesheets), you'll have to adjust your code. ```diff -.ButtonUnstyled-root { ... }; @@ -5627,7 +5627,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - [docs] Fix typo in the ClickAwayListerner name (#33813) @pawelsmigielski - [docs] Fix link to `Basics` section in `Trap Focus` docs (#33772) @ZeeshanTamboli - [docs] z-index added in popper when used by split button (#33763) @PunitSoniME -- [docs] Improve the guide for using @mui/base with Tailwind CSS (#33670) @mnajdova +- [docs] Improve the guide for using @mui/base with Tailwind CSS (#33670) @mnajdova - [docs] Fix warnings related to Next.js' links (#33693) @mnajdova - [docs] Add notification to aggregation blogpost (#33745) @joserodolfofreitas - [docs] Add Grid version 2 docs (#33554) @siriwatknp @@ -5897,7 +5897,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som - [docs] Add "refine" demo to showcase (#33240) @omeraplak - [docs] Add Webpack alias for legacy utils package (#33376) @jgbae - [docs] Improve external link icons synonyms (#33257) @davidgarciab -- [examples] Update Base UI with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova +- [examples] Update Base UI with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova - [examples] Add Base UI example (#33154) @siriwatknp ### Core @@ -5956,7 +5956,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som - [docs] Add caveat about class components with Tooltip (#33325) @joshkel - [docs] Fix SEO issues (#33288) @oliviertassinari - [docs] Fix Slider's "player" demo (#33267) @xlianghang -- [website] Link MUI Toolpad in mui.com (#33287) @oliviertassinari +- [website] Link Toolpad in mui.com (#33287) @oliviertassinari All contributors of this release in alphabetical order: @aaarichter, @aaronlademann-wf, @danilo-leal, @henriqueholtz, @jake-collibra, @joshkel, @MattiasMartens, @Methuselah96, @michaldudak, @oliviertassinari, @siriwatknp, @TimoWilhelm, @xlianghang @@ -6071,7 +6071,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​<!-- 28 -->[blog] Update Blogpost to clear confusion on "no impact" disclaimer. (#33131) @joserodolfofreitas - ​<!-- 27 -->[blog] Add post about v5 Migration guide update (#33063) @samuelsycamore - ​<!-- 26 -->[blog] Fix display on Safari (#33102) @oliviertassinari -- ​<!-- 18 -->[docs] Add guide on how to use Base UI with Tailwind CSS (#33100) @mnajdova +- ​<!-- 18 -->[docs] Add guide on how to use Base UI with Tailwind CSS (#33100) @mnajdova - ​<!-- 17 -->[docs] Improve Joy template UX (#33159) @siriwatknp - ​<!-- 16 -->[docs] Update Shadow DOM guide (#33160) @cherniavskii - ​<!-- 15 -->[docs] Fix SEO regressions (#33106) @oliviertassinari @@ -6349,7 +6349,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - ​<!-- 31 -->[docs] Simplify header DOM structure (#32844) @oliviertassinari - ​<!-- 30 -->[docs] Fix CodeSandbox & StackBlitz generation (#32726) @siriwatknp - ​<!-- 29 -->[docs] Fix urls to columns pages in pricing table (#32842) @alexfauquette -- ​<!-- 28 -->[docs] Fix Tailwind CSS integration docs (#32512) @robertwt7 +- ​<!-- 28 -->[docs] Fix Tailwind CSS integration docs (#32512) @robertwt7 - ​<!-- 27 -->[docs] Fixed wrong command for the `link-underline-hover` codemod (#32793) @veronikaslc - ​<!-- 26 -->[docs] Fixed broken link on the icons page (#32780) @SamuelMaddox - ​<!-- 25 -->[docs] Add "back to top" button (#30441) @VibhorJaiswal @@ -6920,7 +6920,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - ​<!-- 21 -->[docs] Fix in-house ad for the design kits (#31965) @oliviertassinari - ​<!-- 20 -->[docs] Fix the documentation for filterOptions in Autocomplete API page (#31416) @santhoshbala0178 - ​<!-- 19 -->[docs] Update href for 'TypeScript guide on theme customization' (#31880) @NickFoden -- ​<!-- 18 -->[docs] Fix the CSS modules example in the Interoperability page (#31935) @WilsonNet +- ​<!-- 18 -->[docs] Fix the CSS Modules example in the Interoperability page (#31935) @WilsonNet - ​<!-- 17 -->[docs] Fix small typo in the `styled()` utility page (#31967) @jason1985 - ​<!-- 16 -->[docs] Update mui-x on material-ui navigation (#31810) @siriwatknp - ​<!-- 15 -->[docs] Copy ClickAwayListener docs to Base (#31878) @michaldudak @@ -7289,7 +7289,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - [docs] Use full product names (Material UI, MUI System) (#30960) @oliviertassinari - [docs] Prefer useEnhancedEffect to avoid server side warnings (#30977) @mnajdova - [docs] Fix force redirection to a different locale (#30967) @oliviertassinari -- [docs] Add live Tailwind CSS demo (#30966) @oliviertassinari +- [docs] Add live Tailwind CSS demo (#30966) @oliviertassinari - [website] Add banner for promoting priority open roles (#31076) @danilo-leal - [website] Open Full-stack Engineer role for studio (#31038) @prakhargupta1 - [website] Minor security improvements (#31062) @oliviertassinari @@ -7472,7 +7472,7 @@ _Jan 24, 2022_ A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: -- 🛠 @mnajdova added interoperability guide for using Tailwind CSS (#30700) +- 🛠 @mnajdova added interoperability guide for using Tailwind CSS (#30700) - A meaningful number of 🐛 bug fixes and 📚 documentation improvements. ### `@mui/icons-material@5.3.1` @@ -7498,7 +7498,7 @@ A big thanks to the 12 contributors who made this release possible. Here are som - ​<!-- 21 -->[docs] Fix SEO crawl errors (#30733) @oliviertassinari - ​<!-- 20 -->[docs] Update migration-v4.md (#30721) @ddecrulle - ​<!-- 19 -->[docs] Fix migration issues detected by `ahrefs` (#30751) @siriwatknp -- ​<!-- 18 -->[docs] Add interoprability guide for using Tailwind CSS (#30700) @mnajdova +- ​<!-- 18 -->[docs] Add interoprability guide for using Tailwind CSS (#30700) @mnajdova - ​<!-- 17 -->[docs] Fix typo in containedSizeMedium class (#30723) @aaneitchik - ​<!-- 16 -->[docs] Hotfix the wrong URL in X marketing page (#30729) @siriwatknp - ​<!-- 15 -->[docs] Post migration preparation fix (#30716) @siriwatknp @@ -7712,7 +7712,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​<!-- 08 -->[docs] Fix incorrect number of breakpoint helpers (#30353) @chwallen - ​<!-- 07 -->[docs] Update outdated links (#30260) @oliviertassinari - ​<!-- 06 -->[docs] Support redirects from old urls to /material/\* (#30286) @siriwatknp -- ​<!-- 05 -->[examples] Fix CSS modules integration (#30381) @oliviertassinari +- ​<!-- 05 -->[examples] Fix CSS Modules integration (#30381) @oliviertassinari - ​<!-- 02 -->[website] Fix SEO issues (#30372) @oliviertassinari - ​<!-- 01 -->[website] Sync sponsors (#30259) @oliviertassinari @@ -10082,7 +10082,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - [ButtonBase] Fix role="button" attribute (#26271) @Gautam-Arora24 - [Dialog] Fix support for custom breakpoints (#26331) @jeferson-sb - [Select] Open popup below button (#26200) @oliviertassinari -- [TextField] Add variants support, e.g. custom sizes (#26468) @siriwatknp +- [TextField] Add variants support, for example custom sizes (#26468) @siriwatknp - [Tooltip] Improve handling of small vs. touch screens (#26097) @oliviertassinari ### `@material-ui/codemod@5.0.0-alpha.35` @@ -11607,7 +11607,7 @@ A big thanks to the 30 contributors who made this release possible. Here are som - ​<!-- 78 -->[system] Use spacing unit in `gap`, `rowGap`, and `columnGap` (#24794) @ruppysuppy - If you were using a number previously, you need to provide the value in `px` to bypass the new transformation with `theme.spacing`. The change was done for consistency with the Grid spacing prop and the other system spacing properties, e.g. `<Box padding={2}>`. + If you were using a number previously, you need to provide the value in `px` to bypass the new transformation with `theme.spacing`. The change was done for consistency with the Grid spacing prop and the other system spacing properties, for example `<Box padding={2}>`. ```diff <Box @@ -11991,7 +11991,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - 👩‍🎤 Migrate the Avatar to emotion (#24114) @oliviertassinari - 👩‍🎤 Migrate the Button to emotion (#24107, #24100) @mnajdova - ♿️ Improve TrapFocus behavior, ignore the container as a tabbable element (#23364) @gregnb - In rare cases, an element might not longer be tabbable when looping, e.g. overflow container in Firefox. + In rare cases, an element might not longer be tabbable when looping, for example overflow container in Firefox. You can work around the problem by adding a `tabIndex={0}` or customizing the `getTabbable` prop. - And many more 🐛 bug fixes and 📚 improvements. @@ -12531,7 +12531,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som While the source code is currently hosted in the [main repository](https://github.com/mui/material-ui), we might move it to the [x repository](https://github.com/mui/mui-x) in the future, depending on what is easier for the commercial date range picker. The date picker will stay open source no matter what. -- 📚 Revamp the documentation for [MUI System](https://mui.com/system/getting-started/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page. +- 📚 Revamp the documentation for [MUI System](https://mui.com/system/getting-started/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, for example padding, but when pushed to its limits, it can be used to implement quickly a complete page. - 👩‍🎨 Upgrade emotion to v11 (#23007) @mnajdova. - And many more 🐛 bug fixes and 📚 improvements. @@ -12643,7 +12643,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som Another reason for introducing this package is to prepare the groundwork for a [second theme](https://github.com/mui/material-ui/issues/22485) (not Material Design based). - A note on the terminology: "unstyled" means that the components have the same API as the "styled" components but come without CSS. Material UI also contains "headless" components that exposes a hook API, e.g. [useAutocomplete](https://mui.com/components/autocomplete/#useautocomplete) or [usePagination](https://mui.com/components/pagination/#usepagination). + A note on the terminology: "unstyled" means that the components have the same API as the "styled" components but come without CSS. Material UI also contains "headless" components that exposes a hook API, for example [useAutocomplete](https://mui.com/components/autocomplete/#useautocomplete) or [usePagination](https://mui.com/components/pagination/#usepagination). This change is part of our strategy to iterate on the v5 architecture with the `Slider` first. In the next alpha release, we plan to replace the v4 slider with the v5 slider. Once the new approach is stress-tested and validated, we will roll it out to all the components. @@ -12670,7 +12670,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, for example 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 @@ -14352,7 +14352,7 @@ A big thanks to the 11 contributors who made this release possible. - [core] Drop support for non-ref-forwarding class components (#21811) @eps1lon Support for non-ref-forwarding class components in the `component` prop or as an immediate `children` has been dropped. If you were using `unstable_createStrictModeTheme` or didn't see any warnings related to `findDOMNode` in `React.StrictMode` then you don't need to do anything. Otherwise check out the ["Caveat with refs" section in our composition guide](/guides/composition/#caveat-with-refs) to find out how to migrate. - This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (e.g. `<MenuList><CustomMenuItem /></MenuList>`) + This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (for example `<MenuList><CustomMenuItem /></MenuList>`) - [Stepper] Use context API (#21613) @baterson Rely on the context over the `React.cloneElement()` API. This change makes composition easier. diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md index bae916e5ed7ffa..decee52c129471 100644 --- a/CHANGELOG.old.md +++ b/CHANGELOG.old.md @@ -101,7 +101,7 @@ A big thanks to the 12 contributors who made this release possible. It includes ### @material-ui/system@4.12.0 -- [Box] Deprecate css prop in favor of sx (#23480) @mnajdova +- [Box] Deprecate `css` prop in favor of `sx` prop (#23480) @mnajdova ### Docs @@ -180,7 +180,7 @@ You can expect similar releases like this one in the coming months. - [theme] Deprecate theme.mixins.gutters (#22245) @joshwooding - [Avatar] Add circular variant (#22090) @eps1lon - [Badge] Add overlap circular and rectangular (#22076) @eps1lon -- [Box] Deprecate css prop in favor of sx (#23480) @mnajdova +- [Box] Deprecate `css` prop in favor of `sx` prop (#23480) @mnajdova - [CircularProgress] Backport simplified determinate style & deprecate static (#22094) @mbrookes - [Dialog] Deprecate the transition onX props (#22114) @mbrookes - [GridList] Rename to ImageList & add deprecation warnings (#22363) @mbrookes @@ -654,7 +654,7 @@ Here are some highlights ✨: - [l10n] Add Hindi (hi-IN) locale (#20916) @chandan-singh - [Popper] Fix keepMounted visibility (#20937) @weslenng -- [Select] Focus labelled element on click (#20833) @qkdreyer +- [Select] Focus labeled element on click (#20833) @qkdreyer - [Slider] Fix center label in IE11 (#20942) @Uneetpatel7 - [Tabs] Add `selectionFollowsFocus` (#20936) @eps1lon - [Tabs] Forward aria-label\* attributes to tablist (#20986) @eps1lon @@ -1064,7 +1064,7 @@ Here are some highlights ✨: - ⚛️ Improve the DX, migrate a couple of props' descriptions to TypeScript (#20298, #20171, #20264) @eps1lon. - ![typescript](https://user-images.githubusercontent.com/3165635/77828342-1f376080-711b-11ea-8c9d-c1c245fb17b0.png) + ![TypeScript](https://user-images.githubusercontent.com/3165635/77828342-1f376080-711b-11ea-8c9d-c1c245fb17b0.png) The coverage has increase from 17 to 50 components. We are working on migrating the 94 missing components. @@ -1135,7 +1135,7 @@ Here are some highlights ✨: - [core] Batch small changes (#20255) @oliviertassinari - [core] Fix docs:start which should start next.js server (#20202) @ro7584 - [core] Fix maintenance workflow failing on fork PRs (#20195) @eps1lon -- [core] Format all ts files (#20233) @eps1lon +- [core] Format all .ts files (#20233) @eps1lon ## 4.9.7 @@ -1367,7 +1367,7 @@ A big thanks to the 18 contributors who made this release possible. ### `@material-ui/core@v4.9.3` - [l10n] Add Estonian (et-EE) locale (#19707) @villuv -- [ScopedCssBaseline] Allow css to be only applied on children (#19669) @TomPradat +- [ScopedCssBaseline] Allow CSS to be only applied on children (#19669) @TomPradat ### `@material-ui/system@v4.9.3` @@ -1723,7 +1723,7 @@ A big thanks to the 22 contributors who made this release possible. ### Docs -- [docs] Add TS demo for MenuPopupState (#18998) @eps1lon +- [docs] Add TypeScript demo for MenuPopupState (#18998) @eps1lon - [docs] Add yarn install instructions in CONTRIBUTING.md (#18970) @hiteshkundal - [docs] Clarify not all components have 'component' prop (#19015) @JamieS1211 - [docs] Fix syntax error in palette customization example (#19008) @mumairofficial @@ -1978,7 +1978,7 @@ Here are some highlights ✨: - [Collapse] Add support for unitless collapsedHeight (#18461) @weslenng - [Grid] Infer `displayName` (#18481) @NMinhNguyen - [HiddenCss] Fix warning when using custom breakpoints (#18382) @eps1lon -- [Modal] Prefer to lock scroll on body than html element (#18445) @andreasheim +- [Modal] Prefer to lock scroll on body than HTML element (#18445) @andreasheim - [Popper] Use context for RTL support (#18381) @MisterQH - [Slider] Increase interaction area (#18429) @oliviertassinari - [Slider] Make the slider work as intended when max%step !== 0 (#18438) @macfire10 @@ -2220,18 +2220,18 @@ Here are some highlights ✨: ### `@material-ui/core@v4.5.2` - [Avatar] Revert #17694, correct the API docs, add tests (#18026) @mbrookes -- [Checkbox] Add TS demo for FormControlLabelPosition (#17964) @burtyish +- [Checkbox] Add TypeScript demo for FormControlLabelPosition (#17964) @burtyish - [Dialog] Fix labelledby and describedby placement (#18032) @eps1lon - [Dialog] Reduce margins (#17867) @rahulkotha18 - [ExpansionPanelSummary] Test in StrictMode (#17873) @eps1lon -- [FormControlLabel] Add missing CSS class keys to TS (#17963) @itayyehezkel +- [FormControlLabel] Add missing CSS class keys to TypeScript (#17963) @itayyehezkel - [Link] Warn when using plain function component in `component` (#17825) @Nikhil-Pavan-Sai - [ListSubheader] Reduce specificity of TypeScript type (#17715) @sakulstra - [Menu] Add new context menu demo (#17839) @SarthakC - [Modal] Fix tabIndex customization (#17939) @Cyrus-d - [Modal] Improve Gatsby support (#17972) @sreetej1998 - [Popper] Revert position fix (#17914) @rahulkotha18 -- [Select] Add labelId to implement proper labelling (#17892) @eps1lon +- [Select] Add labelId to implement proper labeling (#17892) @eps1lon - [Select] Better support Preact (#18027) @glromeo - [Select] Document how values are compared (#17912) @DustinRobison - [Slider] Apply the disabled pseudo class on the thumb too (#18011) @hoop71 @@ -2250,7 +2250,7 @@ Here are some highlights ✨: ### `@material-ui/styles@v4.5.2` -- [styles] Allow ref on withTheme components in TS (#17695) @ianschmitz +- [styles] Allow ref on withTheme components in TypeScript (#17695) @ianschmitz ### `@material-ui/system@v4.5.2` @@ -2262,12 +2262,12 @@ Here are some highlights ✨: ### Docs -- [docs] Add TS demo for DynamicCSS (#17994) @netochaves -- [docs] Add TS demo for DynamicCSSVariables (#17983) @netochaves -- [docs] Add TS demo for MaterialTable (#17938) @schapka -- [docs] Add TS demo for WithWidth (#17930) @burtyish -- [docs] Add TS demos for SimpleNoSsr and FrameDeferring (#17913) @ganes1410 -- [docs] Add TS demos for SplitButton in components/buttons (#17862) @rahmatrhd +- [docs] Add TypeScript demo for DynamicCSS (#17994) @netochaves +- [docs] Add TypeScript demo for DynamicCSSVariables (#17983) @netochaves +- [docs] Add TypeScript demo for MaterialTable (#17938) @schapka +- [docs] Add TypeScript demo for WithWidth (#17930) @burtyish +- [docs] Add TypeScript demos for SimpleNoSsr and FrameDeferring (#17913) @ganes1410 +- [docs] Add TypeScript demos for SplitButton in components/buttons (#17862) @rahmatrhd - [docs] Add demo for actions in ExpansionPanelSummary (#17969) @ayliao - [docs] Add demo for prominent app bar (#17894) @burtyish - [docs] Add notification about the date picker survey @oliviertassinari @@ -2370,14 +2370,14 @@ Here are some highlights ✨: ### Docs -- [docs] Add Customization/Components TS demo (#17788) @limatgans -- [docs] Add Media Query TS demo (#17766) @lksilva -- [docs] Add TS demos for guides/interoperability (#17804) @limatgans -- [docs] Add classNames TS demo (#17771) @lksilva -- [docs] Add component demos in ts (#17790) @lksilva -- [docs] Add dynamic class name TS demo (#17793) @lksilva -- [docs] Add useWidth TS demo (#17770) @lksilva -- [docs] Added TS Demos for component/toggle-button (#17822) @limatgans +- [docs] Add Customization/Components TypeScript demo (#17788) @limatgans +- [docs] Add Media Query TypeScript demo (#17766) @lksilva +- [docs] Add TypeScript demos for guides/interoperability (#17804) @limatgans +- [docs] Add classNames TypeScript demo (#17771) @lksilva +- [docs] Add component demos in TypeScript (#17790) @lksilva +- [docs] Add dynamic class name TypeScript demo (#17793) @lksilva +- [docs] Add useWidth TypeScript demo (#17770) @lksilva +- [docs] Added TypeScript Demos for component/toggle-button (#17822) @limatgans - [docs] Better strict mode switch (#17684) @eps1lon - [docs] Change imports from @material-ui/styles to @material-ui/core/styles (#17447) @mnemanja - [docs] Extend size-snapshot (#17633) @eps1lon @@ -2835,7 +2835,7 @@ Here are some highlights ✨: - [benchmark] Fix not running (#16900) @ypresto - [ci] Ignore dependabot branches (#16893) @eps1lon - [core] Generate PropTypes from type definitions (#16642) @merceyz -- [core] Optimise destructuring for useState, useReducer (#16842) @NMinhNguyen +- [core] Optimize destructuring for useState, useReducer (#16842) @NMinhNguyen - yarn docs:api @oliviertassinari ## 4.3.1 @@ -3377,7 +3377,7 @@ Here are some highlights ✨: ### `@material-ui/icons@v4.1.0` -- [icons] Simplify generated index.d.ts to reduce TS compile time (#16083) @phryneas +- [icons] Simplify generated index.d.ts to reduce TypeScript compile time (#16083) @phryneas ### Docs @@ -3528,7 +3528,7 @@ Here are some highlights ✨: ### `@material-ui/codemod@v4.0.1` -- [codemod] Create spacing api codemod (#15782) @joshwooding +- [codemod] Create spacing API codemod (#15782) @joshwooding ### `@material-ui/styles@v4.0.1` @@ -3572,7 +3572,7 @@ Here are some highlights ✨: - [core] Add cross-env to docs:size-why (#15816) @merceyz - [core] Change the top package name so we get the number of dependents packages @oliviertassinari -- [core] Fix not appearing in github used/dependents (#15859) @eps1lon +- [core] Fix not appearing in GitHub used/dependents (#15859) @eps1lon - [core] Prepare focus visible polyfill in ref phase (#15851) @eps1lon - [core] Remove babel-node for server/shared modules (#15764) @cvanem - [core] Remove dependency on workspace (#15849) @eps1lon @@ -3719,7 +3719,7 @@ This is a stability release preparing v4. ### `@material-ui/system@v4.0.0-beta.2` -- [system] Fix css function rejecting certain prop types (#15611) @eps1lon +- [system] Fix CSS function rejecting certain prop types (#15611) @eps1lon ### `@material-ui/lab@v4.0.0-alpha.11` @@ -3737,7 +3737,7 @@ This is a stability release preparing v4. - [docs] Fix the adapting makeStyles based on props example syntax (#15621) @devarsh - [docs] Improve installation instructions for running the docs locally (#15608) @andreawaxman - [docs] Improve v3 migration guide (#15615) @eps1lon -- [docs] Link edit page button to github editor (#15659) @mbrookes +- [docs] Link edit page button to GitHub editor (#15659) @mbrookes - [docs] Miscellaneous polish (#15665) @eps1lon - [docs] Reorganize the structure (#15603) @mbrookes - [docs] Update the translations (#15653) @mbrookes @@ -3957,7 +3957,7 @@ You will learn more about v4 in the final release blog post and our plans for th ### Core - [core] Fix the CI fail (#15428) @oliviertassinari -- [ci] Fail when demos are only available in TS (#15460) @eps1lon +- [ci] Fail when demos are only available in TypeScript (#15460) @eps1lon - [core] Fix useLayoutEffect warnings on the server (#15463) @eps1lon - [core] Minor nitpicks (#15432) @joshwooding - [core] Use terser for minification in umd bundle (#15491) @eps1lon @@ -4228,7 +4228,7 @@ Here are some highlights ✨: ### Core - [test] Forward ref behavior (#15131) @eps1lon -- [core] Use explicit html entity (#15132) @eps1lon +- [core] Use explicit HTML entity (#15132) @eps1lon - [test] Decouple root class from root component (#15168) @eps1lon - [core] Polish `type` type of button related components (#15158) @eps1lon - [DialogContentText] Test conformance (#15206) @eps1lon @@ -4606,7 +4606,7 @@ Here are some highlights ✨: - [docs] Fix Drawer demos accessibility (#14728) @tiagodreis - [docs] Add "Portals" to the styled components documentation (#14720) @C-Rodg - [docs] Specify PaletteIntention syntax (#14727) @ozydingo -- [docs] Add button demos in ts (#14739) @eps1lon +- [docs] Add button demos in TypeScript (#14739) @eps1lon - [docs] Document the migration from v3 to v4 (#14741) @oliviertassinari - [docs] before() is Mocha; beforeEach() is Jest (#14743) @masaok - [docs] Fix IE11 build (#14781) @oliviertassinari @@ -4784,7 +4784,7 @@ Here are some highlights ✨: - [InputLabel] Remove FormLabelClasses in favor of asterisk class (#14504) @umairfarooq44 -You should be able to override all the styles of the FormLabel component using the css API of the InputLabel component. We do no longer need the `FormLabelClasses` property. +You should be able to override all the styles of the FormLabel component using the CSS API of the InputLabel component. We do no longer need the `FormLabelClasses` property. ```diff <InputLabel @@ -4837,13 +4837,13 @@ Remove the first option argument of `withTheme()`. The first argument was a plac - [docs] Update CHANGELOG.md (#14516) @saculbr - [examples] Add lib to tsconfig (#14507) @eps1lon - [docs] Enable es, fr, pt & ru (#14537) @oliviertassinari -- [docs] Add ts demos for menus, fixes ClickAwayListener onClickAway type (#14535) @eps1lon +- [docs] Add TypeScript demos for menus, fixes ClickAwayListener onClickAway type (#14535) @eps1lon - [docs] Update the styling of the TOC (#14520) @mbrookes - [docs] Update breakpoints.md for clarity (#14527) @matthewjwhitney - [docs] Fix Horizontal Non-linear Stepper demo (#14551) @SVTerziev - [docs] Update the branch for Crowdin (#14550) @mbrookes - [docs] Fix hooks codesandbox broken (#14553) @Abbo44 -- [docs] Fix css anchor link (#14554) @umairfarooq44 +- [docs] Fix CSS anchor link (#14554) @umairfarooq44 - [examples] Improve the Gastby integration (#14552) @oliviertassinari - [docs] Add examples of global class names (#14563) @n-batalha - [docs] Change Gitter to Spectrum (#14558) @mbrookes @@ -5033,7 +5033,7 @@ _Tip: you can provide more than one argument: `theme.spacing(1, 2) // = '8px 16p - [docs] Reword certain phrases to improve i10n (#14457) @eps1lon - [docs] Fix IE11 crash on demo pages (#14466) @eps1lon - [docs] Add french translation (#14467) @zek0faws -- [docs] Standardise compose util usage (#14472) @mbrookes +- [docs] Standardize compose util usage (#14472) @mbrookes - [docs] Additional tweaks to English l10n strings (#14471) @mbrookes - [examples] Improve the v3/v4 distinction (#14476) @oliviertassinari - [docs] Change interpolation library (#14481) @mbrookes @@ -5161,7 +5161,7 @@ Here are some highlights ✨: - [LinearProgress] Remove dead bar2Determinate CSS class (#14298) @lmcarreiro - [Select] Help automated UI testing (#14289) @oumaima1234 - [MobileStepper] Fix typo CSS API (#14300) @DenrizSusam -- [Link] Add ts test and distinguish from react-router link test (#14304) @rosskevin +- [Link] Add TypeScript test and distinguish from react-router link test (#14304) @rosskevin ### `@material-ui/styles@v3.0.0-alpha.9` @@ -5516,7 +5516,7 @@ you to add them up quickly in your head without having to worry about decimals. #### Changes -- [Card][list] Change sub-components to have fixed gutters (#13788) @joshwooding +- [Card][list] Change subcomponents to have fixed gutters (#13788) @joshwooding - [Button] Fix padding for Text Button variant to adhere to spec (#13827) @bdeloeste - [ButtonBase] Add stop ripple on context menu event (#13740) @joshwooding - [Menu] Add reason value and update documentation for on close reason (#13877) @rfbotto @@ -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 - for example 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 @@ -5901,7 +5901,7 @@ Here are some highlights ✨: - [Drawer] Add a root style rule for consistency (#13418) @KirankumarAmbati - [Menu] Fix position regression (#13419) @oliviertassinari - [Menu] Add a visual regression test (#13420) @oliviertassinari -- [Select] Fix focused text colour (#13423) @joshwooding +- [Select] Fix focused text color (#13423) @joshwooding - [Tabs] Fix misaligned tab (#13421) @Ang-YC - [OutlinedInput] Improve customization (#13428) @oliviertassinari - [CircularProgress] Introduce disableShrink property (#13430) @joshwooding @@ -6295,7 +6295,7 @@ It contains many bug fixes 🐛 and documentation improvements 📝. - [InputLabel] Fix Chrome's autofill (#12926) @PutziSan - [Tooltip] Fix unwanted tooltip opening (#12929) @ayubov - [TextField] Fix RTL support of outlined (#12939) @RobertPurcea -- [Button] Make the outlined button border grey when disabled (#12933) @dispix +- [Button] Make the outlined button border gray when disabled (#12933) @dispix - [RootRef] Keep track of the DOM node changes (#12953) @oliviertassinari - [Grid] Fix rounding errors (#12952) @RobertPurcea - [Tooltip] Back to 100% test coverage (#12954) @oliviertassinari @@ -6311,7 +6311,7 @@ It contains many bug fixes 🐛 and documentation improvements 📝. ### Docs -- [docs] Make jss insertion point reference the same as html comment (#12896) @emattias +- [docs] Make JSS insertion point reference the same as HTML comment (#12896) @emattias - [docs] Small fixes (#12904) @oliviertassinari - [docs] Add reference to material-ui-theme-editor (#12888) @jdrouet - [docs] Add another case to check when SSR fails (#12908) @oliviertassinari @@ -6717,7 +6717,7 @@ N/A - [docs] Add some Render Props demos (#12366) @jedwards1211 - [docs] Add example layouts (#12410) @mbrookes - [core] Fix some errors when porting demos to TypeScript (#12417) @PavelPZ -- [docs] Standardise the wording between icon docs and readme (#12425) @mbrookes +- [docs] Standardize the wording between icon docs and readme (#12425) @mbrookes - [docs] Improve the withTheme example (#12428) @oliviertassinari - [docs] Rename layouts to page-layout-examples + minor fixes (#12430) @mbrookes - [docs] Ensure `inputRef` is wired up to react-number-format's input (#12444) @NMinhNguyen @@ -6737,7 +6737,7 @@ N/A - [core] Add hoverOpacity to TypeAction interface (#12455) @hassan-zaheer - [core] Save some bytes in the super() logic (#12476) @oliviertassinari - [core] Upgrade the dependencies (#12477) @oliviertassinari -- [typescript] improve autocomplete for css properties in createStyles (#12456) @eps1lon +- [typescript] improve autocomplete for CSS properties in createStyles (#12456) @eps1lon #### Lab @@ -7132,7 +7132,7 @@ N/A - [docs] Document jss-nested rule reference feature (#11901) @i8ramin - [docs] Correct markdown example from svg icon (#11922) @GabrielDuarteM -- [docs] TS decorating reword (#11923) @swpease +- [docs] TypeScript decorating reword (#11923) @swpease ### Core @@ -7813,7 +7813,7 @@ As long as you are providing a valid URL to `<CardMedia image />`, it should be - [docs] Fix the flow example (#11118) @prastut - [docs] Add showcase for Local Insights (#11131) @hrdymchl - [docs] Add iOS momentum scrolling (#11140) @cherniavskii -- [docs] Add a CSS modules example (#11171) @oliviertassinari +- [docs] Add a CSS Modules example (#11171) @oliviertassinari - [docs] Fix typo in themes.md (#11149) @zhuangya - [docs] Make sure next@6 is working (#11168) @oliviertassinari - [docs] Correct spelling error in FormDialog.js example (#11176) @weldon0405 @@ -8199,7 +8199,7 @@ N/A - [docs] Add project to showcase (#10614) @jdupont - [docs] Fix typo (#10621) @prastut -- [docs] Updating the TS example to use CssBaseline (#10633) @yuchen-w +- [docs] Updating the TypeScript example to use CssBaseline (#10633) @yuchen-w - [docs] Better support of multiline for downshift (#10641) @oliviertassinari - [docs] Simplify LongMenu demo (#10646) @RichardLindhout - [docs] Improve the onboarding (#10639) @oliviertassinari @@ -9547,7 +9547,7 @@ Here are some highlights ✨: - [docs] Better definition of what withStyles is (#9235) @ajay2507 - [docs] Save 11% on the images (#9400) @oliviertassinari - [docs] Add a downshift example (#9401) @oliviertassinari -- [docs] Fix Tabs examples typography & standardise code (#9366) @mbrookes +- [docs] Fix Tabs examples typography and standardize code (#9366) @mbrookes - [docs] Add a Plugins paragraph (#9399) @oliviertassinari - [docs] Fix code formatting (#9414) @oliviertassinari - [docs] Add codesandbox edit button (#9416) @oliviertassinari @@ -9693,7 +9693,7 @@ In the following diff `SwitchBase` can be a `Checkbox` a `Radio` or a `Switch`. - [Popover] Implement ability to pass coordinates as anchor (#9004) @jackyho112 - [TextField] Fix undefined blur event (#9042) @nareshbhatia - [Slide] Support dynamic anchor (#9055) @oliviertassinari -- [Input] Remove grey highlight on iOS (#9057) @oliviertassinari +- [Input] Remove gray highlight on iOS (#9057) @oliviertassinari - [Grid] Add missing wrap-reverse classname (#9076) @dehli - [breakpoint] Fix xs value (#9078) @oliviertassinari - [TablePagination] Fix IE11 colSpan issue (#9086) @sakulstra @@ -10061,7 +10061,7 @@ Here are some highlights ✨: </TableFooter> ``` -- [typescript] Fix withStyles typing for class components; remove usage as TS decorator (#8561) @pelotom +- [typescript] Fix withStyles typing for class components; remove usage as TypeScript decorator (#8561) @pelotom We drop the TypeScript decorator support. ### Component Fixes / Enhancements @@ -10446,7 +10446,7 @@ A big thanks to the 13 contributors who made this release possible. - [ButtonBase] Make the `button` and `a` behavior the same (#8130) @oliviertassinari - [withStyle] Memoize the classes object between renders (#8142) @oliviertassinari - [typescript] Fix for Popover -> PaperProps typing (#8129) @xaviergonz -- [typescript] Fix for createPalette TS types (#8123) @xaviergonz +- [typescript] Fix for createPalette TypeScript types (#8123) @xaviergonz - [LinearProgress] Fix loop (#8146) @oliviertassinari - [Card] Add `backgroundPosition: 'center'` to CardMedia (#8148) @kripod - [ImgBot] Optimize images (#8154) @dabutvin @@ -10819,7 +10819,7 @@ A big thanks to the 7 contributors who made this release possible. ### Core - [flow] Export type Props for composability (#7609) @rosskevin -- [typescript] Add TS typings (#7553) @sebald +- [typescript] Add TypeScript typings (#7553) @sebald - [typescript] Improve the coverage (#7606) @sebald - [core] Add isMuiComponent helper (#7635) @katzoo @@ -10882,7 +10882,7 @@ We have been fixing many bugs and implemented new features. The styling solution has also been greatly improved: - Better performance -- Shorter class names in production, e.g. `c1y` +- Shorter class names in production, for example `c1y` - Better readable class names in development - No longer required `MuiThemeProvider` - Simpler `createStyleSheet` API with an optional name @@ -13834,7 +13834,7 @@ _Jan. 26, 2015_ - Radio Button styling now matches material design specs - This component has been revamped and can now be controlled or uncontrolled. - Slider - - Fixed a css bug with slider handles (#225) + - Fixed a CSS bug with slider handles (#225) - Added onDragStart and onDragStop props (#217) - Snackbar - Fixed Ghost hidden snackbar (#235) @@ -14100,7 +14100,7 @@ _Nov. 7, 2014_ - All icon names had to change because of this. Sorry. :( - PaperButton - Added href prop - - Css fixes + - CSS fixes - Dialog - Added onShow event - Children contents of the dialog is only rendered if the dialog is opened @@ -14114,8 +14114,8 @@ _Nov. 7, 2014_ _Nov. 5, 2014_ -- css fix on paper component +- CSS fix on paper component - hover transition fix on buttons - removed selected state on drop down icon component -- css fix on left nav component +- CSS fix on left nav component - added prop on left nav component to allow left nav to be docked and hidden diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ee48c4390a2faa..6c968f9809673b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -253,7 +253,7 @@ Click on **Details** to find out more about them. ### Updating the component API documentation The component API in the component `propTypes` and under `docs/pages/api-docs` is auto-generated from the [JSDoc](https://jsdoc.app/about-getting-started.html) in the TypeScript declarations. -Be sure to update the documentation in the corresponding `.d.ts` files (e.g. `packages/mui-material/src/Button/Button.d.ts` for `<Button>`) and then run: +Be sure to update the documentation in the corresponding `.d.ts` files (for example `packages/mui-material/src/Button/Button.d.ts` for `<Button>`) and then run: ```bash $ pnpm proptypes @@ -300,11 +300,11 @@ docs/src/pages/components/buttons/ #### 2. Write the demo code We uses TypeScript to document our components. -We prefer demos written in TS (using the `.tsx` file format). +We prefer demos written in TypeScript (using the `.tsx` file format). After creating a TypeScript demo, run `pnpm docs:typescript:formatted` to automatically create the JavaScript version, which is also required. -If you're not familiar with TypeScript, you can write the demo in JavaScript, and a core contributor may help you migrate it to TS. +If you're not familiar with TypeScript, you can write the demo in JavaScript, and a core contributor may help you migrate it to TypeScript. #### 3. Edit the page's Markdown file diff --git a/README.md b/README.md index 1c97359217a66e..7a05c9ef9c8b79 100644 --- a/README.md +++ b/README.md @@ -117,7 +117,7 @@ You can find complete templates and themes in the [MUI Store](https://mui.com/s Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes. Contributing is about more than just issues and pull requests! -There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. +There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. ## Changelog @@ -125,7 +125,7 @@ The [changelog](https://github.com/mui/material-ui/releases) is regularly update ## Roadmap -Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/material-ui/discover-more/roadmap/). +Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/material-ui/discover-more/roadmap/). ## License diff --git a/TYPESCRIPT_CONVENTION.md b/TYPESCRIPT_CONVENTION.md index 27a472c2125ab7..6ba33bb990f0f1 100644 --- a/TYPESCRIPT_CONVENTION.md +++ b/TYPESCRIPT_CONVENTION.md @@ -8,7 +8,7 @@ ### `Props Interface` -- export interface `{ComponentName}classes` from `{component}Classes.ts` and add comment for generating api docs (for internal components, may or may not expose classes but don't need comment) +- export interface `{ComponentName}classes` from `{component}Classes.ts` and add comment for generating API docs (for internal components, may or may not expose classes but don't need comment) - export interface `{ComponentName}Props` - always export props interface (use `interface` over `type`) from the component file diff --git a/dangerfile.ts b/dangerfile.ts index 72d77fe2615db4..190f1941279805 100644 --- a/dangerfile.ts +++ b/dangerfile.ts @@ -194,7 +194,7 @@ function addDeployPreviewUrls() { const fragments = url.split('/').reverse(); if (fragments[0] === fragments[1]) { // check if the end of pathname is the same as the one before - // e.g. `/data/material/getting-started/overview/overview.md + // for example `/data/material/getting-started/overview/overview.md url = fragments.slice(1).reverse().join('/'); } diff --git a/docs/data/base/components/focus-trap/focus-trap.md b/docs/data/base/components/focus-trap/focus-trap.md index 76c850021919f3..e04aa60f994042 100644 --- a/docs/data/base/components/focus-trap/focus-trap.md +++ b/docs/data/base/components/focus-trap/focus-trap.md @@ -78,7 +78,7 @@ The following demo uses the [Portal](/base-ui/react-portal/) component to render ### Using a toggle inside the trap -The most common use-case for the Focus Trap component is to maintain focus within a [Modal](/base-ui/react-modal/) component that is entirely separate from the element that opens the modal. +The most common use case for the Focus Trap component is to maintain focus within a [Modal](/base-ui/react-modal/) component that is entirely separate from the element that opens the modal. But you can also create a toggle button for the `open` prop of the Focus Trap component that is stored inside of the component itself, as shown in the following demo: {{"demo": "ContainedToggleTrappedFocus.js"}} diff --git a/docs/data/base/components/form-control/form-control.md b/docs/data/base/components/form-control/form-control.md index cd7ee94950fd2c..cbac657abe62fe 100644 --- a/docs/data/base/components/form-control/form-control.md +++ b/docs/data/base/components/form-control/form-control.md @@ -82,7 +82,7 @@ The demo below shows how to integrate this hook with its component counterpart: {{"demo": "UseFormControl.js", "defaultCodeOpen": false}} -Note that even though Form Control supports both controlled and uncontrolled-style APIs (i.e. it accepts `value` and `defaultValue` props), `useFormControlContext` returns only the controlled `value`. +Note that even though Form Control supports both controlled and uncontrolled-style APIs (that is it accepts `value` and `defaultValue` props), `useFormControlContext` returns only the controlled `value`. This way, you don't have to implement both in your custom input—Form Control does this for you. :::info diff --git a/docs/data/base/components/no-ssr/no-ssr.md b/docs/data/base/components/no-ssr/no-ssr.md index a844312b759c87..5bdc6fbf9fce0a 100644 --- a/docs/data/base/components/no-ssr/no-ssr.md +++ b/docs/data/base/components/no-ssr/no-ssr.md @@ -38,7 +38,7 @@ At its core, the No-SSR component's purpose is to defer rendering from the serve ### Delay client-side rendering -You can also use No-SSR to delay the rendering of specific components on the client side—for example, to let the rest of the application load before an especially complex or data-heavy component. +You can also use No-SSR to delay the rendering of specific components on the client-side—for example, to let the rest of the application load before an especially complex or data-heavy component. The following demo shows how to use the `defer` prop to prioritize rendering the rest of the app outside of what is nested within No-SSR: diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md index c7c4a607acb732..aaf0a1a86923b6 100644 --- a/docs/data/base/components/tabs/tabs.md +++ b/docs/data/base/components/tabs/tabs.md @@ -35,7 +35,7 @@ import { TabPanel } from '@mui/base/TabPanel'; import { Tabs } from '@mui/base/Tabs'; ``` -By default, Tab components and their corresponding panels are **zero-indexed** (i.e. the first tab has a `value` of `0`, then `1`, `2`, etc.). +By default, Tab components and their corresponding panels are **zero-indexed** (that is the first tab has a `value` of `0`, then `1`, `2`, etc.). Clicking on a given Tab opens the panel with the same `value`, which corresponds to the order in which each component is nested within its container. Though not required, you can add the `value` prop to the Tab and Tab Panel to take control over how these components are associated with one another. diff --git a/docs/data/base/getting-started/customization/customization.md b/docs/data/base/getting-started/customization/customization.md index b9b21a6884a145..59fc91b4c797ec 100644 --- a/docs/data/base/getting-started/customization/customization.md +++ b/docs/data/base/getting-started/customization/customization.md @@ -29,9 +29,9 @@ The answer depends on the styling solution used in the project: You can either [style the components using the built-in classes](#applying-custom-css-rules) or [specify your own classes](#customizing-slot-props) and reference them in your stylesheets. -#### CSS Modules +#### CSS Modules -When working with [CSS Modules](https://github.com/css-modules/css-modules), the simplest approach is to [specify custom classes using `slotProps`](#customizing-slot-props), as shown below: +When working with [CSS Modules](https://github.com/css-modules/css-modules), the simplest approach is to [specify custom classes using `slotProps`](#customizing-slot-props), as shown below: ```tsx import clsx from 'clsx'; @@ -57,9 +57,9 @@ export default function Switch(props) { In this example we're using the [clsx](https://www.npmjs.com/package/clsx) utility to reduce the effort needed to apply class names conditionally. -#### Tailwind CSS +#### Tailwind CSS -Use [`slotProps`](#customizing-slot-props) to apply custom styles using [Tailwind CSS](https://tailwindcss.com/), as shown below: +Use [`slotProps`](#customizing-slot-props) to apply custom styles using [Tailwind CSS](https://tailwindcss.com/), as shown below: ```tsx import { Switch as BaseSwitch, SwitchOwnerState } from '@mui/base/Switch'; @@ -83,7 +83,7 @@ export default function Switch(props) { } ``` -See our [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind-css/) for more information about integrating Base UI and Tailwind CSS. +See our [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind-css/) for more information about integrating Base UI and Tailwind CSS. #### Styled components @@ -195,7 +195,7 @@ If you need complete control over a component's rendered HTML structure, you can Hooks give you access to the _logic_ that a component uses, but without any default structure. See ["Components vs. hooks" on the Base Usage page](/base-ui/getting-started/usage/#components-vs-hooks) for more details. -Hooks return the current state of the component (e.g. `checked`, `disabled`, `open`, etc.) and provide functions that return props you can apply to your fully custom components. +Hooks return the current state of the component (for example `checked`, `disabled`, `open`, etc.) and provide functions that return props you can apply to your fully custom components. In the case of [Switch](/base-ui/react-switch/), the component is accompanied by the `useSwitch` hook which gives you all of the functionality without any structure. diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 5d1327c7f1276d..4770357341cc6e 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -17,8 +17,8 @@ Base UI includes prebuilt components with production-ready functionality, along With Base UI, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. :::warning -Base UI's API is currently being revised; there will be no new features or components added to the current implementation. -Learn more about plans for Base UI in [this blog post](/blog/base-ui-2024-plans/). +Base UI's API is currently being revised; there will be no new features or components added to the current implementation. +Learn more about plans for Base UI in [this blog post](/blog/base-ui-2024-plans/). ::: ## Advantages of Base UI diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md index 46be4af8e57ca5..0bcf49c0652a79 100644 --- a/docs/data/base/getting-started/quickstart/quickstart.md +++ b/docs/data/base/getting-started/quickstart/quickstart.md @@ -106,7 +106,7 @@ Pass a `className` prop and use it as a styling hook: <Button className="btn">Create Repository</Button> ``` -Base UI components like the Button come with a classes object (e.g. `buttonClasses`) that provides class hooks for styling a particular state. +Base UI components like the Button come with a classes object (for example `buttonClasses`) that provides class hooks for styling a particular state. ```css /* To style the disabled state: */ @@ -120,15 +120,15 @@ The demo below shows how to create the Primer button using plain CSS with Base  {{"demo": "BaseButtonPlainCss.js", "defaultCodeOpen": false}} -### Styling with Tailwind CSS +### Styling with Tailwind CSS -After installing Tailwind CSS, pass its utility classes to `className`, as shown below: +After installing Tailwind CSS, pass its utility classes to `className`, as shown below: ```tsx <Button className="bg-green-600 rounded-md py-1 px-4...">Create Repository</Button> ``` -The demo below shows how to build the Primer button using Tailwind CSS: +The demo below shows how to build the Primer button using Tailwind CSS: {{"demo": "BaseButtonTailwind.js", "hideToolbar": true, "bg": "inline"}} diff --git a/docs/data/base/getting-started/roadmap/roadmap.md b/docs/data/base/getting-started/roadmap/roadmap.md index 26e20e250cf474..0b138cb782ef44 100644 --- a/docs/data/base/getting-started/roadmap/roadmap.md +++ b/docs/data/base/getting-started/roadmap/roadmap.md @@ -1,22 +1,22 @@ # Roadmap -<p class="description">Keep up with ongoing projects and help shape the future of Base UI.</p> +<p class="description">Keep up with ongoing projects and help shape the future of Base UI.</p> ## How we prioritize -Base UI is a community-driven project, meaning we usually pick the issues and suggestions that resonate the most with the community. +Base UI is a community-driven project, meaning we usually pick the issues and suggestions that resonate the most with the community. Therefore, make sure to leave an upvote 👍 on [the GitHub issues](https://github.com/mui/base-ui/issues) you are most interested in. -Additionally, we conduct annual [developer surveys](/blog/?tags=Developer+survey/) which also serve as key inputs for Base UI's roadmap. +Additionally, we conduct annual [developer surveys](/blog/?tags=Developer+survey/) which also serve as key inputs for Base UI's roadmap. Your participation is invaluable—keep an eye on MUI's social media to catch the next survey and help shape the future of the library! ## Keeping track of the roadmap ### GitHub project -The Base UI GitHub project is where you can see the ongoing priorities for the library. +The Base UI GitHub project is where you can see the ongoing priorities for the library. We typically add umbrella issues to the project board after discussing them internally. -**[Visit the Base UI project board 👉](https://github.com/orgs/mui/projects/1/views/13)** +**[Visit the Base UI project board 👉](https://github.com/orgs/mui/projects/1/views/13)** -<img src="/static/base-ui/roadmap/github-roadmap.png" style="width: 814px;" alt="A screenshot of the public Base UI GitHub project." width="1628" height="400" /> +<img src="/static/base-ui/roadmap/github-roadmap.png" style="width: 814px;" alt="A screenshot of the public Base UI GitHub project." width="1628" height="400" /> diff --git a/docs/data/base/guides/next-js-app-router/next-js-app-router.md b/docs/data/base/guides/next-js-app-router/next-js-app-router.md index ece4eb58d44be6..11db3639e39933 100644 --- a/docs/data/base/guides/next-js-app-router/next-js-app-router.md +++ b/docs/data/base/guides/next-js-app-router/next-js-app-router.md @@ -6,7 +6,7 @@ Starting fresh on a new App Router-based project? -Jump right into the code with [this example: Base UI - Next.js App Router with Tailwind CSS in TypeScript](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts). +Jump right into the code with [this example: Base UI - Next.js App Router with Tailwind CSS in TypeScript](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts). ## Next.js and React Server Components @@ -24,11 +24,11 @@ For more details, see [this explanation](https://github.com/reactwg/server-compo ## Setting up Base UI with the App Router Base UI gives you the freedom to choose your own styling solution, so setting up a Next.js App Router project largely depends on what you choose. -This guide covers Tailwind CSS, Emotion, and other CSS-in-JS solutions like styled-components. +This guide covers Tailwind CSS, Emotion, and other CSS-in-JS solutions like styled-components. -### Tailwind CSS +### Tailwind CSS -Follow the [Tailwind CSS guide on working with Next.js](https://tailwindcss.com/docs/guides/nextjs), and be sure to add the `app` directory and other directories to `tailwind.config.js`, as shown below: +Follow the [Tailwind CSS guide on working with Next.js](https://tailwindcss.com/docs/guides/nextjs), and be sure to add the `app` directory and other directories to `tailwind.config.js`, as shown below: ```js /** @type {import('tailwindcss').Config} */ @@ -46,7 +46,7 @@ module.exports = { }; ``` -Refer to this [example repo](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) for a full working demo of a Next.js 13 app using Base UI and Tailwind CSS. +Refer to this [example repo](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) for a full working demo of a Next.js 13 app using Base UI and Tailwind CSS. ### Emotion @@ -124,7 +124,7 @@ export default function RootLayout(props) { } ``` -If you need to further override theme styles (e.g. using CSS modules), Emotion provides the `prepend: true` option for `createCache` to reverse the injection order, so custom styles can override the theme without using `!important`. +If you need to further override theme styles (for example using CSS Modules), Emotion provides the `prepend: true` option for `createCache` to reverse the injection order, so custom styles can override the theme without using `!important`. Currently, `prepend` does not work reliably with the App Router, but you can work around it by wrapping Emotion styles in a CSS `@layer` with a modification to the snippet above: diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md index fef60e311bbe5f..92cf9f71fa4ad9 100644 --- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md +++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md @@ -1,16 +1,16 @@ -# Working with Tailwind CSS +# Working with Tailwind CSS -<p class="description">Learn how to style Base UI components with Tailwind CSS.</p> +<p class="description">Learn how to style Base UI components with Tailwind CSS.</p> ## Getting started -The goal of this guide is to teach you how to style Base UI components using Tailwind CSS while building an interactive and accessible app. +The goal of this guide is to teach you how to style Base UI components using Tailwind CSS while building an interactive and accessible app. ### Prerequisites This guide assumes that you have a basic working knowledge of the following: -- Tailwind CSS +- Tailwind CSS - TypeScript in React - building React UI components @@ -22,13 +22,13 @@ Here's what it will look like in the end: {{"demo": "PlayerFinal.js", "hideToolbar": true, "bg": true}} :::info -All credits go to the Tailwind Labs team for designing this component, found on the [Tailwind CSS website](https://tailwindcss.com/). +All credits go to the Tailwind Labs team for designing this component, found on the [Tailwind CSS website](https://tailwindcss.com/). ::: ## Setting up the project We'll use [`create-react-app` with TypeScript](https://create-react-app.dev/docs/adding-typescript/#installation) for this guide. -After you have created the project, follow the instructions given on the [Tailwind CSS installation page](https://tailwindcss.com/docs/guides/create-react-app) in order to configure `tailwind`. +After you have created the project, follow the instructions given on the [Tailwind CSS installation page](https://tailwindcss.com/docs/guides/create-react-app) in order to configure `tailwind`. Next, install `@mui/base` in the project: ```bash @@ -37,7 +37,7 @@ npm install @mui/base ## Adding the player markup -Now, create a file called `Player.tsx` and add the markup below, which includes Tailwind CSS classes: +Now, create a file called `Player.tsx` and add the markup below, which includes Tailwind CSS classes: **Player.tsx** @@ -286,7 +286,7 @@ const Slider = React.forwardRef(function Slider( export default Slider; ``` -To assign specific Tailwind CSS utility classes for each part of the component, we're using `slotProps`. +To assign specific Tailwind CSS utility classes for each part of the component, we're using `slotProps`. Most of them were copied from the original markup with small adjustments now that it is interactive. ### Add the slider to the player @@ -513,9 +513,9 @@ Some classes were slightly changed on some buttons so we have a consistent focus These are the things we covered in this guide: -✅ How to use Tailwind CSS utility classes to style Base UI components, using the `slotProps` prop for targeting specific slots within the component.\ +✅ How to use Tailwind CSS utility classes to style Base UI components, using the `slotProps` prop for targeting specific slots within the component.\ ✅ How to create custom components for specific slots in more complex customization scenarios. We used the `component` prop to pass them into the parent component.\ ✅ How to apply conditional styling based on the owner component's state using a callback as value for the `slotProps` prop. -Get all the code used in this guide in the [Base UI with Tailwind CSS](https://codesandbox.io/p/sandbox/working-with-tailwind-css-dhmf8w) example project. +Get all the code used in this guide in the [Base UI with Tailwind CSS](https://codesandbox.io/p/sandbox/working-with-tailwind-css-dhmf8w) example project. diff --git a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js index 9035d29c01b11d..731724086cd6a6 100644 --- a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js +++ b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js @@ -80,7 +80,7 @@ export default function FreeSoloCreateOptionDialog() { }} options={top100Films} getOptionLabel={(option) => { - // e.g. value selected with enter, right from the input + // for example value selected with enter, right from the input if (typeof option === 'string') { return option; } diff --git a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx index f0931094d3d28c..66be05b2f75806 100644 --- a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx +++ b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx @@ -80,7 +80,7 @@ export default function FreeSoloCreateOptionDialog() { }} options={top100Films} getOptionLabel={(option) => { - // e.g. value selected with enter, right from the input + // for example value selected with enter, right from the input if (typeof option === 'string') { return option; } diff --git a/docs/data/joy/components/autocomplete/autocomplete.md b/docs/data/joy/components/autocomplete/autocomplete.md index 3947809b70c2bb..a9e17593ccc14e 100644 --- a/docs/data/joy/components/autocomplete/autocomplete.md +++ b/docs/data/joy/components/autocomplete/autocomplete.md @@ -147,7 +147,7 @@ It displays a progress state as long as the network request is pending. ### Search input -Use `freeSolo` to create a **search input** with suggestions experience, e.g. Google search or [react-autowhatever](https://github.com/moroshko/react-autowhatever). +Use `freeSolo` to create a **search input** with suggestions experience, for example Google search or [react-autowhatever](https://github.com/moroshko/react-autowhatever). {{"demo": "FreeSolo.js"}} @@ -324,7 +324,7 @@ A possible workaround is to remove the `id` to have the component generate a ran In addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following: -- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. +- Name the input without leaking any information the browser can use. For example `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. - Set `autoComplete="new-password"` (some browsers will suggest a strong password for inputs with this attribute setting): ```jsx diff --git a/docs/data/joy/components/button-group/button-group.md b/docs/data/joy/components/button-group/button-group.md index d77cffd4e83c97..68e5e8ba128eab 100644 --- a/docs/data/joy/components/button-group/button-group.md +++ b/docs/data/joy/components/button-group/button-group.md @@ -71,7 +71,7 @@ Use `spacing` prop to control the gap between buttons. If the `spacing` is set t :::success The type of value can be: -- `string`: any valid CSS length unit, e.g. `px`, `rem`, `em`, etc. +- `string`: any valid CSS length unit, for example `px`, `rem`, `em`, etc. - `number`: will be calculated by `theme.spacing` function. - `array`: the responsive values based on the breakpoints defined in the theme. - `object`: the key must be one of the breakpoints defined in the theme (the defaults are `"xs" | "sm" | "md" | "lg" | "xl")`, and the value is the spacing of type `string` or `number`. diff --git a/docs/data/joy/components/grid/grid.md b/docs/data/joy/components/grid/grid.md index ff29fb560ae99f..1d0e14ac6cd926 100644 --- a/docs/data/joy/components/grid/grid.md +++ b/docs/data/joy/components/grid/grid.md @@ -14,7 +14,7 @@ githubLabel: 'component: Grid' The Grid component, based on a 12-column grid layout, creates visual consistency between layouts while allowing flexibility across a wide variety of designs. :::warning -The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the [MUI X Data Grid`](/x/react-data-grid/) component. +The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the [MUI X Data Grid`](/x/react-data-grid/) component. ::: ## Basics diff --git a/docs/data/joy/components/list/list.md b/docs/data/joy/components/list/list.md index 1f581b0a8e4225..0904eb53699c19 100644 --- a/docs/data/joy/components/list/list.md +++ b/docs/data/joy/components/list/list.md @@ -252,7 +252,7 @@ It also supports keyboard navigation, inspired by the [Roving UX](https://github To ensure that your List is accessible, here are some factors you should consider: -- Use the appropriate HTML semantic element for the list (eg. `ol` or `ul`), to ensure that assistive technologies can correctly interpret the list structure. +- Use the appropriate HTML semantic element for the list (for example `ol` or `ul`), to ensure that assistive technologies can correctly interpret the list structure. - Make sure to use a meaningful name that describes the content of the list in the `aria-labelledby` prop. - Use `role` attributes to provide additional information about the purpose of the list and its items. For example, use `role="list"` for the list and `role="listitem"` for each list item. diff --git a/docs/data/joy/components/modal/modal.md b/docs/data/joy/components/modal/modal.md index 2256c4b431a4f1..9fe6a5c5621f37 100644 --- a/docs/data/joy/components/modal/modal.md +++ b/docs/data/joy/components/modal/modal.md @@ -53,7 +53,7 @@ export default function MyApp() { ### Basic usage The Modal accepts only a single React element as a child. -That can be either a Joy UI component, e.g. [`Sheet`](/joy-ui/react-sheet/), or any other custom element. +That can be either a Joy UI component, for example [`Sheet`](/joy-ui/react-sheet/), or any other custom element. Use the Modal Close component to render a close button that inherits the modal's `onClose` function. diff --git a/docs/data/joy/components/radio-button/radio-button.md b/docs/data/joy/components/radio-button/radio-button.md index e033a85ee31b84..8cce03965dc20a 100644 --- a/docs/data/joy/components/radio-button/radio-button.md +++ b/docs/data/joy/components/radio-button/radio-button.md @@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radio/ ## Introduction -Radio buttons let users make a mutually exclusive choice (e.g., this or that). +Radio buttons let users make a mutually exclusive choice (for example: "this" or "that"). Only one selection is allowed from the available set of options. Radio buttons should have the most commonly used option selected by default. diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md index 9e8d20ec74234f..b67463b390bd2f 100644 --- a/docs/data/joy/components/switch/switch.md +++ b/docs/data/joy/components/switch/switch.md @@ -52,7 +52,7 @@ By default, the color of the switch changes from `neutral` to `primary` when it ### Label -When a `Switch` is used together with `FormControl` and `FormLabel`, the switch is labelled automatically. You can also use `FormHelperText` to include a description to the switch as well. +When a `Switch` is used together with `FormControl` and `FormLabel`, the switch is labeled automatically. You can also use `FormHelperText` to include a description to the switch as well. {{"demo": "SwitchControl.js"}} @@ -139,7 +139,7 @@ Here are a few tips to make sure you have an accessible switch component: - Every form control component should have proper labels. This includes radio buttons, checkboxes, and switches. In most cases, this is done using the `<label>` element. - - If a label can't be applied, make sure to add an attribute (e.g. `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `slotProps` prop. + - If a label can't be applied, make sure to add an attribute (for example `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `slotProps` prop. ```jsx <Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} /> ``` diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md index 85f1b5206df449..c1a29d13c9a6c1 100644 --- a/docs/data/joy/components/textarea/textarea.md +++ b/docs/data/joy/components/textarea/textarea.md @@ -50,7 +50,7 @@ Toggle the palette that's being used to color the by text field by using the `co ### Form props -Standard form attributes are supported e.g. `required`, `disabled`, etc. +Standard form attributes are supported for example `required`, `disabled`, etc. {{"demo": "TextareaFormProps.js"}} diff --git a/docs/data/joy/components/typography/TypographyTitleBody.js b/docs/data/joy/components/typography/TypographyTitleBody.js index 3a4317ef645b65..b4e54adcf3ef8c 100644 --- a/docs/data/joy/components/typography/TypographyTitleBody.js +++ b/docs/data/joy/components/typography/TypographyTitleBody.js @@ -61,7 +61,7 @@ export default function TypographyTitleBody() { </Typography> </Typography> <Typography level="body-sm"> - Metadata, e.g. a date.{' '} + Metadata, for example a date.{' '} <Typography level="body-sm" textColor="var(--joy-palette-success-plainColor)" @@ -97,7 +97,7 @@ export default function TypographyTitleBody() { </Typography> </Typography> <Typography level="body-xs"> - Metadata, e.g. a date.{' '} + Metadata, for example a date.{' '} <Typography level="body-xs" textColor="var(--joy-palette-success-plainColor)" diff --git a/docs/data/joy/components/typography/TypographyTitleBody.tsx b/docs/data/joy/components/typography/TypographyTitleBody.tsx index 3a4317ef645b65..b4e54adcf3ef8c 100644 --- a/docs/data/joy/components/typography/TypographyTitleBody.tsx +++ b/docs/data/joy/components/typography/TypographyTitleBody.tsx @@ -61,7 +61,7 @@ export default function TypographyTitleBody() { </Typography> </Typography> <Typography level="body-sm"> - Metadata, e.g. a date.{' '} + Metadata, for example a date.{' '} <Typography level="body-sm" textColor="var(--joy-palette-success-plainColor)" @@ -97,7 +97,7 @@ export default function TypographyTitleBody() { </Typography> </Typography> <Typography level="body-xs"> - Metadata, e.g. a date.{' '} + Metadata, for example a date.{' '} <Typography level="body-xs" textColor="var(--joy-palette-success-plainColor)" diff --git a/docs/data/joy/components/typography/typography.md b/docs/data/joy/components/typography/typography.md index cd4b749f0b933a..52ccec7e071ba3 100644 --- a/docs/data/joy/components/typography/typography.md +++ b/docs/data/joy/components/typography/typography.md @@ -78,7 +78,7 @@ These values include various heading levels (h1, h2, h3, etc.) as well as body t Additionally, you can also use the level prop to control the font size, weight, line height, and other typographic properties. :::warning -Keep in mind that each level renders a specific HTML tag (e.g. "h1" renders as an `<h1>` element, "body-md" renders as a `<p>`, etc.) +Keep in mind that each level renders a specific HTML tag (for example "h1" renders as an `<h1>` element, "body-md" renders as a `<p>`, etc.) ::: {{"demo": "TypographyScales.js"}} diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md index d934885c269287..452fd42d569fcb 100644 --- a/docs/data/joy/customization/theme-colors/theme-colors.md +++ b/docs/data/joy/customization/theme-colors/theme-colors.md @@ -81,7 +81,7 @@ For example, here's how you'd make the Joy UI Button match the colors of anothe {{"demo": "BootstrapVariantTokens.js"}} - Bootstrap's default buttons are comparable to Joy UI's `solid` variant. -- Bootstrap's `secondary` variant uses a grey color, similar to Joy UI's `neutral`. +- Bootstrap's `secondary` variant uses a gray color, similar to Joy UI's `neutral`. - Bootstrap's `btn-light` is similar to Joy UI's button using the `soft` variant and `neutral` color palette. - Joy UI's defaults don't include anything similar to Bootstrap's `btn-dark`. - We can recreate it using one of the three main customization approaches. diff --git a/docs/data/joy/customization/theme-shadow/theme-shadow.md b/docs/data/joy/customization/theme-shadow/theme-shadow.md index 4c8224f0eefc6f..6fa937b4b44aa3 100644 --- a/docs/data/joy/customization/theme-shadow/theme-shadow.md +++ b/docs/data/joy/customization/theme-shadow/theme-shadow.md @@ -116,7 +116,7 @@ const theme = extendTheme({ ``` :::warning -The `shadowChannel` value must be rgb channels, e.g. `187 187 187`. +The `shadowChannel` value must be rgb channels, for example `187 187 187`. ::: ## Customizing shadows on an element diff --git a/docs/data/joy/customization/themed-components/themed-components.md b/docs/data/joy/customization/themed-components/themed-components.md index 249980b4b0f75b..a69f127f583b99 100644 --- a/docs/data/joy/customization/themed-components/themed-components.md +++ b/docs/data/joy/customization/themed-components/themed-components.md @@ -190,7 +190,7 @@ declare module '@mui/joy/Button' { ### Extend sizes The following code snippet illustrates how to provide additional sizes to a component beyond `sm`, `md`, and `lg`. -We recommend following the established "t-shirt size" naming convention (e.g. `xs`, `xl`, `xxl`, etc.) to maintain consistency with all the other props. +We recommend following the established "t-shirt size" naming convention (for example `xs`, `xl`, `xxl`, etc.) to maintain consistency with all the other props. The example below extends the Button sizes to include `xs` and `xl` values: diff --git a/docs/data/joy/customization/using-css-variables/using-css-variables.md b/docs/data/joy/customization/using-css-variables/using-css-variables.md index 94ee3976e2af41..0f8d08de2373f4 100644 --- a/docs/data/joy/customization/using-css-variables/using-css-variables.md +++ b/docs/data/joy/customization/using-css-variables/using-css-variables.md @@ -122,7 +122,7 @@ const Div = styled('div')(({ theme }) => ({ ``` :::warning -The format of the channel tokens uses a space as a separator (e.g., `61 131 246`), which means you have to use `/` to combine the channel token with an opacity value. +The format of the channel tokens uses a space as a separator (for example `61 131 246`), which means you have to use `/` to combine the channel token with an opacity value. ```js `rgba(${theme.vars.palette.primary.mainChannel} / 0.2)`, // ✅ correct diff --git a/docs/data/joy/migration/TitleBodyIconExample.js b/docs/data/joy/migration/TitleBodyIconExample.js index 0a790f3ad80bdd..e14d7acf9d48a8 100644 --- a/docs/data/joy/migration/TitleBodyIconExample.js +++ b/docs/data/joy/migration/TitleBodyIconExample.js @@ -60,7 +60,7 @@ export default function TitleBodyIconExample() { some information of it. </Typography> <Typography level="body-sm"> - <i>body-sm</i>: Metadata, e.g. a date. + <i>body-sm</i>: Metadata, for example a date. </Typography> </div> </Stack> @@ -90,7 +90,7 @@ export default function TitleBodyIconExample() { some information of it. </Typography> <Typography level="body-xs"> - <i>body-xs</i>: Metadata, e.g. a date. + <i>body-xs</i>: Metadata, for example a date. </Typography> </div> </Stack> diff --git a/docs/data/joy/migration/TitleBodyIconExample.tsx b/docs/data/joy/migration/TitleBodyIconExample.tsx index 0a790f3ad80bdd..e14d7acf9d48a8 100644 --- a/docs/data/joy/migration/TitleBodyIconExample.tsx +++ b/docs/data/joy/migration/TitleBodyIconExample.tsx @@ -60,7 +60,7 @@ export default function TitleBodyIconExample() { some information of it. </Typography> <Typography level="body-sm"> - <i>body-sm</i>: Metadata, e.g. a date. + <i>body-sm</i>: Metadata, for example a date. </Typography> </div> </Stack> @@ -90,7 +90,7 @@ export default function TitleBodyIconExample() { some information of it. </Typography> <Typography level="body-xs"> - <i>body-xs</i>: Metadata, e.g. a date. + <i>body-xs</i>: Metadata, for example a date. </Typography> </div> </Stack> diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js index 47e51826760a40..22516f183d3bb1 100644 --- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js +++ b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js @@ -75,7 +75,7 @@ export default function FreeSoloCreateOptionDialog() { id="free-solo-dialog-demo" options={top100Films} getOptionLabel={(option) => { - // e.g. value selected with enter, right from the input + // for example value selected with enter, right from the input if (typeof option === 'string') { return option; } diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx index 429d3dedc6bde3..779b26e26d6d17 100644 --- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx +++ b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx @@ -75,7 +75,7 @@ export default function FreeSoloCreateOptionDialog() { id="free-solo-dialog-demo" options={top100Films} getOptionLabel={(option) => { - // e.g. value selected with enter, right from the input + // for example value selected with enter, right from the input if (typeof option === 'string') { return option; } diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md index 9dab4d8409dcc8..3fe82cf70232db 100644 --- a/docs/data/material/components/autocomplete/autocomplete.md +++ b/docs/data/material/components/autocomplete/autocomplete.md @@ -12,8 +12,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: -1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box). -2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). +1. The value for the textbox must be chosen from a predefined set of allowed values, for example a location field must contain a valid location name: [combo box](#combo-box). +2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, for example a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). It's meant to be an improved version of the "react-select" and "downshift" packages. @@ -108,7 +108,7 @@ Set `freeSolo` to true so the textbox can contain any arbitrary value. ### Search input -The prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever. +The prop is designed to cover the primary use case of a **search input** with suggestions, for example Google search or react-autowhatever. {{"demo": "FreeSolo.js"}} @@ -375,7 +375,7 @@ A possible workaround is to remove the `id` to have the component generate a ran In addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following: -- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. +- Name the input without leaking any information the browser can use. For example `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. - Set `autoComplete="new-password"` (some browsers will suggest a strong password for inputs with this attribute setting): ```jsx diff --git a/docs/data/material/components/checkboxes/checkboxes.md b/docs/data/material/components/checkboxes/checkboxes.md index 1621413386f73f..c2ef0d2ec1984f 100644 --- a/docs/data/material/components/checkboxes/checkboxes.md +++ b/docs/data/material/components/checkboxes/checkboxes.md @@ -94,7 +94,7 @@ You can learn more about this in the [overrides documentation page](/material-ui - All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `<label>` element ([FormControlLabel](/material-ui/api/form-control-label/)). - When a label can't be used, it's necessary to add an attribute directly to the input component. - In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop. + In this case, you can apply the additional attribute (for example `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop. ```jsx <Checkbox diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md index 848d4381db46f2..d3e3ec3947c82b 100644 --- a/docs/data/material/components/chips/chips.md +++ b/docs/data/material/components/chips/chips.md @@ -114,4 +114,4 @@ To learn more about Material UI's M3 implementation, visit the [M3 Components d ## Accessibility -If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip. +If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (for example when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip. diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index fc90f242b05e20..87a89ff8ed435a 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -44,7 +44,7 @@ Alerts are urgent interruptions, requiring acknowledgement, that inform the user Most alerts don't need titles. They summarize a decision in a sentence or two by either: -- Asking a question (e.g. "Delete this conversation?") +- Asking a question (for example "Delete this conversation?") - Making a statement related to the action buttons Use title bar alerts only for high-risk situations, such as the potential loss of connectivity. diff --git a/docs/data/material/components/lists/lists.md b/docs/data/material/components/lists/lists.md index 61915c91e3168c..9a9e213a003db5 100644 --- a/docs/data/material/components/lists/lists.md +++ b/docs/data/material/components/lists/lists.md @@ -18,7 +18,7 @@ Lists are a continuous group of text or images. They are composed of items conta Lists present information in a concise, easy-to-follow format through a continuous, vertical index of text or images. -Material UI Lists are implemented using a collection of related components: +Material UI Lists are implemented using a collection of related components: - List: a wrapper for list items. Renders as a `<ul>` by default. - List Item: a common list item. Renders as an `<li>` by default. diff --git a/docs/data/material/components/modal/modal.md b/docs/data/material/components/modal/modal.md index ad799ada426ae2..d50cc10cb69af4 100644 --- a/docs/data/material/components/modal/modal.md +++ b/docs/data/material/components/modal/modal.md @@ -97,7 +97,7 @@ In order to display the modal, you need to disable the portal feature with the ` The modal moves the focus back to the body of the component if the focus tries to escape it. This is done for accessibility purposes. However, it might create issues. -In the event the users need to interact with another part of the page, e.g. with a chatbot window, you can disable the behavior: +In the event the users need to interact with another part of the page, for example with a chatbot window, you can disable the behavior: ```jsx <Modal disableEnforceFocus /> diff --git a/docs/data/material/components/radio-buttons/radio-buttons.md b/docs/data/material/components/radio-buttons/radio-buttons.md index 8a39c6ed2acc9a..b73b440e9f5b36 100644 --- a/docs/data/material/components/radio-buttons/radio-buttons.md +++ b/docs/data/material/components/radio-buttons/radio-buttons.md @@ -106,7 +106,7 @@ import { useRadioGroup } from '@mui/material/RadioGroup'; - All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `<label>` element ([FormControlLabel](/material-ui/api/form-control-label/)). - When a label can't be used, it's necessary to add an attribute directly to the input component. - In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-labelledby`, `title`) via the `inputProps` property. + In this case, you can apply the additional attribute (for example `aria-label`, `aria-labelledby`, `title`) via the `inputProps` property. ```jsx <Radio diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index e2ef612eeb4765..dae86fd2c14743 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -99,7 +99,7 @@ You can learn more about this in the [overrides documentation page](/material-ui {{"demo": "VerticalSlider.js"}} -**WARNING**: Chrome, Safari and newer Edge versions i.e. any browser based on WebKit exposes `<Slider orientation="vertical" />` as horizontal ([chromium issue #1158217](https://bugs.chromium.org/p/chromium/issues/detail?id=1158217)). +**WARNING**: Chrome, Safari and newer Edge versions that is any browser based on WebKit exposes `<Slider orientation="vertical" />` as horizontal ([chromium issue #1158217](https://bugs.chromium.org/p/chromium/issues/detail?id=1158217)). By applying `-webkit-appearance: slider-vertical;` the slider is exposed as vertical. However, by applying `-webkit-appearance: slider-vertical;` keyboard navigation for horizontal keys (<kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd>) is reversed ([chromium issue #1162640](https://bugs.chromium.org/p/chromium/issues/detail?id=1162640)). diff --git a/docs/data/material/components/switches/switches.md b/docs/data/material/components/switches/switches.md index 9562bbdf81dd38..81ba2f452d1077 100644 --- a/docs/data/material/components/switches/switches.md +++ b/docs/data/material/components/switches/switches.md @@ -77,7 +77,7 @@ You can change the placement of the label: `<Switch inputProps={{ role: 'switch' }}>` - All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `<label>` element ([FormControlLabel](/material-ui/api/form-control-label/)). - When a label can't be used, it's necessary to add an attribute directly to the input component. - In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop. + In this case, you can apply the additional attribute (for example `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop. ```jsx <Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} /> diff --git a/docs/data/material/components/table/table.md b/docs/data/material/components/table/table.md index a51d2b2d9833e6..51a333e5c0d763 100644 --- a/docs/data/material/components/table/table.md +++ b/docs/data/material/components/table/table.md @@ -34,7 +34,7 @@ The [`DataGrid` component](/x/react-data-grid/) is designed for use-cases that a While it comes with a more rigid structure, in exchange, you gain more powerful features. :::info -The demo below uses the MUI X Data Grid v7, which is currently in beta. +The demo below uses the MUI X Data Grid v7, which is currently in beta. Visit [the documentation](https://next.mui.com/x/react-data-grid/) to learn more about it. ::: @@ -88,7 +88,7 @@ The `ActionsComponent` prop of the `TablePagination` component allows the implem Here is an example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop. -(⚠️ no IE 11 support) +(⚠️ no IE 11 support) {{"demo": "StickyHeadTable.js", "bg": true}} diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md index 0887d549e1edb0..f75936d72dee57 100644 --- a/docs/data/material/components/tabs/tabs.md +++ b/docs/data/material/components/tabs/tabs.md @@ -104,7 +104,7 @@ If you want to make sure the buttons are always visible, you should customize th ### Prevent scroll buttons Left and right scroll buttons are never be presented with `scrollButtons={false}`. -All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift mouse wheel, etc.) +All scrolling must be initiated through user agent scrolling mechanisms (for example left/right swipe, shift mouse wheel, etc.) {{"demo": "ScrollableTabsButtonPrevent.js", "bg": true}} @@ -173,7 +173,7 @@ The WAI-ARIA authoring practices have a detailed guide on [how to decide when to #### Demo The following two demos only differ in their keyboard navigation behavior. -Focus a tab and navigate with arrow keys to notice the difference, e.g. <kbd class="key">Arrow Left</kbd>. +Focus a tab and navigate with arrow keys to notice the difference, for example <kbd class="key">Arrow Left</kbd>. ```jsx /* Tabs where selection follows focus */ diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index f1ccc478de10dc..f9a954f8b6b225 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -30,7 +30,7 @@ but Material UI will continue to support it. ## 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. +Standard form attributes are supported, for example `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": "FormPropsTextFields.js"}} @@ -286,7 +286,7 @@ This can be fixed by passing a space character to the `helperText` prop: You can use third-party libraries to format an input. You have to provide a custom implementation of the `<input>` element with the `inputComponent` property. -The following demo uses the [react-imask](https://github.com/uNmAnNeR/imaskjs) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui/material-ui/issues/16037). +The following demo uses the [react-imask](https://github.com/uNmAnNeR/imaskjs) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to, for example [react-stripe-element](https://github.com/mui/material-ui/issues/16037). {{"demo": "FormattedInputs.js"}} @@ -338,7 +338,7 @@ In order for the text field to be accessible, **the input should be linked to th </div> ``` -- If you are using the `TextField` component, you just have to provide a unique `id` unless you're using the `TextField` only client side. +- If you are using the `TextField` component, you just have to provide a unique `id` unless you're using the `TextField` only client-side. Until the UI is hydrated `TextField` without an explicit `id` will not have associated labels. - If you are composing the component: diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md index 67bd79f443e2d9..caeb6337bfbec5 100644 --- a/docs/data/material/components/use-media-query/use-media-query.md +++ b/docs/data/material/components/use-media-query/use-media-query.md @@ -19,11 +19,11 @@ Some of the key features: ## Basic media query You should provide a media query to the first argument of the hook. -The media query string can be any valid CSS media query, e.g. [`'(prefers-color-scheme: dark)'`](/material-ui/customization/dark-mode/#system-preference). +The media query string can be any valid CSS media query, for example [`'(prefers-color-scheme: dark)'`](/material-ui/customization/dark-mode/#system-preference). {{"demo": "SimpleMediaQuery.js", "defaultCodeOpen": true}} -⚠️ You can't use `'print'` per browsers limitation, e.g. [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=774398). +⚠️ You can't use `'print'` per browsers limitation, for example [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=774398). ## Using Material UI's breakpoint helpers @@ -116,7 +116,7 @@ const theme = createTheme({ ``` :::info -Note that `noSsr` has no effects when using the `createRoot()` API (the client side only API introduced in React 18). +Note that `noSsr` has no effects when using the `createRoot()` API (the client-side only API introduced in React 18). ::: ## Server-side rendering diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md index 43733e40fbac28..e6b17e100ed112 100644 --- a/docs/data/material/customization/color/color.md +++ b/docs/data/material/customization/color/color.md @@ -80,7 +80,7 @@ These color palettes, originally created by Material Design in 2014, are compris ### Important Terms -- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material UI provides all colors from the Material Design guidelines. +- **Palette**: A palette is a collection of colors, that is hues and their shades. Material UI provides all colors from the Material Design guidelines. [This color palette](#color-palette) has been designed with colors that work harmoniously with each other. - **Hue & Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "red 50" is the lightest shade of red (_pink!_), while "red 900" is the darkest. diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md index c540a3c09c33d5..38eb9c465b2131 100644 --- a/docs/data/material/customization/typography/typography.md +++ b/docs/data/material/customization/typography/typography.md @@ -181,7 +181,7 @@ html { } ``` -_You need to apply the above CSS on the html element of this page to see the below demo rendered correctly_ +_You need to apply the above CSS on the HTML element of this page to see the below demo rendered correctly_ {{"demo": "FontSizeTheme.js"}} diff --git a/docs/data/material/experimental-api/classname-generator/classname-generator.md b/docs/data/material/experimental-api/classname-generator/classname-generator.md index b51352928e8e2e..a2b5f0471883e6 100644 --- a/docs/data/material/experimental-api/classname-generator/classname-generator.md +++ b/docs/data/material/experimental-api/classname-generator/classname-generator.md @@ -10,7 +10,7 @@ This API is at an unstable stage and is subject to change in the future. ## Setup -By default, Material UI generates a global class name for each component slot. For example, `<Button>Text</Button>` generates html as: +By default, Material UI generates a global class name for each component slot. For example, `<Button>Text</Button>` generates HTML as: ```html <button diff --git a/docs/data/material/experimental-api/css-theme-variables/customization.md b/docs/data/material/experimental-api/css-theme-variables/customization.md index 910d01bd9e98d0..bc5362b5beca89 100644 --- a/docs/data/material/experimental-api/css-theme-variables/customization.md +++ b/docs/data/material/experimental-api/css-theme-variables/customization.md @@ -85,7 +85,7 @@ const theme = extendTheme({ ### Channel tokens -A channel token is a variable that consists of [color space channels](https://www.w3.org/TR/css-color-4/#color-syntax) but without the alpha component. The value of a channel token is separated by a space, e.g. `12 223 31`, which can be combined with the [color functions](https://www.w3.org/TR/css-color-4/#color-functions) to create a translucent color. +A channel token is a variable that consists of [color space channels](https://www.w3.org/TR/css-color-4/#color-syntax) but without the alpha component. The value of a channel token is separated by a space, for example `12 223 31`, which can be combined with the [color functions](https://www.w3.org/TR/css-color-4/#color-functions) to create a translucent color. The `extendTheme()` automatically generates channel tokens that are likely to be used frequently from the theme palette. Those colors are suffixed with `Channel`, for example: diff --git a/docs/data/material/experimental-api/css-theme-variables/migration.md b/docs/data/material/experimental-api/css-theme-variables/migration.md index 20e1d0cfb18670..02cf6c5a4bddc2 100644 --- a/docs/data/material/experimental-api/css-theme-variables/migration.md +++ b/docs/data/material/experimental-api/css-theme-variables/migration.md @@ -39,7 +39,7 @@ Other properties can be copied and pasted. - }, - ... - }, -- // ...other properties, e.g. breakpoints, spacing, shape, typography, components +- // ...other properties, for example breakpoints, spacing, shape, typography, components -}); -const darkTheme = createTheme({ diff --git a/docs/data/material/experimental-api/css-theme-variables/usage/usage.md b/docs/data/material/experimental-api/css-theme-variables/usage/usage.md index a9b5f33f0ef56c..08089eb2def2a3 100644 --- a/docs/data/material/experimental-api/css-theme-variables/usage/usage.md +++ b/docs/data/material/experimental-api/css-theme-variables/usage/usage.md @@ -7,7 +7,7 @@ The CSS variables API relies on a new experimental provider for the theme called `Experimental_CssVarsProvider` to inject styles into Material UI components. In addition to providing the theme in the inner React context, this new provider also generates CSS variables out of all tokens in the theme that are not functions, and makes them available in the context as well. -Once the `App` renders on the screen, you will see the CSS theme variables in the html `:root` stylesheet. +Once the `App` renders on the screen, you will see the CSS theme variables in the HTML `:root` stylesheet. The variables are flattened and prefixed with `--mui` by default: ```css @@ -101,7 +101,7 @@ The structure of this object is nearly identical to the theme structure, the onl Make sure that the components accessing `theme.vars.*` are rendered under the new provider, otherwise you will get a `TypeError`. ::: -- **Native CSS**: if you can't access the theme object, e.g. in a pure CSS file, you can use [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) directly: +- **Native CSS**: if you can't access the theme object, for example in a pure CSS file, you can use [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var) directly: ```css /* external-scope.css */ diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index 810cb82a8e5484..d337d170b89db9 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -29,7 +29,7 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293 The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers. - **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem. It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. - You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). + You can count on the community's support for years to come (for example [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). ### Material UI vs. Base UI diff --git a/docs/data/material/guides/api/api.md b/docs/data/material/guides/api/api.md index 7350aa14bc73bc..476d40b1279438 100644 --- a/docs/data/material/guides/api/api.md +++ b/docs/data/material/guides/api/api.md @@ -48,10 +48,10 @@ to make the classes structure as simple as possible, while sufficient to impleme - The class applied to the root element is always called `root`. - All the default styles are grouped in a single class. -- The classes applied to non-root elements are prefixed with the name of the element, e.g. `paperWidthXs` in the Dialog component. -- The variants applied by a boolean prop **aren't** prefixed, e.g. the `rounded` class +- The classes applied to non-root elements are prefixed with the name of the element, for example `paperWidthXs` in the Dialog component. +- The variants applied by a boolean prop **aren't** prefixed, for example the `rounded` class applied by the `rounded` prop. -- The variants applied by an enum prop **are** prefixed, e.g. the `colorPrimary` class +- The variants applied by an enum prop **are** prefixed, for example the `colorPrimary` class applied by the `color="primary"` prop. - A variant has **one level of specificity**. The `color` and `variant` props are considered a variant. @@ -168,8 +168,8 @@ to that component instead. ## Glossary -- **host component**: a DOM node type in the context of `react-dom`, e.g. a `'div'`. See also [React Implementation Notes](https://legacy.reactjs.org/docs/implementation-notes.html#mounting-host-elements). -- **host element**: a DOM node in the context of `react-dom`, e.g. an instance of `window.HTMLDivElement`. -- **outermost**: The first component when reading the component tree from top to bottom i.e. breadth-first search. +- **host component**: a DOM node type in the context of `react-dom`, for example a `'div'`. See also [React Implementation Notes](https://legacy.reactjs.org/docs/implementation-notes.html#mounting-host-elements). +- **host element**: a DOM node in the context of `react-dom`, for example an instance of `window.HTMLDivElement`. +- **outermost**: The first component when reading the component tree from top to bottom, that is breadth-first search. - **root component**: the outermost component that renders a host component. - **root element**: the outermost element that renders a host component. diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md index 12b9072d7956ee..9a70b80956a4b5 100644 --- a/docs/data/material/guides/composition/composition.md +++ b/docs/data/material/guides/composition/composition.md @@ -77,7 +77,7 @@ function ListItemLink(props) { ``` :::warning -However, since we are using an inline function to change the rendered component, React will remount the link every time `ListItemLink` is rendered. Not only will React update the DOM unnecessarily but the state will be lost, e.g. the ripple effect of the `ListItem` will also not work correctly. +However, since we are using an inline function to change the rendered component, React will remount the link every time `ListItemLink` is rendered. Not only will React update the DOM unnecessarily but the state will be lost, for example the ripple effect of the `ListItem` will also not work correctly. ::: The solution is simple: **avoid inline functions and pass a static component to the `component` prop** instead. @@ -123,7 +123,7 @@ import { Link } from 'react-router-dom'; :::warning However, this strategy suffers from a limitation: prop name collisions. -The component receiving the `component` prop (e.g. ListItem) might intercept the prop (e.g. to) that is destined to the leave element (e.g. Link). +The component receiving the `component` prop (for example ListItem) might intercept the prop (for example to) that is destined to the leave element (for example Link). ::: ### With TypeScript @@ -186,8 +186,8 @@ by using `ReactDOM.findDOMNode`. This function is deprecated in favor of `ref` a ref forwarding. However, only the following component types can be given a `ref`: - Any Material UI component -- class components i.e. `React.Component` or `React.PureComponent` -- DOM (or host) components e.g. `div` or `button` +- class components, that is `React.Component` or `React.PureComponent` +- DOM (or host) components, for example `div` or `button` - [React.forwardRef components](https://react.dev/reference/react/forwardRef) - [React.lazy components](https://react.dev/reference/react/lazy) - [React.memo components](https://react.dev/reference/react/memo) diff --git a/docs/data/material/guides/server-rendering/server-rendering.md b/docs/data/material/guides/server-rendering/server-rendering.md index 899c9ab638cbe4..50622983151d5b 100644 --- a/docs/data/material/guides/server-rendering/server-rendering.md +++ b/docs/data/material/guides/server-rendering/server-rendering.md @@ -102,7 +102,7 @@ export default function createEmotionCache() { } ``` -With this we are creating a new Emotion cache instance and using this to extract the critical styles for the html as well. +With this we are creating a new Emotion cache instance and using this to extract the critical styles for the HTML as well. We will see how this is passed along in the `renderFullPage` function. diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md index 32b93202cd0b2b..5f6a6161a06f20 100644 --- a/docs/data/material/guides/typescript/typescript.md +++ b/docs/data/material/guides/typescript/typescript.md @@ -32,16 +32,14 @@ Many components concerned with user input offer a `value` prop or event handlers which include the current `value`. In most situations that `value` is only handled within React which allows it be of any type, such as objects or arrays. -However, that type cannot be verified at compile time in situations where it depends -on the component's children e.g. for `Select` or `RadioGroup`. This means that -the soundest option is to type it as `unknown` and let the developer decide -how they want to narrow that type down. We do not offer the possibility to use a generic -type in those cases for [the same reasons `event.target` is not generic in React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682). - -The demos include typed variants that use type casting. It is an acceptable tradeoff -because the types are all located in a single file and are very basic. You have to decide for yourself -if the same tradeoff is acceptable for you. The library types are strict -by default and loose via opt-in. +However, that type cannot be verified at compile time in situations where it depends on the component's children, for example `Select` or `RadioGroup`. +This means that the soundest option is to type it as `unknown` and let the developer decide how they want to narrow that type down. +We do not offer the possibility to use a generic type in those cases for [the same reasons `event.target` is not generic in React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682). + +The demos include typed variants that use type casting. +It is an acceptable tradeoff because the types are all located in a single file and are very basic. +You have to decide for yourself if the same tradeoff is acceptable for you. +The library types are strict by default and loose via opt-in. ## Customization of `Theme` diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md index f5928e24657497..425437c389d43b 100644 --- a/docs/data/material/integrations/interoperability/interoperability.md +++ b/docs/data/material/integrations/interoperability/interoperability.md @@ -9,9 +9,9 @@ There are examples for the following styling solutions: - [Plain CSS](#plain-css) - [Global CSS](#global-css) - [Styled Components](#styled-components) -- [CSS Modules](#css-modules) +- [CSS Modules](#css-modules) - [Emotion](#emotion) -- [Tailwind CSS](#tailwind-css) +- [Tailwind CSS](#tailwind-css) - [~~JSS~~ TSS](#jss-tss) ## Plain CSS @@ -420,7 +420,7 @@ const StyledTooltip = styled(({ className, ...props }) => ( {{"demo": "StyledComponentsPortal.js"}} -## CSS Modules +## CSS Modules ![stars](https://img.shields.io/github/stars/css-modules/css-modules.svg?style=social&label=Star) @@ -506,7 +506,7 @@ export default function CssModulesPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same. -It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector. +It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector. The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself. @@ -605,18 +605,18 @@ It works exactly like styled components. You can [use the same guide](/material- It works exactly like styled components. You can [use the same guide](/material-ui/integrations/interoperability/#styled-components). -## Tailwind CSS +## Tailwind CSS ![stars](https://img.shields.io/github/stars/tailwindlabs/tailwindcss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/tailwindcss) ### Setup -If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project. +If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project. If you use a different framework, or already have set up your project, follow these steps: -1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation. -2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)). +1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation. +2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)). **tailwind.config.js** @@ -647,11 +647,11 @@ If you use a different framework, or already have set up your project, follow th ``` Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary. -However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS. +However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS. Use this step to help ensure that the [deeper elements](#deeper-elements-5) can always be customized using Tailwind's utility classes. More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy -4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI: +4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML `<head>`, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI: ```jsx import * as React from 'react'; @@ -731,7 +731,7 @@ root.render( ### Usage -Now it's all set up and you can start using Tailwind CSS on the Material UI components! +Now it's all set up and you can start using Tailwind CSS on the Material UI components! {{"demo": "StyledComponents.js", "hideToolbar": true}} diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 044877d094ce95..2ab03e40830cf9 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -143,13 +143,13 @@ If you are using a styling solution other than Emotion to customize Material UI <AppRouterCacheProvider options={{ enableCssLayer: true }}> ``` -This option ensures that the styles generated by Material UI will be wrapped in a CSS `@layer mui` rule, which is overridden by anonymous layer styles when using Material UI with CSS modules, Tailwind CSS, or even plain CSS without using `@layer`. +This option ensures that the styles generated by Material UI will be wrapped in a CSS `@layer mui` rule, which is overridden by anonymous layer styles when using Material UI with CSS Modules, Tailwind CSS, or even plain CSS without using `@layer`. To learn more about it, see [the MDN CSS layer documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer). ## Pages Router -This section walks through the Material UI integration with the Next.js [Pages Router](https://nextjs.org/docs/pages/building-your-application), for both [Server Side Rendering](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering) (SSR) and [Static Site Generation](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation) (SSG). +This section walks through the Material UI integration with the Next.js [Pages Router](https://nextjs.org/docs/pages/building-your-application), for both [Server-side Rendering](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering) (SSR) and [Static Site Generation](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation) (SSG). ### Installing the dependencies diff --git a/docs/data/material/migration/migration-v4/migrating-from-jss.md b/docs/data/material/migration/migration-v4/migrating-from-jss.md index f6969d76befd9e..f63580f6d44eb1 100644 --- a/docs/data/material/migration/migration-v4/migrating-from-jss.md +++ b/docs/data/material/migration/migration-v4/migrating-from-jss.md @@ -14,7 +14,7 @@ One of the biggest changes in v5 is the replacement of JSS for [Emotion](https://emotion.sh/docs/introduction) (or [styled-components](https://styled-components.com/) as an alternative) as a default styling solution . -Note that you may continue to use JSS for adding overrides for the components (e.g. `makeStyles`, `withStyles`) even after migrating to v5. +Note that you may continue to use JSS for adding overrides for the components (for example `makeStyles`, `withStyles`) even after migrating to v5. Then, if at any point you want to move over to the new styling engine, you can refactor your components progressively. :::info diff --git a/docs/data/material/migration/migration-v4/migration-v4.md b/docs/data/material/migration/migration-v4/migration-v4.md index 25ee2d8984da60..6feaca110bff0c 100644 --- a/docs/data/material/migration/migration-v4/migration-v4.md +++ b/docs/data/material/migration/migration-v4/migration-v4.md @@ -18,7 +18,7 @@ We highly recommend running our [codemods](#run-codemods) for efficiency—these One of the biggest changes in v5 is the replacement of JSS for [Emotion](https://emotion.sh/docs/introduction) as a default styling solution. -Note that you may continue to use JSS for adding overrides to the components (e.g. `makeStyles`, `withStyles`) even after migrating to v5. +Note that you may continue to use JSS for adding overrides to the components (for example `makeStyles`, `withStyles`) even after migrating to v5. Once you've completed the rest of the v5 upgrade, we recommend progressively moving over to the new styling engine. This process is covered in [Migrating from JSS](/material-ui/migration/migrating-from-jss/). @@ -94,7 +94,7 @@ yarn upgrade @material-ui/core@^4.11.2 react@^17.0.0 The minimum supported version of TypeScript has been increased from v3.2 to v3.5. :::info -We try to align with types released by [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) (i.e. packages published on npm under the `@types` namespace). +We try to align with types released by [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) (that is packages published on npm under the `@types` namespace). We will not change the minimum supported version in a minor version of Material UI. However, we generally recommend not to use a TypeScript version older than the lowest supported version of DefinitelyTyped. diff --git a/docs/data/material/migration/migration-v4/v5-style-changes.md b/docs/data/material/migration/migration-v4/v5-style-changes.md index 81c19871e95c92..1f907c24ca3c25 100644 --- a/docs/data/material/migration/migration-v4/v5-style-changes.md +++ b/docs/data/material/migration/migration-v4/v5-style-changes.md @@ -108,7 +108,7 @@ Support for non-ref-forwarding class components in the `component` prop or as im If you were using `unstable_createStrictModeTheme` or didn't see any warnings related to `findDOMNode` in `React.StrictMode` then you don't need to take any further action. Otherwise check out the [Caveat with refs](/material-ui/guides/composition/#caveat-with-refs) section in the Composition guide to find out how to migrate. -This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (e.g. `<MenuList><CustomMenuItem /></MenuList>`). +This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (for example `<MenuList><CustomMenuItem /></MenuList>`). ### Fix ref type specificity diff --git a/docs/data/styles/advanced/advanced.md b/docs/data/styles/advanced/advanced.md index ca15e7021062de..5e5d2bfea0009d 100644 --- a/docs/data/styles/advanced/advanced.md +++ b/docs/data/styles/advanced/advanced.md @@ -240,7 +240,7 @@ Read this section from the MDN docs for more information: [How is specificity ca ::: By default, the style tags are injected **last** in the `<head>` element of the page. -They gain more specificity than any other style tags on your page e.g. CSS modules, styled components. +They gain more specificity than any other style tags on your page for example CSS Modules, styled components. ### injectFirst @@ -399,7 +399,7 @@ function render() { } ``` -You can [follow the server side guide](/material-ui/guides/server-rendering/) for a more detailed example, or read the [`ServerStyleSheets` API documentation](/system/styles/api/#serverstylesheets). +You can [follow the server-side guide](/material-ui/guides/server-rendering/) for a more detailed example, or read the [`ServerStyleSheets` API documentation](/system/styles/api/#serverstylesheets). ### CSS prefixing diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md index 611d8a91a22eba..5c2603a88cde17 100644 --- a/docs/data/system/getting-started/usage/usage.md +++ b/docs/data/system/getting-started/usage/usage.md @@ -299,7 +299,7 @@ Here's what that looks like: {{"demo": "BreakpointsAsArray.js"}} :::success -This option should only be considered when the theme has a limited number of breakpoints, e.g. 3. +This option should only be considered when the theme has a limited number of breakpoints, for example 3. We recommend using the object API instead if you need to define more than a few breakpoints. ::: diff --git a/docs/mui-vale.zip b/docs/mui-vale.zip new file mode 100644 index 00000000000000..0449ef8a4debf5 Binary files /dev/null and b/docs/mui-vale.zip differ diff --git a/docs/mui-vale/.vale.ini b/docs/mui-vale/.vale.ini new file mode 100644 index 00000000000000..f8b00bdb5dab5d --- /dev/null +++ b/docs/mui-vale/.vale.ini @@ -0,0 +1,2 @@ +# This is subfolder included in our .zip archive. +StylesPath = styles diff --git a/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml b/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml new file mode 100644 index 00000000000000..dc47ba73ff9e69 --- /dev/null +++ b/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml @@ -0,0 +1,30 @@ +# Enforce a single way to write specific terms or phrases. +extends: substitution +message: Use '%s' instead of '%s' +level: error +ignorecase: true +# swap maps tokens in form of bad: good +# for more information: https://vale.sh/docs/topics/styles/#substitution +swap: + api: API + typescript: TypeScript + ts: TypeScript + javascript: JavaScript + ' css ': CSS + ' html ': HTML + NPM: npm # https://css-tricks.com/start-sentence-npm/ + Github: GitHub + StackOverflow: Stack Overflow + CSS modules: CSS Modules + Tailwind CSS: Tailwind CSS + Heat map: Heatmap + Tree map: Treemap + Sparkline Chart: Sparkline + Gauge Chart: Gauge + Treemap Chart: Treemap + sub-component: subcomponent + sub-components: subcomponents + use-case: 'use case' + usecase: 'use case' + client side: 'client-side' + server side: 'server-side' diff --git a/docs/mui-vale/styles/MUI/CorrectRerenceCased.yml b/docs/mui-vale/styles/MUI/CorrectRerenceCased.yml new file mode 100644 index 00000000000000..85853ab5146d39 --- /dev/null +++ b/docs/mui-vale/styles/MUI/CorrectRerenceCased.yml @@ -0,0 +1,13 @@ +# Write things correctly, please no wrong references. +extends: substitution +message: Use '%s' instead of '%s' +level: error +ignorecase: false +# swap maps tokens in form of bad: good +# for more information: https://vale.sh/docs/topics/styles/#substitution +swap: + eg: e.g. + eg\.: e.g. + 'e\.g ': 'e.g.' + 'ie\.': i.e. + 'i\.e ': 'i.e.' diff --git a/docs/mui-vale/styles/MUI/GoogleLatin.yml b/docs/mui-vale/styles/MUI/GoogleLatin.yml new file mode 100644 index 00000000000000..61bdbf909f4e71 --- /dev/null +++ b/docs/mui-vale/styles/MUI/GoogleLatin.yml @@ -0,0 +1,11 @@ +extends: substitution +message: Use '%s' instead of '%s' +link: https://developers.google.com/style/abbreviations +ignorecase: false +level: error +nonword: true +action: + name: replace +swap: + '\b(?:eg|e\.g\.)(?=[\s,;])': for example + '\b(?:ie|i\.e\.)(?=[\s,;])': that is diff --git a/docs/writing-rules/BrandName.yml b/docs/mui-vale/styles/MUI/MuiBrandName.yml similarity index 81% rename from docs/writing-rules/BrandName.yml rename to docs/mui-vale/styles/MUI/MuiBrandName.yml index 5669e7912b2f47..3a5251f2ccf622 100644 --- a/docs/writing-rules/BrandName.yml +++ b/docs/mui-vale/styles/MUI/MuiBrandName.yml @@ -15,11 +15,8 @@ swap: MUI System: MUI System MUI Store: MUI Store MUI Core: MUI Core - Toolpad: Toolpad + MUI Toolpad: Toolpad + MUI Toolpad: Toolpad MUI Connect: MUI Connect Stack Overflow: Stack Overflow Pigment CSS: Pigment CSS -# Don't forget to run the following command to generate the package writing-rules.zip file -# Vale uses that ZIP file and not the YAML files. -# -# pnpm docs:zipRules diff --git a/docs/mui-vale/styles/MUI/NoBritish.yml b/docs/mui-vale/styles/MUI/NoBritish.yml new file mode 100644 index 00000000000000..6ce7dc93a3ff2b --- /dev/null +++ b/docs/mui-vale/styles/MUI/NoBritish.yml @@ -0,0 +1,112 @@ +extends: substitution +message: Use the US spelling '%s' instead of the British '%s' +link: https://www.notion.so/mui-org/Writing-style-guide-2a957a4168a54d47b14bae026d06a24b?pvs=4#25755bff02764565b954631236ab183d +level: error +ignorecase: true +swap: + aeon: eon + aeroplane: airplane + ageing: aging + aluminium: aluminum + anaemia: anemia + anaesthesia: anesthesia + analyse: analyze + annexe: annex + apologise: apologize + authorisation: authorization + authorise: authorize + authorised: authorized + authorising: authorizing + behaviour: behavior + bellow: below + busses: buses + calibre: caliber + categorise: categorize + categorised: categorized + categorises: categorizes + categorising: categorizing + centre: center + cheque: check + civilisation: civilization + civilise: civilize + colour: color + cosy: cozy + cypher: cipher + defence: defense + dependant: dependent + distil: distill + draught: draft + encyclopaedia: encyclopedia + enquiry: inquiry + enrol: enroll + enrolment: enrollment + enthral: enthrall + favourite: favorite + fibre: fiber + fillet: filet + flavour: flavor + fulfil: fulfill + furore: furor + gaol: jail + grey: gray + honour: honor + humour: humor + initialled: initialed + initialling: initialing + instil: instill + jewellery: jewelry + labelled: labeled + labelling: labeling + labour: labor + libellous: libelous + licence: license + likeable: likable + liveable: livable + lustre: luster + manoeuvre: maneuver + marvellous: marvelous + meagre: meager + metre: meter + modelling: modeling + moustache: mustache + neighbour: neighbor + normalise: normalize + offence: offense + optimise: optimize + optimised: optimized + optimising: optimizing + organise: organize + orientated: oriented + paralyse: paralyze + plough: plow + pretence: pretense + programme: program + pyjamas: pajamas + rateable: ratable + realise: realize + recognise: recognize + reconnoitre: reconnoiter + rumour: rumor + sabre: saber + saleable: salable + saltpetre: saltpeter + sceptic: skeptic + sepulchre: sepulcher + signalling: signaling + sizeable: sizable + skilful: skillful + smoulder: smolder + sombre: somber + speciality: specialty + spectre: specter + splendour: splendor + standardise: standardize + standardised: standardized + sulphur: sulfur + theatre: theater + travelled: traveled + traveller: traveler + travelling: traveling + unshakeable: unshakable + wilful: willful + yoghurt: yogurt diff --git a/docs/writing-rules/NoCompanyName.yml b/docs/mui-vale/styles/MUI/NoCompanyName.yml similarity index 67% rename from docs/writing-rules/NoCompanyName.yml rename to docs/mui-vale/styles/MUI/NoCompanyName.yml index 19e4d50efe0a1a..8556df60383e22 100644 --- a/docs/writing-rules/NoCompanyName.yml +++ b/docs/mui-vale/styles/MUI/NoCompanyName.yml @@ -12,8 +12,4 @@ exceptions: - 'MUI Toolpad' - 'MUI Connect' - 'MUI organization' # valid use of a regular space - -# Don't forget to run the following command to generate the package writing-rules.zip file -# Vale uses that ZIP file and not the YAML files. -# -# pnpm docs:zipRules + - 'MUI ecosystem' # valid use of a regular space diff --git a/docs/pages/_document.js b/docs/pages/_document.js index 599e5e0fd99be5..ecd5633bf5a5b3 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -226,7 +226,7 @@ MyDocument.getInitialProps = async (ctx) => { enhanceApp: (App) => (props) => jssSheets.collect(<App {...props} />), resolveProps: async (initialProps) => { let css = jssSheets.toString(); - // It might be undefined, e.g. after an error. + // It might be undefined, for example after an error. if (css && process.env.NODE_ENV === 'production') { const result1 = await prefixer.process(css, { from: undefined }); css = result1.css; diff --git a/docs/pages/blog/2019-developer-survey-results.md b/docs/pages/blog/2019-developer-survey-results.md index ca7cabcfd7a390..e165e9126938c5 100644 --- a/docs/pages/blog/2019-developer-survey-results.md +++ b/docs/pages/blog/2019-developer-survey-results.md @@ -270,12 +270,12 @@ section. Multiple options were allowed. -- Web app (e.g. create react app): 92% +- Web app (for example create react app): 92% - Progressive web app (with service worker): 25% - Server-side rendering 14% -- Static web site, hosted on a CDN (e.g. Gatsby): 13% -- Desktop app (e.g. Electron): 12% -- Native mobile app (e.g. Cordova): 6% +- Static web site, hosted on a CDN (for example Gatsby): 13% +- Desktop app (for example Electron): 12% +- Native mobile app (for example Cordova): 6% ### 16. Who are you building it for? @@ -300,7 +300,7 @@ Multiple options were allowed. - @mui/styles: 85% - Styled components: 30% - Good old CSS (+sass, less, etc): 24% -- CSS Modules (+sass, less, etc): 16% +- CSS Modules (+sass, less, etc): 16% - Emotion: 4% Traditional CSS users are still prevalent (24% + 16%). diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md index 2e3cb544696ba2..122352e3238f39 100644 --- a/docs/pages/blog/2019.md +++ b/docs/pages/blog/2019.md @@ -32,7 +32,7 @@ We soon realized that we could do way more. It was just the beginning :D. Some of the key factors: - The results of the [2019 Developer Survey](https://mui.com/blog/2019-developer-survey-results/) have highlighted the immense potential for working on advanced components and features, especially for enterprise users. - Developers are craving for a UI framework that they can learn once (e.g. few breaking changes, only one solution per problem) and use everywhere (e.g. comprehensive, customizable, high-quality). + Developers are craving for a UI framework that they can learn once (for example few breaking changes, only one solution per problem) and use everywhere (for example comprehensive, customizable, high-quality). - Bootstrap had successfully released [a theme store](https://themes.getbootstrap.com/). Following this approach opened an opportunity to capture a fraction of the value Material UI creates for its users, and funnel it back into R&D on the framework. - The market for paid UI components is in the order of a couple of \$100m/year, diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md index c1f493d9ec5872..4077d99d27ceef 100644 --- a/docs/pages/blog/2020-developer-survey-results.md +++ b/docs/pages/blog/2020-developer-survey-results.md @@ -51,6 +51,8 @@ The responses to this question are a very clear indicator to us about what we ne As the answers to these questions were pretty different, we grouped them into different categories and counted the different number of times the concern was mentioned. You can see all of them sorted in descending order: +<!-- vale MUI.CorrectReferenceAllCases = NO --> + <style>th { text-align: left; border-bottom: 3px solid !important; }</style> <table> @@ -179,6 +181,8 @@ As the answers to these questions were pretty different, we grouped them into di <tr><th>3</th><th>grid - improve</th><tr> </table> +<!-- vale MUI.CorrectReferenceAllCases = YES --> + ### Comparison with last year There are a couple of noticeable differences compared to last year. @@ -279,7 +283,7 @@ section. ### 19. What styling system are you using? -<img src="/static/blog/2020-survey/19.png" style="width: 796px; margin-top: 16px; margin-bottom: 8px;" alt="Pie chart: 53.84% Material UI styles (JSS), 20.41% Styled components, 13.01% Good plain CSS, 8.31% CSS Modules, 1.96% Emotion, 0.59% scss, 0.59% sass, 0.09% less, 1.19% Other" /> +<img src="/static/blog/2020-survey/19.png" style="width: 796px; margin-top: 16px; margin-bottom: 8px;" alt="Pie chart: 53.84% Material UI styles (JSS), 20.41% Styled components, 13.01% Good plain CSS, 8.31% CSS Modules, 1.96% Emotion, 0.59% scss, 0.59% sass, 0.09% less, 1.19% Other" /> The response seems to be similar to the one from the last year's survey, so we will push with better support for styled components. @@ -303,8 +307,8 @@ We want to work on the problems that resonate the most with our users. 1. Provide more flexibility on the components, unstyled components (pure hooks?). 1. Make the customization easier and implement custom themes with Material UI. Maybe provide a theme builder. -1. Provide a second theme, update the current components to better match Material Design, provide more simple components and features (e.g. dropzone, carousel) as well as provide a better DX (there are good ideas from other UI libraries to apply to Material UI v5). -1. Improve upon the paid advanced versions of the components (e.g. complex data grid, date range picker, tree view drag & drop, virtualization, etc). +1. Provide a second theme, update the current components to better match Material Design, provide more simple components and features (for example dropzone, carousel) as well as provide a better DX (there are good ideas from other UI libraries to apply to Material UI v5). +1. Improve upon the paid advanced versions of the components (for example complex data grid, date range picker, tree view drag & drop, virtualization, etc). **We will update [our ROADMAP](/material-ui/discover-more/roadmap/) in the coming days**. We will run a similar survey next year to keep track of our progress. diff --git a/docs/pages/blog/2020.md b/docs/pages/blog/2020.md index c3dc375aa5c046..97e953f791cd04 100644 --- a/docs/pages/blog/2020.md +++ b/docs/pages/blog/2020.md @@ -105,7 +105,7 @@ It will be built on top of the unstyled components. While the completion of the unstyled components was originally part of the v5 milestone, we will likely finish this effort independently. -Outside of the requirement to introduce breaking changes on the component customization API, e.g. from `PaperProps` to `slotProps`, [RFC #20012](https://github.com/mui/material-ui/issues/21453), we can work on unstyled at the same time we make progress with the second theme. The two efforts should go hand in hand. +Outside of the requirement to introduce breaking changes on the component customization API, for example from `PaperProps` to `slotProps`, [RFC #20012](https://github.com/mui/material-ui/issues/21453), we can work on unstyled at the same time we make progress with the second theme. The two efforts should go hand in hand. ### Scale diff --git a/docs/pages/blog/2021-developer-survey-results.md b/docs/pages/blog/2021-developer-survey-results.md index d7c6bf180b33ba..e6b3eba54ff130 100644 --- a/docs/pages/blog/2021-developer-survey-results.md +++ b/docs/pages/blog/2021-developer-survey-results.md @@ -104,6 +104,8 @@ And what has decreased: It seems to be a transfer effect: people who previously cared more about Material Design now care more about the outcome than the specification itself. <br/> +<!-- vale MUI.CorrectReferenceAllCases = NO --> + <details> <summary>Click to see the breakdown of categories.</summary> @@ -256,7 +258,7 @@ If you are interested in an analysis of the growing and decreasing pain, you can <tr><td>36</td><td>system - makeStyles back</td><tr> <tr><td>20</td><td>system - docs</td><tr> <tr><td>15</td><td>system - SASS</td><tr> - <tr><td>11</td><td>system - interoperability with Tailwind CSS</td><tr> + <tr><td>11</td><td>system - interoperability with Tailwind CSS</td><tr> <tr><td>14</td><td>system - simplify</td><tr> <tr><td>8</td><td>system - CSS variables</td><tr> <tr><td>7</td><td>system - interoperability</td><tr> @@ -397,7 +399,7 @@ If you are interested in an analysis of the growing and decreasing pain, you can <tr><td>1</td><td>animations - on existing components</td><tr> <tr><td>1</td><td>animations - performance</td><tr> <tr><th>7</th><th>fix more bugs</th><tr> - <tr><th>7</th><th>support other frameworkds (e.g. Vue)</th><tr> + <tr><th>7</th><th>support other frameworkds (for example Vue)</th><tr> <tr><th>5</th><th>autocomplete</th><tr> <tr><td>3</td><td>autocomplete - ?</td><tr> <tr><td>1</td><td>autocomplete - abbreviation</td><tr> @@ -410,6 +412,8 @@ If you are interested in an analysis of the growing and decreasing pain, you can </table> </details> +<!-- vale MUI.CorrectReferenceAllCases = YES --> + Have ideas for improvements? Please share them with us! Here's how to make sure that your requests get top priority: - When you create an issue to request features or components in the MUI Core or MUI X repositories, we'll label it as `Waiting for upvotes`. @@ -652,7 +656,7 @@ This year we saw a considerable bump the use of Next.js (compared with 12.4% in ### What styling solution are you using? -<img src="/static/blog/2021-developer-survey-results/22.png" style="width: 796px; margin-top: 16px; margin-bottom: 8px;" alt="MUI Core v4 (JSS): 45%; Styled components: 37.9%; Emotion: 30.2%; SASS: 20.8%; CSS modules: 18.9%; Vanilla CSS: 17.6%; Tailwind CSS: 9.1%; Stitches: 0.4%; Other: 1.2%" /> +<img src="/static/blog/2021-developer-survey-results/22.png" style="width: 796px; margin-top: 16px; margin-bottom: 8px;" alt="MUI Core v4 (JSS): 45%; Styled components: 37.9%; Emotion: 30.2%; SASS: 20.8%; CSS Modules: 18.9%; Vanilla CSS: 17.6%; Tailwind CSS: 9.1%; Stitches: 0.4%; Other: 1.2%" /> <p class="blog-description">1492 out of 1589 answered.</p> @@ -724,7 +728,7 @@ MUI users are mainly working with low-code tools to build internal tools, landin These findings align with what the rest of our users are building as well. But it is great to see that there are low-code tools in the market that developers trust. -### If MUI considered building a low-code tool, what primary use-case would match your needs? +### If MUI considered building a low-code tool, what primary use case would match your needs? <img src="/static/blog/2021-developer-survey-results/29.png" style="width: 796px; margin-top: 16px; margin-bottom: 8px;" alt="Deliver a React design system: 22.2%; Generate high-quality React codebase after visual building: 19.2%; Building dashboards for rapid data visualization: 18.3%; Higher fidelity prototyping and demoing for accurate design handoff: 13.6%; Building internal apps when pro-code is overkill: 11.4%; Shipping landing pages with my existing React design system: 7.3%; Shipping production simple apps before moving to pro-code: 6.2%; Other: 1.8%" /> diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md index 02be67b4f9947d..2c7bf644eed777 100644 --- a/docs/pages/blog/2021-q1-update.md +++ b/docs/pages/blog/2021-q1-update.md @@ -121,7 +121,7 @@ We have primarily focused on the data grid components, fixing a lot of bugs, but The date picker is at the border between the advanced components and the design system realms. - 📚 We have fixed the generation of the API pages. - We now document all the props supported by the public pickers components, e.g. [DatePicker](https://mui.com/api/date-picker/). + We now document all the props supported by the public pickers components, for example [DatePicker](https://mui.com/api/date-picker/). - ⚙️ We have mostly focused on addressing the technical debt present in the picker components (ported from `@materal-ui/pickers`). #### Data Grid diff --git a/docs/pages/blog/2021-q3-update.md b/docs/pages/blog/2021-q3-update.md index 5c5e582482b0db..dbb57c07d4ea15 100644 --- a/docs/pages/blog/2021-q3-update.md +++ b/docs/pages/blog/2021-q3-update.md @@ -189,7 +189,7 @@ We'll do our best, no guarantee! ### MUI Core -- 🚀 We will double down on v5 before starting to solve new large problems, e.g. a revamp of the select. +- 🚀 We will double down on v5 before starting to solve new large problems, for example a revamp of the select. We have made bold changes in this version since v4, but until recently, only a small percentage of the community was using v5. In the last few weeks, we have seen a strong influx of feedback from the community. We need to make the most of this feedback to solve regressions, improve the documentation for the new APIs, adjust the tradeoffs we took in the light of more information, and more. diff --git a/docs/pages/blog/2021.md b/docs/pages/blog/2021.md index 23a3932e0f6def..61d81f432e1b7b 100644 --- a/docs/pages/blog/2021.md +++ b/docs/pages/blog/2021.md @@ -115,7 +115,7 @@ Here is a breakdown of our [roadmap](/material-ui/discover-more/roadmap/). ### MUI Core The release of v5 has introduced a significant API churn in the community. -While our [versioning frequency](/versions/#release-frequency) aims for one major per year, we hope we can iterate on v5 during the whole year of 2022 without any breaking changes, e.g. taking full advantage of the new style engine. +While our [versioning frequency](/versions/#release-frequency) aims for one major per year, we hope we can iterate on v5 during the whole year of 2022 without any breaking changes, for example taking full advantage of the new style engine. #### Base UI diff --git a/docs/pages/blog/base-ui-2024-plans.md b/docs/pages/blog/base-ui-2024-plans.md index ede47e3ba5611f..12d33c4406a1b6 100644 --- a/docs/pages/blog/base-ui-2024-plans.md +++ b/docs/pages/blog/base-ui-2024-plans.md @@ -50,7 +50,7 @@ Currently, Base UI components can be customized to your heart's content using t ``` This API, while powerful, has proven to be less than ideal in some instances. -Most notably, it's too lengthy and complicated to write and read when used with libraries such as Tailwind CSS. +Most notably, it's too lengthy and complicated to write and read when used with libraries such as Tailwind CSS. Additionally, since the `slots` and the corresponding `slotProps` are not related in terms of TypeScript types, it's possible to introduce bugs or have the compiler complain about valid code. To address these issues, we're considering adopting a new API that would assign a discrete subcomponent to each DOM node—the pattern favored by many other headless component libraries (think: `<Slider.Track />`, `<Slider.Thumb />`, etc.). diff --git a/docs/pages/blog/bringing-consistency-to-material-ui-customization-apis.md b/docs/pages/blog/bringing-consistency-to-material-ui-customization-apis.md index 74be270a250e02..dc43c0bb98c9aa 100644 --- a/docs/pages/blog/bringing-consistency-to-material-ui-customization-apis.md +++ b/docs/pages/blog/bringing-consistency-to-material-ui-customization-apis.md @@ -1,20 +1,20 @@ --- -title: Bringing consistency to Material UI customization APIs -description: We're standardizing two key areas of the Material UI customization APIs to reduce complexity and cognitive overhead. Read on to learn what's changing. +title: Bringing consistency to Material UI customization APIs +description: We're standardizing two key areas of the Material UI customization APIs to reduce complexity and cognitive overhead. Read on to learn what's changing. date: 2024-03-18T10:00:00.000Z authors: ['diegoandai'] tags: ['Material UI', 'Product'] card: true --- -The Material UI team is working on two initiatives to standardize the Material UI API: The first applies to overriding inner elements, and the second applies to component CSS classes. +The Material UI team is working on two initiatives to standardize the Material UI API: The first applies to overriding inner elements, and the second applies to component CSS classes. In both cases, the purpose is to provide a more consistent developer experience for the community. Let's explore how these changes are taking shape: ## Inner element overrides -Because Material UI components often contain multiple DOM nodes, it's common to need to modify the structure, behavior, and style of inner elements. +Because Material UI components often contain multiple DOM nodes, it's common to need to modify the structure, behavior, and style of inner elements. For example, you might want to modify the Slider's thumb element to grow in size when dragged: <iframe src="https://codesandbox.io/embed/nw34ry?view=Editor+%2B+Preview&module=%2Fsrc%2FDemo.tsx&hidenavigation=1" @@ -63,7 +63,7 @@ Because of these issues, composed CSS classes will be deprecated and eventually ## Standardization process -This initiative aims to improve the developer experience for the Material UI community. +This initiative aims to improve the developer experience for the Material UI community. To provide the smoothest migration from the inconsistent APIs, they will be deprecated first and removed later, giving you plenty of time to adjust. With each deprecation, we'll update the [migration guide](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) and provide [codemods](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#deprecations) to simplify the process. diff --git a/docs/pages/blog/callback-support-in-style-overrides.md b/docs/pages/blog/callback-support-in-style-overrides.md index 1af851aff3e328..77325f31e9dfbc 100644 --- a/docs/pages/blog/callback-support-in-style-overrides.md +++ b/docs/pages/blog/callback-support-in-style-overrides.md @@ -68,7 +68,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles'; The callback is type-safe. -- `ownerState`: `ComponentProps` interface, e.g. `ButtonProps`, `ChipProps`, etc. +- `ownerState`: `ComponentProps` interface, for example `ButtonProps`, `ChipProps`, etc. - `theme`: `Theme` interface from `@mui/material/styles`. ```tsx diff --git a/docs/pages/blog/introducing-base-ui.md b/docs/pages/blog/introducing-base-ui.md index 67a493a3c1ebed..54af0f0943df7a 100644 --- a/docs/pages/blog/introducing-base-ui.md +++ b/docs/pages/blog/introducing-base-ui.md @@ -42,8 +42,8 @@ Base UI offers two kinds of building blocks: unstyled components and hooks. Components are more straightforward to use of the two. Place a component on a page, add your own styles, and it's ready to go! It's important to note that you are not limited to the styling options available in Material UI. -You can, of course, still use [MUI System](https://mui.com/system/getting-started/), but if you prefer Emotion, Tailwind CSS, plain CSS, or any other styling engine, they are available too! -Check out the [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind-css/) for an example of using this library. +You can, of course, still use [MUI System](https://mui.com/system/getting-started/), but if you prefer Emotion, Tailwind CSS, plain CSS, or any other styling engine, they are available too! +Check out the [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind-css/) for an example of using this library. In contrast to Material UI, Base UI's components do not have any default styles. They provide functionality and structure, while designers and developers are responsible for the visuals. @@ -65,7 +65,7 @@ See how it works on the live demo: Hooks take this one step further by extracting the logic from the structure entirely, so you can build from scratch using any DOM elements you need. This requires more work to implement but gives you the most freedom to customize. -Upon calling, a hook returns an object describing the component's state (i.e., whether the switch is turned on), along with methods that apply accessibility props and event handlers. +Upon calling, a hook returns an object describing the component's state (that is whether the switch is turned on), along with methods that apply accessibility props and event handlers. You should spread these props on the components you've defined, as shown below: ```tsx diff --git a/docs/pages/blog/making-customizable-components.md b/docs/pages/blog/making-customizable-components.md index 23359821c116f3..c4febbd27d8c36 100644 --- a/docs/pages/blog/making-customizable-components.md +++ b/docs/pages/blog/making-customizable-components.md @@ -30,7 +30,7 @@ Usually this means that the selector with more classes applied to it is more spe For example, if we look at the Material UI `Switch` component, we have multiple subcomponents that we could expect to modify. For each of them, we assign a specific CSS class: -<img src="/static/blog/making-customizable-components/switchHighlighted.png" style="width: 692px; aspect-ratio: 173/80; margin-top: 16px; margin-bottom: 16px;" loading="lazy" alt="Switch component with highlighted sub components" /> +<img src="/static/blog/making-customizable-components/switchHighlighted.png" style="width: 692px; aspect-ratio: 173/80; margin-top: 16px; margin-bottom: 16px;" loading="lazy" alt="Switch component with highlighted subcomponents" /> Notice that each element is styled using only one CSS class—the thumb style, for example, is applied with the `css-jsexje-MuiSwitch-thumb` class, so any CSS selector that includes more than one class will override its style. diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md index db433c50987ad0..dfefd5a27ec56a 100644 --- a/docs/pages/blog/material-ui-v4-is-out.md +++ b/docs/pages/blog/material-ui-v4-is-out.md @@ -65,7 +65,7 @@ import { StylesProvider } from '@mui/styles'; <p class="blog-description">The DOM output once injectFirst is used.</p> -- **classes boilerplate**. Early in the v1 effort, we [decided](https://github.com/oliviertassinari/a-journey-toward-better-style) to use a CSS-in-JS styling solution: [JSS](https://cssinjs.org/). The large majority of the CSS-in-JS solutions output non-deterministic class names, e.g. `.fHmkjM`. This design decision helps the isolation of the style of each component, however, it makes the overrides harder. We introduced a `classes` API in v1 to target all our elements as an attempt to mitigate this problem. +- **classes boilerplate**. Early in the v1 effort, we [decided](https://github.com/oliviertassinari/a-journey-toward-better-style) to use a CSS-in-JS styling solution: [JSS](https://cssinjs.org/). The large majority of the CSS-in-JS solutions output non-deterministic class names, for example `.fHmkjM`. This design decision helps the isolation of the style of each component, however, it makes the overrides harder. We introduced a `classes` API in v1 to target all our elements as an attempt to mitigate this problem. We have observed the use of this API for months and have seen many people struggling with it. It can be challenging to apply the class name on the right element and requires boilerplate as well. As an attempt to further improve the situation, we have changed the class name generation to [output global class names](/system/styles/advanced/), while keeping the `classes` API working as before 💅. @@ -75,7 +75,7 @@ import { StylesProvider } from '@mui/styles'; ⚠️ Using global class names provide more power but comes with responsibility. We encourage patterns that increase your custom style isolation. -- **Pseudo-classes.** A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. The native elements support a wide range of pseudo-classes, the most popular ones being: `:focus`, `:hover`, `:active`. Sometimes, Material UI can't use a pseudo-class as the state doesn't exist in the platform, e.g. the selected state of a menu item. Material UI implements support of eight different [custom pseudo-classes](/material-ui/customization/how-to-customize/#state-classes). It's important to understand that you need to increase the specificity when using a pseudo-class. For instance: +- **Pseudo-classes.** A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. The native elements support a wide range of pseudo-classes, the most popular ones being: `:focus`, `:hover`, `:active`. Sometimes, Material UI can't use a pseudo-class as the state doesn't exist in the platform, for example the selected state of a menu item. Material UI implements support of eight different [custom pseudo-classes](/material-ui/customization/how-to-customize/#state-classes). It's important to understand that you need to increase the specificity when using a pseudo-class. For instance: ```css .MenuItem { @@ -120,14 +120,18 @@ Documentation was reported as the 3rd most critical pain point in the Developer - **TypeScript**. TypeScript's growth is impressive, the traffic of their documentation website has grown by a factor of 6 in 3 years. Material UI v1 was released with built-in TypeScript definitions, but we needed to do more. Sebastian has led the effort to migrate all the demos from JavaScript to TypeScript. This has two important implications. First, we type check our demos, this drastically improves our TypeScript test coverage. We have fixed many issues during the migration. Second, if you are writing your application with TypeScript, you can directly copy & paste our demos without needing to convert them, or having to fix the obscure errors. -![typescript](/static/blog/material-ui-v4-is-out/typescript.png) +![TypeScript](/static/blog/material-ui-v4-is-out/typescript.png) <p class="blog-description">https://www.typescriptlang.org traffic estimation over time.</p> ![switch](/static/blog/material-ui-v4-is-out/switch.png) +<!-- vale MUI.CorrectReferenceAllCases = NO --> + <p class="blog-description">Use the JS/TS toggle to see code in JavaScript or TypeScript</p> +<!-- vale MUI.CorrectReferenceAllCases = YES --> + - **i18n**. Developers come to Material UI's documentation from all around the world. We want to include as many people as possible 🌎🌍🌏. We have completed the effort started in v3 by working on the Algolia search support, Google search indexing, Table Of Contents and Side Nav infrastructure. We would like to thank [Danica Shen](https://github.com/DDDDDanica), [Dominik Engel](https://github.com/Domino987), and [Jairon Alves Lima](https://github.com/jaironalves) for their heroic work on the 🇨🇳, 🇩🇪 and 🇧🇷 translations, while not forgetting the other 348 (and growing) translators. diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md index 414c17f943cffd..3692acffd9c502 100644 --- a/docs/pages/blog/mui-core-v5.md +++ b/docs/pages/blog/mui-core-v5.md @@ -106,7 +106,7 @@ const StyledDiv = styled.div` <p class="blog-description"><a href="https://codesandbox.io/p/sandbox/elastic-yonath-uedfv?file=/src/App.js">CodeSandbox</a></p> You can find it in [styled-components](https://styled-components.com/), [emotion](https://emotion.sh/docs/styled), [goober](https://goober.js.org/), [stitches](https://stitches.dev/docs/api#styled), or [linaria](https://linaria.dev/). -While Material UI is compatible with any styling solution (as long as the styles have more specificity, for example, Tailwind CSS), many developers still felt the need to learn something new: the [`makeStyles`](https://mui.com/system/styles/basics/#hook-api) API. +While Material UI is compatible with any styling solution (as long as the styles have more specificity, for example, Tailwind CSS), many developers still felt the need to learn something new: the [`makeStyles`](https://mui.com/system/styles/basics/#hook-api) API. 2. Our React integration with JSS (`@mui/styles`) is **too slow** to unlock the next layer of customization DX we aim for. The static CSS generation using v4 was fast enough, even [faster](https://codesandbox.io/p/sandbox/nb05w?file=/src/App.js) than emotion, @@ -651,7 +651,7 @@ This breaking change is an opportunity to drop the support of legacy upstream de - We have updated the minimum supported React version from 16.8 to **17.0**. The breaking changes released between the two versions are [very limited](https://legacy.reactjs.org/blog/2020/10/20/react-v17.html). - We have updated the supported browsers. - - IE: **partial**. We have kept the logic added in the past to support IE 11, + - Internet Explorer: **partial**. We have kept the logic added in the past to support IE 11, however, we have stopped actively working on it. We can't guarantee that it works correctly. It's discontinued. - Edge: from 14 to **91**. The minimum version based on Chromium. - Firefox: from 52 to **78**. @@ -758,7 +758,7 @@ Once we would have grown the team and made enough progress, we will expand to a We plan to run extended research and surveys. We have already identified that accessibility is something leading companies care about. -We are planning to cover more user interaction states for prototyping, e.g. focus-visible. +We are planning to cover more user interaction states for prototyping, for example focus-visible. ## Thank you diff --git a/docs/pages/blog/mui-next-js-app-router.md b/docs/pages/blog/mui-next-js-app-router.md index c6be880126d583..344fc0faa7b52c 100644 --- a/docs/pages/blog/mui-next-js-app-router.md +++ b/docs/pages/blog/mui-next-js-app-router.md @@ -34,7 +34,7 @@ Additionally, we've created guides to walk you through setting up an app using t We also have example repos for each, with everything already set up for you: - [Material UI example](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) -- [Base UI with Tailwind CSS example](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) +- [Base UI with Tailwind CSS example](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) - [Joy UI example](https://github.com/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts) ## What comes next diff --git a/docs/pages/blog/mui-product-comparison.md b/docs/pages/blog/mui-product-comparison.md index 2bf4a02a463284..5268b3104d6e57 100644 --- a/docs/pages/blog/mui-product-comparison.md +++ b/docs/pages/blog/mui-product-comparison.md @@ -21,7 +21,7 @@ Though our roots are in [Material Design](https://material.io/), we're branching Our primary offerings fall into two product lines: Core and X. MUI Core contains our foundational component libraries (like Material UI), while MUI X offers components that are significantly more complex (like the Data Grid). -We're also in the early stages of developing a low-code internal tool builder called [MUI Toolpad](https://mui.com/toolpad/), which enables you to build with every Core and X component in a drag-and-drop interface. +We're also in the early stages of developing a low-code internal tool builder called [Toolpad](https://mui.com/toolpad/), which enables you to build with every Core and X component in a drag-and-drop interface. Read on for more details on each of our products. @@ -93,7 +93,7 @@ Get started in the [Base UI docs](/base-ui/getting-started/). #### Key features - **Total control over styles:** Unlike Material UI and Joy UI, Base UI doesn't ship with any default styles or styling solution. - Write CSS however you'd prefer—vanilla, modules, styled-components—or integrate a styling library like Tailwind CSS or Emotion. + Write CSS however you'd prefer—vanilla, modules, styled-components—or integrate a styling library like Tailwind CSS or Emotion. - **Hooks for fully custom components:** When pre-built components aren't flexible enough, low-level hooks enable you to quickly add sophisticated functionality to your custom components. - **Accessibility:** Base UI components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. - **The core of MUI Core:** Base UI serves as the scaffold for Joy UI components, and future versions Material UI will also be built with Base UI as the foundation. @@ -174,9 +174,9 @@ Components include the Date Picker, Time Picker, Date Range Picker, and Date Tim - Enterprise apps using advanced date and time validation with constraints. - Apps built with MUI Core libraries that need date and time functionality. -## MUI Toolpad +## Toolpad -<img src="/static/blog/mui-product-comparison/mui-toolpad.png" style="width: 692px; margin-bottom: 24px; aspect-ratio: 173/75;" loading="lazy" alt="Small screenshot of MUI Toolpad's interface." /> +<img src="/static/blog/mui-product-comparison/mui-toolpad.png" style="width: 692px; margin-bottom: 24px; aspect-ratio: 173/75;" loading="lazy" alt="Small screenshot of Toolpad's interface." /> Toolpad is a self-hosted low-code admin builder designed to extend MUI's suite of React components. It's designed for developers of all trades who want to save time building internal applications. @@ -184,7 +184,7 @@ Drag and drop pre-built UI components, connect your data sources, and your app i ### Key features -- **Build faster than ever:** With MUI Toolpad, your development time can be measured in minutes rather than hours or days. Skip the mindless busywork of UI development and get straight to the core business logic. +- **Build faster than ever:** With Toolpad, your development time can be measured in minutes rather than hours or days. Skip the mindless busywork of UI development and get straight to the core business logic. - **Use the components you already know:** Toolpad comes preloaded with both MUI Core and X libraries, giving you the full power of MUI's components in a drag-and-drop interface. - **Extensible with code:** Start with only bare-bones JavaScript to get up and running, and then jump from "low code" to "pro code" as needed to add custom features and functionality. diff --git a/docs/pages/blog/mui-x-end-v6-features.md b/docs/pages/blog/mui-x-end-v6-features.md index 29c3acd6ad8d57..19dd6b95f107bc 100644 --- a/docs/pages/blog/mui-x-end-v6-features.md +++ b/docs/pages/blog/mui-x-end-v6-features.md @@ -91,7 +91,7 @@ The Date Picker animations have been significantly smoothened to ensure a much m ### Customization playgrounds We're constantly improving our documentation and working to better communicate how to use our components effectively. -With the new customization playgrounds, you can now tailor the style of [Date Picker](/x/react-date-pickers/date-picker/#customization) and experiment with multiple combinations of [sub-components](/x/react-date-pickers/playground/) to achieve the look and feel you desire. +With the new customization playgrounds, you can now tailor the style of [Date Picker](/x/react-date-pickers/date-picker/#customization) and experiment with multiple combinations of [subcomponents](/x/react-date-pickers/playground/) to achieve the look and feel you desire. ## Data Grid @@ -146,7 +146,7 @@ Most notably: - New UI for column management - Pivoting for the [Premium](/x/react-data-grid/#premium-plan) version -We'll continue to expand our portfolio of Charts, including [Heat Map](/x/react-charts/heat-map/), [Funnel](/x/react-charts/funnel/), and [Gantt](/x/react-charts/gantt/); and explore virtualization and other advanced use cases for the Tree View component. +We'll continue to expand our portfolio of Charts, including [Heatmap](/x/react-charts/heat-map/), [Funnel](/x/react-charts/funnel/), and [Gantt](/x/react-charts/gantt/); and explore virtualization and other advanced use cases for the Tree View component. We encourage you to upvote issues on GitHub to help us prioritize. Your input directly influences our development schedule, so don't hesitate to let us know what matters most to you! diff --git a/docs/pages/blog/mui-x-mid-v6-features.md b/docs/pages/blog/mui-x-mid-v6-features.md index 07f8a1c8f6f7a1..64c7da76591a52 100644 --- a/docs/pages/blog/mui-x-mid-v6-features.md +++ b/docs/pages/blog/mui-x-mid-v6-features.md @@ -131,7 +131,7 @@ Think of a file system navigator displaying folders and files or a navigation li Keep on the look out on our next blog for the Tree View migration. -We decided to migrate this component to MUI X as there are still many features that would be great to build (e.g. checkbox, drag & drop, virtualization) and it's usually not a significant component of a design system. +We decided to migrate this component to MUI X as there are still many features that would be great to build (for example checkbox, drag & drop, virtualization) and it's usually not a significant component of a design system. Head to [MUI Core vs. MUI X](https://mui-org.notion.site/X-FAQ-c33e9a7eabba4da1ad7f8c04f99044cc) if you would like to learn more about this decision. ## Feedback diff --git a/docs/pages/blog/mui-x-v5.md b/docs/pages/blog/mui-x-v5.md index f77faf8a26e622..3e68847e5763e1 100644 --- a/docs/pages/blog/mui-x-v5.md +++ b/docs/pages/blog/mui-x-v5.md @@ -92,7 +92,7 @@ These changes improved the developer experience when using the `apiRef` methods: - We removed the `state` structure from the public API. Access to data in the state should always be done through `apiRef` methods (`apiRef.current.getSelectedRows`) or selectors (`selectedGridRowsSelector`). - We renamed most selectors to have a consistent naming convention, making it easier to deduce their name or infer purpose. -- We restructured our state so that each feature has a single sub-state, and the feature hook is the only one to update it (e.g. `state.filter` is only managed by the `useGridFilter` hook, which exposes methods for both internal and 3rd party code to interact with this state). +- We restructured our state so that each feature has a single sub-state, and the feature hook is the only one to update it (for example `state.filter` is only managed by the `useGridFilter` hook, which exposes methods for both internal and 3rd party code to interact with this state). The work on this topic isn't over. We have several developments in progress or under discussion to improve the developer experience when using the advanced features of the grid. Here are a few that should be release in the following months: diff --git a/docs/pages/blog/mui-x-v6.md b/docs/pages/blog/mui-x-v6.md index 8ee0e1926b58fb..4b666d5c82b42a 100644 --- a/docs/pages/blog/mui-x-v6.md +++ b/docs/pages/blog/mui-x-v6.md @@ -66,7 +66,7 @@ And if you want to understand more about our view of the open-source/commercial ### Improved column menu Another significant step in terms of customization but also usability; the v6 [column menu](/x/react-data-grid/column-menu/) now provides support for icons, menu groups, custom items and actions, and more. -We've redesigned this sub-component to make it as extensible as possible. +We've redesigned this subcomponent to make it as extensible as possible. <a href="/x/react-data-grid/column-menu/"> <img src="/static/blog/mui-x-v6/column-menu-custom-action.png" loading="lazy" alt="Column menu custom action" width="1636" height="808" /> @@ -176,7 +176,7 @@ import { DateField } from '@mui/x-date-pickers/DateField'; ### Improved layout customization -Combining the slots concept with the grid layout, you can now rearrange, extend, and customize most of the sub-components used in the Pickers UI. +Combining the slots concept with the grid layout, you can now rearrange, extend, and customize most of the subcomponents used in the Pickers UI. See [the documentation about it](/x/react-date-pickers/custom-layout/) and this quick overview: ```tsx diff --git a/docs/pages/blog/mui-x-v7-beta.md b/docs/pages/blog/mui-x-v7-beta.md index 7d785326c1b22e..258a29b7fc57e7 100644 --- a/docs/pages/blog/mui-x-v7-beta.md +++ b/docs/pages/blog/mui-x-v7-beta.md @@ -74,7 +74,7 @@ While string values remain compatible for these types, any updates to the `filte ### Smaller bundle size -The introduction of a separate entry point for locales has significantly reduced the bundle size of the barrel index when tree-shaking isn't operational (e.g. Webpack in dev mode). +The introduction of a separate entry point for locales has significantly reduced the bundle size of the barrel index when tree-shaking isn't operational (for example Webpack in dev mode). For example with the `@mui/x-data-grid` npm package, this change led to a reduction of approximately 22% – shrinking the bundle size from [114.2kB](https://bundlephobia.com/package/@mui/x-data-grid@6.19.2) to [88.5kB](https://bundlephobia.com/package/@mui/x-data-grid@7.0.0-beta.0). @@ -184,7 +184,7 @@ As we approach the stable release of v7, our roadmap is well-defined, focusing o ### Data Grid -- [Improved Server side integration](https://next.mui.com/x/react-data-grid/server-side-data/) +- [Improved Server-side integration](https://next.mui.com/x/react-data-grid/server-side-data/) - [Column management panel with support for pivoting](https://github.com/mui/mui-x/issues/5700)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') - [Pivoting](https://github.com/mui/mui-x/issues/214) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') diff --git a/docs/pages/blog/toolpad-use-cases.md b/docs/pages/blog/toolpad-use-cases.md index 3c6d2a307fe899..afa12c478a76eb 100644 --- a/docs/pages/blog/toolpad-use-cases.md +++ b/docs/pages/blog/toolpad-use-cases.md @@ -30,7 +30,7 @@ Let's delve into four scenarios that Toolpad has successfully addressed: ## 1. Support key validator -We offer a priority support service to our MUI X premium customers: their queries get an expedited response within 24 hours. +We offer a priority support service to our MUI X Premium customers: their queries get an expedited response within 24 hours. They share their issue through a Priority Support template in our repository where they're directed to validate their license key, and once it's validated, the 24-hour countdown starts. <a href="https://tools-public.mui.com/prod/pages/validateSupport"> @@ -84,7 +84,7 @@ Thanks to Toolpad we've managed to bring it all under one roof, dramatically imp ## 4. Contributor payout -We have a script to fetch monthly payout data for contributors to the MUI Store. +We have a script to fetch monthly payout data for contributors to the MUI Store. Our operations team is responsible for paying contributors, but the script proved too technically challenging for them to run without help from our engineers. We solved this problem by importing the script into Toolpad and creating a UI for it. The video below shows how a user can select the dates, run the script, and receive text that's properly formatted to copy and paste directly into Slack communications: diff --git a/docs/pages/careers/design-engineer.md b/docs/pages/careers/design-engineer.md index 8129a647f7a9e2..5523f7696b87db 100644 --- a/docs/pages/careers/design-engineer.md +++ b/docs/pages/careers/design-engineer.md @@ -50,7 +50,7 @@ Our products empower React developers to build awesome applications faster – w But while we are [the leading](https://tsh.io/state-of-frontend/#over-the-past-year-which-of-the-following-design-systems-was-your-favorite-go-to-solution) UI design system in the frontend space, the adoption of MUI is only at 25%. More importantly, the challenges of developers and designers to solve when creating UIs go way beyond the ones of design systems. We envision a future where MUI becomes the default toolkit for web developers to create UIs. -It's why we started Base UI, Joy UI, and MUI Toolpad. Design is key to achieving this goal. +It's why we started Base UI, Joy UI, and Toolpad. Design is key to achieving this goal. ## The role @@ -59,7 +59,7 @@ It's why we started Base UI, Joy UI, and MUI Toolpad. Design is key to achiev Depending on the day, you'll: - Work closely with our designers to prototype and implement new components, features, and screens. -- Design and build entire experiences for sites like mui.com or products like MUI Toolpad. +- Design and build entire experiences for sites like mui.com or products like Toolpad. - Concept and prototype UX components and motion studies for components like the date picker. - Extend our different design systems (Material UI, Joy UI). - Create appealing new demos in the docs. diff --git a/docs/pages/careers/designer.md b/docs/pages/careers/designer.md index d72c3701d2f656..00a476a3f5e160 100644 --- a/docs/pages/careers/designer.md +++ b/docs/pages/careers/designer.md @@ -43,7 +43,7 @@ Currently, we have five main projects that are not at all related to MD: - [MUI Joy (working title)](https://github.com/mui/material-ui/discussions/29024): a second design system as an alternative to Material Design. - [MUI X](https://mui.com/x/): as mentioned, a growing set of advanced components. Today, the flagship is the [Data Grid](https://mui.com/x/react-data-grid/), a game-changing component for presenting large amounts of data, which integrates perfectly with MUI Core. -- MUI Toolpad: a very recent endeavor aimed at exploring how our users can visually create apps 10x faster with the power of low-code and the flexibility of pro-code. +- Toolpad: a very recent endeavor aimed at exploring how our users can visually create apps 10x faster with the power of low-code and the flexibility of pro-code. We also know, especially due to [our annual Developer Survey](https://mui.com/blog/2021-developer-survey-results/), that design quality plays a huge part when developers are considering component library options. Therefore, we need to grow the design team to help us push these initiatives further. @@ -57,14 +57,14 @@ Some criteria for applying to this role: - **Level**: [3 or above](https://mui-org.notion.site/Design-levels-aa01996ca7e0481e80479ad47c8f28a4). We need someone experienced enough to help two different teams with hard problems. -You'll be responsible for ensuring that the MUI Toolpad and MUI X teams have spot-on design and product work. +You'll be responsible for ensuring that the Toolpad and MUI X teams have spot-on design and product work. Given that each product is at a different stage, at this moment we believe that one person is enough to oversee the design function for both teams. You'll have the freedom, trust, and help you need to balance and tackle all the work. You'll also be the second designer of a growing design team, so we'll also need your help to shape this growth. ### Here are a few initiatives you might work on -- Help design the first version of MUI Toolpad, from early strategy to its look and feel. +- Help design the first version of Toolpad, from early strategy to its look and feel. - Evolve and refine the Data Grid UX for features such as filtering, column pinning, row editing, and more. - Help set the bar higher for MUI X documentation, from visual design to copywriting. - Support the design team growth by promoting design/product culture, and hiring new members. diff --git a/docs/pages/careers/developer-advocate.md b/docs/pages/careers/developer-advocate.md index cd3e3f79d6bba9..917e84fa830b79 100644 --- a/docs/pages/careers/developer-advocate.md +++ b/docs/pages/careers/developer-advocate.md @@ -77,7 +77,7 @@ For the right candidate: - Build example apps with MUI products and create how-to content around them - Research and write case studies - Overhaul the [Showcase](https://mui.com/material-ui/discover-more/showcase/) -- Revamp the company blog infrastructure to empower less technical teammates to contribute (e.g. HR) +- Revamp the company blog infrastructure to empower less technical teammates to contribute (for example HR) - Contribute to integrations with other popular libraries and frameworks - Create a learning section in the documentation for hybrid written and video tutorials diff --git a/docs/pages/careers/developer-experience-engineer.md b/docs/pages/careers/developer-experience-engineer.md index 658bf24da113f3..74294e3ffb173c 100644 --- a/docs/pages/careers/developer-experience-engineer.md +++ b/docs/pages/careers/developer-experience-engineer.md @@ -66,7 +66,7 @@ Depending on the day, you'll: - You will collaborate with Developer Advocates, Designers, Product Managers, Engineering Managers, Marketing, and other stakeholders to identify opportunities for improvement. - Inform the technical approach and architecture of MUI as it relates to developer experiences. - Help contribute to the MUI community by providing code review, mentorship, and support to MUI employees, community members, and partners. -- Advocate and support improvements to MUI to improve development and integration of tools and plugins, e.g. Storybook, Tailwind CSS. +- Advocate and support improvements to MUI to improve development and integration of tools and plugins, for example Storybook, Tailwind CSS. - Work on issues and improvements critical to the success of MUI users and the broader community. - Foster a culture of learning through iterative improvements and strong collaboration with UX research. diff --git a/docs/pages/careers/engineering-manager.md b/docs/pages/careers/engineering-manager.md index ce8bc33dd99698..3882bc0300ca6d 100644 --- a/docs/pages/careers/engineering-manager.md +++ b/docs/pages/careers/engineering-manager.md @@ -1,6 +1,6 @@ # Engineering Manager — Toolpad -<p class="description">You will grow the small engineering team currently working on MUI Toolpad.</p> +<p class="description">You will grow the small engineering team currently working on Toolpad.</p> ## Details of the role @@ -42,7 +42,7 @@ Our mission is to empower as many people as possible to build great UIs, faster. The faster and simpler it is, and the broader the audience that can create custom UIs, the better. We believe that the best way to improve on these dimensions is to eliminate [80%](https://www.youtube.com/watch?v=GnO7D5UaDig&t=2451s) of the code that has to be written. -A few months back we started to work on [MUI Toolpad](https://github.com/mui/mui-toolpad), an ambitious project to deliver on this objective. +A few months back we started to work on [Toolpad](https://github.com/mui/mui-toolpad), an ambitious project to deliver on this objective. We have found the beginning of a market fit in this low-code segment. We need help to structure & grow the engineering team. @@ -68,11 +68,11 @@ Depending on the day, you'll: - Act as a servant leader for the engineers that report to you. You will support the career growth of individuals on your team. - Develop a great work environment. - Work directly with users and the engineering team to improve the product. -- Improve our processes, e.g. the lifecycle of feature development from design through testing and release. +- Improve our processes, for example the lifecycle of feature development from design through testing and release. For the right candidate: -- Working with the Leadership to construct and execute a hiring plan to grow the engineering team on toolpad from one to multiple +- Working with the Leadership to construct and execute a hiring plan to grow the engineering team on Toolpad from one to multiple ## Who we're looking for diff --git a/docs/pages/careers/full-stack-engineer.md b/docs/pages/careers/full-stack-engineer.md index 2e2e9e5420380e..99184d1e26896a 100644 --- a/docs/pages/careers/full-stack-engineer.md +++ b/docs/pages/careers/full-stack-engineer.md @@ -1,6 +1,6 @@ # Full-stack Engineer — Toolpad (future role) -<p class="description">You will join the MUI Toolpad team, to explore the role of MUI in the low code space and help bring the early prototype to a usable product.</p> +<p class="description">You will join the Toolpad team, to explore the role of MUI in the low code space and help bring the early prototype to a usable product.</p> ## Details of the role @@ -40,7 +40,7 @@ We need talented people to keep that going! ### Why this is interesting -The MUI Toolpad application offers a wide variety of engineering challenges. Including +The Toolpad application offers a wide variety of engineering challenges. Including - In-browser sandboxing and manipulation of live web applications - Drag & drop visual editor @@ -54,8 +54,8 @@ Depending on the day, you'll: - **Help guide architectural decisions**. You'll join us in defining and refining the initial product and also help bring the conversation public as the MVP grows. You'll also interface with other teams at MUI as you'll be building on top of their work. - **Contribute to implementing new features**. MUI is a complex codebase. It's built on top of cutting-edge web technologies to build the low-code tool for the future. -- **Reduce friction**. A large amount of the work on MUI Toolpad is reducing friction and making it easier to use. As our MVP grows, our focus will shift from "making it work" towards "making it easy to work with". -- **Collaborate with the community**. MUI Toolpad will be open-sourced. As the community grows you'll act as a steward to steer it towards success. This includes reviewing issues, pull requests and questions, and guiding aspiring contributors to make meaningful contributions. +- **Reduce friction**. A large amount of the work on Toolpad is reducing friction and making it easier to use. As our MVP grows, our focus will shift from "making it work" towards "making it easy to work with". +- **Collaborate with the community**. Toolpad will be open-sourced. As the community grows you'll act as a lead to steer it towards success. This includes reviewing issues, pull requests and questions, and guiding aspiring contributors to make meaningful contributions. - **Experiment and play**. Great, unexpected features and heisenbug fixes have come from a number of sources — relentlessly methodical processes of elimination, free-flowing team collaboration, inspiration by adjacent libraries and projects, and difficult-to-explain individual strokes of brilliance. Whatever your preferred style is for creating new things that others might not have thought of, you'll find a welcome home on the team. - **Take ownership of features from idea/mockup to live deployment**. You'll shape and guide the direction of crucial new features. - **Ship. Early and often**. You'll iterate and ship frequently. You'll have a real impact on the end-user experience and you'll love working on a team that builds stunning UIs and prioritizes delivering real user value as often as possible. @@ -65,7 +65,7 @@ Depending on the day, you'll: - **You'll be at the cutting edge of application development** — working on one of the fastest-growing UI libraries on the market. - **You'll be part of an active, open, friendly community** of developers that are excited about building awesome applications. -- **Your role will be key to making MUI Toolpad the go-to low code tool** for internal application building. +- **Your role will be key to making Toolpad the go-to low code tool** for internal application building. ## The worst parts of this job @@ -79,8 +79,8 @@ We're looking for someone with both strong front-end and back-end skills. More i ### Required -- **Expertise in the modern JavaScript ecosystem**. MUI Toolpad is built on the shoulders of giants, making use of technologies such as ES2021, TypeScript, Node.js, React, Next.js, Webpack, and Babel. -- **Expertise in backend development**. MUI Toolpad interfaces with multiple databases, both SQL and NoSQL, as well as APIs such as REST and GraphQL. You'll need to be comfortable in learning and integrating new backend technologies fast. You'll need to have a good understanding of distributed systems and some knowledge of CRDTs is a plus. +- **Expertise in the modern JavaScript ecosystem**. Toolpad is built on the shoulders of giants, making use of technologies such as ES2021, TypeScript, Node.js, React, Next.js, Webpack, and Babel. +- **Expertise in backend development**. Toolpad interfaces with multiple databases, both SQL and NoSQL, as well as APIs such as REST and GraphQL. You'll need to be comfortable in learning and integrating new backend technologies fast. You'll need to have a good understanding of distributed systems and some knowledge of CRDTs is a plus. - **A track record of demonstrating an eye for product and solving real-world user problems**. If you have a knack for solving problems at the root cause, shipping beautiful user interfaces and intuitive APIs, we want you on our team. - **Experience building and shipping production code in a team setting** with a passion for writing tested, performant, and high-quality code. - **Strong written and verbal communication skills**. As part of the team, you'll interface both directly and indirectly with community members and enterprise customers, and contribute to user documentation. Clear communication is fundamental in creating intuitive and compelling resources. diff --git a/docs/pages/careers/head-of-operations.md b/docs/pages/careers/head-of-operations.md index 0957c857312be0..500387a1b66e0b 100644 --- a/docs/pages/careers/head-of-operations.md +++ b/docs/pages/careers/head-of-operations.md @@ -85,7 +85,7 @@ Depending on the day, you'll: - Strong analytical, and problem-solving skills, with the ability to make data-driven decisions. - A high sense of curiosity, enjoying self-learning to get things done. You are [versatile](https://review.firstround.com/the-adaptable-leader-is-the-new-holy-grail-become-one-hire-one). - Excited about the ambiguity of an entrepreneurial, growing company, and able to juggle many projects and responsibilities. -- Bachelor's degree in a related field (e.g. computer science, business management). +- Bachelor's degree in a related field (for example computer science, business management). - 1+ year of experience in a similar role. ### Nice to have (but not required) diff --git a/docs/pages/careers/product-engineer.md b/docs/pages/careers/product-engineer.md index 829700079e6b27..9a217e087d9ee6 100644 --- a/docs/pages/careers/product-engineer.md +++ b/docs/pages/careers/product-engineer.md @@ -61,7 +61,7 @@ Depending on the day, you'll: - Define the product direction - Review new items submitted by the contributors to be hosted on the marketplace - Fix root problems raised by store customers on the support channels -- Take care of operational needs, e.g. automate payouts, create sales reports +- Take care of operational needs, for example automate payouts, create sales reports ### Here are a few initiatives you might work on diff --git a/docs/pages/careers/product-manager.md b/docs/pages/careers/product-manager.md index 2061c3dfab5f0f..b91e6ea1982679 100644 --- a/docs/pages/careers/product-manager.md +++ b/docs/pages/careers/product-manager.md @@ -64,9 +64,9 @@ Depending on the day, you'll: - You will coordinate with the engineering to ensure that the product being delivered at each iteration solves the problem. This involves growing a deep understanding of our technical choices and constraints. - You will drive the growth of the product by owning KPIs. -- You will grow and cultivate a deep understanding of the problems that developers have when they create simple applications (e.g. admins, prototypes). This means that you will observe and reach out to the community, run research interviews and share your insights with the team. +- You will grow and cultivate a deep understanding of the problems that developers have when they create simple applications (for example admins, prototypes). This means that you will observe and reach out to the community, run research interviews and share your insights with the team. - You will keep a close eye on feature requests, issues, and general improvements, to curate opportunities based on our strategy. -- You will build a strategy for your product area and contribute to the overall product strategy, e.g. establishing a go-to-market strategy. +- You will build a strategy for your product area and contribute to the overall product strategy, for example establishing a go-to-market strategy. - You will assess the impact of initiatives through telemetry data and qualitative feedback to help us develop our understanding further, and decide on the next steps. ## Who we're looking for diff --git a/docs/pages/careers/product-marketing-manager.md b/docs/pages/careers/product-marketing-manager.md index 806403770bb2cf..5987cd5bc985fb 100644 --- a/docs/pages/careers/product-marketing-manager.md +++ b/docs/pages/careers/product-marketing-manager.md @@ -64,7 +64,7 @@ Depending on the day, you'll: - **Personas**. Build deep knowledge and understanding of MUI's technical buyer personas and the journey of our enterprise prospects via market research, prospect/customer conversations, and internal conversations. - **Market research**. Use customer and competitive research to tailor effective messaging to our Enterprise audience. - **Content**. Plan and create impactful marketing materials mapped to buying journey. Generate high-quality content for customers including website copy/landing pages, blogs, webinar content, use cases, customer stories, showcases, and more. -- **Paid channels**. Build and help execute marketing campaigns from the bottom up (identify goals, risks, audience, messages, and tactics), e.g. we can explore SEA & conference sponsoring. +- **Paid channels**. Build and help execute marketing campaigns from the bottom up (identify goals, risks, audience, messages, and tactics), for example we can explore SEA & conference sponsoring. - **Sales**. Partner with the Sales team to create effective sales enablement materials. - **Events** Potentially: Lead corporate event programs that result in relationship building, lead/pipeline generation and acceleration, customer engagement, retention, and brand awareness. diff --git a/docs/pages/careers/react-tech-lead-core.md b/docs/pages/careers/react-tech-lead-core.md index c077a706b5ad8f..506ea588f59bf9 100644 --- a/docs/pages/careers/react-tech-lead-core.md +++ b/docs/pages/careers/react-tech-lead-core.md @@ -66,7 +66,7 @@ You will extend the [React Engineer](https://mui-org.notion.site/Software-Engine - **Nurture community contributions**. You will provide guidance and direction to unlock the contributions of the community. Your time will often be way better spent doing this than fixing the problems yourself. - **Shape the product**. You will be laser-focused on the end goal. It's not about solving technical challenges but about the problem solved for the users. - **Enable quality work**. You will: - - Embody and foster the engineering culture, e.g. rigorousness, push for small single-purpose PRs, encourage peer reviews, create strong feedback loops between decision and outcome. + - Embody and foster the engineering culture, for example rigorousness, push for small single-purpose PRs, encourage peer reviews, create strong feedback loops between decision and outcome. - Empower the team to aim for high-quality outputs. By doing such it aims for the success of delivered solutions. - Push for consistency, follow what's going on in the other teams. - **Keep technical debt in check**. You will make sure we can keep shipping features at a reasonable pace, align the team on "one way" of doing things and make sure engineers follow the conventions. diff --git a/docs/pages/careers/react-tech-lead-x-grid.md b/docs/pages/careers/react-tech-lead-x-grid.md index dac3f89432dfd1..d0dcc6b75fa8e2 100644 --- a/docs/pages/careers/react-tech-lead-x-grid.md +++ b/docs/pages/careers/react-tech-lead-x-grid.md @@ -44,7 +44,7 @@ We need to: - build an headless version for Base UI. - build advanced, in browsers, data analysis features like pivoting and charts integration. -- build a strong integration with backend APIs, e.g. to handle >100M rows. +- build a strong integration with backend APIs, for example to handle >100M rows. We also need help to continue to make the components easier to use, make it more customizable, [improve performance](https://www.causal.app/blog/react-perf), make it more accessible, improve the health of the open-source by engaging and collaborating with the community, guide developers to answers, and just generally being a positive presence in the community. @@ -70,7 +70,7 @@ You will extend the [React Engineer](https://mui-org.notion.site/Software-Engine - **Nurture community contributions**. You will provide guidance and direction to unlock the contributions of the community. Your time will often be way better spent doing this than fixing the problems yourself. - **Shape the product**. You will be laser-focused on the end goal. It's not about solving technical challenges but about the problem solved for the users. - **Enable quality work**. You will: - - Embody and foster the engineering culture, e.g. rigorousness, push for small single-purpose PRs, encourage peer reviews, create strong feedback loops between decision and outcome. + - Embody and foster the engineering culture, for example rigorousness, push for small single-purpose PRs, encourage peer reviews, create strong feedback loops between decision and outcome. - Empower the team to aim for high-quality outputs. By doing such it aims for the success of delivered solutions. - Push for consistency, follow what's going on in the other teams. - **Keep technical debt in check**. You will make sure we can keep shipping features at a reasonable pace, align the team on "one way" of doing things and make sure engineers follow the conventions. diff --git a/docs/pages/careers/senior-designer.md b/docs/pages/careers/senior-designer.md index 3084ef228d1961..8b350abf778317 100644 --- a/docs/pages/careers/senior-designer.md +++ b/docs/pages/careers/senior-designer.md @@ -52,7 +52,7 @@ However, despite Material UI – our biggest library – being [the leading](ht More importantly, our challenges go way beyond the ones of design systems. We envision a future where MUI becomes the default toolkit for web developers to create UIs. -It's why we've been expanding our offering with Joy UI, Base UI, and MUI Toolpad. +It's why we've been expanding our offering with Joy UI, Base UI, and Toolpad. Design is foundational to achieving this goal. ## The role diff --git a/docs/pages/careers/technical-product-manager.md b/docs/pages/careers/technical-product-manager.md index 9415e266af253e..47dc7cb5233c90 100644 --- a/docs/pages/careers/technical-product-manager.md +++ b/docs/pages/careers/technical-product-manager.md @@ -62,7 +62,7 @@ Depending on the day, you'll: - You will drive the revenue and community growth by owning KPIs. - You will grow and cultivate a deep understanding of the problems that developers have when they deal with enterprise applications. This means that you will observe and reach out to the community, run research interviews and share your insights with the team. - You will keep a close eye on feature requests, issues, and general improvements (mostly through GitHub issues and occasionally Zendesk), to curate opportunities based on our strategy. -- You will build a strategy for your product area and contribute to the overall product strategy, e.g. establishing a go-to-market strategy. +- You will build a strategy for your product area and contribute to the overall product strategy, for example establishing a go-to-market strategy. - You will assess the impact of initiatives through telemetry data and qualitative feedback to help us develop our understanding further, and decide on the next steps. ## Who we're looking for diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index a15c9e431d869f..e0e4d60b0a7e5a 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -332,19 +332,19 @@ { "key": "tag", "className": "MuiAutocomplete-tag", - "description": "Styles applied to the tag elements, e.g. the chips.", + "description": "Styles applied to the tag elements, for example the chips.", "isGlobal": false }, { "key": "tagSizeMedium", "className": "MuiAutocomplete-tagSizeMedium", - "description": "Styles applied to the tag elements, e.g. the chips if `size=\"medium\"`.", + "description": "Styles applied to the tag elements, for example the chips if `size=\"medium\"`.", "isGlobal": false }, { "key": "tagSizeSmall", "className": "MuiAutocomplete-tagSizeSmall", - "description": "Styles applied to the tag elements, e.g. the chips if `size=\"small\"`.", + "description": "Styles applied to the tag elements, for example the chips if `size=\"small\"`.", "isGlobal": false } ], diff --git a/docs/public/_redirects b/docs/public/_redirects index 38466c7863360c..017dbacffa4757 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -10,7 +10,7 @@ # To add when we finish work on v6 # https://next.mui.com/* https://mui.com/:splat 301! -# For links that we can't edit later on, e.g. hosted in the code published on npm +# For links that we can't edit later on, for example hosted in the code published on npm /r/styles-instance-warning /material-ui/getting-started/faq/#i-have-several-instances-of-styles-on-the-page 302 /r/caveat-with-refs-guide /material-ui/guides/composition/#caveat-with-refs 302 /r/pseudo-classes-guide /material-ui/customization/how-to-customize/#state-classes 302 diff --git a/docs/src/MuiPage.ts b/docs/src/MuiPage.ts index fdaa4a820a9d5b..934782c099a824 100644 --- a/docs/src/MuiPage.ts +++ b/docs/src/MuiPage.ts @@ -17,7 +17,7 @@ export interface MuiPage { plan?: 'community' | 'pro' | 'premium'; /** * In case the children have pathnames out of pathname value, use this field to scope other pathnames. - * Pathname can be partial, e.g. '/components/' will cover '/components/button/' and '/components/link/'. + * Pathname can be partial, for example '/components/' will cover '/components/button/' and '/components/link/'. * @deprecated Dead code, to remove. */ scopePathnames?: string[]; diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx index 031c3fa68005cd..e9b9dc71280ea1 100644 --- a/docs/src/components/pricing/PricingTable.tsx +++ b/docs/src/components/pricing/PricingTable.tsx @@ -607,7 +607,7 @@ const rowHeaders: Record<string, React.ReactNode> = { {...{ label: 'Technical support for MUI Core', tooltip: - 'Support for MUI Core (e.g. Material UI) is provided by the community. MUI Core maintainers focus on solving root issues to support the community at large.', + 'Support for MUI Core (for example Material UI) is provided by the community. MUI Core maintainers focus on solving root issues to support the community at large.', }} /> ), diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index 0e910aa6614d4d..9750bfeed8b6ab 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -88,7 +88,7 @@ class AdErrorBoundary extends React.Component { componentDidCatch() { // send explicit `'null'` const eventLabel = String(this.props.eventLabel); - // TODO: Use proper error monitoring service (e.g. Sentry) instead + // TODO: Use proper error monitoring service (for example Sentry) instead window.gtag('event', 'ad', { eventAction: 'crash', diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js index c161f25405eb3d..64963da1702729 100644 --- a/docs/src/modules/components/AdCarbon.js +++ b/docs/src/modules/components/AdCarbon.js @@ -37,7 +37,7 @@ function AdCarbonImage() { // Once the script starts loading, it will asynchronous resolve, with no way to stop it. // This leads to duplication of the ad. // - // To solve the issue, e.g. StrictModel double effect execution, we debounce the load action. + // To solve the issue, for example StrictModel double effect execution, we debounce the load action. const load = setTimeout(() => { const script = loadScript( 'https://cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom', diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 1bdf1b4a0ddd4e..f56d19f285935b 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -165,7 +165,7 @@ function PersistScroll(props) { const activeBox = activeDrawerLink.getBoundingClientRect(); if (activeBox.top < 0 || activeBox.bottom + browserUrlPreviewMarge > window.innerHeight) { - // Scroll the least possible from the initial render, e.g. server-side, scrollTop = 0. + // Scroll the least possible from the initial render, for example server-side, scrollTop = 0. activeDrawerLink.scrollIntoView({ block: 'nearest' }); } diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js index 1379f1c1740c00..e626a11fe7d7e0 100644 --- a/docs/src/modules/components/AppNavDrawerItem.js +++ b/docs/src/modules/components/AppNavDrawerItem.js @@ -262,7 +262,7 @@ export default function AppNavDrawerItem(props) { } = props; const [open, setOpen] = React.useState(initiallyExpanded); const handleClick = (event) => { - // Ignore click events meant for native link handling, e.g. open in new tab + // Ignore click events meant for native link handling, for example open in new tab if (samePageLinkNavigation(event)) { return; } diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index 3f68c7033b29b6..c093a609b9342b 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -205,7 +205,7 @@ export default function AppTableOfContents(props) { useThrottledOnScroll(items.length > 0 ? findActiveIndex : null, 166); const handleClick = (hash) => (event) => { - // Ignore click events meant for native link handling, e.g. open in new tab + // Ignore click events meant for native link handling, for example open in new tab if (samePageLinkNavigation(event)) { return; } diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx index 00bde782ba070a..3816f8cb40912c 100644 --- a/docs/src/modules/components/JoyUsageDemo.tsx +++ b/docs/src/modules/components/JoyUsageDemo.tsx @@ -109,7 +109,7 @@ interface JoyUsageDemoProps<ComponentProps> { */ data: Array<{ /** - * Name of the prop, e.g. 'children' + * Name of the prop, for example 'children' */ propName: Extract<keyof ComponentProps, string>; /** diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 68fce71531bd04..d97703653a0fd9 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -32,7 +32,7 @@ export default function MarkdownDocs(props) { disableAd = false, disableToc = false, /** - * Some pages, e.g. Joy theme builder, should not be a nested CssVarsProvider to control its own state. + * Some pages, for example Joy theme builder, should not be a nested CssVarsProvider to control its own state. * This config will skip the CssVarsProvider at the root of the page. */ disableCssVarsProvider = false, diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js index 59be4f176c2d91..37cb3f4c931048 100644 --- a/docs/src/modules/components/MarkdownDocsV2.js +++ b/docs/src/modules/components/MarkdownDocsV2.js @@ -271,7 +271,7 @@ export default function MarkdownDocsV2(props) { {commonElements} {activeTab === '' && localizedDoc.rendered - // for the "hook only" edge case, e.g. Base UI autocomplete + // for the "hook only" edge case, for example Base UI autocomplete .slice( i, localizedDoc.rendered.length - (localizedDoc.headers.components.length > 0 ? 1 : 0), diff --git a/docs/src/modules/components/MarkdownLinks.js b/docs/src/modules/components/MarkdownLinks.js index 8f71b7320a9650..0ae9a7232fff27 100644 --- a/docs/src/modules/components/MarkdownLinks.js +++ b/docs/src/modules/components/MarkdownLinks.js @@ -40,7 +40,7 @@ function isLink(event) { * @param {MouseEvent} event */ function handleClick(event) { - // Ignore click events meant for native link handling, e.g. open in new tab + // Ignore click events meant for native link handling, for example open in new tab if (samePageLinkNavigation(event)) { return; } diff --git a/docs/src/modules/components/MaterialYouUsageDemo.tsx b/docs/src/modules/components/MaterialYouUsageDemo.tsx index 6f42e405dfcc02..272df121cec43d 100644 --- a/docs/src/modules/components/MaterialYouUsageDemo.tsx +++ b/docs/src/modules/components/MaterialYouUsageDemo.tsx @@ -116,7 +116,7 @@ interface MaterialYouUsageDemoProps<ComponentProps> { */ data: Array<{ /** - * Name of the prop, e.g. 'children' + * Name of the prop, for example 'children' */ propName: Extract<keyof ComponentProps, string>; /** diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js index 63c3e0f82e009f..265312ae688114 100644 --- a/docs/src/modules/components/Notifications.js +++ b/docs/src/modules/components/Notifications.js @@ -116,7 +116,7 @@ export default function Notifications() { // and create some distraction. const timeout = setTimeout(async () => { const notifications = await fetchNotifications().catch(() => { - // Swallow the exceptions, e.g. rate limit + // Swallow the exceptions, for example rate limit return []; }); diff --git a/docs/src/modules/sandbox/CodeSandbox.ts b/docs/src/modules/sandbox/CodeSandbox.ts index 0df110fbc68cac..13e93beaccfa61 100644 --- a/docs/src/modules/sandbox/CodeSandbox.ts +++ b/docs/src/modules/sandbox/CodeSandbox.ts @@ -83,7 +83,7 @@ function createReactApp(demoData: DemoData) { devDependencies, /** * @param {string} initialFile - * @description should start with `/`, e.g. `/Demo.tsx`. If the extension is not provided, + * @description should start with `/`, for example `/Demo.tsx`. If the extension is not provided, * it will be appended based on the code variant. */ openSandbox: (initialFile: string = `/src/Demo.${ext}`) => diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/privacy.md b/docs/src/pages/premium-themes/onepirate/modules/views/privacy.md index d01e183f530ba8..14789258e81d2c 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/views/privacy.md +++ b/docs/src/pages/premium-themes/onepirate/modules/views/privacy.md @@ -16,7 +16,7 @@ We may collect and process the following personal information from you: - **Information you provide to us:** We collect personal information when you voluntarily provide us with such information in the course of using our website or Services. For example, when you register to use our Services, we will collect your name, email address and organization information. We also collect personal information from you when you subscribe to our newsletter, or respond to a survey. If you make an enquiry through our website, or contact us in any other way, we will keep a copy of your communications with us. - **Information we collect when you do business with us:** We may process your personal information when you do business with us – for example, as a customer or prospective customer, or as a vendor, supplier, consultant or other third party. For example, we may hold your business contact information and financial account information (if any) and other communications you have with us for the purposes of maintaining our business relations with you. - **Information we automatically collect:** We may also collect certain technical information by automatic means when you visit our website, such as IP address, browser type and operating system, referring URLs, your use of our website, and other clickstream data. We collect this information automatically through the use of various technologies, such as cookies. -- **Personal information where we act as a data processor:** We also process personal information on behalf of our customers in the context of supporting our products and services. Where a customer subscribes to our Services for their website, game or app, they will be the ones who control what event data is collected and stored on our systems. For example, they may ask us to log basic user data (e.g. email address or username), device identifiers, IP addresses, event type, and related source code. In such cases, we are data processors acting in accordance with the instructions of our customers. You will need to refer to the privacy policies of our customers to find out more about how such information is handled by them. +- **Personal information where we act as a data processor:** We also process personal information on behalf of our customers in the context of supporting our products and services. Where a customer subscribes to our Services for their website, game or app, they will be the ones who control what event data is collected and stored on our systems. For example, they may ask us to log basic user data (for example email address or username), device identifiers, IP addresses, event type, and related source code. In such cases, we are data processors acting in accordance with the instructions of our customers. You will need to refer to the privacy policies of our customers to find out more about how such information is handled by them. ## What do we use your information for? diff --git a/docs/src/pages/versions/versions.md b/docs/src/pages/versions/versions.md index b008b18f544117..0d46a8bafb2f8a 100644 --- a/docs/src/pages/versions/versions.md +++ b/docs/src/pages/versions/versions.md @@ -80,7 +80,7 @@ You can follow the [milestones](https://github.com/mui/material-ui/milestones) f Sometimes "breaking changes", such as the removal of support for select APIs and features, are necessary. To make these transitions as easy as possible: -- The number of breaking changes is minimized, and migration tools are provided when possible (e.g. codemods). +- The number of breaking changes is minimized, and migration tools are provided when possible (for example codemods). - The deprecation policy described below is followed so that you have time to update your apps to the latest APIs and best practices. ### Deprecation policy diff --git a/docs/translations/api-docs-joy/autocomplete/autocomplete.json b/docs/translations/api-docs-joy/autocomplete/autocomplete.json index a03b4c15f42bdc..1472da2b7fab9f 100644 --- a/docs/translations/api-docs-joy/autocomplete/autocomplete.json +++ b/docs/translations/api-docs-joy/autocomplete/autocomplete.json @@ -108,7 +108,7 @@ "description": "The maximum number of tags that will be visible when not focused. Set <code>-1</code> to disable the limit." }, "loading": { - "description": "If <code>true</code>, the component is in a loading state. This shows the <code>loadingText</code> in place of suggestions (only if there are no suggestions to show, e.g. <code>options</code> are empty)." + "description": "If <code>true</code>, the component is in a loading state. This shows the <code>loadingText</code> in place of suggestions (only if there are no suggestions to show, for example <code>options</code> are empty)." }, "loadingText": { "description": "Text to display when in a loading state.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>." diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index d68f8fc3fb6965..c8e2c7b35b437a 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/docs/translations/api-docs/autocomplete/autocomplete.json @@ -104,7 +104,7 @@ "ListboxComponent": { "description": "The component used to render the listbox." }, "ListboxProps": { "description": "Props applied to the Listbox element." }, "loading": { - "description": "If <code>true</code>, the component is in a loading state. This shows the <code>loadingText</code> in place of suggestions (only if there are no suggestions to show, e.g. <code>options</code> are empty)." + "description": "If <code>true</code>, the component is in a loading state. This shows the <code>loadingText</code> in place of suggestions (only if there are no suggestions to show, for example <code>options</code> are empty)." }, "loadingText": { "description": "Text to display when in a loading state.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>." diff --git a/docs/translations/api-docs/circular-progress/circular-progress.json b/docs/translations/api-docs/circular-progress/circular-progress.json index d1223babd066ce..396bcdc6e441a5 100644 --- a/docs/translations/api-docs/circular-progress/circular-progress.json +++ b/docs/translations/api-docs/circular-progress/circular-progress.json @@ -9,7 +9,7 @@ "description": "If <code>true</code>, the shrink animation is disabled. This only works if variant is <code>indeterminate</code>." }, "size": { - "description": "The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g. '3rem'." + "description": "The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, for example '3rem'." }, "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." diff --git a/docs/translations/api-docs/icon/icon.json b/docs/translations/api-docs/icon/icon.json index 27699639adaa32..fa866f0daa2bf0 100644 --- a/docs/translations/api-docs/icon/icon.json +++ b/docs/translations/api-docs/icon/icon.json @@ -2,7 +2,7 @@ "componentDescription": "", "propDescriptions": { "baseClassName": { - "description": "The base class applied to the icon. Defaults to 'material-icons', but can be changed to any other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc)." + "description": "The base class applied to the icon. Defaults to 'material-icons', but can be changed to any other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc)." }, "children": { "description": "The name of the icon font ligature." }, "classes": { "description": "Override or extend the styles applied to the component." }, diff --git a/docs/writing-rules.zip b/docs/writing-rules.zip deleted file mode 100644 index d86d03cbe954cf..00000000000000 Binary files a/docs/writing-rules.zip and /dev/null differ diff --git a/docs/writing-rules/ComponentNameConventions.yml b/docs/writing-rules/ComponentNameConventions.yml deleted file mode 100644 index df3c31e4984702..00000000000000 --- a/docs/writing-rules/ComponentNameConventions.yml +++ /dev/null @@ -1,16 +0,0 @@ -extends: substitution -message: To be consistent with component name, consider using '%s' instead of '%s'. -level: error -ignorecase: true -# swap maps tokens in form of bad: good -# for more information: https://vale.sh/docs/topics/styles/#substitution -swap: - 'Heat map': Heatmap - 'Tree map': Treemap - 'Sparkline Chart': Sparkline - 'Gauge Chart': Gauge - 'Treemap Chart': Treemap -# Don't forget to run the following command to generate the package writing-rules.zip file -# Vale uses that ZIP file and not the YAML files. -# -# pnpm docs:zipRules diff --git a/docs/writing-rules/ComposedWords.yml b/docs/writing-rules/ComposedWords.yml deleted file mode 100644 index 0821b0025a92a3..00000000000000 --- a/docs/writing-rules/ComposedWords.yml +++ /dev/null @@ -1,19 +0,0 @@ -extends: substitution -message: To be consistent with the rest of the documentation, consider using '%s' instead of '%s'. -level: error -ignorecase: true -# swap maps tokens in form of bad: good -# for more information: https://vale.sh/docs/topics/styles/#substitution -swap: - sub-component: subcomponent - sub-components: subcomponents - 'sub component': subcomponent - 'sub components': subcomponents - 'use-case': 'use case' - 'usecase': 'use case' - 'client side': 'client-side' - 'server side': 'server-side' -# Don't forget to run the following command to generate the package writing-rules.zip file -# Vale uses that ZIP file and not the YAML files. -# -# pnpm docs:zipRules diff --git a/docs/writing-rules/NamingConventions.yml b/docs/writing-rules/NamingConventions.yml deleted file mode 100644 index 6fc6645f1862f4..00000000000000 --- a/docs/writing-rules/NamingConventions.yml +++ /dev/null @@ -1,24 +0,0 @@ -extends: substitution -message: To be consistent with capitalization, consider using '%s' instead of '%s'. -level: error -ignorecase: false -# swap maps tokens in form of bad: good -# for more information: https://vale.sh/docs/topics/styles/#substitution -swap: - api: API - Api: API - typescript: TypeScript - Typescript: TypeScript - ts: TypeScript - TS: TypeScript - javascript: JavaScript - Javascript: JavaScript - css: CSS - Css: CSS - NPM: npm # https://css-tricks.com/start-sentence-npm/ - Github: GitHub - StackOverflow: Stack Overflow -# Don't forget to run the following command to generate the package writing-rules.zip file -# Vale uses that ZIP file and not the YAML files. -# -# pnpm docs:zipRules diff --git a/docs/writing-rules/Typos.yml b/docs/writing-rules/Typos.yml deleted file mode 100644 index c0f85dc4bacf4a..00000000000000 --- a/docs/writing-rules/Typos.yml +++ /dev/null @@ -1,15 +0,0 @@ -extends: substitution -message: Do you mean '%s' instead of '%s'? -level: error -ignorecase: true -# swap maps tokens in form of bad: good -# for more information: https://vale.sh/docs/topics/styles/#substitution -swap: - bellow: below - eg: e.g. - eg.: e.g. - 'e.g ': 'e.g. ' -# Don't forget to run the following command to generate the package writing-rules.zip file -# Vale uses that ZIP file and not the YAML files. -# -# pnpm docs:zipRules diff --git a/examples/base-ui-nextjs-tailwind-ts/README.md b/examples/base-ui-nextjs-tailwind-ts/README.md index 61fec67e60e1bf..3f256ef21693d1 100644 --- a/examples/base-ui-nextjs-tailwind-ts/README.md +++ b/examples/base-ui-nextjs-tailwind-ts/README.md @@ -1,6 +1,6 @@ -# Base UI - Next.js App Router with Tailwind CSS example in TypeScript +# Base UI - Next.js App Router with Tailwind CSS example in TypeScript -This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Base UI installed and Tailwind CSS for styles. +This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Base UI installed and Tailwind CSS for styles. ## How to use diff --git a/examples/base-ui-vite-tailwind-ts/README.md b/examples/base-ui-vite-tailwind-ts/README.md index 7eace09f2ee306..4545337ebfed16 100644 --- a/examples/base-ui-vite-tailwind-ts/README.md +++ b/examples/base-ui-vite-tailwind-ts/README.md @@ -1,10 +1,10 @@ -# Base UI - Vite.js example with Tailwind CSS in TypeScript +# Base UI - Vite.js example with Tailwind CSS in TypeScript [Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. [Vite](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects, consisting of a dev server and a build command -[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides low-level CSS classes that can be composed to build custom UI designs. +[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides low-level CSS classes that can be composed to build custom UI designs. ## How to use diff --git a/examples/base-ui-vite-tailwind/README.md b/examples/base-ui-vite-tailwind/README.md index 98dc76dab63606..37e997ae9ec3ee 100644 --- a/examples/base-ui-vite-tailwind/README.md +++ b/examples/base-ui-vite-tailwind/README.md @@ -1,10 +1,10 @@ -# Base UI - Vite.js example with Tailwind CSS +# Base UI - Vite.js example with Tailwind CSS [Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. [Vite](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects, consisting of a dev server and a build command -[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides low-level CSS classes that can be composed to build custom UI designs. +[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides low-level CSS classes that can be composed to build custom UI designs. ## How to use diff --git a/examples/material-ui-cra-tailwind-ts/README.md b/examples/material-ui-cra-tailwind-ts/README.md index 38909723194c41..79033b58047bc7 100644 --- a/examples/material-ui-cra-tailwind-ts/README.md +++ b/examples/material-ui-cra-tailwind-ts/README.md @@ -1,4 +1,4 @@ -# Material UI - CRA example with Tailwind CSS in TypeScript +# Material UI - CRA example with Tailwind CSS in TypeScript ## How to use @@ -28,7 +28,7 @@ or: <!-- #default-branch-switch --> -This example demonstrates how you can use [Tailwind CSS](https://tailwindcss.com/) and [Create React App](https://github.com/facebookincubator/create-react-app) together with Material UI. +This example demonstrates how you can use [Tailwind CSS](https://tailwindcss.com/) and [Create React App](https://github.com/facebookincubator/create-react-app) together with Material UI. It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. ## What's next? diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/pages/_document.tsx b/examples/material-ui-nextjs-ts-v4-v5-migration/pages/_document.tsx index 3fa686412005d7..696c68d67145e1 100644 --- a/examples/material-ui-nextjs-ts-v4-v5-migration/pages/_document.tsx +++ b/examples/material-ui-nextjs-ts-v4-v5-migration/pages/_document.tsx @@ -67,7 +67,7 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => { resolveProps: async (initialProps: DocumentInitialProps) => { // Generate the css string for the styles coming from jss let css = jssSheets.toString(); - // It might be undefined, e.g. after an error. + // It might be undefined, for example after an error. if (css && process.env.NODE_ENV === 'production') { const result1 = await prefixer.process(css, { from: undefined }); css = result1.css; diff --git a/package.json b/package.json index e27bbd1eae44b9..408a50d56c2d83 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "docs:typescript:check": "pnpm --filter docs typescript", "docs:typescript:formatted": "tsx ./docs/scripts/formattedTSDemos", "docs:mdicons:synonyms": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js,.mjs\" ./docs/scripts/updateIconSynonyms && pnpm prettier", - "docs:zipRules": "cd docs && rm writing-rules.zip && zip -r writing-rules.zip writing-rules", + "docs:zipRules": "cd docs && rm mui-vale.zip && zip -r mui-vale.zip mui-vale && cd ../ && vale sync", "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --concurrency 8 build:modern", "rsc:build": "tsx ./packages/rsc-builder/buildRsc.ts", "template:screenshot": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/generateTemplateScreenshots", diff --git a/packages-internal/scripts/README.md b/packages-internal/scripts/README.md index 7d0ed6c75648a4..da7898bb3120d5 100644 --- a/packages-internal/scripts/README.md +++ b/packages-internal/scripts/README.md @@ -1,11 +1,11 @@ # @mui/internal-scripts -Code infra scripts for MUI repositories +This is that code infra scripts for the MUI organization repositories. It is not meant for general use. ## Scripts -- `build` - transpiles TS files into the build directory. +- `build` - transpiles TypeScript files into the build directory. - `release:publish` - builds the project and publishes it in the npm registry. - `release:publish:dry-run` - builds the project and publishes it in a local registry accessible on port 4873 (this is the default port of Verdaccio private npm server). - `test` - runs all the tests. diff --git a/packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts b/packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts index 521274b1a9cbd4..f35dda6bd41a74 100644 --- a/packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts +++ b/packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts @@ -546,7 +546,7 @@ export function getPropTypesFromFile({ const shouldInclude: PropTypesProject['shouldInclude'] = (data): boolean => { // ref is a reserved prop name in React - // e.g. https://github.com/reactjs/rfcs/pull/107 + // for example https://github.com/reactjs/rfcs/pull/107 // no need to add a prop-type if (data.name === 'ref') { return false; diff --git a/packages-internal/scripts/typescript-to-proptypes/src/injectPropTypesInFile.ts b/packages-internal/scripts/typescript-to-proptypes/src/injectPropTypesInFile.ts index c292660b5334ce..48e7ca74f5b73e 100644 --- a/packages-internal/scripts/typescript-to-proptypes/src/injectPropTypesInFile.ts +++ b/packages-internal/scripts/typescript-to-proptypes/src/injectPropTypesInFile.ts @@ -154,7 +154,7 @@ function createBabelPlugin({ data, ) => { // key is a reserved prop name in React - // e.g. https://github.com/reactjs/rfcs/pull/107 + // for example https://github.com/reactjs/rfcs/pull/107 // no need to add a prop-type if we won't generate the docs for it. if (data.prop.name === 'key' && data.prop.jsDoc === '@ignore') { return false; @@ -389,7 +389,7 @@ function createBabelPlugin({ getFromProp(nodeInit.params[0]); } else if (babelTypes.isCallExpression(nodeInit)) { if ((nodeInit.callee as babel.types.Identifier)?.name?.match(/create[A-Z].*/)) { - // Any components that are created by a factory function, e.g. System Box | Container | Grid. + // Any components that are created by a factory function, for example System Box | Container | Grid. getFromProp(node); } else { // x = react.memo(props => <div/>) / react.forwardRef(props => <div />) diff --git a/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts b/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts index 2989159dd6fd24..fc5fc499e42cff 100644 --- a/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts +++ b/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts @@ -15,7 +15,7 @@ export async function generateBaseUIApiPages() { const componentName = pathnameTokens[3]; // TODO: fix `productName` should be called `productId` and include the full name, - // e.g. base-ui below. + // for example base-ui below. if ( productName === 'base' && (markdown.filename.indexOf('\\components\\') >= 0 || diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts index cc28ee9f3a0135..5c39c67af43796 100644 --- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts +++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts @@ -55,7 +55,7 @@ export interface ReactApi extends ReactDocgenApi { /** * If `true`, the component supports theme default props customization. * If `null`, we couldn't infer this information. - * If `undefined`, it's not applicable in this context, e.g. Base UI components. + * If `undefined`, it's not applicable in this context, for example Base UI components. */ themeDefaultProps: boolean | undefined | null; /** diff --git a/packages/api-docs-builder/utils/parseTest.ts b/packages/api-docs-builder/utils/parseTest.ts index 1331f49afb5fa9..14d2c70c9939cb 100644 --- a/packages/api-docs-builder/utils/parseTest.ts +++ b/packages/api-docs-builder/utils/parseTest.ts @@ -73,7 +73,7 @@ function getRefInstance(valueNode: babel.Node): string | undefined { if (!babel.types.isMemberExpression(valueNode)) { throw new Error( - 'Expected a member expression (e.g. window.HTMLDivElement) or a global identifier (e.g. Object) in refInstanceof. ' + + 'Expected a member expression (for example window.HTMLDivElement) or a global identifier (for example Object) in refInstanceof. ' + 'If the ref will not be resolved use `refInstanceof: undefined`.', ); } diff --git a/packages/eslint-plugin-material-ui/README.md b/packages/eslint-plugin-material-ui/README.md index 8ee4945295b0a3..0688c6e2c38d38 100644 --- a/packages/eslint-plugin-material-ui/README.md +++ b/packages/eslint-plugin-material-ui/README.md @@ -14,7 +14,7 @@ Custom eslint rules for MUI. Prevent `fireEvent.keyDown(document.activeElement)`. The implementation we use already verifies that the passed target can be the target of a -`keydown` event. Passing the target explicitly (e.g. `fireEvent.keyDown(getByRole('tab', { selected: true }))`) makes the test more readable. +`keydown` event. Passing the target explicitly (for example `fireEvent.keyDown(getByRole('tab', { selected: true }))`) makes the test more readable. ### docgen-ignore-before-comment diff --git a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js index db51e2b85a4023..008258d91b249c 100644 --- a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js +++ b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js @@ -116,7 +116,7 @@ const rule = { ? parent.init.expression.callee : parent.init.callee; if (callee.name.includes(parent.id.name)) { - // For component factory, e.g. const Container = createContainer({ ... }) + // For component factory, for example const Container = createContainer({ ... }) componentName = parent.id.name; } } diff --git a/packages/feedback/README.md b/packages/feedback/README.md index ce315d149cd545..23dcc510b3af00 100644 --- a/packages/feedback/README.md +++ b/packages/feedback/README.md @@ -45,7 +45,7 @@ The project includes an IAM access policy that will grant the lambda function ac To set this up, first [set up the credentials](https://claudiajs.com/tutorials/installing.html#configuring-access-credentials), then: 1. run `pnpm install` (from the root workspace) to install the dependencies -1. Navigate into the directory of this README, e.g. `cd docs/packages/feedback` +1. Navigate into the directory of this README, for example `cd docs/packages/feedback` 1. run `pnpm setup` to create the lambda function on AWS under the default name. This will also ask you for table names for development and production. If you used the above AWS command, they will be `feedback-dev` and `feedback-dev` respectively. diff --git a/packages/mui-base/README.md b/packages/mui-base/README.md index 35b605e1330406..d84f270367e381 100644 --- a/packages/mui-base/README.md +++ b/packages/mui-base/README.md @@ -35,7 +35,7 @@ Our documentation features [a collection of example projects using Base UI](htt Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes. Contributing to Base UI is about more than just issues and pull requests! -There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. +There are many other ways to [support Base UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. ## Changelog @@ -43,7 +43,7 @@ The [changelog](https://github.com/mui/material-ui/releases) is regularly update ## Roadmap -Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/material-ui/discover-more/roadmap/). +Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/material-ui/discover-more/roadmap/). ## License diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx index 68803e9080e62d..bd52658ac9b7df 100644 --- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx +++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx @@ -313,7 +313,7 @@ function FocusTrap(props: FocusTrapProps): JSX.Element { doc.addEventListener('keydown', loopFocus, true); // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area. - // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561. + // for example https://bugzilla.mozilla.org/show_bug.cgi?id=559561. // Instead, we can look if the active element was restored on the BODY element. // // The whatwg spec defines how the browser should behave but does not explicitly mention any events: diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js index 13d846b468d9c5..344b2cce0efe0f 100644 --- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js @@ -598,7 +598,7 @@ export function useAutocomplete(props) { [ `A textarea element was provided to ${componentName} where input was expected.`, `This is not a supported scenario but it may work under certain conditions.`, - `A textarea keyboard navigation may conflict with Autocomplete controls (e.g. enter and arrow keys).`, + `A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).`, `Make sure to test keyboard navigation and add custom event handlers if necessary.`, ].join('\n'), ); diff --git a/packages/mui-base/src/useCompound/useCompoundItem.ts b/packages/mui-base/src/useCompound/useCompoundItem.ts index 05f28a0d16e9e4..1c65a8d8dab4a6 100644 --- a/packages/mui-base/src/useCompound/useCompoundItem.ts +++ b/packages/mui-base/src/useCompound/useCompoundItem.ts @@ -32,7 +32,7 @@ export interface UseCompoundItemReturnValue<Key> { * This can be either a value, or a function that generates a value based on already registered siblings' ids. * If a function, it's called with the set of the ids of all the items that have already been registered. * Return `existingKeys.size` if you want to use the index of the new item as the id. - * @param itemMetadata Arbitrary metadata to pass to the parent component. This should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations. + * @param itemMetadata Arbitrary metadata to pass to the parent component. This should be a stable reference (for example a memoized object), to avoid unnecessary re-registrations. * * @ignore - internal hook. */ diff --git a/packages/mui-base/src/useCompound/useCompoundParent.ts b/packages/mui-base/src/useCompound/useCompoundParent.ts index b85b4d31496d48..8cc2dad24b6efe 100644 --- a/packages/mui-base/src/useCompound/useCompoundParent.ts +++ b/packages/mui-base/src/useCompound/useCompoundParent.ts @@ -18,7 +18,7 @@ export type CompoundComponentContextValue<Key, Subitem> = { /** * Registers an item with the parent. * This should be called during the effect phase of the child component. - * The `itemMetadata` should be a stable reference (e.g. a memoized object), to avoid unnecessary re-registrations. + * The `itemMetadata` should be a stable reference (for example a memoized object), to avoid unnecessary re-registrations. * * @param id Id of the item or A function that generates a unique id for the item. * It is called with the set of the ids of all the items that have already been registered. diff --git a/packages/mui-base/src/useList/useListItem.ts b/packages/mui-base/src/useList/useListItem.ts index 6a41a278d3a804..99997484501811 100644 --- a/packages/mui-base/src/useList/useListItem.ts +++ b/packages/mui-base/src/useList/useListItem.ts @@ -7,7 +7,7 @@ import { ListActionTypes } from './listActions.types'; import { ListContext } from './ListContext'; /** - * Contains the logic for an item of a list-like component (e.g. Select, Menu, etc.). + * Contains the logic for an item of a list-like component (for example Select, Menu, etc.). * It handles the item's mouse events and tab index. * * @template ItemValue The type of the item's value. This should be consistent with the type of useList's `items` parameter. diff --git a/packages/mui-base/src/utils/useRootElementName.ts b/packages/mui-base/src/utils/useRootElementName.ts index 71358471fdc70f..607a67fe496ec1 100644 --- a/packages/mui-base/src/utils/useRootElementName.ts +++ b/packages/mui-base/src/utils/useRootElementName.ts @@ -3,7 +3,7 @@ import * as React from 'react'; type UseRootElementNameParameters = { /** - * The HTML element expected to be rendered, e.g. 'div', 'button' etc + * The HTML element expected to be rendered, for example 'div', 'button' etc * @default '' */ rootElementName?: keyof HTMLElementTagNameMap; @@ -17,7 +17,7 @@ type UseRootElementNameParameters = { /** * @ignore - do not document. * - * Use this function determine the host element correctly on the server (in a SSR context, e.g. Next.js) + * Use this function determine the host element correctly on the server (in a SSR context, for example Next.js) */ export function useRootElementName( parameters: UseRootElementNameParameters, @@ -36,7 +36,7 @@ export function useRootElementName( `useRootElementName: the \`rootElementName\` prop of ${ componentName ? `the ${componentName} component` : 'a component' } expected the '${rootElementNameProp}' element, but a '${rootElementName.toLowerCase()}' was rendered instead`, - 'This may cause hydration issues in an SSR context, e.g. in a Next.js app', + 'This may cause hydration issues in an SSR context, for example in a Next.js app', ); } }, [rootElementNameProp, rootElementName, componentName]); diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 3a123187bc9e18..451512381792c7 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1632,13 +1632,13 @@ npx @mui/codemod@latest v5.0.0/jss-to-tss-react <path> The following scenarios are not currently handled by this codemod and will be marked with a "TODO jss-to-tss-react codemod" comment: -- If the hook returned by `makeStyles` (e.g. `useStyles`) is exported and used in another file, +- If the hook returned by `makeStyles` (for example `useStyles`) is exported and used in another file, the usages in other files will not be converted. - Arrow functions as the value for a CSS prop will not be converted. Arrow functions **are** supported at the rule level, though with some caveats listed below. - In order for arrow functions at the rule level to be converted, the parameter must use object - destructuring (e.g. `root: ({color, padding}) => (...)`). If the parameter is not destructured - (e.g. `root: (props) => (...)`), it will not be converted. + destructuring (for example `root: ({color, padding}) => (...)`). If the parameter is not destructured + (for example `root: (props) => (...)`), it will not be converted. - If an arrow function at the rule level contains a code block (i.e. contains an explicit `return` statement) rather than just an object expression, it will not be converted. diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.js b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.js index bba9d5d01d1201..e49c244f619c60 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.js @@ -111,7 +111,7 @@ function transformStylesExpression(j, comments, stylesExpression, nestedKeys, se if (prop.value.body.type === 'ObjectExpression') { let example = ''; if (prop.value.params[0].type === 'Identifier') { - example = ' (e.g. `(props) => ({...})` instead of `({color}) => ({...})`)'; + example = ' (for example `(props) => ({...})` instead of `({color}) => ({...})`)'; } extraComment = ` Arrow function has parameter type of ${prop.value.params[0].type} instead of ObjectPattern${example}.`; } else { @@ -367,7 +367,7 @@ export default function transformer(file, api, options) { }); }); /** - * Convert classes assignment syntax in calls to the hook (e.g. useStyles) and + * Convert classes assignment syntax in calls to the hook (for example useStyles) and * convert usages of clsx or classnames to cx. */ styleHooks.forEach((hookName) => { diff --git a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js index e190d8f9e008cb..7c03ca65738aff 100644 --- a/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js +++ b/packages/mui-codemod/src/v5.0.0/jss-to-tss-react.test/expected-todo-comments.js @@ -29,7 +29,7 @@ export const useExportedStyles = makeStyles()({ }); // TODO jss-to-tss-react codemod: Unable to handle style definition reliably. Unsupported arrow function syntax. -// Arrow function has parameter type of Identifier instead of ObjectPattern (e.g. `(props) => ({...})` instead of `({color}) => ({...})`). +// Arrow function has parameter type of Identifier instead of ObjectPattern (for example `(props) => ({...})` instead of `({color}) => ({...})`). const useStyles2 = makeStyles()({ test2: props => ({ backgroundColor: "blue", diff --git a/packages/mui-envinfo/envinfo.js b/packages/mui-envinfo/envinfo.js index eb364007f7d53e..aca2a91e4226e4 100755 --- a/packages/mui-envinfo/envinfo.js +++ b/packages/mui-envinfo/envinfo.js @@ -26,7 +26,7 @@ envinfo // `markdown: true` uses level 2 headings. It doesn't necessarily fit our issue template json, duplicates: true, - // include transitive dependencies and important packages that are transitive dependencies (e.g. `jsdom` is usually a transitive dependency inside jest) + // include transitive dependencies and important packages that are transitive dependencies (for example `jsdom` is usually a transitive dependency inside jest) fullTree: true, showNotFound: true, }, diff --git a/packages/mui-icons-material/builder.md b/packages/mui-icons-material/builder.md index c3cfee1fef8f7b..d13b2d1c4ff210 100644 --- a/packages/mui-icons-material/builder.md +++ b/packages/mui-icons-material/builder.md @@ -28,7 +28,7 @@ through command line options. - `--output-dir` - Directory to output generated components. - `--svg-dir` - Directory containing the source SVG icons. - `--inner-path` - "Reach into" subdirs, since libraries like material-design-icons - use arbitrary build directories to organize icons, e.g. "action/svg/production/". + use arbitrary build directories to organize icons, for example "action/svg/production/". - `--file-suffix` - Process only files ending with the specified suffix/ - `--rename-filter` - Apply a custom filter to rename the generated icons. The default and Material Design filters can be found in `filters/rename`. diff --git a/packages/mui-icons-material/scripts/download.mjs b/packages/mui-icons-material/scripts/download.mjs index 88dd8f5d5732ed..43f4244d6db771 100644 --- a/packages/mui-icons-material/scripts/download.mjs +++ b/packages/mui-icons-material/scripts/download.mjs @@ -10,7 +10,7 @@ const currentDirectory = fileURLToPath(new URL('.', import.meta.url)); // Icons we don't publish. // This is just a list of new icons. -// In the future we might change what icons we want to exclude (e.g. by popularity) +// In the future we might change what icons we want to exclude (for example by popularity) const ignoredIconNames = new Set([ // TODO v6: Whatsapp duplicates with WhatsApp // We don't need it https://fonts.google.com/icons?icon.set=Material+Icons&icon.query=whatsapp diff --git a/packages/mui-joy/README.md b/packages/mui-joy/README.md index a69c37d192cbba..02d7cf33fd67e3 100644 --- a/packages/mui-joy/README.md +++ b/packages/mui-joy/README.md @@ -26,14 +26,14 @@ Use the "joy-ui" tag on Stack Overflow to make it easier for the community to f ## Examples -Our documentation features [a collection of example projects using Joy UI](https://github.com/mui/material-ui/tree/master/examples). +The documentation features [a collection of example projects using Joy UI](https://github.com/mui/material-ui/tree/master/examples). ## Contributing -Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes. +Read the [contributing guide](/CONTRIBUTING.md) to learn about the development process, how to propose bug fixes and improvements, and how to build and test your changes. Contributing to Joy UI is about more than just issues and pull requests! -There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. +There are many other ways to [support Joy UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. ## Changelog @@ -41,7 +41,7 @@ The [changelog](https://github.com/mui/material-ui/releases) is regularly update ## Roadmap -Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/material-ui/discover-more/roadmap/). +Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/material-ui/discover-more/roadmap/). ## License diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx index 696feacf1ea575..dbbb1631332c72 100644 --- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx +++ b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx @@ -211,7 +211,7 @@ const AutocompleteListbox = styled(StyledAutocompleteListbox, { slot: 'Listbox', overridesResolver: (props, styles) => styles.listbox, })<{ ownerState: OwnerState }>(({ theme }) => ({ - // `unstable_popup-zIndex` is a private variable that lets other component, e.g. Modal, to override the z-index so that the listbox can be displayed above the Modal. + // `unstable_popup-zIndex` is a private variable that lets other component, for example Modal, to override the z-index so that the listbox can be displayed above the Modal. zIndex: `var(--unstable_popup-zIndex, ${theme.vars.zIndex.popup})`, })); @@ -986,7 +986,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { limitTags: integerPropType, /** * If `true`, the component is in a loading state. - * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty). + * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty). * @default false */ loading: PropTypes.bool, diff --git a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts index b9c370d4d31636..94da1fc39386c3 100644 --- a/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts +++ b/packages/mui-joy/src/Autocomplete/AutocompleteProps.ts @@ -242,7 +242,7 @@ type AutocompleteOwnProps< getLimitTagsText?: (more: string | number) => React.ReactNode; /** * If `true`, the component is in a loading state. - * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty). + * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty). * @default false */ loading?: boolean; diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index ebc5647bafddaa..75f3d037825f8d 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -118,7 +118,7 @@ export const getButtonStyles = ({ '--Button-gap': '0.5rem', minHeight: 'var(--Button-minHeight, 2.25rem)', // use min-height instead of height to make the button resilient to its content fontSize: theme.vars.fontSize.sm, - // internal --Button-paddingBlock is used to control the padding-block of the button from the outside, e.g. as a decorator of an Input + // internal --Button-paddingBlock is used to control the padding-block of the button from the outside, for example as a decorator of an Input paddingBlock: 'var(--Button-paddingBlock, 0.375rem)', // the padding-block act as a minimum spacing between content and root element paddingInline: '1rem', }), @@ -134,8 +134,8 @@ export const getButtonStyles = ({ }), WebkitTapHighlightColor: 'transparent', boxSizing: 'border-box', - borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input - margin: `var(--Button-margin)`, // to be controlled by other components, e.g. Input + borderRadius: `var(--Button-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, for example Input + margin: `var(--Button-margin)`, // to be controlled by other components, for example Input border: 'none', backgroundColor: 'transparent', cursor: 'pointer', diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx index 429ede5c9f95d4..2c1ad24b5447e4 100644 --- a/packages/mui-joy/src/Chip/Chip.tsx +++ b/packages/mui-joy/src/Chip/Chip.tsx @@ -190,7 +190,7 @@ const ChipStartDecorator = styled('span', { '0 calc(-1 * var(--Chip-paddingInline) / 3) 0 calc(var(--Chip-decoratorChildOffset) * -1)', '--Icon-margin': '0 0 0 calc(var(--Chip-paddingInline) / -4)', display: 'inherit', - // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio + // set zIndex to 1 with order to stay on top of other controls, for example Checkbox, Radio order: 0, zIndex: 1, pointerEvents: 'none', @@ -205,7 +205,7 @@ const ChipEndDecorator = styled('span', { '0 calc(var(--Chip-decoratorChildOffset) * -1) 0 calc(-1 * var(--Chip-paddingInline) / 3)', '--Icon-margin': '0 calc(var(--Chip-paddingInline) / -4) 0 0', display: 'inherit', - // set zIndex to 1 with order to stay on top of other controls, e.g. Checkbox, Radio + // set zIndex to 1 with order to stay on top of other controls, for example Checkbox, Radio order: 2, zIndex: 1, pointerEvents: 'none', @@ -318,7 +318,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) { <SlotRoot {...rootProps}> {clickable && <SlotAction {...actionProps} />} - {/* label is always the first element for integrating with other controls, e.g. Checkbox, Radio. Use CSS order to rearrange position */} + {/* label is always the first element for integrating with other controls, for example Checkbox, Radio. Use CSS order to rearrange position */} <SlotLabel {...labelProps} id={id}> {children} </SlotLabel> diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx index 914b8a7f802b83..d92bf1eff7b71e 100644 --- a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx +++ b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx @@ -40,7 +40,7 @@ const ChipDeleteRoot = styled(StyledIconButton as unknown as 'button', { minWidth: 'var(--IconButton-size, 2rem)', // use min-width instead of height to make the button resilient to its content minHeight: 'var(--IconButton-size, 2rem)', // use min-height instead of height to make the button resilient to its content fontSize: theme.vars.fontSize.sm, - paddingInline: '2px', // add a gap, in case the content is long, e.g. multiple icons + paddingInline: '2px', // add a gap, in case the content is long, for example multiple icons pointerEvents: 'visible', // force the ChipDelete to be hoverable because the decorator can have pointerEvents 'none' borderRadius: 'var(--Chip-deleteRadius, 50%)', zIndex: 1, // overflow above sibling button or anchor diff --git a/packages/mui-joy/src/FormControl/FormControl.tsx b/packages/mui-joy/src/FormControl/FormControl.tsx index aa27b875f52d7a..5562aaad8b76d2 100644 --- a/packages/mui-joy/src/FormControl/FormControl.tsx +++ b/packages/mui-joy/src/FormControl/FormControl.tsx @@ -72,7 +72,7 @@ export const FormControlRoot = styled('div', { '--FormHelperText-color': theme.variants.plainDisabled?.[ownerState.color || 'neutral']?.color, }, display: 'flex', - position: 'relative', // for keeping the control action area, e.g. Switch + position: 'relative', // for keeping the control action area, for example Switch flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column', ...(ownerState.orientation === 'horizontal' && { [`& > label ~ .${switchClasses.root}`]: { diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index 5e0df7f9688d55..6d730c5c72c297 100644 --- a/packages/mui-joy/src/IconButton/IconButton.tsx +++ b/packages/mui-joy/src/IconButton/IconButton.tsx @@ -56,7 +56,7 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt minWidth: 'var(--IconButton-size, 2rem)', // use min-width instead of height to make the button resilient to its content minHeight: 'var(--IconButton-size, 2rem)', // use min-height instead of height to make the button resilient to its content fontSize: theme.vars.fontSize.sm, - paddingInline: '2px', // add a gap, in case the content is long, e.g. multiple icons + paddingInline: '2px', // add a gap, in case the content is long, for example multiple icons }), ...(ownerState.size === 'md' && { '--Icon-fontSize': 'calc(var(--IconButton-size, 2.25rem) / 1.5)', // 1.5rem by default @@ -80,8 +80,8 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt paddingBlock: 0, fontFamily: theme.vars.fontFamily.body, fontWeight: theme.vars.fontWeight.md, - margin: `var(--IconButton-margin)`, // to be controlled by other components, e.g. Input - borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, e.g. Input + margin: `var(--IconButton-margin)`, // to be controlled by other components, for example Input + borderRadius: `var(--IconButton-radius, ${theme.vars.radius.sm})`, // to be controlled by other components, for example Input border: 'none', boxSizing: 'border-box', backgroundColor: 'transparent', diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx index b195625fd273d8..3e9eb9baba8cc0 100644 --- a/packages/mui-joy/src/ListItem/ListItem.tsx +++ b/packages/mui-joy/src/ListItem/ListItem.tsx @@ -65,7 +65,7 @@ export const StyledListItem = styled('li')<{ ownerState: ListItemOwnerState }>( } as const), // Base styles { - // Integration with control elements, e.g. Checkbox, Radio. + // Integration with control elements, for example Checkbox, Radio. '--unstable_actionRadius': 'calc(var(--ListItem-radius) - var(--variant-borderWidth, 0px))', ...(ownerState.startAction && { '--unstable_startActionWidth': '2rem', // to add sufficient padding-left on ListItemButton diff --git a/packages/mui-joy/src/Menu/Menu.tsx b/packages/mui-joy/src/Menu/Menu.tsx index 70ba44aff2c3d0..df041f440ec211 100644 --- a/packages/mui-joy/src/Menu/Menu.tsx +++ b/packages/mui-joy/src/Menu/Menu.tsx @@ -52,7 +52,7 @@ const MenuRoot = styled(StyledList, { borderRadius: `var(--List-radius, ${theme.vars.radius.sm})`, boxShadow: theme.shadow.md, overflow: 'auto', - // `unstable_popup-zIndex` is a private variable that lets other component, e.g. Modal, to override the z-index so that the listbox can be displayed above the Modal. + // `unstable_popup-zIndex` is a private variable that lets other component, for example Modal, to override the z-index so that the listbox can be displayed above the Modal. zIndex: `var(--unstable_popup-zIndex, ${theme.vars.zIndex.popup})`, ...(!variantStyle?.backgroundColor && { backgroundColor: theme.vars.palette.background.popup, diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx index ea95ca4d6263c7..017fd87c2c348e 100644 --- a/packages/mui-joy/src/Select/Select.tsx +++ b/packages/mui-joy/src/Select/Select.tsx @@ -246,7 +246,7 @@ const SelectListbox = styled(StyledList, { outline: 0, boxShadow: theme.shadow.md, borderRadius: `var(--List-radius, ${theme.vars.radius.sm})`, - // `unstable_popup-zIndex` is a private variable that lets other component, e.g. Modal, to override the z-index so that the listbox can be displayed above the Modal. + // `unstable_popup-zIndex` is a private variable that lets other component, for example Modal, to override the z-index so that the listbox can be displayed above the Modal. zIndex: `var(--unstable_popup-zIndex, ${theme.vars.zIndex.popup})`, ...(!variantStyle?.backgroundColor && { backgroundColor: theme.vars.palette.background.popup, diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx index c559e595add814..80f09aef4b91d9 100644 --- a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx +++ b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx @@ -46,7 +46,7 @@ const SvgIconRoot = styled('svg', { height: '1em', display: 'inline-block', // the <svg> will define the property that has `currentColor` - // e.g. heroicons uses fill="none" and stroke="currentColor" + // for example heroicons uses fill="none" and stroke="currentColor" fill: ownerState.hasSvgAsChild ? undefined : 'currentColor', flexShrink: 0, fontSize: `var(--Icon-fontSize, ${theme.vars.fontSize[sizeMap[ownerState.size!]] || 'unset'})`, diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx index 6e22027df5ad1f..e77423e8c6400e 100644 --- a/packages/mui-joy/src/Typography/Typography.tsx +++ b/packages/mui-joy/src/Typography/Typography.tsx @@ -30,7 +30,7 @@ if (process.env.NODE_ENV !== 'production') { * @internal * Typography's level will be inherit within this context unless an explicit `level` prop is provided. * - * This is used in components, e.g. Table, to inherit the parent's size by default. + * This is used in components, for example Table, to inherit the parent's size by default. */ export const TypographyInheritContext = React.createContext(false); diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts index 8bc87c637edd05..c5a711544383e3 100644 --- a/packages/mui-joy/src/styles/types/theme.ts +++ b/packages/mui-joy/src/styles/types/theme.ts @@ -87,7 +87,7 @@ export interface ThemeVars extends ThemeScales, ColorSystemVars {} export interface ThemeCssVarOverrides {} /** - * For providing `sx` autocomplete, e.g. `color`, `bgcolor`, `borderColor`. + * For providing `sx` autocomplete, for example `color`, `bgcolor`, `borderColor`. */ export type TextColor = | NormalizeVars<Omit<ColorSystem['palette'], 'mode'>, '.'> diff --git a/packages/mui-material-next/CONTRIBUTING.md b/packages/mui-material-next/CONTRIBUTING.md index 25505c81e5f22d..510b45892d8197 100644 --- a/packages/mui-material-next/CONTRIBUTING.md +++ b/packages/mui-material-next/CONTRIBUTING.md @@ -13,7 +13,7 @@ If the issue doesn't exist, create it, name it `[<ComponentName>][material-next] - Change imports from `@mui/material` to `@mui/material-next` - If there are utils that don't exist in `material-next`, add them by copying from `material` - Some utils imported from `../utils` might already exist in `@mui/utils`, if so, use the latter -2. Migrate component to Typescript. The extension `.d.ts` should be replaced with `.types.ts` (except for `index.d.ts` which won't be necessary) +2. Migrate component to TypeScript. The extension `.d.ts` should be replaced with `.types.ts` (except for `index.d.ts` which won't be necessary) 3. Remove deprecated `components` (note the plural `s`, it's not the same as the `component` prop) and `componentsProps` props, replacing them with `slots` and `slotProps` 4. Drop support for `ThemeProvider` in favor of `CssVarsProvider`. In practice, this means: - Consuming tokens from `theme.vars` instead of `theme` diff --git a/packages/mui-material-next/README.md b/packages/mui-material-next/README.md index 3873ce85ca4d45..43ec9270f9102b 100644 --- a/packages/mui-material-next/README.md +++ b/packages/mui-material-next/README.md @@ -11,4 +11,4 @@ Follow the [migration guide](/packages/mui-material-next/migration.md) to migrat Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes. Contributing to Material UI is about more than just issues and pull requests! -There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. +There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. diff --git a/packages/mui-material-next/src/CircularProgress/CircularProgress.tsx b/packages/mui-material-next/src/CircularProgress/CircularProgress.tsx index b8dbeeddebaf58..b5e290ff44e59e 100644 --- a/packages/mui-material-next/src/CircularProgress/CircularProgress.tsx +++ b/packages/mui-material-next/src/CircularProgress/CircularProgress.tsx @@ -321,7 +321,7 @@ CircularProgress.propTypes /* remove-proptypes */ = { /** * The size of the component. * If using a number, the pixel unit is assumed. - * If using a string, you need to provide the CSS unit, e.g. '3rem'. + * If using a string, you need to provide the CSS unit, for example '3rem'. * @default 48 */ size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/mui-material-next/src/CircularProgress/CircularProgress.types.ts b/packages/mui-material-next/src/CircularProgress/CircularProgress.types.ts index 621245c1e28d32..c8585439fc1dca 100644 --- a/packages/mui-material-next/src/CircularProgress/CircularProgress.types.ts +++ b/packages/mui-material-next/src/CircularProgress/CircularProgress.types.ts @@ -36,7 +36,7 @@ export interface CircularProgressOwnProps { /** * The size of the component. * If using a number, the pixel unit is assumed. - * If using a string, you need to provide the CSS unit, e.g. '3rem'. + * If using a string, you need to provide the CSS unit, for example '3rem'. * @default 48 */ size?: number | string; diff --git a/packages/mui-material/README.md b/packages/mui-material/README.md index 1d88d3f9be3911..13b6dee92b9573 100644 --- a/packages/mui-material/README.md +++ b/packages/mui-material/README.md @@ -33,7 +33,7 @@ Our documentation features [a collection of example projects using Material UI] Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes. Contributing to Material UI is about more than just issues and pull requests! -There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. +There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base. ## Changelog @@ -41,7 +41,7 @@ The [changelog](https://github.com/mui/material-ui/releases) is regularly update ## Roadmap -Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/material-ui/discover-more/roadmap/). +Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/material-ui/discover-more/roadmap/). ## License diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 81a0c6d9a292da..bc93447fab6e13 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -171,7 +171,7 @@ export interface AutocompleteProps< }; /** * If `true`, the component is in a loading state. - * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty). + * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty). * @default false */ loading?: boolean; diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 4fe8c4346f3533..5fcfc3d7abcad5 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -999,7 +999,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { ListboxProps: PropTypes.object, /** * If `true`, the component is in a loading state. - * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty). + * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty). * @default false */ loading: PropTypes.bool, diff --git a/packages/mui-material/src/Autocomplete/autocompleteClasses.ts b/packages/mui-material/src/Autocomplete/autocompleteClasses.ts index 3e937604ab1bf9..863a1719e46490 100644 --- a/packages/mui-material/src/Autocomplete/autocompleteClasses.ts +++ b/packages/mui-material/src/Autocomplete/autocompleteClasses.ts @@ -12,11 +12,11 @@ export interface AutocompleteClasses { focused: string; /** Styles applied to the option elements if they are keyboard focused. */ focusVisible: string; - /** Styles applied to the tag elements, e.g. the chips. */ + /** Styles applied to the tag elements, for example the chips. */ tag: string; - /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */ + /** Styles applied to the tag elements, for example the chips if `size="small"`. */ tagSizeSmall: string; - /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */ + /** Styles applied to the tag elements, for example the chips if `size="medium"`. */ tagSizeMedium: string; /** Styles applied when the popup icon is rendered. */ hasPopupIcon: string; diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts index ba54f738dfaed0..c0046a5b247e2b 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts +++ b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts @@ -31,7 +31,7 @@ export interface CircularProgressProps /** * The size of the component. * If using a number, the pixel unit is assumed. - * If using a string, you need to provide the CSS unit, e.g. '3rem'. + * If using a string, you need to provide the CSS unit, for example '3rem'. * @default 40 */ size?: number | string; diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js index e50517d07ec2d8..183b589359da0b 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -238,7 +238,7 @@ CircularProgress.propTypes /* remove-proptypes */ = { /** * The size of the component. * If using a number, the pixel unit is assumed. - * If using a string, you need to provide the CSS unit, e.g. '3rem'. + * If using a string, you need to provide the CSS unit, for example '3rem'. * @default 40 */ size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), diff --git a/packages/mui-material/src/Icon/Icon.d.ts b/packages/mui-material/src/Icon/Icon.d.ts index 80ca632a70a7ad..643e8a9667a12d 100644 --- a/packages/mui-material/src/Icon/Icon.d.ts +++ b/packages/mui-material/src/Icon/Icon.d.ts @@ -12,7 +12,7 @@ export interface IconPropsColorOverrides {} export interface IconOwnProps { /** * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any - * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc). + * other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc). * @default 'material-icons' */ baseClassName?: string; diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js index c98665f504ca04..8a8dbbc9344e4e 100644 --- a/packages/mui-material/src/Icon/Icon.js +++ b/packages/mui-material/src/Icon/Icon.js @@ -111,7 +111,7 @@ Icon.propTypes /* remove-proptypes */ = { // └─────────────────────────────────────────────────────────────────────┘ /** * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any - * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc). + * other base class that suits the icon font you're using (for example material-icons-rounded, fas, etc). * @default 'material-icons' */ baseClassName: PropTypes.string, diff --git a/packages/mui-material/src/OverridableComponent.d.ts b/packages/mui-material/src/OverridableComponent.d.ts index b84410ef0bc004..1a65de60e6c1f5 100644 --- a/packages/mui-material/src/OverridableComponent.d.ts +++ b/packages/mui-material/src/OverridableComponent.d.ts @@ -11,7 +11,7 @@ export interface OverridableComponent<TypeMap extends OverridableTypeMap> { // If you make any changes to this interface, please make sure to update the // `OverridableComponent` type in `mui-types/index.d.ts` as well. // Also, there are types in Base UI that have a similar shape to this interface - // (e.g. SelectType, OptionType, etc.). + // (for example SelectType, OptionType, etc.). <RootComponent extends React.ElementType>( props: { /** diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js index 3548612a6b256d..e99c51e720f9a9 100644 --- a/packages/mui-material/src/SvgIcon/SvgIcon.js +++ b/packages/mui-material/src/SvgIcon/SvgIcon.js @@ -40,7 +40,7 @@ const SvgIconRoot = styled('svg', { height: '1em', display: 'inline-block', // the <svg> will define the property that has `currentColor` - // e.g. heroicons uses fill="none" and stroke="currentColor" + // for example heroicons uses fill="none" and stroke="currentColor" fill: ownerState.hasSvgAsChild ? undefined : 'currentColor', flexShrink: 0, transition: theme.transitions?.create?.('fill', { diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index ee1f339601a0bb..10bfdb80e22920 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -57,7 +57,7 @@ function setColorChannel(obj, key) { toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + - `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`, + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`, ); } } diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index c25b8d7f69345e..d90f899199d140 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -431,7 +431,7 @@ describe('experimental_extendTheme', () => { ).toWarnDev( "MUI: Can't create `palette.dividerChannel` because `palette.divider` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()." + '\n' + - 'To suppress this warning, you need to explicitly provide the `palette.dividerChannel` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.', + 'To suppress this warning, you need to explicitly provide the `palette.dividerChannel` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.', ); }); diff --git a/packages/mui-material/src/usePagination/usePagination.js b/packages/mui-material/src/usePagination/usePagination.js index c77a737e0ebbe3..63cd2d10cc4c0e 100644 --- a/packages/mui-material/src/usePagination/usePagination.js +++ b/packages/mui-material/src/usePagination/usePagination.js @@ -67,7 +67,7 @@ export default function usePagination(props = {}) { ); // Basic list of items to render - // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last'] + // for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last'] const itemList = [ ...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), diff --git a/packages/mui-material/test/integration/Menu.test.js b/packages/mui-material/test/integration/Menu.test.js index 1f36ee815e6114..77f6e6542b9cc7 100644 --- a/packages/mui-material/test/integration/Menu.test.js +++ b/packages/mui-material/test/integration/Menu.test.js @@ -239,7 +239,7 @@ describe('<Menu /> integration', () => { }); // falling back to the menu immediately so that we don't have to come up - // with custom fallbacks (e.g. what happens if the first item is also selected) + // with custom fallbacks (for example what happens if the first item is also selected) // it's debatable whether disabled items should still be focusable specify( '[variant=selectedMenu] focuses the first non-disabled item if the selected menuitem is disabled', diff --git a/packages/mui-types/index.d.ts b/packages/mui-types/index.d.ts index 77963ef07b94a0..64daa8cb6bb7bc 100644 --- a/packages/mui-types/index.d.ts +++ b/packages/mui-types/index.d.ts @@ -92,7 +92,7 @@ export interface OverridableComponent<M extends OverridableTypeMap> { // If you make any changes to this interface, please make sure to update the // `OverridableComponent` type in `mui-material/src/OverridableComponent.d.ts` as well. // Also, there are types in Base UI that have a similar shape to this interface - // (e.g. SelectType, OptionType, etc.). + // (for example SelectType, OptionType, etc.). <C extends React.ElementType>( props: { /** diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md index 19e8fea51cef17..d02bafcf4c30bd 100644 --- a/packages/pigment-css-react/README.md +++ b/packages/pigment-css-react/README.md @@ -446,7 +446,7 @@ module.exports = withPigment( #### Accessing theme values -A callback can be used with **styled** and **css** APIs to access the theme values: +A callback can be used with **styled()** and **css()** APIs to access the theme values: ```js const Heading = styled('h1')(({ theme }) => ({ diff --git a/packages/pigment-css-react/src/utils/sxObjectExtractor.ts b/packages/pigment-css-react/src/utils/sxObjectExtractor.ts index 28f5866781f3e5..c232e41b8fc572 100644 --- a/packages/pigment-css-react/src/utils/sxObjectExtractor.ts +++ b/packages/pigment-css-react/src/utils/sxObjectExtractor.ts @@ -133,7 +133,7 @@ export function sxObjectExtractor(nodePath: NodePath<ObjectExpression | ArrowFun const body = nodePath.get('body'); if (!body.isObjectExpression()) { throw body.buildCodeFrameError( - `${process.env.PACKAGE_NAME}: sx prop only supports arrow functions directly returning an object, e.g. () => ({color: 'red'}). You can accept theme object in the params if required.`, + `${process.env.PACKAGE_NAME}: sx prop only supports arrow functions directly returning an object, for example () => ({color: 'red'}). You can accept theme object in the params if required.`, ); } traverseObjectExpression(body, nodePath); diff --git a/packages/pigment-css-react/src/utils/valueToLiteral.ts b/packages/pigment-css-react/src/utils/valueToLiteral.ts index 52a30e97298d98..8f737b17ade2ff 100644 --- a/packages/pigment-css-react/src/utils/valueToLiteral.ts +++ b/packages/pigment-css-react/src/utils/valueToLiteral.ts @@ -122,7 +122,7 @@ export function valueToLiteral(value: unknown, expression?: ExpressionValue): t. throw ( expression?.buildCodeFrameError( - `The expression evaluated to '${value}', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, e.g. - 'String(${expression.source})'.`, + `The expression evaluated to '${value}', which is probably a mistake. If you want it to be inserted into CSS, explicitly cast or transform the value to a string, for example - 'String(${expression.source})'.`, ) ?? new Error(`Could not convert value: "${value}" to literal.`) ); } diff --git a/packages/test-utils/src/createMount.tsx b/packages/test-utils/src/createMount.tsx index 406e8e65b793c5..03f0d273d08bff 100644 --- a/packages/test-utils/src/createMount.tsx +++ b/packages/test-utils/src/createMount.tsx @@ -109,7 +109,7 @@ export default function createMount(options: CreateMountOptions = {}) { }); // some tests require that no other components are in the tree - // e.g. when doing .instance(), .state() etc. + // for example when doing .instance(), .state() etc. const wrapper = mount( strict == null ? node : <Mode __element={node} __strict={Boolean(strict)} />, { diff --git a/packages/test-utils/src/createRenderer.tsx b/packages/test-utils/src/createRenderer.tsx index 51f31c6b463789..33d7a6017dfa3b 100644 --- a/packages/test-utils/src/createRenderer.tsx +++ b/packages/test-utils/src/createRenderer.tsx @@ -533,7 +533,7 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende "Can't cleanup before fake timers are restored.\n" + 'Be sure to:\n' + ' 1. Only use `clock` from `createRenderer`.\n' + - ' 2. Call `createRenderer` in a suite and not any test hook (e.g. `beforeEach`) or test itself (e.g. `it`).', + ' 2. Call `createRenderer` in a suite and not any test hook (for example `beforeEach`) or test itself (for example `it`).', ); // Use saved stack otherwise the stack trace will not include the test location. error.stack = createClientRenderStack; diff --git a/packages/test-utils/src/initMatchers.ts b/packages/test-utils/src/initMatchers.ts index 33465a93f40470..e0f23f9070426b 100644 --- a/packages/test-utils/src/initMatchers.ts +++ b/packages/test-utils/src/initMatchers.ts @@ -167,7 +167,7 @@ chai.use((chaiAPI, utils) => { // `CSSStyleDeclaration` is not constructable // https://stackoverflow.com/a/52732909/3406963 // this is not equivalent to the declaration from `getComputedStyle` - // e.g. `getComputedStyle` would return a readonly declaration + // for example `getComputedStyle` would return a readonly declaration // let's hope this doesn't get passed around until it's no longer clear where it comes from const declaration = document.createElement('span').style; diff --git a/scripts/README.md b/scripts/README.md index 36cdbda0519c27..713c7947b497ad 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -28,7 +28,7 @@ The following steps must be proposed as a pull request. 2. Clean the generated changelog: 1. Match the format of https://github.com/mui/material-ui/releases. - 2. Change the packages names casing to be lowercase if applicable, e.g. change `Material` to `material` + 2. Change the packages names casing to be lowercase if applicable 3. Update the root `/package.json`'s version 4. Run `pnpm release:version`. Keep the package versions of stable public packages the same as the root `package.json` version. 5. Open PR with changes and wait for review and green CI @@ -54,7 +54,7 @@ Follow the instructions in https://mui-org.notion.site/Releases-7490ef9581b4447e Sometimes it is necessary to deploy the selected commit(s) without deploying all the changes that have been merged into the main branch -since the previous release (e.g. publishing a blog post or releasing +since the previous release (for example publishing a blog post or releasing urgent docs updates). To do so, follow these steps: diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 98096417239b3d..badfc79046e80a 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -188,7 +188,7 @@ async function generateProptypes( return; } - // exclude internal slot components, e.g. ButtonRoot + // exclude internal slot components, for example ButtonRoot const cleanComponents = components.filter((component) => { if (component.propsFilename?.endsWith('.tsx')) { // only check for .tsx diff --git a/test/README.md b/test/README.md index 4b2c21bb2e98dd..e25729d4971ee1 100644 --- a/test/README.md +++ b/test/README.md @@ -43,11 +43,11 @@ In addition to the core matchers from `chai` we also use matchers from [`chai-do Deciding where to put a test is (like naming things) a hard problem: -- When in doubt, put the new test case directly in the unit test file for that component e.g. `packages/mui-material/src/Button/Button.test.js`. +- When in doubt, put the new test case directly in the unit test file for that component, for example `packages/mui-material/src/Button/Button.test.js`. - If your test requires multiple components from the library create a new integration test. - If you find yourself using a lot of `data-testid` attributes or you're accessing a lot of styles consider adding a component (that doesn't require any interaction) - to `test/regressions/tests/` e.g. `test/regressions/tests/List/ListWithSomeStyleProp` + to `test/regressions/tests/`, for example `test/regressions/tests/List/ListWithSomeStyleProp` - If you have to dispatch and compose many different DOM events prefer end-to-end tests (Checkout the [end-to-end testing readme](./e2e/README.md) for more information.) ### Unexpected calls to `console.error` or `console.warn` @@ -115,7 +115,7 @@ trade-off, mainly completeness vs. speed. #### Debugging tests -If you want to debug tests with the e.g. Chrome inspector (chrome://inspect) you can run `pnpm t <testFilePattern> --debug`. +If you want to debug tests with the, for example Chrome inspector (chrome://inspect) you can run `pnpm t <testFilePattern> --debug`. Note that the test will not get executed until you start code execution in the inspector. We have a dedicated task to use VSCode's integrated debugger to debug the currently opened test file. @@ -212,7 +212,7 @@ the accessibility (a11y) tree and which are excluded. This check is fairly expensive which is why it is disabled when tests are run locally by default. The rationale being that in almost all cases including or excluding elements from a query-set depending on their a11y-tree membership makes no difference. -The queries where this does make a difference explicitly include checking for a11y tree inclusion e.g. `getByRole('button', { hidden: false })` (see [byRole documentation](https://testing-library.com/docs/dom-testing-library/api-queries#byrole) for more information). +The queries where this does make a difference explicitly include checking for a11y tree inclusion, for example `getByRole('button', { hidden: false })` (see [byRole documentation](https://testing-library.com/docs/dom-testing-library/api-queries#byrole) for more information). To see if your test (`test:karma` or `test:unit`) behaves the same between CI and local environment, set the environment variable `CI` to `'true'`. Not considering a11y tree exclusion is a common cause of "Unable to find an accessible element with the role" or "Found multiple elements with the role". @@ -245,13 +245,13 @@ For example, in https://app.circleci.com/pipelines/github/mui/material-ui/32796/ ### Testing multiple versions of React -You can check integration of different versions of React (e.g. different [release channels](https://react.dev/community/versioning-policy) or PRs to React) by running `node scripts/useReactVersion.mjs <version>`. +You can check integration of different versions of React (for example different [release channels](https://react.dev/community/versioning-policy) or PRs to React) by running `node scripts/useReactVersion.mjs <version>`. Possible values for `version`: - default: `stable` (minimum supported React version) -- a tag on npm e.g. `next`, `experimental` or `latest` -- an older version e.g. `^17.0.0` +- a tag on npm, for example `next`, `experimental` or `latest` +- an older version, for example `^17.0.0` #### CI diff --git a/test/bundling/README.md b/test/bundling/README.md index 733b241b4a172e..497cbb60db0f57 100644 --- a/test/bundling/README.md +++ b/test/bundling/README.md @@ -8,7 +8,7 @@ The created file might need some manual adjustment since not every edge case is ## Run a fixture 1. Navigate into the fixture you want to test (where the `package.json` is located) -1. Use the node version you want to use (e.g. `nvm use 14.0.0`) +1. Use the node version you want to use (for example `nvm use 14.0.0`) 1. Prepare the package.json - to test a Pull Request 1. checkout branch @@ -17,7 +17,7 @@ The created file might need some manual adjustment since not every edge case is 1. `cd` to fixture 1. `pnpm install` 1. `node ../../scripts/useBuildFromSource.js .` - - to test a published npm dist tag (e.g. `latest` or `next`) on npm + - to test a published npm dist tag (for example `latest` or `next`) on npm 1. `cd` to fixture 1. adjust the dependencies in the package.json accordingly 1. `pnpm install` diff --git a/test/e2e/README.md b/test/e2e/README.md index 9c2903e8c37778..ce3a9c9978b501 100644 --- a/test/e2e/README.md +++ b/test/e2e/README.md @@ -15,7 +15,7 @@ If you're adding a new test prefer a new component instead of editing existing f We're using [`playwright`](https://playwright.dev) to replay user actions. Each test tests only a single fixture. -A fixture can be loaded with `await renderFixture(fixturePath)` e.g. `renderFixture('FocusTrap/OpenFocusTrap')`. +A fixture can be loaded with `await renderFixture(fixturePath)`, for example `renderFixture('FocusTrap/OpenFocusTrap')`. ## Commands diff --git a/test/regressions/README.md b/test/regressions/README.md index 47dfd0eb9df03b..1c579da77afdfd 100644 --- a/test/regressions/README.md +++ b/test/regressions/README.md @@ -29,7 +29,7 @@ If you're adding a new test prefer a new component instead of editing existing f `pnpm test:regressions:dev` will build all fixtures and render an overview page that lists all fixtures. This can be used to debug individual fixtures. -By default, a devtools-like view is shown that can be disabled by appending `#no-dev` to the URL e.g. `http://localhost:5001/docs-customization-typography/CustomResponsiveFontSizes#no-dev` or forced by appending `#dev` to the URL e.g. `http://localhost:5001/docs-customization-typography/CustomResponsiveFontSizes#dev`. +By default, a devtools-like view is shown that can be disabled by appending `#no-dev` to the URL, for example `http://localhost:5001/docs-customization-typography/CustomResponsiveFontSizes#no-dev` or forced by appending `#dev` to the URL, for example `http://localhost:5001/docs-customization-typography/CustomResponsiveFontSizes#dev`. ### Automatic @@ -41,7 +41,7 @@ It allows catching regressions like this one: Screenshots are saved in `./screenshots/$BROWSER_NAME/`. Each test tests only a single fixture. -A fixture can be loaded with `await renderFixture(fixturePath)` e.g. `renderFixture('FocusTrap/OpenFocusTrap')`. +A fixture can be loaded with `await renderFixture(fixturePath)`, for example `renderFixture('FocusTrap/OpenFocusTrap')`. ## Commands