diff --git a/packages/react-docs/pages/components/popover/controlled.js b/packages/react-docs/pages/components/popover/controlled.js new file mode 100644 index 0000000000..827230b41d --- /dev/null +++ b/packages/react-docs/pages/components/popover/controlled.js @@ -0,0 +1,30 @@ +import { Button, Flex, Popover, PopoverContent, PopoverTrigger, Switch, Text } from '@tonic-ui/react'; +import { useToggle } from '@tonic-ui/react-hooks'; +import React from 'react'; + +const App = () => { + const [on, toggle] = useToggle(false); + + return ( + <> + + + + + + + + + This is a controlled popover + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/popover/faq-flip-modifier.js b/packages/react-docs/pages/components/popover/faq-flip-modifier.js new file mode 100644 index 0000000000..5b2166dfd7 --- /dev/null +++ b/packages/react-docs/pages/components/popover/faq-flip-modifier.js @@ -0,0 +1,83 @@ +import { + Box, + Checkbox, + Divider, + Flex, + Popover, + PopoverContent, + PopoverTrigger, + Scrollbar, + Space, + Text, + TextLabel, + useColorMode, + useColorStyle, +} from '@tonic-ui/react'; +import { useToggle } from '@tonic-ui/react-hooks'; +import React from 'react'; + +const FormGroup = (props) => ( + +); + +const App = () => { + const [colorMode] = useColorMode(); + const [colorStyle] = useColorStyle({ colorMode }); + const [isFlipModifierEnabled, toggleIsFlipModifierEnabled] = useToggle(true); + + return ( + <> + + + Modifiers + + + + + toggleIsFlipModifierEnabled()} + /> + + Enable flip modifier + + + + + + + + + Reference + + + + Popover + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/popover/faq-use-portal.js b/packages/react-docs/pages/components/popover/faq-use-portal.js new file mode 100644 index 0000000000..5f904698b3 --- /dev/null +++ b/packages/react-docs/pages/components/popover/faq-use-portal.js @@ -0,0 +1,19 @@ +import { Button, Popover, PopoverContent, PopoverTrigger } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + Popover + + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover/focus-control-initial-focus-ref.js b/packages/react-docs/pages/components/popover/focus-control-initial-focus-ref.js new file mode 100644 index 0000000000..a7bf75f096 --- /dev/null +++ b/packages/react-docs/pages/components/popover/focus-control-initial-focus-ref.js @@ -0,0 +1,41 @@ +import { Button, Input, Popover, PopoverBody, PopoverContent, PopoverTrigger, Stack, Text } from '@tonic-ui/react'; +import React, { useRef } from 'react'; + +const App = () => { + const initialFocusRef1 = useRef(); + const initialFocusRef2 = useRef(); + + return ( + + + + + + + + + + + + + + + Non-interactive Trigger + + + + + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/popover/focus-control-return-focus-on-close.js b/packages/react-docs/pages/components/popover/focus-control-return-focus-on-close.js new file mode 100644 index 0000000000..9adf55e1f0 --- /dev/null +++ b/packages/react-docs/pages/components/popover/focus-control-return-focus-on-close.js @@ -0,0 +1,47 @@ +import { Button, Input, Popover, PopoverBody, PopoverContent, PopoverTrigger, Stack, Text } from '@tonic-ui/react'; +import React, { useRef } from 'react'; + +const App = () => { + const initialFocusRef1 = useRef(); + const initialFocusRef2 = useRef(); + + return ( + + + + + + + + + + + + + + + Non-interactive Trigger + + + + + + + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/popover/function-as-child-component.js b/packages/react-docs/pages/components/popover/function-as-child-component.js new file mode 100644 index 0000000000..4c70e7ae9f --- /dev/null +++ b/packages/react-docs/pages/components/popover/function-as-child-component.js @@ -0,0 +1,41 @@ +import { Button, Flex, Grid, Link, Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + {({ isOpen, onClose }) => ( + <> + + + + + + Popover Header + + + Popover Body + + + + Learn more + + + + + + + + + )} + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover.page.mdx b/packages/react-docs/pages/components/popover/index.page.mdx similarity index 57% rename from packages/react-docs/pages/components/popover.page.mdx rename to packages/react-docs/pages/components/popover/index.page.mdx index 2a73e3337b..d088d76ca2 100644 --- a/packages/react-docs/pages/components/popover.page.mdx +++ b/packages/react-docs/pages/components/popover/index.page.mdx @@ -79,45 +79,11 @@ If you need to pass more than one child element or non-element children, wrap th Pass `isOpen` to the `Popover` component to control the state of the popover. -```jsx -function Example() { - const [on, toggle] = useToggle(false); - - return ( - <> - - - - - - - - - This is a controlled popover - - - - ); -} -``` +{render('./controlled')} Popover is uncontrolled by default. You can set `defaultIsOpen` to `true` to have the popover open for the first render. -```jsx - - - - - - This is an uncontrolled popover - - -``` +{render('./uncontrolled')} ### Focus control @@ -125,133 +91,35 @@ Popover is uncontrolled by default. You can set `defaultIsOpen` to `true` to hav The focus status will send to `PopoverContent` when `Popover` opens. You can send the focus status to a specific element when it opens by passing the `initialFocusRef` prop. -```jsx -function Example() { - const initialFocusRef1 = React.useRef(); - const initialFocusRef2 = React.useRef(); - - return ( - - - - - - - - - - - - - - - Non-interactive Trigger - - - - - - - - - - ); -} -``` +{render('./focus-control-initial-focus-ref')} #### Focus an element when popover closes When the `Popover` is closed, the focus status is sent to the `PopoverTrigger`. If you need to prevent the `Popover` from returning the focus status to `PopoverTrigger`, you can set the `returnFocusOnClose` prop to `false`. -```jsx -function Example() { - const initialFocusRef1 = React.useRef(); - const initialFocusRef2 = React.useRef(); - - return ( - - - - - - - - - - - - - - - Non-interactive Trigger - - - - - - - - - - ); -} -``` +{render('./focus-control-return-focus-on-close')} ### Hide the popover To hide a popover in your app, you can pass an empty value to the children of the `PopoverContent` component or use the `disabled` prop. Here are examples: -```jsx - - - - - - - - - - - - - - - Popover - - - -``` +{render('./popover-disabled')} ### Hide the arrow of the popover To remove the arrow from a popover, you can pass `arrow={false}` to the `Popover` component. -```jsx - - - - - - Popover - - -``` +{render('./popover-arrow-disabled')} + +### Popover around disabled button + +By default the `Popover` is not shown when it is around a disabled `Button`. + +{render('./popover-around-disabled-button')} + +To show the `Popover` on a disabled `Button`, pass the `shouldWrapChildren` prop. + +{render('./popover-around-wrapped-disabled-button')} ### Activating a popover on hover @@ -259,16 +127,7 @@ To activate a popover on hover, set the `trigger` prop to `"hover"`. This will d Once the popover is displayed, the cursor can be moved freely between the `PopoverTrigger` and `PopoverContent`. The popover will remain open until the cursor is moved away from the `PopoverContent`. -```jsx - - - Text content - - - Popover - - -``` +{render('./popover-trigger-hover')} ### Adjust popover positioning @@ -284,57 +143,7 @@ The `skidding` number determines the displacement of the `PopoverContent` from t The `distance` number controls the distance between the `PopoverContent` and the `PopoverTrigger` and is measured in pixels. -```jsx noInline -render(() => { - const [skidding, setSkidding] = React.useState(0); - const [distance, setDistance] = React.useState(12); - - return ( - <> - - - skidding - - - setSkidding(Number(e.target.value))} - /> - {skidding} - - - - - distance - - - setDistance(Number(e.target.value))} - /> - {distance} - - - - - Hover Me - - - Popover - - - - ); -}); -``` +{render('./positioning-offset')} #### Using the `nextToCursor` prop @@ -342,16 +151,7 @@ The `nextToCursor` prop positions the popover next to the cursor. Note that this prop only works when the `trigger` prop is set to `"hover"`. -```jsx - - - Hover Me - - - Popover - - -``` +{render('./positioning-next-cursor')} #### Using the `followCursor` prop @@ -359,57 +159,13 @@ The `followCursor` prop makes the popover follow the cursor as it moves. Note that this prop only works when the `trigger` prop is set to `"hover"`. -```jsx - - - Hover Me - - - Popover - - -``` +{render('./positioning-follow-cursor')} ### Context API To access the internal state of the popover, you can use the Function as Child Component (FaCC) pattern or use the `usePopover` hook. -```jsx - - {({ isOpen, onClose }) => ( - <> - - - - - - Popover Header - - - Popover Body - - - - Learn more - - - - - - - - - )} - -``` +{render('./function-as-child-component')} ### Placement @@ -426,36 +182,7 @@ Use the `placement` prop to control the placement of the popover. ``` -```jsx - - - {['top-start', 'top', 'top-end', - 'right-start', 'right', 'right-end', - 'bottom-start', 'bottom', 'bottom-end', - 'left-start', 'left', 'left-end' - ].map(placement => ( - - - - - - Popover - - - ))} - - -``` +{render('./placement')} ## Commonly Asked Questions @@ -465,20 +192,7 @@ By default, the `Popover` component positions the popover relative to its parent To address this issue, you can pass `PopperProps={{ usePortal: true }}` to `PopoverContent` to make it positioned on the document root. -```jsx - - - - - - Popover - - -``` +{render('./faq-use-portal')} ### Automatically adjusting popover placement with the `flip` modifier @@ -486,71 +200,7 @@ The `flip` modifier is a useful feature that allows for automatic adjustment of In the following example, the popover's placement is initially set to `top`. However, if the placement is not suitable due to space constraints, the opposite `bottom` placement will be used instead. -```jsx noInline -const FormGroup = (props) => ( - -); - -render(() => { - const [colorMode] = useColorMode(); - const [colorStyle] = useColorStyle({ colorMode }); - const [isFlipModifierEnabled, toggleIsFlipModifierEnabled] = useToggle(true); - - return ( - <> - - - Modifiers - - - - - toggleIsFlipModifierEnabled()} - /> - - Enable flip modifier - - - - - - - - - Reference - - - - Popover - - - - - - ); -}); -``` +{render('./faq-flip-modifier')} ## Accessibility diff --git a/packages/react-docs/pages/components/popover/placement.js b/packages/react-docs/pages/components/popover/placement.js new file mode 100644 index 0000000000..bb673fe7ea --- /dev/null +++ b/packages/react-docs/pages/components/popover/placement.js @@ -0,0 +1,35 @@ +import { Box, Button, Grid, Popover, PopoverContent, PopoverTrigger } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + {['top-start', 'top', 'top-end', + 'right-start', 'right', 'right-end', + 'bottom-start', 'bottom', 'bottom-end', + 'left-start', 'left', 'left-end' + ].map(placement => ( + + + + + + Popover + + + ))} + + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover/popover-around-disabled-button.js b/packages/react-docs/pages/components/popover/popover-around-disabled-button.js new file mode 100644 index 0000000000..05a05a946e --- /dev/null +++ b/packages/react-docs/pages/components/popover/popover-around-disabled-button.js @@ -0,0 +1,17 @@ +import { Button, Flex, Popover, PopoverContent, PopoverTrigger } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + + Popover + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover/popover-around-wrapped-disabled-button.js b/packages/react-docs/pages/components/popover/popover-around-wrapped-disabled-button.js new file mode 100644 index 0000000000..a177385d13 --- /dev/null +++ b/packages/react-docs/pages/components/popover/popover-around-wrapped-disabled-button.js @@ -0,0 +1,17 @@ +import { Button, Flex, Popover, PopoverContent, PopoverTrigger } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + + Popover + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover/popover-arrow-disabled.js b/packages/react-docs/pages/components/popover/popover-arrow-disabled.js new file mode 100644 index 0000000000..59f14de36a --- /dev/null +++ b/packages/react-docs/pages/components/popover/popover-arrow-disabled.js @@ -0,0 +1,15 @@ +import { Button, Popover, PopoverContent, PopoverTrigger } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + Popover + + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover/popover-disabled.js b/packages/react-docs/pages/components/popover/popover-disabled.js new file mode 100644 index 0000000000..795ea9219f --- /dev/null +++ b/packages/react-docs/pages/components/popover/popover-disabled.js @@ -0,0 +1,25 @@ +import { Button, Divider, Flex, Popover, PopoverContent, PopoverTrigger } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + + + + + + + + + + Popover + + + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover/popover-trigger-hover.js b/packages/react-docs/pages/components/popover/popover-trigger-hover.js new file mode 100644 index 0000000000..77f2328d53 --- /dev/null +++ b/packages/react-docs/pages/components/popover/popover-trigger-hover.js @@ -0,0 +1,15 @@ +import { Popover, PopoverContent, PopoverTrigger, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Text content + + + Popover + + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover/positioning-follow-cursor.js b/packages/react-docs/pages/components/popover/positioning-follow-cursor.js new file mode 100644 index 0000000000..c834d8df43 --- /dev/null +++ b/packages/react-docs/pages/components/popover/positioning-follow-cursor.js @@ -0,0 +1,15 @@ +import { Popover, PopoverContent, PopoverTrigger, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Hover Me + + + Popover + + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover/positioning-next-cursor.js b/packages/react-docs/pages/components/popover/positioning-next-cursor.js new file mode 100644 index 0000000000..d656de8684 --- /dev/null +++ b/packages/react-docs/pages/components/popover/positioning-next-cursor.js @@ -0,0 +1,15 @@ +import { Popover, PopoverContent, PopoverTrigger, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Hover Me + + + Popover + + +); + +export default App; diff --git a/packages/react-docs/pages/components/popover/positioning-offset.js b/packages/react-docs/pages/components/popover/positioning-offset.js new file mode 100644 index 0000000000..ade0608ac7 --- /dev/null +++ b/packages/react-docs/pages/components/popover/positioning-offset.js @@ -0,0 +1,54 @@ +import { Box, Flex, Popover, PopoverContent, PopoverTrigger, Text, TextLabel } from '@tonic-ui/react'; +import React, { useState } from 'react'; + +const App = () => { + const [skidding, setSkidding] = useState(0); + const [distance, setDistance] = useState(12); + + return ( + <> + + + skidding + + + setSkidding(Number(e.target.value))} + /> + {skidding} + + + + + distance + + + setDistance(Number(e.target.value))} + /> + {distance} + + + + + Hover Me + + + Popover + + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/popover/uncontrolled.js b/packages/react-docs/pages/components/popover/uncontrolled.js new file mode 100644 index 0000000000..e987077e56 --- /dev/null +++ b/packages/react-docs/pages/components/popover/uncontrolled.js @@ -0,0 +1,15 @@ +import { Button, Popover, PopoverContent, PopoverTrigger, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + + + + This is an uncontrolled popover + + +); + +export default App; diff --git a/packages/react-docs/pages/components/tooltip/controlled.js b/packages/react-docs/pages/components/tooltip/controlled.js index e42b2e7ceb..82a6fefbf1 100644 --- a/packages/react-docs/pages/components/tooltip/controlled.js +++ b/packages/react-docs/pages/components/tooltip/controlled.js @@ -1,5 +1,5 @@ -import { useToggle } from '@tonic-ui/react-hooks'; import { Flex, Switch, Text, Tooltip } from '@tonic-ui/react'; +import { useToggle } from '@tonic-ui/react-hooks'; import React from 'react'; const App = () => {