From b480de9f1e0302b6fb4f635c4687551c28a5c8fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Fri, 9 Aug 2024 10:39:17 +0200 Subject: [PATCH 001/149] Create MDX loading infra --- docs/next.config.mjs | 70 +- docs/package.json | 7 +- docs/pages/_app.js | 141 +- docs/pages/_document.js | 200 +-- .../pages/base-ui-react/components/[slug].tsx | 61 + .../base-ui-react/getting-started/[slug].tsx | 61 + docs/pages/global.css | 3 - docs/pages/index.tsx | 14 + docs/src/layout/MasterLayout.module.css | 5 + docs/src/layout/MasterLayout.tsx | 19 + docs/src/modules/common/AppBar.tsx | 130 ++ docs/src/modules/common/Box.tsx | 5 + .../common/GoogleAnalyticsScriptLoader.tsx | 38 + docs/src/modules/common/Navigation.module.css | 9 + docs/src/modules/common/Navigation.tsx | 131 ++ docs/src/modules/common/TableOfContents.tsx | 125 ++ .../components/InstallationInstructions.tsx | 18 + docs/src/styles/components/app-bar.css | 12 + docs/src/styles/components/badge.css | 14 + docs/src/styles/components/button.css | 43 + docs/src/styles/components/callout.css | 12 + docs/src/styles/components/code.css | 19 + docs/src/styles/components/dialog.css | 29 + .../src/styles/components/growing-chevron.css | 44 + docs/src/styles/components/icon-button.css | 43 + docs/src/styles/components/icon.css | 5 + docs/src/styles/components/kbd.css | 17 + docs/src/styles/components/link-block.css | 36 + docs/src/styles/components/link.css | 41 + docs/src/styles/components/list.css | 6 + docs/src/styles/components/pre.css | 12 + docs/src/styles/components/search-button.css | 35 + docs/src/styles/components/select.css | 60 + docs/src/styles/components/separator.css | 8 + docs/src/styles/components/table.css | 47 + docs/src/styles/components/text.css | 74 + docs/src/styles/components/textarea.css | 27 + docs/src/styles/components/toggle.css | 49 + docs/src/styles/mdx.css | 27 + docs/src/styles/reset.css | 9 + docs/src/styles/style.css | 37 + docs/src/styles/theme.css | 63 + docs/src/styles/utilities/align-items.css | 19 + docs/src/styles/utilities/align-self.css | 19 + docs/src/styles/utilities/display.css | 31 + docs/src/styles/utilities/flex-direction.css | 15 + docs/src/styles/utilities/gap.css | 35 + docs/src/styles/utilities/height.css | 35 + docs/src/styles/utilities/justify-content.css | 23 + docs/src/styles/utilities/margin.css | 299 ++++ docs/src/styles/utilities/padding.css | 299 ++++ docs/src/styles/utilities/position.css | 15 + docs/src/utils/getMdxPage.ts | 58 + docs/tsconfig.json | 4 +- pnpm-lock.yaml | 1380 ++++++++++++++++- 55 files changed, 3651 insertions(+), 387 deletions(-) create mode 100644 docs/pages/base-ui-react/components/[slug].tsx create mode 100644 docs/pages/base-ui-react/getting-started/[slug].tsx delete mode 100644 docs/pages/global.css create mode 100644 docs/pages/index.tsx create mode 100644 docs/src/layout/MasterLayout.module.css create mode 100644 docs/src/layout/MasterLayout.tsx create mode 100644 docs/src/modules/common/AppBar.tsx create mode 100644 docs/src/modules/common/Box.tsx create mode 100644 docs/src/modules/common/GoogleAnalyticsScriptLoader.tsx create mode 100644 docs/src/modules/common/Navigation.module.css create mode 100644 docs/src/modules/common/Navigation.tsx create mode 100644 docs/src/modules/common/TableOfContents.tsx create mode 100644 docs/src/modules/components/InstallationInstructions.tsx create mode 100644 docs/src/styles/components/app-bar.css create mode 100644 docs/src/styles/components/badge.css create mode 100644 docs/src/styles/components/button.css create mode 100644 docs/src/styles/components/callout.css create mode 100644 docs/src/styles/components/code.css create mode 100644 docs/src/styles/components/dialog.css create mode 100644 docs/src/styles/components/growing-chevron.css create mode 100644 docs/src/styles/components/icon-button.css create mode 100644 docs/src/styles/components/icon.css create mode 100644 docs/src/styles/components/kbd.css create mode 100644 docs/src/styles/components/link-block.css create mode 100644 docs/src/styles/components/link.css create mode 100644 docs/src/styles/components/list.css create mode 100644 docs/src/styles/components/pre.css create mode 100644 docs/src/styles/components/search-button.css create mode 100644 docs/src/styles/components/select.css create mode 100644 docs/src/styles/components/separator.css create mode 100644 docs/src/styles/components/table.css create mode 100644 docs/src/styles/components/text.css create mode 100644 docs/src/styles/components/textarea.css create mode 100644 docs/src/styles/components/toggle.css create mode 100644 docs/src/styles/mdx.css create mode 100644 docs/src/styles/reset.css create mode 100644 docs/src/styles/style.css create mode 100644 docs/src/styles/theme.css create mode 100644 docs/src/styles/utilities/align-items.css create mode 100644 docs/src/styles/utilities/align-self.css create mode 100644 docs/src/styles/utilities/display.css create mode 100644 docs/src/styles/utilities/flex-direction.css create mode 100644 docs/src/styles/utilities/gap.css create mode 100644 docs/src/styles/utilities/height.css create mode 100644 docs/src/styles/utilities/justify-content.css create mode 100644 docs/src/styles/utilities/margin.css create mode 100644 docs/src/styles/utilities/padding.css create mode 100644 docs/src/styles/utilities/position.css create mode 100644 docs/src/utils/getMdxPage.ts diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 7c81ba4718..21b1bb41c8 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -4,13 +4,7 @@ import * as url from 'url'; import * as fs from 'fs'; // eslint-disable-next-line no-restricted-imports import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js'; -import { findPages } from './src/utils/findPages.mjs'; -import { - LANGUAGES, - LANGUAGES_SSR, - LANGUAGES_IGNORE_PAGES, - LANGUAGES_IN_PROGRESS, -} from './config.js'; +import { LANGUAGES, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config.js'; const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url)); const workspaceRoot = path.resolve(currentDirectory, '../'); @@ -27,8 +21,6 @@ const rootPackage = loadPackageJson(); /** @type {import('next').NextConfig} */ const nextConfig = { - // Avoid conflicts with the other Next.js apps hosted under https://mui.com/ - assetPrefix: process.env.DEPLOY_ENV === 'development' ? undefined : '/base-ui/', env: { // docs-infra LIB_VERSION: rootPackage.version, @@ -89,9 +81,6 @@ const nextConfig = { }; }, distDir: 'export', - // Next.js provides a `defaultPathMap` argument, we could simplify the logic. - // However, we don't in order to prevent any regression in the `findPages()` method. - exportPathMap, transpilePackages: ['@mui/docs', '@mui/monorepo'], ...(process.env.NODE_ENV === 'production' ? { @@ -105,64 +94,7 @@ const nextConfig = { ]; }, // redirects only take effect in the development, not production (because of `next export`). - redirects: async () => [ - { - source: '/', - destination: '/base-ui/getting-started/', - permanent: false, - }, - ], }), }; -function exportPathMap() { - const allPages = findPages(); - /** - * @type {Record} - */ - const map = {}; - - /** - * @param {import('./src/utils/findPages.mjs').NextJSPage[]} pages - * @param {string} userLanguage - */ - function traverse(pages, userLanguage) { - const prefix = userLanguage === 'en' ? '' : `/${userLanguage}`; - - pages.forEach((page) => { - // The experiments pages are only meant for experiments, they shouldn't leak to production. - if (page.pathname.includes('/experiments/') && process.env.DEPLOY_ENV === 'production') { - return; - } - - if (!page.children) { - map[`${prefix}${page.pathname.replace(/^\/api-docs\/(.*)/, '/api/$1')}`] = { - page: page.pathname, - query: { - userLanguage, - }, - }; - return; - } - - traverse(page.children, userLanguage); - }); - } - - // We want to speed-up the build of pull requests. - if (process.env.PULL_REQUEST === 'true') { - // eslint-disable-next-line no-console - console.log('Considering only English for SSR'); - traverse(allPages, 'en'); - } else { - // eslint-disable-next-line no-console - console.log('Considering various locales for SSR'); - LANGUAGES_SSR.forEach((userLanguage) => { - traverse(allPages, userLanguage); - }); - } - - return map; -} - export default withDocsInfra(nextConfig); diff --git a/docs/package.json b/docs/package.json index 22429c67e7..04f84de3db 100644 --- a/docs/package.json +++ b/docs/package.json @@ -5,9 +5,8 @@ "author": "MUI Team", "license": "MIT", "scripts": { - "build": "rimraf ./export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192 next build --profile && pnpm build-sw", + "build": "rimraf ./export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192 next build --profile", "build:clean": "rimraf .next && pnpm build", - "build-sw": "node ./scripts/buildServiceWorker.js", "dev": "next dev --port 3005", "deploy": "git push -f material-ui-docs master:latest", "serve": "serve ./export -l 3010", @@ -46,13 +45,17 @@ "clsx": "^2.1.1", "core-js": "^3.37.1", "cross-env": "^7.0.3", + "esbuild": "^0.23.0", "fg-loadcss": "^3.1.0", "fs-extra": "^11.2.0", + "glob": "^11.0.0", + "gray-matter": "^4.0.3", "jss": "^10.10.0", "jss-plugin-template": "^10.10.0", "jss-rtl": "^0.3.0", "lodash": "^4.17.21", "lz-string": "^1.5.0", + "mdx-bundler": "^10.0.2", "next": "^14.2.5", "nprogress": "^0.2.0", "postcss": "^8.4.40", diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 0b89a05434..71b88b1bd3 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -15,87 +15,19 @@ import { CodeStylingProvider } from 'docs/src/modules/utils/codeStylingSolution' import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider'; import createEmotionCache from 'docs/src/createEmotionCache'; import findActivePage from 'docs/src/modules/utils/findActivePage'; -import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl'; import { CodeCopyProvider } from '@mui/docs/CodeCopy'; import { DocsProvider } from '@mui/docs/DocsProvider'; import configureSandboxDependencies from 'docs-base/src/utils/configureSandboxDependencies'; -import './global.css'; -import '../public/static/components-gallery/base-theme.css'; +import { mapTranslations } from '@mui/docs/i18n'; import config from '../config'; +import '../src/styles/style.css'; // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache(); configureSandboxDependencies(); -let reloadInterval; - -// Avoid infinite loop when "Upload on reload" is set in the Chrome sw dev tools. -function lazyReload() { - clearInterval(reloadInterval); - reloadInterval = setInterval(() => { - if (document.hasFocus()) { - window.location.reload(); - } - }, 100); -} - -// Inspired by -// https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users -function forcePageReload(registration) { - // console.log('already controlled?', Boolean(navigator.serviceWorker.controller)); - - if (!navigator.serviceWorker.controller) { - // The window client isn't currently controlled so it's a new service - // worker that will activate immediately. - return; - } - - // console.log('registration waiting?', Boolean(registration.waiting)); - if (registration.waiting) { - // SW is waiting to activate. Can occur if multiple clients open and - // one of the clients is refreshed. - registration.waiting.postMessage('skipWaiting'); - return; - } - - function listenInstalledStateChange() { - registration.installing.addEventListener('statechange', (event) => { - // console.log('statechange', event.target.state); - if (event.target.state === 'installed' && registration.waiting) { - // A new service worker is available, inform the user - registration.waiting.postMessage('skipWaiting'); - } else if (event.target.state === 'activated') { - // Force the control of the page by the activated service worker. - lazyReload(); - } - }); - } - - if (registration.installing) { - listenInstalledStateChange(); - return; - } - - // We are currently controlled so a new SW may be found... - // Add a listener in case a new SW is found, - registration.addEventListener('updatefound', listenInstalledStateChange); -} - -async function registerServiceWorker() { - if ( - 'serviceWorker' in navigator && - process.env.NODE_ENV === 'production' && - window.location.host.indexOf('mui.com') !== -1 - ) { - // register() automatically attempts to refresh the sw.js. - const registration = await navigator.serviceWorker.register('/sw.js'); - // Force the page reload for users. - forcePageReload(registration); - } -} - let dependenciesLoaded = false; function loadDependencies() { @@ -111,23 +43,12 @@ function loadDependencies() { ); } -if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') { - // eslint-disable-next-line no-console - console.log( - `%c - -███╗ ███╗ ██╗ ██╗ ██████╗ -████╗ ████║ ██║ ██║ ██╔═╝ -██╔████╔██║ ██║ ██║ ██║ -██║╚██╔╝██║ ██║ ██║ ██║ -██║ ╚═╝ ██║ ╚██████╔╝ ██████╗ -╚═╝ ╚═╝ ╚═════╝ ╚═════╝ +const PRODUCT_IDENTIFIER = { + metadata: 'Base UI', + name: 'Base UI', + versions: [{ text: `v${basePkgJson.version}`, current: true }], +}; -Tip: you can access the documentation \`theme\` object directly in the console. -`, - 'font-family:monospace;color:#1976d2;font-size:12px;', - ); -} function AppWrapper(props) { const { children, emotionCache, pageProps } = props; @@ -139,7 +60,6 @@ function AppWrapper(props) { React.useEffect(() => { loadDependencies(); - registerServiceWorker(); // Remove the server-side injected CSS. const jssStyles = document.querySelector('#jss-server-side'); @@ -148,18 +68,6 @@ function AppWrapper(props) { } }, []); - const productIdentifier = React.useMemo(() => { - if (productId === 'base-ui') { - return { - metadata: 'MUI Core', - name: 'Base UI', - versions: [{ text: `v${basePkgJson.version}`, current: true }], - }; - } - - return null; - }, [productId]); - const pageContextValue = React.useMemo(() => { const pages = basePages; const { activePage, activePageParents } = findActivePage(pages, router.pathname); @@ -168,30 +76,25 @@ function AppWrapper(props) { activePage, activePageParents, pages, - productIdentifier, + PRODUCT_IDENTIFIER, productId, productCategoryId, }; - }, [productId, productCategoryId, productIdentifier, router.pathname]); - - let fonts = []; - if (pathnameToLanguage(router.asPath).canonicalAs.match(/onepirate/)) { - fonts = [ - 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Work+Sans:wght@300;400&display=swap', - ]; - } + }, [productId, productCategoryId, router.pathname]); return ( - {fonts.map((font) => ( - - ))} - - + + - + @@ -217,7 +120,7 @@ AppWrapper.propTypes = { pageProps: PropTypes.object.isRequired, }; -export default function MyApp(props) { +export default function BaseUIDocsApp(props) { const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; const getLayout = Component.getLayout ?? ((page) => page); @@ -227,15 +130,18 @@ export default function MyApp(props) { ); } -MyApp.propTypes = { +BaseUIDocsApp.propTypes = { Component: PropTypes.elementType.isRequired, emotionCache: PropTypes.object, pageProps: PropTypes.object.isRequired, }; -MyApp.getInitialProps = async ({ ctx, Component }) => { +BaseUIDocsApp.getInitialProps = async ({ ctx, Component }) => { let pageProps = {}; + const req = require.context('docs/translations', false, /\.\/translations.*\.json$/); + const translations = mapTranslations(req); + if (Component.getInitialProps) { pageProps = await Component.getInitialProps(ctx); } @@ -243,6 +149,7 @@ MyApp.getInitialProps = async ({ ctx, Component }) => { return { pageProps: { userLanguage: ctx.query.userLanguage || 'en', + translations, ...pageProps, }, }; diff --git a/docs/pages/_document.js b/docs/pages/_document.js index 498ccf25d6..3b0d507030 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -1,19 +1,14 @@ import * as React from 'react'; -import Script from 'next/script'; -import { documentGetInitialProps } from '@mui/material-nextjs/v13-pagesRouter'; -import { ServerStyleSheet } from 'styled-components'; import Document, { Html, Head, Main, NextScript } from 'next/document'; -import GlobalStyles from '@mui/material/GlobalStyles'; -import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/material/styles'; -import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; -import createEmotionCache from 'docs/src/createEmotionCache'; -import { getMetaThemeColor } from '@mui/docs/branding'; +import { GoogleAnalyticsScriptLoader } from 'docs-base/src/modules/common/GoogleAnalyticsScriptLoader'; const PRODUCTION_GA = process.env.DEPLOY_ENV === 'production' || process.env.DEPLOY_ENV === 'staging'; const GOOGLE_ANALYTICS_ID_V4 = PRODUCTION_GA ? 'G-5NXDQLC2ZK' : 'G-XJ83JQEK7J'; +const ROOT_ADDRESS = 'https://base-ui.dev'; + export default class MyDocument extends Document { render() { const { canonicalAsServer, userLanguage } = this.props; @@ -21,206 +16,23 @@ export default class MyDocument extends Document { return ( - {/* - manifest.json provides metadata used when your web app is added to the - homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ - */} - {/* PWA primary color */} - - - {/* iOS Icon */} - {/* SEO */} - - {/* - Preconnect allows the browser to setup early connections before an HTTP request - is actually sent to the server. - This includes DNS lookups, TLS negotiations, TCP handshakes. - */} - - - - {/* ========== Font preload (prevent font flash) ============= */} - 6kb) - href="/static/fonts/GeneralSans-Semibold-subset.woff2" - as="font" - type="font/woff2" - crossOrigin="anonymous" - /> - + + + Subscribe + + + + Subscribe + + Are you sure you want to subscribe? + +
+ Yes + No +
+ + ); } diff --git a/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.tsx b/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.tsx index ca4104ba32..2259dd6762 100644 --- a/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.tsx +++ b/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.tsx @@ -2,118 +2,25 @@ import * as React from 'react'; import * as AlertDialog from '@base_ui/react/AlertDialog'; -import { useTheme } from '@mui/system'; +import classes from './styles.module.css'; export default function AlertDialogIntroduction() { return ( - - - Subscribe - - - Subscribe - - Are you sure you want to subscribe? - -
- Yes - No -
- - - - - ); -} - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -const grey = { - 900: '#0f172a', - 800: '#1e293b', - 700: '#334155', - 500: '#64748b', - 300: '#cbd5e1', - 200: '#e2e8f0', - 100: '#f1f5f9', - 50: '#f8fafc', -}; - -function Styles() { - // Replace this with your app logic for determining dark mode - const isDarkMode = useIsDarkMode(); - - return ( - + + + Subscribe + + + + Subscribe + + Are you sure you want to subscribe? + +
+ Yes + No +
+ + ); } diff --git a/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.tsx.preview b/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.tsx.preview new file mode 100644 index 0000000000..984f99bace --- /dev/null +++ b/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/index.tsx.preview @@ -0,0 +1,16 @@ + + + Subscribe + + + + Subscribe + + Are you sure you want to subscribe? + +
+ Yes + No +
+ + \ No newline at end of file diff --git a/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/styles.module.css b/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/styles.module.css new file mode 100644 index 0000000000..4b81e9b745 --- /dev/null +++ b/docs/data/base/components/alert-dialog/AlertDialogIntroduction/css/styles.module.css @@ -0,0 +1,93 @@ +.popup { + background: #f8fafc; + border: 1px solid #f1f5f9; + min-width: 400px; + border-radius: 4px; + box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px; + position: fixed; + top: 50%; + left: 50%; + font-family: IBM Plex Sans; + transform: translate(-50%, -50%); + padding: 16px; + z-index: 2100; + + :global(.dark) & { + color: #0f172a; + border-color: #334155; + } +} + +.trigger { + background-color: #0f172a; + color: #f8fafc; + padding: 8px 16px; + border-radius: 4px; + border: none; + font-family: + IBM Plex Sans, + sans-serif; + + &:hover { + background-color: #334155; + + :global(.dark) & { + background-color: #e2e8f0; + } + } + + :global(.dark) & { + background-color: #f8fafc; + color: #0f172a; + } +} + +.close { + background-color: transparent; + border: 1px solid #64748b; + color: #0f172a; + padding: 8px 16px; + border-radius: 4px; + font-family: + IBM Plex Sans, + sans-serif; + min-width: 80px; + + &:hover { + background-color: #e2e8f0; + + :global(.dark) & { + background-color: #334155; + } + } + + :global(.dark) & { + border-color: #cbd5e1; + color: #f8fafc; + } +} + +.controls { + display: flex; + flex-direction: row-reverse; + background: #f1f5f9; + gap: 8px; + padding: 16px; + margin: 32px -16px -16px; + + :global(.dark) & { + background: #1e293b; + } +} + +.title { + font-size: 1.25rem; +} + +.backdrop { + background: rgba(0, 0, 0, 0.35); + position: fixed; + inset: 0; + backdrop-filter: blur(4px); + z-index: 2000; +} diff --git a/docs/src/utils/loadDemo.ts b/docs/src/utils/loadDemo.ts index 401722fc79..16a58fb159 100644 --- a/docs/src/utils/loadDemo.ts +++ b/docs/src/utils/loadDemo.ts @@ -108,6 +108,8 @@ async function loadSimpleDemo(path: string, variantName: string): Promise Date: Mon, 19 Aug 2024 12:12:34 +0200 Subject: [PATCH 060/149] Callout component --- docs/app/(content)/styles.module.css | 266 +++++++++--------- .../click-away-listener.mdx | 9 +- docs/data/base/components/dialog/dialog.mdx | 7 +- .../base/components/focus-trap/focus-trap.mdx | 5 +- docs/data/base/components/no-ssr/no-ssr.mdx | 7 +- .../components/number-field/number-field.mdx | 7 +- docs/data/base/components/popover/popover.mdx | 7 +- docs/data/base/components/portal/portal.mdx | 13 +- .../toggle-button-group.mdx | 7 +- .../getting-started/overview/overview.mdx | 5 +- .../getting-started/quickstart/quickstart.mdx | 7 +- .../base/getting-started/support/support.mdx | 7 +- .../data/base/getting-started/usage/usage.mdx | 4 +- .../next-js-app-router/next-js-app-router.md | 4 +- docs/src/modules/common/Callout.module.css | 31 ++ docs/src/modules/common/Callout.tsx | 13 + docs/src/modules/common/MDXComponents.tsx | 2 + 17 files changed, 230 insertions(+), 171 deletions(-) create mode 100644 docs/src/modules/common/Callout.module.css create mode 100644 docs/src/modules/common/Callout.tsx diff --git a/docs/app/(content)/styles.module.css b/docs/app/(content)/styles.module.css index 97f42c284c..f1e95aca29 100644 --- a/docs/app/(content)/styles.module.css +++ b/docs/app/(content)/styles.module.css @@ -1,150 +1,152 @@ -.content { - max-width: 714px; - padding-top: var(--space-9); - padding-left: var(--space-6); - padding-right: var(--space-6); - margin-left: auto; - margin-right: auto; +@layer mdx { + .content { + max-width: 714px; + padding-top: var(--space-9); + padding-left: var(--space-6); + padding-right: var(--space-6); + margin-left: auto; + margin-right: auto; - p { - margin: 0; - margin-bottom: var(--space-4); - font-size: var(--fs-4); - line-height: 23px; - font-family: var(--ff-sans); - font-weight: var(--fw-1); - color: var(--gray-text-2); - scroll-margin-top: 80px; - } + p { + margin: 0; + margin-bottom: var(--space-4); + font-size: var(--fs-4); + line-height: 23px; + font-family: var(--ff-sans); + font-weight: var(--fw-1); + color: var(--gray-text-2); + scroll-margin-top: 80px; + } - ul { - margin: 0; - margin-bottom: var(--space-4); - font-size: var(--fs-4); - line-height: 23px; - font-family: var(--ff-sans); - font-weight: var(--fw-1); - color: var(--gray-text-2); - scroll-margin-top: 80px; - } + ul { + margin: 0; + margin-bottom: var(--space-4); + font-size: var(--fs-4); + line-height: 23px; + font-family: var(--ff-sans); + font-weight: var(--fw-1); + color: var(--gray-text-2); + scroll-margin-top: 80px; + } - ul p { - margin-bottom: 0; - } + ul p { + margin-bottom: 0; + } - h1 { - margin: 0; - font-family: var(--ff-sans); - color: var(--gray-text-2); - scroll-margin-top: 80px; - font-size: var(--fs-8); - line-height: 37px; - font-weight: var(--fw-2); - letter-spacing: -0.042em; - text-indent: -1.1px; - margin-bottom: var(--space-2); - } + h1 { + margin: 0; + font-family: var(--ff-sans); + color: var(--gray-text-2); + scroll-margin-top: 80px; + font-size: var(--fs-8); + line-height: 37px; + font-weight: var(--fw-2); + letter-spacing: -0.042em; + text-indent: -1.1px; + margin-bottom: var(--space-2); + } - h2 { - margin: 0; - font-family: var(--ff-sans); - color: var(--gray-text-2); - scroll-margin-top: 80px; - margin-top: var(--space-7); - margin-bottom: var(--space-3); - font-size: var(--fs-6); - line-height: 24px; - font-weight: 500; - letter-spacing: -0.018em; - } + h2 { + margin: 0; + font-family: var(--ff-sans); + color: var(--gray-text-2); + scroll-margin-top: 80px; + margin-top: var(--space-7); + margin-bottom: var(--space-3); + font-size: var(--fs-6); + line-height: 24px; + font-weight: 500; + letter-spacing: -0.018em; + } - h3 { - margin: 0; - font-family: var(--ff-sans); - color: var(--gray-text-2); - scroll-margin-top: 80px; - margin-top: var(--space-7); - margin-bottom: var(--space-2); - font-size: var(--fs-5); - line-height: 23px; - font-weight: var(--fw-2); - letter-spacing: -0.012em; - } + h3 { + margin: 0; + font-family: var(--ff-sans); + color: var(--gray-text-2); + scroll-margin-top: 80px; + margin-top: var(--space-7); + margin-bottom: var(--space-2); + font-size: var(--fs-5); + line-height: 23px; + font-weight: var(--fw-2); + letter-spacing: -0.012em; + } - code { - font-family: var(--ff-code); - } + code { + font-family: var(--ff-code); + } - :not(pre) > code { - margin-left: 1px; - margin-right: 1px; - box-sizing: border-box; - font-family: var(--ff-code); - color: var(--gray-text-2); - font-size: 0.89em; - padding-right: var(--space-1); - padding-bottom: 2px; - padding-left: var(--space-1); - white-space: break-spaces; - border: 1px solid var(--gray-outline-1); - border-radius: 6px; - position: relative; - top: -0.5px; - } + :not(pre) > code { + margin-left: 1px; + margin-right: 1px; + box-sizing: border-box; + font-family: var(--ff-code); + color: var(--gray-text-2); + font-size: 0.89em; + padding-right: var(--space-1); + padding-bottom: 2px; + padding-left: var(--space-1); + white-space: break-spaces; + border: 1px solid var(--gray-outline-1); + border-radius: 6px; + position: relative; + top: -0.5px; + } - figure { - box-sizing: border-box; - margin-left: 0; - margin-right: 0; - margin-top: var(--space-5); - margin-bottom: var(--space-5); - } + figure { + box-sizing: border-box; + margin-left: 0; + margin-right: 0; + margin-top: var(--space-5); + margin-bottom: var(--space-5); + } - pre { - box-sizing: border-box; - overflow: hidden; - margin: 0; - padding: var(--space-3) var(--space-4); - font-family: var(--ff-code); - font-size: var(--fs-2); - line-height: 20px; - white-space: pre; - color: var(--gray-text-1); - background: #fefcfb; - border: 1px solid var(--gray-outline-2); - border-radius: 12px; - } + pre { + box-sizing: border-box; + overflow: hidden; + margin: 0; + padding: var(--space-3) var(--space-4); + font-family: var(--ff-code); + font-size: var(--fs-2); + line-height: 20px; + white-space: pre; + color: var(--gray-text-1); + background: #fefcfb; + border: 1px solid var(--gray-outline-2); + border-radius: 12px; + } - strong { - font-weight: var(--fw-2); - } + strong { + font-weight: var(--fw-2); + } - a { - text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-thickness: 1px; - text-underline-offset: calc(0.1em + 3px); - color: inherit; - position: relative; - z-index: 0; - } + a { + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-thickness: 1px; + text-underline-offset: calc(0.1em + 3px); + color: inherit; + position: relative; + z-index: 0; + } - @media screen and (hover: hover) { - a:hover { - text-decoration: none; + @media screen and (hover: hover) { + a:hover { + text-decoration: none; + } } - } - @media screen and (hover: hover) { - a:hover::after { - content: ''; - width: calc(100% + 6px); - height: calc(100% + 8px); - top: -4px; - left: -3px; - position: absolute; - background-color: var(--gray-container-1); - z-index: -1; + @media screen and (hover: hover) { + a:hover::after { + content: ''; + width: calc(100% + 6px); + height: calc(100% + 8px); + top: -4px; + left: -3px; + position: absolute; + background-color: var(--gray-container-1); + z-index: -1; + } } } } diff --git a/docs/data/base/components/click-away-listener/click-away-listener.mdx b/docs/data/base/components/click-away-listener/click-away-listener.mdx index 75a4e22d78..dad2b9c859 100644 --- a/docs/data/base/components/click-away-listener/click-away-listener.mdx +++ b/docs/data/base/components/click-away-listener/click-away-listener.mdx @@ -9,7 +9,7 @@ githubLabel: 'component: ClickAwayListener' { - The Click-Away Listener component detects when a click event happens outside of its child element. + 'The Click-Away Listener component detects when a click event happens outside of its child element.' } @@ -50,9 +50,10 @@ You can set the component to listen for **leading events** (the start of a click -:::warning -When the component is set to listen for leading events, interactions with the scrollbar are ignored. -::: + + When the component is set to listen for leading events, interactions with the scrollbar are + ignored. + ## Accessibility diff --git a/docs/data/base/components/dialog/dialog.mdx b/docs/data/base/components/dialog/dialog.mdx index 156fc444aa..007c7a6762 100644 --- a/docs/data/base/components/dialog/dialog.mdx +++ b/docs/data/base/components/dialog/dialog.mdx @@ -83,9 +83,10 @@ By default Dialogs are modal. {/* ... */} ``` -:::warning -To make the Dialog fully modal, you must have a Backdrop component and style it so it covers the entire viewport, blocking pointer interaction with other elements on the page. -::: + + To make the Dialog fully modal, you must have a Backdrop component and style it so it covers the + entire viewport, blocking pointer interaction with other elements on the page. + ## Closing the dialog diff --git a/docs/data/base/components/focus-trap/focus-trap.mdx b/docs/data/base/components/focus-trap/focus-trap.mdx index 630cdca591..966a086426 100644 --- a/docs/data/base/components/focus-trap/focus-trap.mdx +++ b/docs/data/base/components/focus-trap/focus-trap.mdx @@ -41,13 +41,14 @@ Press the **Open** button and then use the Tab key to mov -:::error + Because the Focus Trap component blocks interaction with the rest of the app by default, the demo above also behaves this way. If you leave the Box open in the demo, you won't be able to click on other buttons in this document. Click **Close** in the demo to resolve this. The next section explains how to change this default behavior. -::: + + ## Customization diff --git a/docs/data/base/components/no-ssr/no-ssr.mdx b/docs/data/base/components/no-ssr/no-ssr.mdx index bdb3d27623..563a5b69cb 100644 --- a/docs/data/base/components/no-ssr/no-ssr.mdx +++ b/docs/data/base/components/no-ssr/no-ssr.mdx @@ -46,6 +46,7 @@ The following demo shows how to use the `defer` prop to prioritize rendering the -:::warning -When using No-SSR in this way, React applies [two commits](https://react.dev/learn/render-and-commit) instead of one. -::: + + When using No-SSR in this way, React applies [two + commits](https://react.dev/learn/render-and-commit) instead of one. + diff --git a/docs/data/base/components/number-field/number-field.mdx b/docs/data/base/components/number-field/number-field.mdx index e7893f46f2..10cc0a1f1f 100644 --- a/docs/data/base/components/number-field/number-field.mdx +++ b/docs/data/base/components/number-field/number-field.mdx @@ -194,9 +194,10 @@ The pointer is locked while scrubbing, allowing the user to scrub infinitely wit In your CSS, ensure any `