diff --git a/docs/src/app/(public)/(content)/react/components/alert-dialog/page.mdx b/docs/src/app/(public)/(content)/react/components/alert-dialog/page.mdx index 242ad9df4f..a48f488180 100644 --- a/docs/src/app/(public)/(content)/react/components/alert-dialog/page.mdx +++ b/docs/src/app/(public)/(content)/react/components/alert-dialog/page.mdx @@ -39,7 +39,7 @@ import { AlertDialog } from '@base-ui-components/react/alert-dialog'; In order to open a dialog using a menu, control the dialog state and open it imperatively using the `onClick` handler on the menu item. -Make sure to also use the dialog’s `finalFocus` prop to return focus back to the menu trigger. +Make sure to also use the dialog's `finalFocus` prop to return focus back to the menu trigger. ```tsx {12-13,17-18,24-25,28-29} title="Connecting a dialog to a menu" import * as React from 'react'; diff --git a/docs/src/app/(public)/(content)/react/components/dialog/page.mdx b/docs/src/app/(public)/(content)/react/components/dialog/page.mdx index 8c4d8d0da9..112885911a 100644 --- a/docs/src/app/(public)/(content)/react/components/dialog/page.mdx +++ b/docs/src/app/(public)/(content)/react/components/dialog/page.mdx @@ -76,7 +76,7 @@ return ( ); ``` -It’s also common to use `onOpenChange` if your app needs to do something when the dialog is closed or opened. This is recommended over `React.useEffect` when reacting to state changes. +It's also common to use `onOpenChange` if your app needs to do something when the dialog is closed or opened. This is recommended over `React.useEffect` when reacting to state changes. ```tsx title="Running code when dialog state changes" -### Composing custom React components +## Composing custom React components Use the `render` prop to compose a Base UI part with your own React components. @@ -22,7 +22,7 @@ The code snippet below shows how to use a custom button instead. The custom component must forward the `ref`, and spread all the received props on its underlying DOM node. -### Composing multiple components +## Composing multiple components In situations where you need to compose multiple Base UI components with custom React components, `render` props can be nested as deeply as necessary. Working with Tooltip is a common example. @@ -48,7 +48,7 @@ Working with Tooltip is a common example. ``` -### Changing the default rendered element +## Changing the default rendered element You can also use the `render` prop to override the rendered element of the component. @@ -78,7 +78,7 @@ export default () => ( Each Base UI component renders the most appropriate element by default, and in most cases, rendering a different element is recommended only on a case-by-case basis. -### Render function +## Render function If you are working in an extremely performance-sensitive application, you might want to pass a function to the `render` prop instead of a React element. diff --git a/package.json b/package.json index d800820788..fc9ac9a363 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.{js,ts,tsx}\" --ignore-path .gitignore", - "markdownlint": "markdownlint-cli2 \"**/*.md\"", + "markdownlint": "markdownlint-cli2 \"**/*.{md,mdx}\"", "prettier": "pretty-quick --ignore-path .eslintignore", "prettier:all": "prettier --write . --ignore-path .eslintignore", "size:snapshot": "node --max-old-space-size=4096 ./scripts/sizeSnapshot/create",