From 2dd10a982750bf7611ee9ee62650261243e2c7de Mon Sep 17 00:00:00 2001 From: millmason Date: Thu, 23 Jan 2025 17:44:05 -0500 Subject: [PATCH] docs(modal): fix small typos and add clarifying language --- .changeset/bright-cameras-visit.md | 2 ++ apps/docs/content/docs/components/modal.mdx | 18 +++++++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) create mode 100644 .changeset/bright-cameras-visit.md diff --git a/.changeset/bright-cameras-visit.md b/.changeset/bright-cameras-visit.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/bright-cameras-visit.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/apps/docs/content/docs/components/modal.mdx b/apps/docs/content/docs/components/modal.mdx index 5ce78a0de1..7483827186 100644 --- a/apps/docs/content/docs/components/modal.mdx +++ b/apps/docs/content/docs/components/modal.mdx @@ -1,13 +1,13 @@ --- title: "Modal" -description: "Display a dialog with a custom content that requires attention or provides additional information." +description: "Display a dialog with custom content that requires attention or provides additional information." --- import {modalContent} from "@/content/components/modal"; # Modal -Displays a dialog with a custom content that requires attention or provides additional information. +Displays a dialog with custom content that requires attention or provides additional information. @@ -64,7 +64,7 @@ HeroUI exports 5 modal-related components: When the modal opens: - Focus is bounded within the modal and set to the first tabbable element. -- Content behind a modal dialog is inert, meaning that users cannot interact with it. +- Content behind the modal dialog is inert, meaning that users cannot interact with it. @@ -78,13 +78,13 @@ By default, the modal can be closed by clicking on the overlay or pressing the < You can disable this behavior by setting the following properties: - Set the `isDismissable` property to `false` to prevent the modal from closing when clicking on the overlay. -- Set the `isKeyboardDismissDisabled` property to `true` to prevent the modal from closing when pressing the Esc key. +- Set the `isKeyboardDismissDisabled` property to `true` to prevent the modal from closing when pressing the Esc key. ### Modal placement -By default the modal is centered on screens higher than `sm` and is at the `bottom` of the screen on mobile. This placement is called `auto`, but +By default the modal is centered on screens larger than `sm` and is at the `bottom` of the screen on mobile. This placement is called `auto`, but you can change it by using the `placement` prop. > **Note**: The `top-center` and `bottom-center` positions mean that the modal is positioned at the top / bottom of the screen -> on mobile and at the center of the screen on desktop. +> on mobile, and at the center of the screen on desktop. ### Overflow scroll @@ -111,7 +111,7 @@ You can use the `scrollBehavior` prop to set the scroll behavior of the modal. ### With Form The `Modal` handles the focus within the modal content. It means that you can use the modal with -form elements without any problem. the focus returns to the trigger when the modal closes. +form elements without any problem. The focus returns to the trigger when the modal closes. @@ -140,13 +140,13 @@ Modal offers a `motionProps` property to customize the `enter` / `exit` animatio ### Draggable -Try to drag the header part. +Try to drag the modal by clicking on the modal header and dragging. ### Draggable Overflow -Set overflow to true can drag overflow the viewport. +Setting overflow to `true` allows users to drag the modal to a position where it overflows the viewport.