diff --git a/.github/workflows/vale-action.yml b/.github/workflows/vale-action.yml index 2c13e1ddbc7805..cd06b77bdab89a 100644 --- a/.github/workflows/vale-action.yml +++ b/.github/workflows/vale-action.yml @@ -16,8 +16,8 @@ jobs: - uses: errata-ai/vale-action@38bf078c328061f59879b347ca344a718a736018 # v2.1.0 continue-on-error: true with: + fail_on_error: true reporter: github-pr-review - files: docs/data env: # Required, set by GitHub actions automatically: # https://docs.github.com/en/actions/security-guides/automatic-token-authentication#about-the-github_token-secret diff --git a/.vale.ini b/.vale.ini index 9593d59499f168..0270cf93a0bf49 100644 --- a/.vale.ini +++ b/.vale.ini @@ -19,5 +19,5 @@ Google.We = YES # Avoid first-person plural Google.Will = YES # Avoid future tense Google.OxfordComma = YES # Prefer Oxford comma -[CHANGELOG*.md] +[*CHANGELOG*.md] MUI.CorrectReferenceAllCases = NO diff --git a/docs/mui-vale.zip b/docs/mui-vale.zip index b7ea55a4002ddc..86fdbcc3f12bf0 100644 Binary files a/docs/mui-vale.zip and b/docs/mui-vale.zip differ diff --git a/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml b/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml index a3a1caa496b73b..f8c94a1279bf21 100644 --- a/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml +++ b/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml @@ -7,7 +7,7 @@ ignorecase: true # for more information: https://vale.sh/docs/topics/styles/#substitution swap: ' api': API - typescript: TypeScript + 'typescript ': TypeScript ' ts': TypeScript ' js': JavaScript javascript: JavaScript diff --git a/docs/pages/blog/2019-developer-survey-results.md b/docs/pages/blog/2019-developer-survey-results.md index e165e9126938c5..392206d8f8c1d9 100644 --- a/docs/pages/blog/2019-developer-survey-results.md +++ b/docs/pages/blog/2019-developer-survey-results.md @@ -281,7 +281,7 @@ Multiple options were allowed. Pie chart: 54,3% for my company, 24.9% for a client, 15.2% as a side project, 5.6% more than one of these. -### 17. Which JS framework are you using, if any? +### 17. Which JavaScript framework are you using, if any? Multiple options were allowed. diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md index 122352e3238f39..a528508030a330 100644 --- a/docs/pages/blog/2019.md +++ b/docs/pages/blog/2019.md @@ -64,7 +64,7 @@ Some of the key factors: - We have fixed a significant number of [accessibility issues](https://github.com/mui/material-ui/issues?q=is%3Aissue+label%3Aaccessibility+is%3Aclosed). - We have introduced global class names. - We have migrated the whole codebase to hooks. -- We migrated all the demos to TypeScript (while also offering transpiled JS demos). +- We migrated all the demos to TypeScript (while also offering transpiled JavaScript demos). - We introduced [native tree-shaking](/material-ui/guides/minimizing-bundle-size/) support. - We introduced [built-in localization](/material-ui/guides/localization/). - We removed a good number of external dependencies and increased the `features/bundle size` density. diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md index 4077d99d27ceef..9c89e737c62c3c 100644 --- a/docs/pages/blog/2020-developer-survey-results.md +++ b/docs/pages/blog/2020-developer-survey-results.md @@ -277,7 +277,7 @@ section. Pie chart: 55.17% For my company 22.86% For a client, 16.94% Side project, 5.03% More than one of these. -### 18. Which JS framework are you using, if any? +### 18. Which JavaScript framework are you using, if any? Pie chart: 57.34% Create React App, 16.40% Custom Webpack, 12.35% Next.js, 5.40% Gatsby, 8.51% Other. diff --git a/docs/pages/blog/making-customizable-components.md b/docs/pages/blog/making-customizable-components.md index c4febbd27d8c36..071e08af31bf0c 100644 --- a/docs/pages/blog/making-customizable-components.md +++ b/docs/pages/blog/making-customizable-components.md @@ -59,10 +59,10 @@ you can play around with it in [CodeSandbox](https://codesandbox.io/p/sandbox/fa } ``` -### Let JS generate the CSS +### Let JavaScript generate the CSS Maybe you don't want to spend your time switching between CSS and JavaScript files, or writing long, cluttered stylesheets. -To avoid these problems you can integrate styles directly into your JS code. 🎉 +To avoid these problems you can integrate styles directly into your JavaScript code. 🎉 Because the level of customization varies across projects, Material UI's components can be customized in several different ways. For more information on this topic, check out the [Material UI customization documentation](https://mui.com/material-ui/customization/how-to-customize/). diff --git a/docs/pages/blog/toolpad-use-cases.md b/docs/pages/blog/toolpad-use-cases.md index afa12c478a76eb..30879950a648e4 100644 --- a/docs/pages/blog/toolpad-use-cases.md +++ b/docs/pages/blog/toolpad-use-cases.md @@ -61,7 +61,7 @@ Your browser does not support the video tag. We opted for Toolpad since Metabase doesn't support importing data from REST APIs. -This is possible in Google Sheets but it requires writing a lot of JS code, and since we wanted to embed it in a [Notion page](https://mui-org.notion.site/KPIs-1ce9658b85ce4628a2a2ed2ae74ff69c?pvs=4#3974cb6ed12b4c5a9013bac63113e3bc), Toolpad was the ideal choice. +This is possible in Google Sheets but it requires writing a lot of JavaScript code, and since we wanted to embed it in a [Notion page](https://mui-org.notion.site/KPIs-1ce9658b85ce4628a2a2ed2ae74ff69c?pvs=4#3974cb6ed12b4c5a9013bac63113e3bc), Toolpad was the ideal choice. Toolpad handles state management and routing, and simplifies query building and data binding, removing the need to write glue code. You can explore both of the aforementioned apps in dev mode on your device by running the underlying [Node application](https://github.com/mui/mui-public/tree/HEAD/tools-public). diff --git a/docs/pages/careers/support-agent.md b/docs/pages/careers/support-agent.md index c2637a56057a3d..313ad1661ac5a9 100644 --- a/docs/pages/careers/support-agent.md +++ b/docs/pages/careers/support-agent.md @@ -11,7 +11,7 @@ ## The company MUI's story began in 2014 with Material UI, the most successful React implementation of Google's Material Design. -Today, Material UI stands as one of the most popular open-source libraries on GitHub and has paved the way for the fully-fledged startup known as MUI (founded in 2019), which now boasts an ever-expanding ecosystem of React UI products. +Today, Material UI stands as one of the most popular open-source libraries on GitHub and has paved the way for the fully-fledged startup known as MUI (founded in 2019), which now boasts an ever-expanding ecosystem of React UI products. We're a company of 31+ people as of early 2024, and we're growing. ## The products 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 14789258e81d2c..705e8e32dcfe20 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/views/privacy.md +++ b/docs/src/pages/premium-themes/onepirate/modules/views/privacy.md @@ -13,7 +13,7 @@ Please read this policy carefully to understand how we handle and treat your per 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 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 inquiry 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 (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. diff --git a/packages-internal/scripts/typescript-to-proptypes/CHANGELOG.old.md b/packages-internal/scripts/typescript-to-proptypes/CHANGELOG.old.md index 38d10c92ae4789..d755fbf8d08167 100644 --- a/packages-internal/scripts/typescript-to-proptypes/CHANGELOG.old.md +++ b/packages-internal/scripts/typescript-to-proptypes/CHANGELOG.old.md @@ -123,7 +123,7 @@ All notable changes to this project will be documented in this file. See [standa - **parser:** handle optional any ([30f56ec](https://github.com/merceyz/typescript-to-proptypes/commit/30f56ec)) - **parser:** handle optional React.ElementType ([c7a87fd](https://github.com/merceyz/typescript-to-proptypes/commit/c7a87fd)) - **parser:** treat ComponentType as elementType ([53f1e21](https://github.com/merceyz/typescript-to-proptypes/commit/53f1e21)) -- export typescript as ts ([ba90e22](https://github.com/merceyz/typescript-to-proptypes/commit/ba90e22)) +- export TypeScript as ts ([ba90e22](https://github.com/merceyz/typescript-to-proptypes/commit/ba90e22)) ### Features diff --git a/packages/mui-codemod/CONTRIBUTING.md b/packages/mui-codemod/CONTRIBUTING.md index 7d536a0c2f8b4c..89af440e5fef79 100644 --- a/packages/mui-codemod/CONTRIBUTING.md +++ b/packages/mui-codemod/CONTRIBUTING.md @@ -4,7 +4,7 @@ The codemod is a tool that helps developers migrate their codebase when we introduce changes in a new version. The changes could be deprecations, enhancements, or breaking changes. -The codemods for JS files are based on [jscodeshift](https://github.com/facebook/jscodeshift) which is a wrapper of [recast](https://github.com/benjamn/recast). +The codemods for JavaScript files are based on [jscodeshift](https://github.com/facebook/jscodeshift) which is a wrapper of [recast](https://github.com/benjamn/recast). The codemods for CSS files are based on [postcss](https://github.com/postcss/postcss). @@ -22,7 +22,7 @@ The codemods for CSS files are based on [postcss](https://github.com/postcss/pos - `actual.css` - the input for the postcss plugin (optional) - `expected.css` - the expected output of the postcss plugin (optional) 3. Use [astexplorer](https://astexplorer.net/) to check the AST types and properties - - For JS codemods set to @babel/parser because we use [`tsx`](https://github.com/benjamn/recast/blob/master/parsers/babel.ts) as a default parser. + - For JavaScript codemods set to @babel/parser because we use [`tsx`](https://github.com/benjamn/recast/blob/master/parsers/babel.ts) as a default parser. - For CSS codemods set to postcss 4. [Test the codemod locally](#local) 5. Add the codemod to README.md diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 451512381792c7..179e3aa09cb422 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1639,7 +1639,7 @@ The following scenarios are not currently handled by this codemod and will be ma - In order for arrow functions at the rule level to be converted, the parameter must use object 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` +- If an arrow function at the rule level contains a code block (that is contains an explicit `return` statement) rather than just an object expression, it will not be converted. You can find more details about migrating from JSS to tss-react in [the migration guide](https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react). diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md index d02bafcf4c30bd..1a3a3b87b6ade0 100644 --- a/packages/pigment-css-react/README.md +++ b/packages/pigment-css-react/README.md @@ -34,7 +34,7 @@ Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "tr Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components. Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. -Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment CSS in v6. +Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment CSS in v6. ### Start with Next.js @@ -157,7 +157,7 @@ function App() { } ``` -The call to the `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. +The call to the `css` function is replaced with a unique string that represents the CSS class name for the generated styles. Use a callback function to get access to the [theme](#theming) values: @@ -264,7 +264,7 @@ const Button = styled('button')({ }); ``` -Note that the `props` function will not work if it is inside another closure, for example, inside an `array.map`: +Note that the `props` function doesn't work if it is inside another closure, for example, inside an `array.map`: ```jsx const Button = styled('button')({ @@ -307,7 +307,7 @@ const Heading = styled('h1')({ }); ``` -Pigment CSS will replace the callback with a CSS variable and inject the value through inline style. This makes it possible to create a static CSS file while still allowing dynamic styles. +Pigment CSS replaces the callback with a CSS variable and inject the value through inline style. This makes it possible to create a static CSS file while still allowing dynamic styles. ```css .Heading_class_akjsdfb { @@ -384,7 +384,7 @@ function Example1() { } ``` -The call to the `keyframes` function will be replaced with a unique string that represents the CSS animation name. It can be used with `css` or `styled` too. +The call to the `keyframes` function is replaced with a unique string that represents the CSS animation name. It can be used with `css` or `styled` too. ```js import { css, styled, keyframes } from '@pigment-css/react'; @@ -415,7 +415,7 @@ Theming is an **optional** feature that lets you reuse the same values, such as > **💡 Good to know**: > -> The **theme** object is used at build time and does not exist in the final JS bundle. This means that components created using Pigment's `styled` can be used with React Server Components by default while still getting the benefits of theming. +> The **theme** object is used at build time and does not exist in the final JavaScript bundle. This means that components created using Pigment CSS's `styled` can be used with React Server Components by default while still getting the benefits of theming. For example, in Next.js, you can define a theme in the `next.config.js` file like this: @@ -484,7 +484,7 @@ module.exports = withPigment( ); ``` -The `extendTheme` utility will go through the theme and create a `vars` object which represents the tokens that refer to CSS variables. +The `extendTheme` utility goes through the theme and create a `vars` object which represents the tokens that refer to CSS variables. ```jsx const theme = extendTheme({ @@ -508,7 +508,7 @@ extendTheme({ }); ``` -The generated CSS variables will have the `pigment` prefix: +The generated CSS variables has the `pigment` prefix: ```css :root { @@ -579,7 +579,7 @@ function App() { #### Styling based on color scheme The `extendTheme` utility attaches a function called `applyStyles` to the theme object. It receives a color scheme as the first argument followed by a style object. -It will return a proper CSS selector based on the theme configuration. +It returns a proper CSS selector based on the theme configuration. ```jsx const Heading = styled('h1')(({ theme }) => ({ @@ -620,7 +620,7 @@ declare module '@pigment-css/react/theme' { Emotion and styled-components are runtime CSS-in-JS libraries. What you write in your styles is what you get in the final bundle, which means the styles can be as dynamic as you want with bundle size and performance overhead trade-offs. -On the other hand, Pigment CSS extracts CSS at build time and replaces the JS code with hashed class names and some CSS variables. This means that it has to know all of the styles to be extracted ahead of time, so there are rules and limitations that you need to be aware of when using JavaScript callbacks or variables in Pigment CSS's APIs. +On the other hand, Pigment CSS extracts CSS at build time and replaces the JavaScript code with hashed class names and some CSS variables. This means that it has to know all of the styles to be extracted ahead of time, so there are rules and limitations that you need to be aware of when using JavaScript callbacks or variables in Pigment CSS's APIs. Here are some common patterns and how to achieve them with Pigment CSS: @@ -669,7 +669,7 @@ const Flex = styled('div')((props) => ({ 2. **Programatically generated styles** -For Emotion and styled-components, the styles will be different on each render and instance because the styles are generated at runtime: +For Emotion and styled-components, the styles is different on each render and instance because the styles are generated at runtime: ```js function randomBetween(min: number, max: number) { @@ -693,7 +693,7 @@ function App() { } ``` -However, in Pigment CSS with the same code as above, all instances will have the same styles and won't change between renders because the styles are extracted at build time. +However, in Pigment CSS with the same code as above, all instances have the same styles and won't change between renders because the styles are extracted at build time. To achieve the same result, you need to move the dynamic logic to props and pass the value to CSS variables instead: