docs: update popover examples

trendmicro-frontend · Nov 15, 2023 · a6ef610 · a6ef610
1 parent 24ec130
commit a6ef610
Show file tree

Hide file tree

Showing 18 changed files with 509 additions and 375 deletions.
diff --git a/packages/react-docs/pages/components/popover/controlled.js 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 (
+    <>
+      <Flex mb="4x">
+        <Switch checked={on} onChange={toggle} />
+      </Flex>
+      <Popover
+        isOpen={on}
+        placement="bottom"
+      >
+        <PopoverTrigger>
+          <Button onClick={toggle}>
+            Trigger
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <Text>This is a controlled popover</Text>
+        </PopoverContent>
+      </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
@@ -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) => (
+  <Box mb="4x" {...props} />
+);
+
+const App = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+  const [isFlipModifierEnabled, toggleIsFlipModifierEnabled] = useToggle(true);
+
+  return (
+    <>
+      <Box mb="4x">
+        <Text fontSize="lg" lineHeight="lg">
+          Modifiers
+        </Text>
+      </Box>
+      <FormGroup>
+        <TextLabel display="inline-flex" alignItems="center">
+          <Checkbox
+            checked={isFlipModifierEnabled}
+            onChange={() => toggleIsFlipModifierEnabled()}
+          />
+          <Space width="2x" />
+          <Text fontFamily="mono" whiteSpace="nowrap">Enable flip modifier</Text>
+        </TextLabel>
+      </FormGroup>
+      <Divider my="4x" />
+      <Scrollbar
+        height={180}
+        width={180}
+        overflowY="visible"
+        border={1}
+        borderColor={colorStyle.divider}
+      >
+        <Flex
+          alignItems="center"
+          justifyContent="center"
+          height={300}
+        >
+          <Popover isOpen placement="top">
+            <PopoverTrigger>
+              <Text display="inline-block">
+                Reference
+              </Text>
+            </PopoverTrigger>
+            <PopoverContent
+              PopperProps={{
+                modifiers: [
+                  { // https://popper.js.org/docs/v2/modifiers/flip/
+                    name: 'flip',
+                    enabled: isFlipModifierEnabled,
+                  },
+                ],
+              }}
+            >
+              Popover
+            </PopoverContent>
+          </Popover>
+        </Flex>
+      </Scrollbar>
+    </>
+  );
+};
+
+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
@@ -0,0 +1,19 @@
+import { Button, Popover, PopoverContent, PopoverTrigger } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <Popover>
+    <PopoverTrigger>
+      <Button variant="secondary">Trigger</Button>
+    </PopoverTrigger>
+    <PopoverContent
+      PopperProps={{
+        usePortal: true,
+      }}
+    >
+      Popover
+    </PopoverContent>
+  </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
@@ -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 (
+    <Stack spacing="6x" width="fit-content">
+      <Popover initialFocusRef={initialFocusRef1}>
+        <PopoverTrigger>
+          <Button variant="secondary">
+            Interactive Trigger
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverBody>
+            <Input mt="3x" ref={initialFocusRef1} defaultValue="Popover" />
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+      <Popover initialFocusRef={initialFocusRef2}>
+        <PopoverTrigger tabIndex={-1}>
+          <Text
+            userSelect="none"
+            _hover={{ cursor: 'pointer' }}
+          >
+            Non-interactive Trigger
+          </Text>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverBody>
+            <Input mt="3x" ref={initialFocusRef2} defaultValue="Popover" />
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Stack>
+  );
+};
+
+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
@@ -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 (
+    <Stack spacing="6x" width="fit-content">
+      <Popover
+        initialFocusRef={initialFocusRef1}
+        returnFocusOnClose={false}
+      >
+        <PopoverTrigger>
+          <Button variant="secondary">
+            Interactive Trigger
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverBody>
+            <Input mt="3x" ref={initialFocusRef1} defaultValue="Popover" />
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+      <Popover
+        initialFocusRef={initialFocusRef2}
+        returnFocusOnClose={false}
+      >
+        <PopoverTrigger tabIndex={-1}>
+          <Text
+            userSelect="none"
+            _hover={{ cursor: 'pointer' }}
+          >
+            Non-interactive Trigger
+          </Text>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverBody>
+            <Input mt="3x" ref={initialFocusRef2} defaultValue="Popover" />
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Stack>
+  );
+};
+
+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
@@ -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 = () => (
+  <Popover>
+    {({ isOpen, onClose }) => (
+      <>
+        <PopoverTrigger>
+          <Button variant="secondary">Trigger</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverHeader>
+            Popover Header
+          </PopoverHeader>
+          <PopoverBody>
+            Popover Body
+          </PopoverBody>
+          <PopoverFooter>
+            <Flex
+              justifyContent="space-between"
+              columnGap="4x"
+            >
+              <Link fontSize="sm">Learn more</Link>
+              <Grid
+                templateColumns="1fr 1fr"
+                columnGap="2x"
+              >
+                <Button variant="primary">Submit</Button>
+                <Button variant="default" onClick={onClose}>
+                  Cancel
+                </Button>
+              </Grid>
+            </Flex>
+          </PopoverFooter>
+        </PopoverContent>
+      </>
+    )}
+  </Popover>
+);
+
+export default App;