diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md index ef737a5bfd3ef4..4e9ab294c12e00 100644 --- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md +++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md @@ -302,7 +302,7 @@ Let's add the `Slider` into the `Player` component now: You should see this: -Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team +Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team ### Customize the slider thumb @@ -367,7 +367,7 @@ To finish this guide off, let's see how you can add custom styles based on a com This is what it'll look like: -Screenshot of a button used as example in the guide, designed by the Tailwind Labs team +Screenshot of a button used as example in the guide, designed by the Tailwind Labs team Create a `Button.tsx` file and copy the following code: diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md index ef737a5bfd3ef4..4e9ab294c12e00 100644 --- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md +++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md @@ -302,7 +302,7 @@ Let's add the `Slider` into the `Player` component now: You should see this: -Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team +Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team ### Customize the slider thumb @@ -367,7 +367,7 @@ To finish this guide off, let's see how you can add custom styles based on a com This is what it'll look like: -Screenshot of a button used as example in the guide, designed by the Tailwind Labs team +Screenshot of a button used as example in the guide, designed by the Tailwind Labs team Create a `Button.tsx` file and copy the following code: 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 e7aad15a04fb23..ed2d4138822faa 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 @@ -321,7 +321,7 @@ Let's add the `Slider` into the `Player` component now: You should see this: -Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team +Screenshot of the media player used as example in the guide, designed by the Tailwind Labs team ### Customize the slider thumb @@ -392,7 +392,7 @@ We'll create a custom Button component that uses the `focusVisible` state from t This is what it'll look like: -Screenshot of a button used as example in the guide, designed by the Tailwind Labs team +Screenshot of a button used as example in the guide, designed by the Tailwind Labs team Create a `Button.tsx` file and copy the following code: diff --git a/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md b/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md index 15164b131faeae..8432049c1f7637 100644 --- a/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md +++ b/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md @@ -16,9 +16,9 @@ Indeed, this light-mode "flash" will occur _every_ time you load up the app in t This can cause eye fatigue in a low-light setting, not to mention a frustrating interruption of the user experience—especially for those who interact with the app when it's in between modes. -The animated screen capture below illustrates this problem as it appears on [mui.com](https://mui.com/): +The animated screen capture below illustrates this problem as it would appear on [mui.com](https://mui.com/) without a fix: -The dark-mode flashing problem at mui.com. +The dark-mode flashing problem at mui.com. ## The solution: CSS variables diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md index 883070729566da..02928b597e6892 100644 --- a/docs/data/material/customization/color/color.md +++ b/docs/data/material/customization/color/color.md @@ -12,7 +12,7 @@ The Material Design team has also built an awesome palette configuration tool: [ This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination. - Official color tool + Official color tool

diff --git a/docs/data/material/customization/how-to-customize/how-to-customize.md b/docs/data/material/customization/how-to-customize/how-to-customize.md index a84c730c070274..093e7eb599420f 100644 --- a/docs/data/material/customization/how-to-customize/how-to-customize.md +++ b/docs/data/material/customization/how-to-customize/how-to-customize.md @@ -36,7 +36,7 @@ The styles injected into the DOM by Material UI rely on class names that all [fo In this case, the styles are applied with `.css-ae2u5c-MuiSlider-thumb` but you only really need to target the `.MuiSlider-thumb`, where `Slider` is the component and `thumb` is the slot. Use this class name to write a CSS selector within the `sx` prop (`& .MuiSlider-thumb`), and add your overrides. -dev-tools +dev-tools {{"demo": "DevTools.js"}} diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md index 9d39f48635962f..239a007684fa66 100644 --- a/docs/data/material/customization/typography/typography.md +++ b/docs/data/material/customization/typography/typography.md @@ -106,10 +106,10 @@ const theme = createTheme({ The computed font size by the browser follows this mathematical equation:
- font size calculation + font size calculation
- font size calculation + font size calculation
diff --git a/docs/data/material/getting-started/design-resources/design-resources.md b/docs/data/material/getting-started/design-resources/design-resources.md index 6199aab5825ec9..526aa0ac573bad 100644 --- a/docs/data/material/getting-started/design-resources/design-resources.md +++ b/docs/data/material/getting-started/design-resources/design-resources.md @@ -2,9 +2,9 @@

Check out these prebuilt UI kits to help you design with Material UI using your favorite tools.

-figma -adobe-xd -sketch +figma +adobe-xd +sketch ## MUI resources diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md index 49d1ebdc7376b1..a723ef256d3104 100644 --- a/docs/data/material/getting-started/templates/templates.md +++ b/docs/data/material/getting-started/templates/templates.md @@ -29,4 +29,4 @@ So far we have demos for a dashboard, sign in page, sign up page, blog page, che Looking for something more? You can find complete templates & themes in the premium template section. -react templates +react templates diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md index cffb1424de71ae..f61c42ceff6925 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md @@ -31,7 +31,7 @@ These projects live within two product lines: MUI Core and MUI X. The following chart illustrates how MUI's packages are related to one another: -The first half of the image shows @mui/material and @mui/base as component libraries, and @mui/system and styled engines as styling solutions, both under the MUI Core umbrella. The second half shows @mui/x-data-grid and @mui/x-date-pickers as components from MUI X. +The first half of the image shows @mui/material and @mui/base as component libraries, and @mui/system and styled engines as styling solutions, both under the MUI Core umbrella. The second half shows @mui/x-data-grid and @mui/x-date-pickers as components from MUI X. In this article, we'll only cover the MUI Core packages. Visit the [MUI X Overview](/x/introduction/) for more information about our collection of advanced components. @@ -122,4 +122,4 @@ It uses the Emotion adapter (`@mui/styled-engine`) as the default style engine t To use MUI System, you must install either Emotion or styled-components, because the respective `styled-engine` package depends on it. ::: -A diagram showing an arrow going from @mui/system to @mui/styled-engine, with a note that it is the default engine. Then, from @mui/styled-engine a solid arrow points to @emotion/react and @emotion/styled while a dashed arrow points to @mui/styled-engine-sc, which points to styled-components. +A diagram showing an arrow going from @mui/system to @mui/styled-engine, with a note that it is the default engine. Then, from @mui/styled-engine a solid arrow points to @emotion/react and @emotion/styled while a dashed arrow points to @mui/styled-engine-sc, which points to styled-components. diff --git a/docs/data/system/styled/styled-pt.md b/docs/data/system/styled/styled-pt.md index 470e9c1b7fdba4..c550b809b3c399 100644 --- a/docs/data/system/styled/styled-pt.md +++ b/docs/data/system/styled/styled-pt.md @@ -57,7 +57,7 @@ This example demonstrates how you can use the `styled` API to create custom comp If you inspect this element with the browser DevTools in development mode, you will notice that the class of the component now ends with the `MyThemeComponent-root`, which comes from the `name` and `slot` options that were provided. -browser DevTools showing the rendered component +browser DevTools showing the rendered component In addition to this, the `color`, `sx`, and `variant` props are not propagated to the generated `div` element. diff --git a/docs/data/system/styled/styled-zh.md b/docs/data/system/styled/styled-zh.md index b14f4c0bb3c8f0..6821567569e357 100644 --- a/docs/data/system/styled/styled-zh.md +++ b/docs/data/system/styled/styled-zh.md @@ -57,7 +57,7 @@ The utility can be used as a replacement for emotion's or styled-components' sty If you inspect this element with the browser DevTools in development mode, you will notice that the class of the component now ends with the `MyThemeComponent-root`, which comes from the `name` and `slot` options that were provided. -browser DevTools showing the rendered component +browser DevTools showing the rendered component In addition to this, the `color`, `sx`, and `variant` props are not propagated to the generated `div` element. diff --git a/docs/data/system/styled/styled.md b/docs/data/system/styled/styled.md index 5af4d2c8d68398..dafe8e225ddeda 100644 --- a/docs/data/system/styled/styled.md +++ b/docs/data/system/styled/styled.md @@ -60,7 +60,7 @@ This example demonstrates how you can use the `styled` API to create custom comp If you inspect this element with the browser DevTools in development mode, you will notice that the class of the component now ends with the `MyThemeComponent-root`, which comes from the `name` and `slot` options that were provided. -browser DevTools showing the rendered component +browser DevTools showing the rendered component In addition to this, the `color`, `sx`, and `variant` props are not propagated to the generated `div` element. diff --git a/docs/pages/blog/2023-chamonix-retreat.js b/docs/pages/blog/2023-chamonix-retreat.js new file mode 100644 index 00000000000000..3df94dcef3360e --- /dev/null +++ b/docs/pages/blog/2023-chamonix-retreat.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './2023-chamonix-retreat.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/2023-chamonix-retreat.md b/docs/pages/blog/2023-chamonix-retreat.md new file mode 100644 index 00000000000000..87c8da9a9723d3 --- /dev/null +++ b/docs/pages/blog/2023-chamonix-retreat.md @@ -0,0 +1,90 @@ +--- +title: MUI's team retreat in Chamonix +description: The MUI team spent five days in the French Alps team-building, problem-solving, and brainstorming. Read all about it! +date: 2023-03-16T00:00:00.000Z +authors: ['mikailaread'] +card: true +tags: ['Company'] +--- + +## Why the Chamonix gathering? + +Being a distributed team means everyone at MUI works asynchronously. + +We celebrate having the freedom to deeply focus on what we're delivering, and being able to fit work around life instead of life around work. 😀 + +But this way of working can also mean some team members experience very little overlap in their online hours, which can make it more challenging to connect personally or collaborate. + +So, what do we do? + +MUI is extremely intentional about bridging gaps by bringing our people together every ~8 months (as a minimum). + +_Our team retreats are about providing everyone a more tangible opportunity to feel part of the MUI community and to learn more about each other outside of work._ + +It's a time to focus more on who we are as individuals, which creates a wonderful ripple effect on the ways we work together as a team. + +## Where did we go? + +Photo of the Heliopic Hotel & Spa exterior, via [Assas Hotels](https://www.assas-hotels.com/en/hotel-heliopic-sweet-spa/). + +Wooden architecture exterior of the Heliopic Hotel and Spa + +Chamonix is a world capital for outdoor activities, such as mountaineering, skiing, snowboarding, paragliding, hiking, climbing, and so much more! + +The Chamonix Mont Blanc valley offers unmatched alpine views, plus a whole host of stunning protected flora and fauna. +With a bustling city center full of quaint shops and restaurants — there's something for everyone to enjoy. + +We stayed in the beautiful Helopic Hotel & Spa, which fit our needs perfectly. With fully-equipped conference rooms, a cozy lobby bar, a table-service restaurant, and a luxury spa — everything we needed was on-site. (The food was delicious, too!) + +A plated apple dessert with three scoops of ice cream. + +## What did we do? + +We kicked off the week with several unique team-building activities, including a mini Winter Olympics, a competitive team biathlon, and even axe-throwing. 🎯🪓 + +Engaging in new experiences together gave us an opportunity to learn about each other's strengths and weaknesses, and to develop a better understanding of how our differences influence the ways we might communicate and work together. + +It also provided room for team members to share past experiences with one another and gain new perspectives. + +Members of the MUI team standing in a line with their arms extended on each others' shoulders. + +MUI team members cross-country skiing. + +MUI team members standing in a line shooting air rifles as part of a biathlon competition. + +On the work-front, we hosted our monthly team meeting and offered a spread of different topic-based sessions for a "choose your own adventure" feel. +People could opt into the sessions they felt most passionate or excited about, which really helped to sustain energy and result in fruitful discussions. + +Solving challenges and sparking new ideas takes on such a different feel when you're all in the same time and place! +Our team walked away with a number of actionable changes and commitments for the near and far future. + +MUI team members sit in a half-U shape as Co-Founder Olivier Tassinari presents the monthly meeting slides. + +Following our very productive sessions, it was time to relax and refresh ourselves. +We decided to increase the amount of downtime on our final day together and leave space for serendipitous fun to unfold. + +And guess what: _**it worked!**_ + +One of the most-loved parts of our retreat in team feedback surveys turned out to be a completely unplanned game night. +Despite tiring return journeys ahead, an exhausted group of us set up camp in the hotel lobby to play cards and board games into the wee hours of the morning. +Special bonds formed over some very colorful rounds of Saboteur and terribly-executed magic tricks. 🙃🎩 + +It was just what we needed to close out the retreat with some moments of real connection. + +## What's next? + +If you can believe it, we're already busy planning our next meet-up. Although we haven't decided on an exact location just yet, the team has agreed this much loud and clear: somewhere warm! ☀️😅 + +Two members of the MUI team and skiing instructor smiling with a mountain vista in the background. + +MUI team members standing lined-up in the snow with their skigear. + +## Join the team + +MUI is on track to double in size by the end of this year with lots of open roles in engineering, design, and product teams. +Our target date for the next company retreat is November 2023. +To have your say in where we go and what we do, join us now. + +[Visit our careers page!](/careers/) 🏃💨 + +Members of the MUI team sitting around a large wooden dining table. diff --git a/docs/public/static/blog/2023-chamonix-retreat/axe-throwing.jpeg b/docs/public/static/blog/2023-chamonix-retreat/axe-throwing.jpeg new file mode 100644 index 00000000000000..ff983f1f020d89 Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/axe-throwing.jpeg differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/biathlon-shooters.jpeg b/docs/public/static/blog/2023-chamonix-retreat/biathlon-shooters.jpeg new file mode 100644 index 00000000000000..433a7201218e02 Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/biathlon-shooters.jpeg differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/biathlon-skiers.jpeg b/docs/public/static/blog/2023-chamonix-retreat/biathlon-skiers.jpeg new file mode 100644 index 00000000000000..203d3c0ddce559 Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/biathlon-skiers.jpeg differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/card.png b/docs/public/static/blog/2023-chamonix-retreat/card.png new file mode 100644 index 00000000000000..4503b04517d2a5 Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/card.png differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/caterpillar-game.jpeg b/docs/public/static/blog/2023-chamonix-retreat/caterpillar-game.jpeg new file mode 100644 index 00000000000000..2c3749b8565355 Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/caterpillar-game.jpeg differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/dessert.jpeg b/docs/public/static/blog/2023-chamonix-retreat/dessert.jpeg new file mode 100644 index 00000000000000..1d88b13bd9361f Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/dessert.jpeg differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/hotel-exterior.jpeg b/docs/public/static/blog/2023-chamonix-retreat/hotel-exterior.jpeg new file mode 100644 index 00000000000000..165494960a6120 Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/hotel-exterior.jpeg differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/monthly-meeting.jpeg b/docs/public/static/blog/2023-chamonix-retreat/monthly-meeting.jpeg new file mode 100644 index 00000000000000..0eb43386b4fa2c Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/monthly-meeting.jpeg differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/mountaineers.jpeg b/docs/public/static/blog/2023-chamonix-retreat/mountaineers.jpeg new file mode 100644 index 00000000000000..4304a21ee08f4d Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/mountaineers.jpeg differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/skiers.jpeg b/docs/public/static/blog/2023-chamonix-retreat/skiers.jpeg new file mode 100644 index 00000000000000..9f249b7f7ff15a Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/skiers.jpeg differ diff --git a/docs/public/static/blog/2023-chamonix-retreat/team-dinner.jpeg b/docs/public/static/blog/2023-chamonix-retreat/team-dinner.jpeg new file mode 100644 index 00000000000000..8ef76c4d511e2b Binary files /dev/null and b/docs/public/static/blog/2023-chamonix-retreat/team-dinner.jpeg differ diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 531ee0a68f43ee..edc79c6e483d0a 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -335,6 +335,8 @@ const Root = styled('div')( '& img': { // Avoid layout jump display: 'inline-block', + // Avoid very sharp edges + borderRadius: 2, }, '& hr': { height: 1, diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 05a8fe87e54132..860c0300667344 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -89,6 +89,11 @@ export const authors = { avatar: 'https://avatars.githubusercontent.com/u/13808724', github: 'cherniavskii', }, + mikailaread: { + name: 'Mikaila Read', + avatar: 'https://avatars.githubusercontent.com/u/76401606', + github: 'mikailaread', + }, }; const classes = { @@ -146,6 +151,7 @@ const Root = styled('div')( lineHeight: 1.7, }, '& img, & video': { + borderRadius: 4, display: 'block', margin: 'auto', },