From 92ef4b35420603734cad90df9e854b6a4c483e94 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 17 Mar 2024 00:32:25 +0100 Subject: [PATCH] [docs] Fix some Vale errors --- .circleci/config.yml | 2 +- .github/styles/Blog/BrandName.yml | 16 - .github/styles/Blog/ComposedWords.yml | 13 - .github/styles/Blog/NamingConventions.yml | 19 - .github/styles/Blog/NoCompanyName.yml | 14 - .github/styles/Blog/Typos.yml | 11 - .github/styles/Vocab/accept.txt | 0 .github/styles/Vocab/reject.txt | 0 .gitignore | 3 +- .vale.ini | 45 +-- CHANGELOG.md | 220 +++++------ CONTRIBUTING.md | 371 +----------------- README.md | 8 +- dangerfile.ts | 2 +- docs/README.md | 2 +- docs/data/base/components/badge/badge.md | 2 +- docs/data/base/components/button/button.md | 2 +- .../base/components/focus-trap/focus-trap.md | 2 +- .../components/form-control/form-control.md | 4 +- docs/data/base/components/input/input.md | 2 +- docs/data/base/components/menu/menu.md | 2 +- docs/data/base/components/no-ssr/no-ssr.md | 2 +- docs/data/base/components/select/select.md | 2 +- .../data/base/components/snackbar/snackbar.md | 2 +- docs/data/base/components/tabs/tabs.md | 2 +- .../customization/customization.md | 12 +- .../getting-started/quickstart/quickstart.md | 8 +- .../base/getting-started/support/support.md | 6 +- .../next-js-app-router/next-js-app-router.md | 12 +- .../working-with-tailwind-css.md | 20 +- docs/src/MuiPage.ts | 2 +- docs/src/modules/components/Ad.js | 2 +- docs/src/modules/components/AdCarbon.js | 2 +- docs/src/modules/components/AppNavDrawer.js | 2 +- .../modules/components/AppNavDrawerItem.js | 2 +- .../modules/components/AppTableOfContents.js | 2 +- docs/src/modules/components/MarkdownDocs.js | 2 +- docs/src/modules/components/MarkdownDocsV2.js | 2 +- docs/src/modules/components/MarkdownLinks.js | 2 +- docs/src/modules/components/Notifications.js | 2 +- docs/src/modules/sandbox/CodeSandbox.ts | 2 +- examples/base-ui-nextjs-tailwind-ts/README.md | 4 +- examples/base-ui-vite-tailwind-ts/README.md | 4 +- examples/base-ui-vite-tailwind/README.md | 4 +- packages/mui-base/README.md | 6 +- packages/mui-base/src/FocusTrap/FocusTrap.tsx | 2 +- .../src/useAutocomplete/useAutocomplete.js | 2 +- .../src/useCompound/useCompoundItem.ts | 2 +- .../src/useCompound/useCompoundParent.ts | 2 +- packages/mui-base/src/useList/useListItem.ts | 2 +- .../mui-base/src/utils/useRootElementName.ts | 6 +- scripts/README.md | 4 +- .../config/baseUi/generateBaseUiApiPages.ts | 2 +- scripts/generateProptypes.ts | 2 +- test/README.md | 14 +- test/regressions/README.md | 4 +- 56 files changed, 227 insertions(+), 661 deletions(-) delete mode 100644 .github/styles/Blog/BrandName.yml delete mode 100644 .github/styles/Blog/ComposedWords.yml delete mode 100644 .github/styles/Blog/NamingConventions.yml delete mode 100644 .github/styles/Blog/NoCompanyName.yml delete mode 100644 .github/styles/Blog/Typos.yml delete mode 100644 .github/styles/Vocab/accept.txt delete mode 100644 .github/styles/Vocab/reject.txt diff --git a/.circleci/config.yml b/.circleci/config.yml index 7697172449..c85668bf77 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/.github/styles/Blog/BrandName.yml b/.github/styles/Blog/BrandName.yml deleted file mode 100644 index b95387c585..0000000000 --- a/.github/styles/Blog/BrandName.yml +++ /dev/null @@ -1,16 +0,0 @@ -# Without a non-breaking space, brand names can be split in the middle, with the start and end on two different lines. -extends: substitution -message: Use a non-breaking space for brand name ('%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: - Material UI: Material UI - MUI X: MUI X - Base UI: Base UI - MUI System: MUI System - MUI Store: MUI Store - MUI Core: MUI Core - MUI Toolpad: MUI Toolpad - MUI Connect: MUI Connect diff --git a/.github/styles/Blog/ComposedWords.yml b/.github/styles/Blog/ComposedWords.yml deleted file mode 100644 index 149dc0bd6a..0000000000 --- a/.github/styles/Blog/ComposedWords.yml +++ /dev/null @@ -1,13 +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' diff --git a/.github/styles/Blog/NamingConventions.yml b/.github/styles/Blog/NamingConventions.yml deleted file mode 100644 index ac0e3668f9..0000000000 --- a/.github/styles/Blog/NamingConventions.yml +++ /dev/null @@ -1,19 +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 diff --git a/.github/styles/Blog/NoCompanyName.yml b/.github/styles/Blog/NoCompanyName.yml deleted file mode 100644 index a60b3c3bc2..0000000000 --- a/.github/styles/Blog/NoCompanyName.yml +++ /dev/null @@ -1,14 +0,0 @@ -extends: existence -message: We avoid referencing the company name '%s'. Instead you can reference a product or the team. -level: warning -ignorecase: false -tokens: - - 'MUI \w+' -exceptions: - - 'MUI X' - - 'MUI System' - - 'MUI Store' - - 'MUI Core' - - 'MUI Toolpad' - - 'MUI Connect' - - 'MUI organization' # valid use of a regular space diff --git a/.github/styles/Blog/Typos.yml b/.github/styles/Blog/Typos.yml deleted file mode 100644 index 9397f61532..0000000000 --- a/.github/styles/Blog/Typos.yml +++ /dev/null @@ -1,11 +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. ' diff --git a/.github/styles/Vocab/accept.txt b/.github/styles/Vocab/accept.txt deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/.github/styles/Vocab/reject.txt b/.github/styles/Vocab/reject.txt deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/.gitignore b/.gitignore index 33da9d33b6..8a3bdcb145 100644 --- a/.gitignore +++ b/.gitignore @@ -36,5 +36,6 @@ package-lock.json size-snapshot.json # vale downloaded config .github/styles/Google -.github/styles/write-good +.github/styles/MUI +.github/styles/.vale-config .nx/cache diff --git a/.vale.ini b/.vale.ini index d4d101e096..0d8bbaf0ee 100644 --- a/.vale.ini +++ b/.vale.ini @@ -1,34 +1,27 @@ -# 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 -Packages = Google +# To update mui-vale package: +# 1. Go to the docs folder in the material-ui repo +# 2. Update/create YAML files +# 3. Run `pnpm docs:zipRules` to generate the zip files +# 4. You can test locally by replacing the url with the file path of the generated zip +Packages = Google, https://github.com/mui/material-ui/raw/HEAD/docs/mui-vale.zip [*.md] -# Ignore code injection which start with {{... +# Ignore code injections that start with {{... BlockIgnores = {{.* -# Custom syle -# BasedOnStyles = Blog +BasedOnStyles = MUI -Blog.ComposedWords = YES -Blog.NamingConventions = YES -Blog.Typos = YES -Blog.BrandName = YES -Blog.NoCompanyName = YES +# 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 -# 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. - -# 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 4c070e59ef..52a6086a76 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Versions -## MUI Core v5.15.9 +## MUI Core v5.15.9 _Feb 8, 2024_ @@ -8,7 +8,7 @@ _Feb 8, 2024_ - [base-ui] Update props using Array to ReadonlyArray type (#40754) @RaghavenderSingh -## MUI Core v5.15.8 +## MUI Core v5.15.8 _Feb 6, 2024_ @@ -19,7 +19,7 @@ _Feb 6, 2024_ - [useNumberInput] Integrate useNumberInput with useControllableReducer (#40206) @mj12albert - [Slider] Add support for Arrow Down/Up + Shift and Page Up/Down keys (#40676) @mnajdova -## MUI Core v5.15.7 +## MUI Core v5.15.7 _Jan 31, 2024_ @@ -29,7 +29,7 @@ _Jan 31, 2024_ - [Menu] Focus last item after opening a menu using up arrow (#40764) @Jaswanth-Sriram-Veturi - [Menu] Focus Menu Items on hover (#40755) @michaldudak -## MUI Core v5.15.6 +## MUI Core v5.15.6 _Jan 22, 2024_ @@ -39,7 +39,7 @@ _Jan 22, 2024_ - [Select] Use Popup instead of Popper (#40524) @michaldudak - [useMenuButton] Fix non native button triggers (#40645) @DiegoAndai -## MUI Core v5.15.5 +## MUI Core v5.15.5 _Jan 17, 2024_ @@ -49,7 +49,7 @@ _Jan 17, 2024_ -Change the CSS class prefix to `base-` (#40205) @michaldudak -The class prefix of Base UI components have been changed from `Mui-` to `base-`. This only affects codebases that uses class names verbatim, i.e. not exposed by JS objects such as `buttonClasses`, but as plain strings or in CSS stylesheets (`.MuiButton.root`) +The class prefix of Base UI components have been changed from `Mui-` to `base-`. This only affects codebases that uses class names verbatim, that is not exposed by JS objects such as `buttonClasses`, but as plain strings or in CSS stylesheets (`.MuiButton.root`) To adapt your code to the new pattern: @@ -61,7 +61,7 @@ To adapt your code to the new pattern: - [Select] Fix screen-reader CSS to avoid body scrollbar (#40599) @brijeshb42 - [Switch] Add border-box to demos (#40638) @zanivan -## MUI Core 5.15.4 +## MUI Core 5.15.4 _Jan 10, 2024_ @@ -69,7 +69,7 @@ _Jan 10, 2024_ - [base-ui][NumberInput] Remove inputId and inputRef types from NumberInput component (#40425) @sai6855 -## MUI Core 5.15.3 +## MUI Core 5.15.3 _Jan 3, 2024_ @@ -77,7 +77,7 @@ _Jan 3, 2024_ - [useSlider] Rearrange passive option in eventlisteners (#40235) @Kamino0 -## MUI Core 5.15.2 +## MUI Core 5.15.2 _Dec 25, 2023_ @@ -87,7 +87,7 @@ _Dec 25, 2023_ - [Popup] Popup no longer opens outside viewport (#39827) @adamhylander - [useSelect] Refactor to use DOM focus management instead of active descendant (#39675) @DiegoAndai -## MUI Core 5.15.0 +## MUI Core 5.15.0 _Dec 11, 2023_ @@ -95,7 +95,7 @@ _Dec 11, 2023_ - [base-ui] useControllableReducer warns when controlled props become uncontrolled (and vice versa) (#39096) @mj12albert -## MUI Core 5.14.19 +## MUI Core 5.14.19 _Nov 29, 2023_ @@ -106,7 +106,7 @@ _Nov 29, 2023_ - [NumberInput] Implement `numberInputReducer` (#38723) @mj12albert - [useNumberInput] Fix change handlers passed through slotProps (#39407) @mj12albert -## MUI Core 5.14.18 +## MUI Core 5.14.18 _Nov 14, 2023_ @@ -114,7 +114,7 @@ _Nov 14, 2023_ - Make list components more reliable (#39380) @michaldudak -## MUI Core 5.14.16 +## MUI Core 5.14.16 _Oct 31, 2023_ @@ -124,7 +124,7 @@ _Oct 31, 2023_ - [useSelect] Support browser autofill (#39595) @DiegoAndai - [base-ui] Fix mergeSlotProps className join order (#39616) @mj12albert -## MUI Core 5.14.15 +## MUI Core 5.14.15 _Oct 24, 2023_ @@ -135,7 +135,7 @@ _Oct 24, 2023_ - [Slider] Refine demos (#39526) @zanivan - [Input] Update and port additional tests from material-ui (#39584) @mj12albert -## MUI Core 5.14.14 +## MUI Core 5.14.14 _Oct 17, 2023_ @@ -143,7 +143,7 @@ _Oct 17, 2023_ - [base-ui][Menu] Do not reopen the menu after clicking on a trigger in Safari (#39393) @michaldudak -## MUI Core 5.14.13 +## MUI Core 5.14.13 _Oct 10, 2023_ @@ -151,7 +151,7 @@ _Oct 10, 2023_ - [Menu] Add the anchor prop (#39297) @michaldudak -## MUI Core 5.14.12 +## MUI Core 5.14.12 _Oct 3, 2023_ @@ -161,7 +161,7 @@ _Oct 3, 2023_ - [useTabs] Align external props handling for useTab/useTabPanel/useTabsList (#39037) @mj12albert - [test] Fix import paths in useTab tests (#39291) @mj12albert -## MUI Core 5.14.11 +## MUI Core 5.14.11 _Sep 26, 2023_ @@ -172,7 +172,7 @@ _Sep 26, 2023_ - [Select] Align external props handling (#39038) @mj12albert - [TextareaAutosize] Simplify logic and add test (#38728) @oliviertassinari -## MUI Core 5.14.10 +## MUI Core 5.14.10 _Sep 18, 2023_ @@ -183,7 +183,7 @@ _Sep 18, 2023_ - [useList][base-ui] Accept arbitrary external props and forward to root (#38848) @mj12albert - [Autocomplete][base-ui] Added ref to getInputProps return value (#38919) @DarhkVoyd -## MUI Core 5.14.9 +## MUI Core 5.14.9 _Sep 13, 2023_ @@ -195,7 +195,7 @@ _Sep 13, 2023_ - [FocusTrap] Fix `disableEnforceFocus` behavior (#38816) @mnajdova - [Switch] Simplify source (#38910) @oliviertassinari -## MUI Core 5.14.8 +## MUI Core 5.14.8 _Sep 5, 2023_ @@ -204,7 +204,7 @@ _Sep 5, 2023_ - [Autocomplete] Type multiple values with readonly arrays. (#38253) @pcorpet - [TextField] Fix unstable height of memoized multiline TextField component (#37135) @amal-qb -## MUI Core 5.14.7 +## MUI Core 5.14.7 _Aug 29, 2023_ @@ -212,7 +212,7 @@ _Aug 29, 2023_ - [useButton][base-ui] Accept arbitrary props in getRootProps and forward them (#38475) @DiegoAndai -## MUI Core 5.14.6 +## MUI Core 5.14.6 _Aug 23, 2023_ @@ -220,7 +220,7 @@ _Aug 23, 2023_ - [Popup] New component (#37960) @michaldudak -## MUI Core 5.14.5 +## MUI Core 5.14.5 _Aug 14, 2023_ @@ -232,7 +232,7 @@ _Aug 14, 2023_ - [useButton][base-ui] Fix tabIndex not being forwarded (#38417) @DiegoAndai - [useButton][base-ui] Fix onFocusVisible not being handled (#38399) @DiegoAndai -## MUI Core 5.14.4 +## MUI Core 5.14.4 _Aug 8, 2023_ @@ -272,7 +272,7 @@ _Aug 8, 2023_ - [Select][base] Fix flicker on click of controlled Select button (#37855) @VishruthR - [Dropdown] Fix imports of types (#38296) @yash-thakur -## MUI Core 5.14.3 +## MUI Core 5.14.3 _Jul 31, 2023_ @@ -286,7 +286,7 @@ _Jul 31, 2023_ - [typescript][base] Rename one letter type parameters (#38171) @michaldudak -## MUI Core 5.14.2 +## MUI Core 5.14.2 _Jul 25, 2023_ @@ -301,7 +301,7 @@ _Jul 25, 2023_ - [Joy] Replace leftover `Joy-` prefix with `Mui-` (#38086) @siriwatknp - [Skeleton][joy] Fix WebkitMaskImage CSS property (#38077) @Bestwebdesign -- [Link][Joy UI] Fix font inherit (#38124) @oliviertassinari +- [Link][Joy UI] Fix font inherit (#38124) @oliviertassinari ## 5.14.1 @@ -311,7 +311,7 @@ _Jul 19, 2023_ - [Autocomplete] Make touch and click behavior on an option consistent (#37972) @divyammadhok -## MUI Core 5.13.7 +## MUI Core 5.13.7 _Jul 4, 2023_ @@ -322,7 +322,7 @@ _Jul 4, 2023_ - [Tabs] Wrap TabsList context creation in useMemo (#37370) @michaldudak - [TextareaAutosize] Fix wrong height measurement (#37185) @bigteech -## MUI Core 5.13.6 +## MUI Core 5.13.6 _Jun 21, 2023_ @@ -331,7 +331,7 @@ _Jun 21, 2023_ - [Menu][base] Add the resetHighlight action (#37392) @michaldudak - [Select][base] Expose the `areOptionsEqual` prop (#37615) @michaldudak -## MUI Core 5.13.4 +## MUI Core 5.13.4 _Jun 5, 2023_ @@ -339,7 +339,7 @@ _Jun 5, 2023_ - [Input][base] Fix calling slotProps event handlers (#37463) @sai6855 -## MUI Core 5.13.3 +## MUI Core 5.13.3 _May 29, 2023_ @@ -351,7 +351,7 @@ _May 29, 2023_ - [MenuItem][Base] Pass idGenerator function (#37364) @sai6855 - [Slider][Base] Add Vertical slider demo (#37357) @sai6855 -## MUI Core 5.13.1 +## MUI Core 5.13.1 _May 16, 2023_ @@ -359,7 +359,7 @@ _May 16, 2023_ - [Select][base] Keep focus on the trigger element when listbox is open (#37244) @michaldudak -## MUI Core 5.13.0 +## MUI Core 5.13.0 _May 10, 2023_ @@ -370,7 +370,7 @@ _May 10, 2023_ - [typescript][base] Fix types of components callbacks parameters (#37169) @michaldudak - [Select], [TablePagination] Use more descriptive parameter names (#37064) @michaldudak -## MUI Core 5.12.3 +## MUI Core 5.12.3 _May 2, 2023_ @@ -441,7 +441,7 @@ _May 2, 2023_ - [FormControl][base] Do not use optional fields in useFormControlContext's return value (#37037) @michaldudak -## MUI Core 5.12.2 +## MUI Core 5.12.2 _Apr 25, 2023_ @@ -465,7 +465,7 @@ _Apr 25, 2023_ - [codemod][base] Write a migration script for removal of `component` prop from components (#36831) @hbjORbj - [Base][useButton] Allow useButton params to be completely optional (#36922) @mj12albert -## MUI Core 5.12.1 +## MUI Core 5.12.1 _Apr 17, 2023_ @@ -487,7 +487,7 @@ _Apr 17, 2023_ - To deselect all tabs, pass in `null` to Tabs' `value` prop, instead of `false`. This is consistent with how Select works. - The `value` prop is still technically not mandatory on TabUnstyled and TabPanel, but when omitted, the contents of the selected tab panel will not be rendered during SSR. -## MUI Core 5.12.0 +## MUI Core 5.12.0 _Apr 11, 2023_ @@ -495,7 +495,7 @@ _Apr 11, 2023_ - [PopperUnstyled] Do not merge internal `ownerState` with `ownerState` from props (#36599) @hbjORbj -## MUI Core 5.11.15 +## MUI Core 5.11.15 _Mar 28, 2023_ @@ -506,7 +506,7 @@ _Mar 28, 2023_ - [Base] Add JSDoc comments for classes of Base components (#36586) @hbjORbj - [useSlider][base] Add API docs for the hook parameters and return type (#36576) @varunmulay22 -## MUI Core 5.11.14 +## MUI Core 5.11.14 _Mar 21, 2023_ @@ -514,7 +514,7 @@ _Mar 21, 2023_ - [docs][base] Improve the Slots Table in API docs (#36330) @hbjORbj -## MUI Core 5.11.13 +## MUI Core 5.11.13 _Mar 14, 2023_ @@ -526,7 +526,7 @@ _Mar 14, 2023_ - [useMenuItem] Add explicit return type (#36359) @rayrw - [useTabs] Add explicit return type (#36047) @sai6855 -## MUI Core 5.11.12 +## MUI Core 5.11.12 _Mar 6, 2023_ @@ -554,7 +554,7 @@ _Mar 6, 2023_ - [useMenu] Fix `import type` syntax (#36411) @ZeeshanTamboli - [useSwitch] Add explicit return type (#36050) @sai6855 -## MUI Core 5.11.11 +## MUI Core 5.11.11 _Feb 27, 2023_ @@ -590,7 +590,7 @@ _Feb 27, 2023_ - [MenuUnstyled] Remove extra useMemo (#36265) @ivp-dev - [base] Export all slot prop overrides interfaces (#36323) @michaldudak -## MUI Core 5.11.9 +## MUI Core 5.11.9 _Feb 14, 2023_ @@ -606,7 +606,7 @@ _Feb 14, 2023_ - [useTabsList] Add explicit return type (#36048) @sai6855 - [Tab] Add explicit return type to useTab (#36046) @sai6855 -## MUI Core 5.11.7 +## MUI Core 5.11.7 _Jan 31, 2023_ @@ -614,7 +614,7 @@ _Jan 31, 2023_ - [ListboxUnstyled] Fix option state highlighted to prevent unnecessary focus (#35838) @SaidMarar -## MUI Core 5.11.6 +## MUI Core 5.11.6 _Jan 23, 2023_ @@ -652,7 +652,7 @@ _Jan 23, 2023_ - [InputUnstyled] Fix externally provided `inputRef` is ignored (#35807) @sai6855 -## MUI Core 5.11.5 +## MUI Core 5.11.5 _Jan 17, 2023_ @@ -661,7 +661,7 @@ _Jan 17, 2023_ - [base] Fix typos (#35802) @nnmax - [Slider] Convert code to TypeScript (#35445) @sai6855 -## MUI Core 5.11.4 +## MUI Core 5.11.4 _Jan 9, 2023_ @@ -669,7 +669,7 @@ _Jan 9, 2023_ - [Portal][base] Convert code to TypeScript (#35657) @sai6855 -## MUI Core 5.11.2 +## MUI Core 5.11.2 _Dec 26, 2022_ @@ -680,7 +680,7 @@ _Dec 26, 2022_ - [Popper][base] Convert code to TypeScript (#34771) @danhuynhdev - [Slider] Exclude `isRtl` from Material UI's Slider props (#35564) @michaldudak -## MUI Core 5.11.1 +## MUI Core 5.11.1 _Dec 20, 2022_ @@ -689,7 +689,7 @@ _Dec 20, 2022_ - [Button][base] Set active class when a subcomponent is clicked (#35410) @michaldudak - [Popper][base] Fix Tooltip Anchor Element Setter (#35469) @sydneyjodon-wk -## MUI Core 5.11.0 +## MUI Core 5.11.0 _Dec 13, 2022_ @@ -697,7 +697,7 @@ _Dec 13, 2022_ - [PopperUnstyled] Update PopperTooltip to have correct width when closing with transition (#34714) @EduardoSCosta -## MUI Core 5.10.16 +## MUI Core 5.10.16 _Nov 28, 2022_ @@ -705,7 +705,7 @@ _Nov 28, 2022_ - [Base] Allow useSlotProps to receive undefined elementType (#35192) @leventdeniz -## MUI Core 5.10.15 +## MUI Core 5.10.15 _Nov 21, 2022_ @@ -713,7 +713,7 @@ _Nov 21, 2022_ - [Select] Add attributes to conform with ARIA 1.2 (#35182) @michaldudak -## MUI Core v5.10.13 +## MUI Core v5.10.13 _Nov 7, 2022_ @@ -721,7 +721,7 @@ _Nov 7, 2022_ - [base] Avoid calling setState during renders (#34916) @Janpot -## MUI Core v5.10.12 +## MUI Core v5.10.12 _Oct 31, 2022_ @@ -729,7 +729,7 @@ _Oct 31, 2022_ - [ButtonUnstyled] Update to render as link when href or to is provided (#34337) @EduardoSCosta -## MUI Core v5.10.11 +## MUI Core v5.10.11 _Oct 25, 2022_ @@ -750,7 +750,7 @@ _Oct 25, 2022_ - [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 `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 `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 { ... }; @@ -761,7 +761,7 @@ _Oct 25, 2022_ - [test] Test all Base components with describeConformanceUnstyled (#34825) @michaldudak -## MUI Core 5.10.10 +## MUI Core 5.10.10 _Oct 18, 2022_ @@ -770,7 +770,7 @@ _Oct 18, 2022_ - [MultiSelect][base] Prevent the renderValue prop from being propagated to the DOM (#34698) @michaldudak - [NoSsr] Convert code to TypeScript (#34735) @mbayucot -## MUI Core 5.10.9 +## MUI Core 5.10.9 _Oct 10, 2022_ @@ -778,7 +778,7 @@ _Oct 10, 2022_ - [FocusTrap] Restore the previously exported type from @mui/material (#34601) @michaldudak -## MUI Core 5.10.8 +## MUI Core 5.10.8 _Oct 3, 2022_ @@ -786,7 +786,7 @@ _Oct 3, 2022_ - [SnackbarUnstyled] Create component and `useSnackbar` hook (#33227) @ZeeshanTamboli -## MUI Core 5.10.7 +## MUI Core 5.10.7 _Sep 26, 2022_ @@ -805,7 +805,7 @@ _Sep 26, 2022_ - [MultiSelect] Require a single tap to select an item on mobile Chrome (#33932) @michaldudak -## MUI Core 5.10.6 +## MUI Core 5.10.6 _Sep 19, 2022_ @@ -827,7 +827,7 @@ _Sep 19, 2022_ { /* ... */ }} /> ``` -## MUI Core 5.10.4 +## MUI Core 5.10.4 _Sep 5, 2022_ @@ -835,7 +835,7 @@ _Sep 5, 2022_ - [Select][base] Fix type issues that appeared with TS 4.8 (#34132) @michaldudak -## MUI Core 5.10.3 +## MUI Core 5.10.3 _Aug 29, 2022_ @@ -845,7 +845,7 @@ _Aug 29, 2022_ - [Select][base] Fix typo in listbox blur event handler (#34120) @ZeeshanTamboli - [FocusTrap] Improve tab test and simplify demo (#34008) @EthanStandel -## MUI Core 5.10.1 +## MUI Core 5.10.1 _Aug 15, 2022_ @@ -855,7 +855,7 @@ _Aug 15, 2022_ - [Input][base] Pass the rows prop to the underlying textarea (#33873) @michaldudak - [SelectUnstyled] Add ability to post the select's value when submitting a form (#33697) @michaldudak -## MUI Core 5.9.2 +## MUI Core 5.9.2 _Jul 25, 2022_ @@ -864,7 +864,7 @@ _Jul 25, 2022_ - [Base] Make PopperUnstyled `component` overridable (#33573) @siriwatknp - [Base] Ensure all components are OverridableComponent (#33506) @michaldudak -## MUI Core 5.9.1 +## MUI Core 5.9.1 _Jul 18, 2022_ @@ -874,7 +874,7 @@ _Jul 18, 2022_ - [base] Add missing type definitions in useControllableReducer (#33496) @michaldudak - [SelectUnstyled] Do not call onChange unnecessarily (#33408) @michaldudak -## MUI Core 5.9.0 +## MUI Core 5.9.0 _Jul 12, 2022_ @@ -885,7 +885,7 @@ _Jul 12, 2022_ - [SelectUnstyled] Accept callbacks in componentsProps (#33197) @michaldudak - [TabsUnstyled] Accept callbacks in componentsProps (#33284) @michaldudak -## MUI Core 5.8.7 +## MUI Core 5.8.7 _Jul 4, 2022_ @@ -895,7 +895,7 @@ _Jul 4, 2022_ - [BadgeUnstyled] Export BadgeUnstyledOwnProps interface to fix TypeScript compiler error (#33314) @aaronlademann-wf - [TablePaginationUnstyled] Accept callbacks in componentsProps (#33309) @michaldudak -## MUI Core 5.8.6 +## MUI Core 5.8.6 _Jun 27, 2022_ @@ -909,7 +909,7 @@ _Jun 27, 2022_ - [TextareaAutosize] Fix crash when used with React 18 & Suspense (#33238) @howlettt - [TextareaAutosize] Fix warnings for too many renders in React 18 (#33253) @mnajdova -## MUI Core 5.8.5 +## MUI Core 5.8.5 _Jun 20, 2022_ @@ -922,7 +922,7 @@ _Jun 20, 2022_ - [ModalUnstyled] Define ownerState and slot props' types (#32901) @michaldudak - [SwitchUnstyled] Use useSlotProps (#33174) @michaldudak -## MUI Core 5.8.4 +## MUI Core 5.8.4 _Jun 14, 2022_ @@ -932,7 +932,7 @@ _Jun 14, 2022_ - [ModalUnstyled] Fix errors from the W3C validator about incorrect aria-hidden attribute on some elements (#30920) @mkrtchian - [ModalUnstyled] Fix behavior of not respecting props ariaHidden value (#32055) @tech-meppem -## MUI Core 5.8.3 +## MUI Core 5.8.3 _Jun 7, 2022_ @@ -945,7 +945,7 @@ _Jun 7, 2022_ - [TabPanelUnstyled] Define ownerState and slot props' types (#32928) @michaldudak - [TabsListUnstyled] Define ownerState and slot props' types (#32925) @michaldudak -## MUI Core 5.8.2 +## MUI Core 5.8.2 _May 30, 2022_ @@ -957,7 +957,7 @@ _May 30, 2022_ - [TabsUnstyled] Define ownerState and slot props' types (#32918) @michaldudak - [TabUnstyled] Define ownerState and slot props' types (#32915) @michaldudak -## MUI Core 5.8.1 +## MUI Core 5.8.1 _May 23, 2022_ @@ -965,7 +965,7 @@ _May 23, 2022_ - [SliderUnstyled] Fix `disabledSwap` not being respected in `onChangeCommitted` (#32647) @JeanPetrov -## MUI Core 5.8.0 +## MUI Core 5.8.0 _May 17, 2022_ @@ -976,7 +976,7 @@ _May 17, 2022_ - [MenuUnstyled] Demos improvements (#32714) @michaldudak - [OptionUnstyled] Define ownerState and slot props' types (#32717) @michaldudak -## MUI Core 5.7.0 +## MUI Core 5.7.0 _May 10, 2022_ @@ -984,7 +984,7 @@ _May 10, 2022_ - [ButtonUnstyled] Fix keyboard navigation on customized elements (#32204) @michaldudak -## MUI Core 5.6.3 +## MUI Core 5.6.3 _Apr 25, 2022_ @@ -992,7 +992,7 @@ _Apr 25, 2022_ - [InputUnstyled] `multiline` property should not log DOM warnings for `maxRows` and `minRows` props (#32401) @ZeeshanTamboli -## MUI Core 5.6.2 +## MUI Core 5.6.2 _Apr 18, 2022_ @@ -1000,7 +1000,7 @@ _Apr 18, 2022_ - [FormControlUnstyled] Revise API (#32134) @michaldudak -## MUI Core 5.6.1 +## MUI Core 5.6.1 _Apr 11, 2022_ @@ -1008,7 +1008,7 @@ _Apr 11, 2022_ - [ButtonUnstyled] Allow receiving focus when disabled (#32090) @michaldudak -## MUI Core 5.6.0 +## MUI Core 5.6.0 _Apr 5, 2022_ @@ -1016,7 +1016,7 @@ _Apr 5, 2022_ - [Badge] Simplify unstyled API (#31974) @michaldudak -## MUI Core 5.5.3 +## MUI Core 5.5.3 _Mar 28, 2022_ @@ -1055,7 +1055,7 @@ _Mar 28, 2022_ - [base] Add @mui/types to dependencies (#31951) @bicstone -## MUI Core 5.5.2 +## MUI Core 5.5.2 _Mar 21, 2022_ @@ -1063,7 +1063,7 @@ _Mar 21, 2022_ - [SliderUnstyled] Fix dragging on disabled sliders (#31882) @mnajdova -## MUI Core 5.5.1 +## MUI Core 5.5.1 _Mar 14, 2022_ @@ -1093,7 +1093,7 @@ _Mar 7, 2022_ - [MenuUnstyled] Create MenuUnstyled and useMenu (#30961) @michaldudak - [SelectUnstyled] Prevent window scrolling after opening (#31237) @michaldudak -## MUI Core 5.4.4 +## MUI Core 5.4.4 _Feb 28, 2022_ @@ -1101,7 +1101,7 @@ _Feb 28, 2022_ - [SelectUnstyled, MultiSelectUnstyled, ButtonUnstyled] Export additional types to make customization easier (#31172) @michaldudak -## MUI Core 5.4.2 +## MUI Core 5.4.2 _Feb 15, 2022_ @@ -1118,7 +1118,7 @@ _Feb 8, 2022_ - [SelectUnstyled] Improve exported types (#30895) @michaldudak -## MUI Core 5.4.0 +## MUI Core 5.4.0 _Feb 1, 2022_ @@ -1126,7 +1126,7 @@ _Feb 1, 2022_ - [SelectUnstyled] Create unstyled select (+ hook) (#30113) @michaldudak -## MUI Core 5.3.1 +## MUI Core 5.3.1 _Jan 24, 2022_ @@ -1134,7 +1134,7 @@ _Jan 24, 2022_ - [SliderUnstyled] Improve typings on some internal utils (#30614) @mnajdova -## MUI Core 5.3.0 +## MUI Core 5.3.0 _Jan 17, 2022_ @@ -1142,7 +1142,7 @@ _Jan 17, 2022_ - [SliderUnstyled] Add useSlider hook and polish (#30094) @mnajdova -## MUI Core 5.2.6 +## MUI Core 5.2.6 _Dec 27, 2021_ @@ -1150,7 +1150,7 @@ _Dec 27, 2021_ - [BadgeUnstyled] Add useBadge hook (#30246) @mnajdova -## MUI Core 5.2.4 +## MUI Core 5.2.4 _Dec 14, 2021_ @@ -1158,7 +1158,7 @@ _Dec 14, 2021_ - [BadgeUnstyled] Make it conformant with other base components (#30141) @mnajdova -## MUI Core 5.2.3 +## MUI Core 5.2.3 _Dec 6, 2021_ @@ -1167,7 +1167,7 @@ _Dec 6, 2021_ - [base] Fix missing ClickAwayListener barrel index export (#30000) @oliviertassinari - [TablePaginationUnstyled] Introduce new component (#29759) @mnajdova -## MUI Core 5.2.0 +## MUI Core 5.2.0 _Nov 23, 2021_ @@ -1176,7 +1176,7 @@ _Nov 23, 2021_ - [FormControlUnstyled] `focused` is always false unless explicitly set to `true` @mwilkins91 - [TabsUnstyled] Introduce new component (#29597) @mnajdova -## MUI Core 5.1.1 +## MUI Core 5.1.1 _Nov 16, 2021_ @@ -1195,7 +1195,7 @@ _Nov 16, 2021_ +import { useSwitch } from '@mui/base/SwitchUnstyled'; ``` -## MUI Core 5.0.5 +## MUI Core 5.0.5 _Oct 26, 2021_ @@ -1205,7 +1205,7 @@ _Oct 26, 2021_ - [Popper] Move from mui-material to mui-base (#28923) @rebeccahongsf - [TextareaAutosize] Move to the core package (#29148) @hbjORbj -## MUI Core 5.0.4 +## MUI Core 5.0.4 _Oct 14, 2021_ @@ -1213,7 +1213,7 @@ _Oct 14, 2021_ - [InputUnstyled] Create unstyled input and useInput hook (#28053) @michaldudak -## MUI Core 5.0.3 +## MUI Core 5.0.3 _Oct 7, 2021_ @@ -1222,7 +1222,7 @@ _Oct 7, 2021_ - [ButtonUnstyled] Don't set redundant role=button (#28488) @michaldudak - [SliderUnstyled] Prevent unknown-prop error when using marks prop (#28868) @hbjORbj -## MUI Core 5.0.0-rc.0 +## MUI Core 5.0.0-rc.0 _Sep 1, 2021_ @@ -1230,7 +1230,7 @@ _Sep 1, 2021_ - [Button] Create ButtonUnstyled and useButton (#27600) @michaldudak -## MUI Core 5.0.0-beta.5 +## MUI Core 5.0.0-beta.5 _Aug 24, 2021_ @@ -1238,7 +1238,7 @@ _Aug 24, 2021_ - [core] Utilize `CSS.supports` in `SliderUnstyled` component (#27724) @DanailH -## MUI Core 5.0.0-beta.3 +## MUI Core 5.0.0-beta.3 _Aug 6, 2021_ @@ -1247,7 +1247,7 @@ _Aug 6, 2021_ - [FormControl] Create FormControlUnstyled (#27240) @michaldudak - [Autocomplete] Move useAutocomplete to the Unstyled package (#27485) @michaldudak -## MUI Core 5.0.0-beta.2 +## MUI Core 5.0.0-beta.2 _Jul 26, 2021_ @@ -1255,7 +1255,7 @@ _Jul 26, 2021_ - [NoSsr] Move NoSsr to the Unstyled package (#27356) @michaldudak -## MUI Core 5.0.0-beta.1 +## MUI Core 5.0.0-beta.1 _Jul 14, 2021_ @@ -1263,7 +1263,7 @@ _Jul 14, 2021_ - [Switch] Create SwitchUnstyled and useSwitch (#26688) @michaldudak -## MUI Core 5.0.0-alpha.37 +## MUI Core 5.0.0-alpha.37 _Jun 15, 2021_ @@ -1272,7 +1272,7 @@ _Jun 15, 2021_ - [Slider] Improve TS definition (#26642) @mnajdova - [FocusTrap] Capture nodeToRestore via relatedTarget (#26696) @eps1lon -## MUI Core 5.0.0-alpha.31 +## MUI Core 5.0.0-alpha.31 _Apr 20, 2021_ @@ -1284,7 +1284,7 @@ _Apr 20, 2021_ - [Slider] Allow disabling the left and right thumbs swap (#25547) @michal-perlakowski -## MUI Core 5.0.0-alpha.26 +## MUI Core 5.0.0-alpha.26 _Feb 27, 2021_ @@ -1295,7 +1295,7 @@ _Feb 27, 2021_ - [Backdrop] Migrate to unstyled (#24985) @povilass - [Modal] Migrate to emotion + unstyled (#24857) @povilass -## MUI Core 5.0.0-alpha.24 +## MUI Core 5.0.0-alpha.24 _Jan 26, 2021_ @@ -1303,7 +1303,7 @@ _Jan 26, 2021_ - [unstyled] Convert composeClasses to TypeScript (#24396) @eps1lon -## MUI Core 5.0.0-alpha.19 +## MUI Core 5.0.0-alpha.19 _Dec 13, 2020_ @@ -1311,7 +1311,7 @@ _Dec 13, 2020_ - [core] Use Lerna to publish (#23793) @oliviertassinari -## MUI Core 5.0.0-alpha.17 +## MUI Core 5.0.0-alpha.17 _Nov 23, 2020_ @@ -1319,7 +1319,7 @@ _Nov 23, 2020_ - [Slider] Replace core Slider with SliderStyled (#23308) @mnajdova -## MUI Core 5.0.0-alpha.16 +## MUI Core 5.0.0-alpha.16 _Nov 14, 2020_ @@ -1327,7 +1327,7 @@ _Nov 14, 2020_ - [Slider] Extract slots as standalone components (#22893) @mnajdova -## MUI Core 5.0.0-alpha.15 +## MUI Core 5.0.0-alpha.15 _Nov 4, 2020_ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6f94050850..9cbba88951 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,368 +1,13 @@ # Contributing to Base UI -If you're reading this, you're awesome! -Thank you for being a part of the community and helping us make these projects great. -Here are a few guidelines that will help you along the way. +## Base UI vs. Material UI -## Summary +Base UI is an open-source project of the MUI organization. The repositories are part of the same codebase. +`mui/base-ui` imports the code infrastructure from [`mui/material-ui`](https://github.com/mui/material-ui). +You can find the "contributing" guide for the main repository in [mui/material-ui/CONTRIBUTING.md](https://github.com/mui/material-ui/blob/HEAD/CONTRIBUTING.md). -- [Code of conduct](#code-of-conduct) -- [A large spectrum of contributions](#a-large-spectrum-of-contributions) -- [Your first pull request](#your-first-pull-request) -- [Sending a pull request](#sending-a-pull-request) - - [Trying changes on the documentation site](#trying-changes-on-the-documentation-site) - - [Trying changes on the playground](#trying-changes-on-the-playground) - - [How to increase the chances of being accepted](#how-to-increase-the-chances-of-being-accepted) - - [CI checks and how to fix them](#ci-checks-and-how-to-fix-them) - - [Updating the component API documentation](#updating-the-component-api-documentation) - - [Coding style](#coding-style) -- [Contributing to the documentation](#contributing-to-the-documentation) - - [How to find docs issues to work on](#how-to-find-docs-issues-to-work-on) - - [How to add a new demo to the docs](#how-to-add-a-new-demo-to-the-docs) -- [How can I use a change that hasn't been released yet?](#how-can-i-use-a-change-that-hasnt-been-released-yet) -- [Roadmap](#roadmap) -- [License](#license) +Most of the content in the main repository "contributing" guide applies to this repository. +There are, however, a few differences: -## Code of conduct - -We has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as our code of conduct, and we expect project participants to adhere to it. -Please read [the full text](https://github.com/mui/.github/blob/master/CODE_OF_CONDUCT.md) to understand what actions will and will not be tolerated. - -## A large spectrum of contributions - -There are [many ways](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) to contribute to the library, and writing code is only one part of the story—[documentation improvements](#contributing-to-the-documentation) can be just as important as code changes. -If you have an idea for an improvement to the code or the docs, we encourage you to open an issue as a first step, to discuss your proposed changes with the maintainers before proceeding. - -## Your first pull request - -Working on your first pull request? You can learn how in this free video series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github). - -Get started with [good first issues](https://github.com/mui/base-ui/issues?q=is:open+is:issue+label:"good+first+issue"), which have a limited scope and a working solution that's already been discussed. -This makes them ideal for newer developers, or those who are new to these libraries and want to see how the contribution process works. - -We also have a list of [ready to take issues](https://github.com/mui/base-ui/issues?q=is:open+is:issue+label:"ready+to+take"), which are issues that have already been at least partially resolved in discussion, to the point that it's clear what to do next. -These issues are great for developers who want to reduce their chances of falling down a rabbit hole in search of a solution. - -Of course, you can work on any other issue you like—the "good first" and "ready to take" issues are simply those where the scope and timeline may be better defined. -Pull requests for other issues, or completely novel problems, may take a bit longer to review if they don't fit into our current development cycle. - -If you decide to fix an issue, please make sure to check the comment thread in case somebody is already working on a fix. -If nobody is working on it at the moment, please leave a comment stating that you've started to work on it, so other people don't accidentally duplicate your effort. - -If somebody claims an issue but doesn't follow up after more than a week, it's fine to take over, but you should still leave a comment. -If there has been no activity on the issue for 7 to 14 days, then it's safe to assume that nobody is working on it. - -## Sending a pull request - -MUI Core projects are community-driven, so pull requests are always welcome, but before working on a large change, it's best to open an issue first to discuss it with the maintainers. - -When in doubt, keep your pull requests small. -For the best chances of being accepted, don't bundle more than one feature or bug fix per PR. -It's often best to create two smaller PRs rather than one big one. - -1. Fork the repository. - -2. Clone the fork to your local machine and add the upstream remote: - -```bash -git clone https://github.com//base-ui.git -cd base-ui -git remote add upstream https://github.com/mui/base-ui.git -``` - - - -3. Synchronize your local `master` branch with the upstream one: - -```bash -git checkout master -git pull upstream master -``` - -4. Install the dependencies with pnpm (yarn or npm aren't supported): - -```bash -pnpm install -``` - -5. Create a new topic branch: - -```bash -git checkout -b my-topic-branch -``` - -6. Make changes, commit, and push to your fork: - -```bash -git push -u origin HEAD -``` - -7. Go to [the repository](https://github.com/mui/base-ui) and open a pull request. - -The core team actively monitors for new pull requests. -We will review your PR and either merge it, request changes to it, or close it with an explanation. - -### Trying changes on the documentation site - -The documentation site contains examples of all of the components. -This is the best place to experiment with your changes—it's the local development environment used by the maintainers. - -To get started, run: - -```bash -pnpm start -``` - -You can now access the documentation site locally: http://localhost:3005. -Changes to the docs will hot reload the site. - -### Trying changes on the playground - -While we do recommend trying your changes on the documentation site, this is not always ideal. -You might face the following problems: - -- Updating the existing demos prevents you from working in isolation on a single instance of the component -- Emptying an existing page to try your changes in isolation leads to a noisy `git diff` -- Static linters may report issues that you might not care about - -To avoid these problems, you can use this playground: - -```bash -pnpm docs:create-playground && pnpm start -``` - -Access it locally at: http://localhost:3005/playground/. - -You can create as many playgrounds as you want by going to the `/docs/pages/playground/` folder and duplicating the `index.tsx` file with a different name: `.tsx`. -The new playground will be accessible at: `http://localhost:3005/playground/`. - -### How to increase the chances of being accepted - -Continuous Integration (CI) automatically runs a series of checks when a PR is opened. -If you're unsure whether your changes will pass, you can always open a PR, and the GitHub UI will display a summary of the results. -If any of these checks fail, refer to [Checks and how to fix them](#checks-and-how-to-fix-them). - -Make sure the following is true: - - - -- The branch is targeted at `master` for ongoing development. All tests are passing. Code that lands in `master` must be compatible with the latest stable release. It may contain additional features but no breaking changes. We should be able to release a new minor version from the tip of `master` at any time. -- If a feature is being added: - - If the result was already achievable with the core library, you've explained why this feature needs to be added to the core. - - If this is a common use case, you've added an example to the documentation. -- If adding new features or modifying existing ones, you've included tests to confirm the new behavior. You can read more about our test setup in our test [README](https://github.com/mui/base-ui/blob/HEAD/test/README.md). -- If props were added or prop types were changed, you've updated the TypeScript declarations. -- The branch is not [behind its target branch](https://github.community/t/branch-10-commits-behind/2403). - -We will only merge a PR when all tests pass. -The following statements must be true: - -- The code is formatted. If the code was changed, run `pnpm prettier`. -- The code is linted. If the code was changed, run `pnpm eslint`. -- The code is type-safe. If TypeScript sources or declarations were changed, run `pnpm typescript` to confirm that the check passes. -- The API docs are up to date. If API was changed, run `pnpm proptypes && pnpm docs:api`. -- The demos are up to date. If demos were changed, run `pnpm docs:typescript:formatted`. See [about writing demos](#3-write-the-content-of-the-demo). -- The pull request title follows the pattern `[product-name][Component] Imperative commit message`. (See: [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/) for a great explanation). - -Don't worry if you miss a step—the Continuous Integration will run a thorough set of tests on your commits, and the maintainers of the project can assist you if you run into problems. - -If your pull request addresses an open issue, make sure to link the PR to that issue. -Use any [supported GitHub keyword](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword) in the PR description to automatically link them. -This makes it easier to understand where the PR is coming from, and also speeds things up because the issue will be closed automatically when the PR is merged. - -### CI checks and how to fix them - -If any of the checks fail, click on the **Details** link and review the logs of the build to find out why it failed. -For CircleCI, you need to log in first. -No further permissions are required to view the build logs. -The following sections give an overview of what each check is responsible for. - -#### ci/codesandbox - -This task creates multiple sandboxes on CodeSandbox.com that use the version of npm packages that was built from this pull request. -It should not fail in isolation. Use it to test more complex scenarios. - -#### ci/circleci: checkout - -This is a preflight check to see if the dependencies and lockfile are ok. -Running `pnpm` and `pnpm deduplicate` should fix most issues. - -#### ci/circleci: test_static - -This checks code format and lints the repository. -The log of the failed build should explain how to fix any issues. -It also runs commands that generate or change some files (like `pnpm docs:api` for API documentation). -If the CI job fails, then you most likely need to run the commands that failed locally and commit the changes. - -#### ci/circleci: test_unit-1 - -This runs the unit tests in a `jsdom` environment. -If it fails then `pnpm test:unit` should[1](test/README.md#accessibility-tree-exclusion) fail locally as well. -You can narrow the scope of tests run with `pnpm test:unit --grep ComponentName`. -If `pnpm test:unit` passes locally, but fails in CI, consider [Accessibility tree exclusion in CI](test/README.md#accessibility-tree-exclusion). - -#### ci/circleci: test_browser-1 - -This runs the unit tests in multiple browsers (via BrowserStack). -The log of the failed build should list which browsers failed. -If Chrome failed then `pnpm test:karma` should[1](test/README.md#accessibility-tree-exclusion) fail locally as well. -If other browsers failed, then debugging might be trickier. -If `pnpm test:karma` passes locally, but fails in CI, consider [Accessibility tree exclusion in CI](test/README.md#accessibility-tree-exclusion). - -#### ci/circleci: test_regression-1 - -This renders tests in `test/regressions/tests` and takes screenshots. -This step shouldn't fail if the others pass. -Otherwise, a maintainer will take a look. -The screenshots are evaluated in another step. - -#### ci/circleci: test_types - -This typechecks the repository. -The log of the failed build should list any issues. - -#### argos - -This evaluates the screenshots taken in `test/regressions/tests`, and fails if it detects -differences. -This doesn't necessarily mean that your PR will be rejected, as a failure might be intended. -Clicking on **Details** will show you the differences. - -#### deploy/netlify - -This renders a preview of the docs with your changes if it succeeds. -Otherwise `pnpm docs:build` usually fails locally as well. - -#### codecov/project - -This monitors coverage of the tests. -A reduction in coverage isn't necessarily bad, but it's always appreciated if it can be improved. - -#### Misc - -There are various other checks done by Netlify to validate the integrity of the docs. -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 ` ``` -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 ``` -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/support/support.md b/docs/data/base/getting-started/support/support.md index f4c68d7de9..7cc3e50726 100644 --- a/docs/data/base/getting-started/support/support.md +++ b/docs/data/base/getting-started/support/support.md @@ -44,9 +44,9 @@ You can browse the documentation, find an example close to your use case, and th You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts). -## Stack Overflow +## Stack Overflow -We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Base UI community as well as Base UI maintainers. +We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Base UI community as well as Base UI maintainers. You can search through existing questions and answers to see if someone has asked a similar question using the [base-ui tags](https://stackoverflow.com/questions/tagged/base-ui): @@ -89,7 +89,7 @@ Our tools are used by thousands of developers and teams all around the world, ma You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us! :::warning -How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). +How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). ::: ## Custom work 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 3b52859469..24555fe2aa 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/base-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/base-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/base-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/base-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 fef60e311b..92cf9f71fa 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 -

Learn how to style Base UI components with Tailwind CSS.

+

Learn how to style Base UI components with Tailwind CSS.

## 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/src/MuiPage.ts b/docs/src/MuiPage.ts index fdaa4a820a..934782c099 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/modules/components/Ad.js b/docs/src/modules/components/Ad.js index eddd42bb79..9fc1fe56b7 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 c161f25405..64963da170 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 32ad7954ce..c97580ccd9 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -158,7 +158,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 82b436a56e..474b52a539 100644 --- a/docs/src/modules/components/AppNavDrawerItem.js +++ b/docs/src/modules/components/AppNavDrawerItem.js @@ -273,7 +273,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 cf685a6817..a8479e8ee0 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/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 68fce71531..d97703653a 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 59be4f176c..37cb3f4c93 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 8f71b7320a..0ae9a7232f 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/Notifications.js b/docs/src/modules/components/Notifications.js index 6fc4cb9857..0392c30467 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 0df110fbc6..13e93beacc 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/examples/base-ui-nextjs-tailwind-ts/README.md b/examples/base-ui-nextjs-tailwind-ts/README.md index f3eb2aacf7..58e460e838 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 dd0b607bca..f805a47a20 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 b0385aa7c9..af6684d3c7 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/packages/mui-base/README.md b/packages/mui-base/README.md index 2bc5a02661..8123310c83 100644 --- a/packages/mui-base/README.md +++ b/packages/mui-base/README.md @@ -24,7 +24,7 @@ Visit [https://mui.com/base-ui/](https://mui.com/base-ui/) to view the full docu ## Questions For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/base-ui) instead of GitHub issues. -Use the "base-ui" tag on Stack Overflow to make it easier for the community to find your question. +Use the "base-ui" tag on Stack Overflow to make it easier for the community to find your question. ## Examples @@ -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/base-ui/releases) is regularly updated to ## Roadmap -Future plans and high-priority features and enhancements can be found in our [roadmap](https://github.com/orgs/mui/projects/1). +Future plans and high-priority features and enhancements can be found in the [roadmap](https://github.com/orgs/mui/projects/1). ## License diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx index 68803e9080..bd52658ac9 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 78bbfc0b11..582b4df90e 100644 --- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js @@ -600,7 +600,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 05f28a0d16..1c65a8d8da 100644 --- a/packages/mui-base/src/useCompound/useCompoundItem.ts +++ b/packages/mui-base/src/useCompound/useCompoundItem.ts @@ -32,7 +32,7 @@ export interface UseCompoundItemReturnValue { * 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 61aa53700c..9dcbc02c26 100644 --- a/packages/mui-base/src/useCompound/useCompoundParent.ts +++ b/packages/mui-base/src/useCompound/useCompoundParent.ts @@ -18,7 +18,7 @@ export type CompoundComponentContextValue = { /** * 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 6a41a278d3..9999748450 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 71358471fd..607a67fe49 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/scripts/README.md b/scripts/README.md index 36cdbda051..8e30508632 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, for example change `Material` to `material` 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/buildApiDocs/config/baseUi/generateBaseUiApiPages.ts b/scripts/buildApiDocs/config/baseUi/generateBaseUiApiPages.ts index 735fc99358..1a00cbf626 100644 --- a/scripts/buildApiDocs/config/baseUi/generateBaseUiApiPages.ts +++ b/scripts/buildApiDocs/config/baseUi/generateBaseUiApiPages.ts @@ -17,7 +17,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/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index f029876db6..4f7e16501d 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 801262ea02..7c6e7b54b2 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-base/src/Button/Button.test.tsx`. +- When in doubt, put the new test case directly in the unit test file for that component, for example `packages/mui-base/src/Button/Button.test.tsx`. - 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 --debug`. +If you want to debug tests with the, for example Chrome inspector (chrome://inspect) you can run `pnpm t --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/base-ui/32796/work ### 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 `. +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 `. 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/regressions/README.md b/test/regressions/README.md index 47dfd0eb9d..1c579da77a 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