@mui/docs 6.0.0-alpha.4 → 6.0.0-alpha.5

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.5
+
+<!-- generated comparing v6.0.0-alpha.4..next -->
+
+_May 1, 2024_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@6.0.0-alpha.5`
+
+- [FormControlLabel] Deprecate `componentsProps` (#41767) @sai6855
+- [PaginationItem] Deprecate components prop (#41777) @sai6855
+- [SvgIcon] Convert to support CSS extraction (#41779) @aarongarciah
+
+### `@mui/base@5.0.0-beta.43`
+
+- [TextareaAutosize] Fix resizing instability (#41638) @ZeeshanTamboli
+
+### Docs
+
+- Fix small SEO issues @oliviertassinari
+- [material-ui] Fix minor spelling error in the "About the lab" page (#42073) @ryanhartwig
+- [material-ui] Update Figma plugin name (#41967) @danilo-leal
+- [material-ui][templates] Fix input props attributes in Landing Page template (#42013) @5-tom
+- [system] Update typo on the sx prop page (#42035) @bricker
+
+### Core
+
+- [docs-infra] Clean up branding theme file and improve font-face readibility (#42023) @danilo-leal
+- [docs-infra] Simplify docs demo (#42016) @oliviertassinari
+- [website] Add content about the Sync plugin in the Material UI page (#40515) @danilo-leal
+- [website] Sync career roles (#42058) @oliviertassinari
+- [website] Add Nadja on the about page (#42021) @mnajdova
+- [website] Fix code block design by changing the `MarkdownElement` import (#42022) @danilo-leal
+- [wesbite] Remove duplicate MarkdownElement component (#42028) @danilo-leal
+
+All contributors of this release in alphabetical order: @5-tom, @aarongarciah, @bricker, @danilo-leal, @mnajdova, @oliviertassinari, @ryanhartwig, @sai6855, @ZeeshanTamboli
+
 ## v6.0.0-alpha.4
 
 <!-- generated comparing v6.0.0-alpha.3..next -->

package/HighlightedCode/HighlightedCode.d.ts

@@ -3,10 +3,12 @@ import { ButtonProps } from '@mui/material/Button';
 import { SxProps } from '@mui/material/styles';
 export interface HighlightedCodeProps {
     code: string;
-    component?: React.ElementType;
     copyButtonHidden?: boolean;
     copyButtonProps?: ButtonProps;
     language: string;
+    parentComponent?: React.ElementType;
+    preComponent?: React.ElementType;
+    plainStyle?: boolean;
     sx?: SxProps;
 }
 export declare const HighlightedCode: React.ForwardRefExoticComponent<HighlightedCodeProps & React.RefAttributes<HTMLDivElement>>;

package/HighlightedCode/HighlightedCode.js

@@ -1,19 +1,42 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "component"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "plainStyle", "parentComponent", "preComponent"];
 import * as React from 'react';
 import prism from '@mui/internal-markdown/prism';
 import { NoSsr } from '@mui/base/NoSsr';
+import { styled } from '@mui/material/styles';
 import { useCodeCopy, CodeCopyButton } from '../CodeCopy';
 import { MarkdownElement } from '../MarkdownElement';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Pre = styled('pre')(({
+  theme
+}) => ({
+  margin: 0,
+  color: 'hsl(60deg 30% 96.08%)',
+  // fallback color until Prism's theme is loaded
+  WebkitOverflowScrolling: 'touch',
+  // iOS momentum scrolling.
+  maxWidth: 'calc(100vw - 32px)',
+  [theme.breakpoints.up('md')]: {
+    maxWidth: 'calc(100vw - 32px - 16px)'
+  },
+  '& code': _extends({}, theme.typography.caption, {
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: 400,
+    WebkitFontSmoothing: 'subpixel-antialiased'
+    // Reset for Safari
+    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+  })
+}));
 export const HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
   const {
       copyButtonHidden = false,
       copyButtonProps,
       code,
       language,
-      component: Component = MarkdownElement
+      plainStyle,
+      parentComponent: Component = plainStyle ? 'div' : MarkdownElement,
+      preComponent: PreComponent = plainStyle ? Pre : 'pre'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const renderedCode = React.useMemo(() => {
@@ -30,7 +53,7 @@ export const HighlightedCode = /*#__PURE__*/React.forwardRef(function Highlighte
         children: /*#__PURE__*/_jsx(CodeCopyButton, _extends({
           code: code
         }, copyButtonProps))
-      }), /*#__PURE__*/_jsx("pre", {
+      }), /*#__PURE__*/_jsx(PreComponent, {
         children: /*#__PURE__*/_jsx("code", {
           className: `language-${language}`
           // eslint-disable-next-line react/no-danger

package/branding/brandingTheme.js

@@ -218,20 +218,17 @@ export const getDesignTokens = mode => ({
     },
     body1: {
       fontSize: defaultTheme.typography.pxToRem(16),
-      // 16px
       lineHeight: 24 / 16,
       letterSpacing: 0
     },
     body2: {
       fontSize: defaultTheme.typography.pxToRem(14),
-      // 14px
       lineHeight: 21 / 14,
       letterSpacing: 0
     },
     caption: {
       display: 'inline-block',
       fontSize: defaultTheme.typography.pxToRem(12),
-      // 12px
       lineHeight: 18 / 12,
       letterSpacing: 0,
       fontWeight: 700
@@ -380,7 +377,7 @@ export function getThemedComponents() {
               transform: 'translateX(2px)'
             }
           }, ownerState.size === 'small' && {
-            padding: theme.spacing('6px', 1),
+            padding: theme.spacing('6px', 1.5),
             fontFamily: theme.typography.fontFamily,
             fontSize: defaultTheme.typography.pxToRem(13),
             fontWeight: theme.typography.fontWeightSemiBold,

package/node/HighlightedCode/HighlightedCode.js

@@ -5,24 +5,47 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HighlightedCode = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _prism = _interopRequireDefault(require("@mui/internal-markdown/prism"));
 var _NoSsr = require("@mui/base/NoSsr");
+var _styles = require("@mui/material/styles");
 var _CodeCopy = require("../CodeCopy");
 var _MarkdownElement = require("../MarkdownElement");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "component"];
+const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "plainStyle", "parentComponent", "preComponent"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Pre = (0, _styles.styled)('pre')(({
+  theme
+}) => ({
+  margin: 0,
+  color: 'hsl(60deg 30% 96.08%)',
+  // fallback color until Prism's theme is loaded
+  WebkitOverflowScrolling: 'touch',
+  // iOS momentum scrolling.
+  maxWidth: 'calc(100vw - 32px)',
+  [theme.breakpoints.up('md')]: {
+    maxWidth: 'calc(100vw - 32px - 16px)'
+  },
+  '& code': (0, _extends2.default)({}, theme.typography.caption, {
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: 400,
+    WebkitFontSmoothing: 'subpixel-antialiased'
+    // Reset for Safari
+    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+  })
+}));
 const HighlightedCode = exports.HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
   const {
       copyButtonHidden = false,
       copyButtonProps,
       code,
       language,
-      component: Component = _MarkdownElement.MarkdownElement
+      plainStyle,
+      parentComponent: Component = plainStyle ? 'div' : _MarkdownElement.MarkdownElement,
+      preComponent: PreComponent = plainStyle ? Pre : 'pre'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const renderedCode = React.useMemo(() => {
@@ -39,7 +62,7 @@ const HighlightedCode = exports.HighlightedCode = /*#__PURE__*/React.forwardRef(
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeCopy.CodeCopyButton, (0, _extends2.default)({
           code: code
         }, copyButtonProps))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreComponent, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
           className: `language-${language}`
           // eslint-disable-next-line react/no-danger

package/node/branding/brandingTheme.js

@@ -228,20 +228,17 @@ const getDesignTokens = mode => ({
     },
     body1: {
       fontSize: defaultTheme.typography.pxToRem(16),
-      // 16px
       lineHeight: 24 / 16,
       letterSpacing: 0
     },
     body2: {
       fontSize: defaultTheme.typography.pxToRem(14),
-      // 14px
       lineHeight: 21 / 14,
       letterSpacing: 0
     },
     caption: {
       display: 'inline-block',
       fontSize: defaultTheme.typography.pxToRem(12),
-      // 12px
       lineHeight: 18 / 12,
       letterSpacing: 0,
       fontWeight: 700
@@ -391,7 +388,7 @@ function getThemedComponents() {
               transform: 'translateX(2px)'
             }
           }, ownerState.size === 'small' && {
-            padding: theme.spacing('6px', 1),
+            padding: theme.spacing('6px', 1.5),
             fontFamily: theme.typography.fontFamily,
             fontSize: defaultTheme.typography.pxToRem(13),
             fontWeight: theme.typography.fontWeightSemiBold,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "6.0.0-alpha.4",
+  "version": "6.0.0-alpha.5",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@babel/runtime": "^7.24.4",
     "clipboard-copy": "^4.0.1",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
     "@mui/internal-markdown": "^1.0.3"