From 84331e89af451e4d41c8a69bc28fc3037f06d72b Mon Sep 17 00:00:00 2001 From: Tyler Pfledderer Date: Tue, 29 Mar 2022 11:09:31 -0400 Subject: [PATCH 1/8] fix(flex): wrap example in section `Flex and Spacer vs Grid vs Stack` with `TableContainer` to prevent overflow in mobile screens --- pages/docs/components/layout/flex.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/pages/docs/components/layout/flex.mdx b/pages/docs/components/layout/flex.mdx index 419a99b059..ef444c1cb9 100644 --- a/pages/docs/components/layout/flex.mdx +++ b/pages/docs/components/layout/flex.mdx @@ -85,7 +85,8 @@ different widths differently. container and also have equal spacing between them. ```jsx - +// TableContainer is used as a wrapper to prevent overflow in mobile screens + Flex and Spacer: Full width, equal Spacing @@ -112,7 +113,7 @@ different widths differently. - + ``` A good use case for `Spacer` is to create a navbar with a signup/login button From bb6aa35bba1258267378c375afa7f8d7662f60d3 Mon Sep 17 00:00:00 2001 From: Tyler Pfledderer Date: Wed, 30 Mar 2022 09:25:11 -0400 Subject: [PATCH 2/8] fix(form-control): wrap example in section "Sample usage for a radio or checkbox group" with TableContainer to prevent overflow in mobile screens --- pages/docs/components/form/form-control.mdx | 27 ++++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/pages/docs/components/form/form-control.mdx b/pages/docs/components/form/form-control.mdx index 6c6c44eff4..401985151d 100644 --- a/pages/docs/components/form/form-control.mdx +++ b/pages/docs/components/form/form-control.mdx @@ -54,18 +54,21 @@ import { ### Sample usage for a radio or checkbox group ```jsx - - Favorite Naruto Character - - - Sasuke - Nagato - Itachi - Sage of the six Paths - - - Select only if you're a fan. - +// TableContainer is used as a wrapper to prevent overflow in mobile screens + + + Favorite Naruto Character + + + Sasuke + Nagato + Itachi + Sage of the six Paths + + + Select only if you're a fan. + + ``` ### Error message From 220ea91c34cec749b9fbc373b1611b8f4657aa3d Mon Sep 17 00:00:00 2001 From: Tyler Pfledderer Date: Wed, 30 Mar 2022 09:27:29 -0400 Subject: [PATCH 3/8] fix(number-input): wrap example in section "Changing the size of the input" with TableContainer to prevent overflow in mobile screens --- pages/docs/components/form/number-input.mdx | 69 +++++++++++---------- 1 file changed, 36 insertions(+), 33 deletions(-) diff --git a/pages/docs/components/form/number-input.mdx b/pages/docs/components/form/number-input.mdx index c5bbf23d62..3a5b8d36ac 100644 --- a/pages/docs/components/form/number-input.mdx +++ b/pages/docs/components/form/number-input.mdx @@ -183,39 +183,42 @@ Like the `Input` component, you can pass the `size` prop to change the size of the input. ```jsx - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +// TableContainer is used as a wrapper to prevent overflow in mobile screens + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` ### Changing the styles From 4fa943e87da26e6e508cd204c924f67e0a982859 Mon Sep 17 00:00:00 2001 From: Tyler Pfledderer Date: Wed, 30 Mar 2022 09:30:52 -0400 Subject: [PATCH 4/8] fix(code): wrap example in section "Colors" with TableContainer to prevent overflow in mobile screens --- pages/docs/components/data-display/code.mdx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/pages/docs/components/data-display/code.mdx b/pages/docs/components/data-display/code.mdx index 388b737a73..7e31ccbbcb 100644 --- a/pages/docs/components/data-display/code.mdx +++ b/pages/docs/components/data-display/code.mdx @@ -8,8 +8,8 @@ description: --- `Code` is a component used to display inline code. It is composed from the -[Box](/docs/components/layout/box) component with a font family of `mono` for displaying -code. +[Box](/docs/components/layout/box) component with a font family of `mono` for +displaying code. - - - - +// TableContainer is used as a wrapper to prevent overflow in mobile screens + + + + + + + ``` ## Props From 49e99a10f0e312053b8458e92378f2e5219a0638 Mon Sep 17 00:00:00 2001 From: Tyler Pfledderer Date: Wed, 30 Mar 2022 09:34:41 -0400 Subject: [PATCH 5/8] fix(toast): wrap example in section "Custom container styles" with TableContainer to prevent overflow in mobile screens --- pages/docs/components/feedback/toast.mdx | 25 +++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/pages/docs/components/feedback/toast.mdx b/pages/docs/components/feedback/toast.mdx index 77cebd4b1d..e60b70c994 100644 --- a/pages/docs/components/feedback/toast.mdx +++ b/pages/docs/components/feedback/toast.mdx @@ -240,17 +240,20 @@ function Example() { // Or via trigger // Style here will overwrite the entire style above return ( - + // TableContainer is used as a wrapper to prevent overflow in mobile screens + + + ) } ``` From 34ef223053e245f2ce617b2790938f941991f0c3 Mon Sep 17 00:00:00 2001 From: Tyler Pfledderer Date: Wed, 30 Mar 2022 09:36:46 -0400 Subject: [PATCH 6/8] fix(tooltip): wrap example in section "Placement" with TableContainer to prevent overflow in mobile screens --- pages/docs/components/overlay/tooltip.mdx | 173 +++++++++++----------- 1 file changed, 88 insertions(+), 85 deletions(-) diff --git a/pages/docs/components/overlay/tooltip.mdx b/pages/docs/components/overlay/tooltip.mdx index 085070bf1b..43ce38bc45 100644 --- a/pages/docs/components/overlay/tooltip.mdx +++ b/pages/docs/components/overlay/tooltip.mdx @@ -112,9 +112,9 @@ By default the `Tooltip` is not shown when it is around a disabled `Button`. ``` -To show the `Tooltip` on a disabled `Button` you need to provide the -`shouldWrapChildren` prop. This means that the `Button` is surrounded by a span -on which the `Tooltip` is pinned. You could simply add a margin to the `Tooltip` +To show the `Tooltip` on a disabled `Button` you need to provide the +`shouldWrapChildren` prop. This means that the `Button` is surrounded by a span +on which the `Tooltip` is pinned. You could simply add a margin to the `Tooltip` to have it more or less 'pinned' on the `Button` again. ```jsx @@ -123,107 +123,110 @@ to have it more or less 'pinned' on the `Button` again. ``` -> There's a case where the `borderRadius` of a button breaks when the button -> is in a `ButtonGroup` that has the `isAttached` prop set, and the tooltip -> has the `shouldWrapChildren` prop set. -> A workaround could be to pass the specific `borderRadius` depending on the -> `isDisabled` prop of the `Button`. +> There's a case where the `borderRadius` of a button breaks when the button is +> in a `ButtonGroup` that has the `isAttached` prop set, and the tooltip has the +> `shouldWrapChildren` prop set. A workaround could be to pass the specific +> `borderRadius` depending on the `isDisabled` prop of the `Button`. ```jsx - - + + - + - - + + ``` - ## Placement Using the `placement` prop you can adjust where your tooltip will be displayed. ```jsx - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +// TableContainer is used as a wrapper to prevent overflow in mobile screens + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` ## More examples From 7ddb537b6fd0314b49117597d052a7c9defce072 Mon Sep 17 00:00:00 2001 From: Tyler Pfledderer Date: Wed, 30 Mar 2022 09:40:12 -0400 Subject: [PATCH 7/8] fix(image): wrap example in section "Usage" with TableContainer to prevent overflow in mobile screens --- pages/docs/components/media-and-icons/image.mdx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/pages/docs/components/media-and-icons/image.mdx b/pages/docs/components/media-and-icons/image.mdx index 48542fbfb5..345d515412 100644 --- a/pages/docs/components/media-and-icons/image.mdx +++ b/pages/docs/components/media-and-icons/image.mdx @@ -27,9 +27,12 @@ import { Image } from '@chakra-ui/react' ## Usage ```jsx - - Dan Abramov - +// TableContainer is used as a wrapper to prevent overflow in mobile screens + + + Dan Abramov + + ``` ## Size From 2ec2365ccb903b57186fdd05a0a290b6fefffa6b Mon Sep 17 00:00:00 2001 From: Tyler Pfledderer Date: Wed, 30 Mar 2022 09:41:20 -0400 Subject: [PATCH 8/8] fix(image): wrap example in section "Size" with TableContainer to prevent overflow in mobile screens --- .../docs/components/media-and-icons/image.mdx | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/pages/docs/components/media-and-icons/image.mdx b/pages/docs/components/media-and-icons/image.mdx index 345d515412..a81944abe0 100644 --- a/pages/docs/components/media-and-icons/image.mdx +++ b/pages/docs/components/media-and-icons/image.mdx @@ -40,21 +40,24 @@ import { Image } from '@chakra-ui/react' The size of the image can be adjusted using the `boxSize` prop. ```jsx - - Dan Abramov - Dan Abramov - Dan Abramov - +// TableContainer is used as a wrapper to prevent overflow in mobile screens + + + Dan Abramov + Dan Abramov + Dan Abramov + + ``` ## Image with border radius