From 772be0b3c7f6dcec6db23ad338294f1ddb4d48f6 Mon Sep 17 00:00:00 2001 From: AaronPatterson1 Date: Thu, 8 Aug 2024 20:31:28 -0400 Subject: [PATCH 1/2] Adding popover component page --- packages/_site/src/App.tsx | 6 + .../src/pages/components/popover/index.tsx | 390 ++++++++++++++++++ .../components/routes_list_docs_components.ts | 6 + 3 files changed, 402 insertions(+) create mode 100644 packages/_site/src/pages/components/popover/index.tsx diff --git a/packages/_site/src/App.tsx b/packages/_site/src/App.tsx index d834b68..8fdfe88 100644 --- a/packages/_site/src/App.tsx +++ b/packages/_site/src/App.tsx @@ -37,6 +37,8 @@ import DialogPage from "./pages/components/dialog"; import CollapsiblePage from "./pages/components/collapsible"; import TextareaPage from "./pages/components/textarea"; import DropdownMenuPage from "./pages/components/dropdown-menu"; +import PopoverPage from "./pages/components/popover"; + const styles = stylex.create({ content: { @@ -192,6 +194,10 @@ export default function App() { } /> + + } /> + + } /> diff --git a/packages/_site/src/pages/components/popover/index.tsx b/packages/_site/src/pages/components/popover/index.tsx new file mode 100644 index 0000000..13f385a --- /dev/null +++ b/packages/_site/src/pages/components/popover/index.tsx @@ -0,0 +1,390 @@ +import ComponentHero from "../commons/component-hero"; +import stylex from "@stylexjs/stylex"; +import ExampleBlock from "../commons/example-block"; +import CodeBlock from "../commons/code-block"; +import { PreviewBlock } from "../commons/preview_block"; +import ComponentInfo from "../commons/component-info"; +import { Divider } from "@controlkit/divider"; +import { H2, H5 } from "@controlkit/headings"; +import { Tabs, TabsList, TabsTrigger, TabsContent } from "@controlkit/tabs"; +import { useRef } from "react"; +import { styles } from "../_layout/styles"; +import ContentsSidebar from "../commons/contents_sidebar"; +import { Popover, PopoverContent, PopoverTrigger } from "@controlkit/popover"; +import { Button } from "@controlkit/button"; + +export default function PopoverPage() { + const divRef = useRef(null); + + return ( +
+ + +
+ + +
+

Installation

+ +
+ + + Automatic + Manual + + +
+ +
+ + +
+
1. Copy and paste the following code into your project.
+ + +
+ + +
+ +

Examples

+ + +
+ +
+ + + + + + + +
+ Place content for the popover here. +
+ + + + + + + + + + +
+ Place content for the popover here. +
+ + + ); +}`} + /> +
+
+ +
+ +
+ + + + + + + +
+ Place content for the popover here. +
+ + + + + + + + + + +
+ Place content for the popover here. +
+ + + ); +}`} + /> +
+
+ +
+ +
+ + + + + + + +
+ Place content for the popover here. +
+ + + + + + + + + + +
+ Place content for the popover here. +
+ + + ); +}`} + /> +
+
+ +
+ +
+ + + + + + + +
+ Place content for the popover here. +
+ + + + + + + + + + +
+ Place content for the popover here. +
+ + + ); +}`} + /> +
+
+
+
+
+ ); +} diff --git a/packages/_site/src/pages/components/routes_list_docs_components.ts b/packages/_site/src/pages/components/routes_list_docs_components.ts index f2092a3..661315e 100644 --- a/packages/_site/src/pages/components/routes_list_docs_components.ts +++ b/packages/_site/src/pages/components/routes_list_docs_components.ts @@ -113,6 +113,12 @@ export const componentsList: I_ComponentsList[] = [ link: "/components/hover_card/examples", }, + { + title: "Popover", + description: "Popover Button. Click to display card's content to either the left, right, top or bottom of the button.", + link: "/components/popover/examples", + }, + { title: "Textarea", description: From 7e05b677681b16cef14741f2058f0d3d6e08c0eb Mon Sep 17 00:00:00 2001 From: AaronPatterson1 Date: Fri, 9 Aug 2024 22:54:39 -0400 Subject: [PATCH 2/2] Fixing descriptions for popover --- .../src/pages/components/popover/index.tsx | 34 +++++++++---------- .../components/routes_list_docs_components.ts | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/_site/src/pages/components/popover/index.tsx b/packages/_site/src/pages/components/popover/index.tsx index 13f385a..1282dc3 100644 --- a/packages/_site/src/pages/components/popover/index.tsx +++ b/packages/_site/src/pages/components/popover/index.tsx @@ -23,7 +23,7 @@ export default function PopoverPage() { >
@@ -89,8 +89,8 @@ export default function PopoverPage() { >