Skip to content

Commit

Permalink
docs: add popover and tooltip stories
Browse files Browse the repository at this point in the history
riccardoperra committed Nov 12, 2023
1 parent de2994e commit 2b64d7f
Showing 4 changed files with 170 additions and 19 deletions.
16 changes: 12 additions & 4 deletions packages/kit/src/components/SegmentedControl/SegmentedControl.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Tabs } from "@kobalte/core";
import { debounce } from "@solid-primitives/scheduled";
import { onMount, splitProps } from "solid-js";
import { createEffect, createSignal, on, onMount, splitProps } from "solid-js";
import { SlotProp } from "../../utils/component";
import { mergeClasses } from "../../utils/css";
import * as styles from "./SegmentedControl.css";
@@ -38,7 +38,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
]);

let indicatorRef!: HTMLDivElement;
let listRef!: HTMLDivElement;
const [listRef, setListRef] = createSignal<HTMLElement>();

const disabled = () => (props.disabled ? "" : undefined);
const autoWidth = () => (props.autoWidth ? "" : undefined);
@@ -71,7 +71,15 @@ export function SegmentedControl(props: SegmentedControlProps) {

onMount(() => {
const resizeObserver = new ResizeObserver(handleListResize);
resizeObserver.observe(listRef);
createEffect(
on(listRef, listRef => {
if (!listRef) {
resizeObserver.disconnect();
return;
}
resizeObserver.observe(listRef);
}),
);
});

return (
@@ -88,7 +96,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
<Tabs.List
data-cui={"segmentedControlList"}
class={mergeClasses(styles.list, local.slotClasses?.list)}
ref={listRef}
ref={setListRef}
>
{props.children}
<Tabs.Indicator
2 changes: 2 additions & 0 deletions packages/kit/src/index.tsx
Original file line number Diff line number Diff line change
@@ -62,3 +62,5 @@ export {
layoutVars,
responsiveStyle,
} from "./foundation";

export { As } from "@kobalte/core";
64 changes: 49 additions & 15 deletions packages/storybook/src/stories/Popover.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,26 @@
import type { Meta, StoryObj } from "storybook-solidjs";

import { Button, Popover, PopoverContent, PopoverTrigger } from "@codeui/kit";
import { As, Button, Popover, PopoverContent, PopoverTrigger } from "@codeui/kit";
import { DocsItemsContainer } from "./components/Section.jsx";
import { As } from "@kobalte/core";
import { For } from "solid-js";

const placements = [
"top-start",
"top-end",
"right-start",
"right-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
] as const;

// More on how to set up stories at: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction
const meta = {
title: "DesignSystem/Popover",
component: Popover,
component: props => {
return <Popover {...props} />;
},
tags: ["autodocs"],
argTypes: {},
} satisfies Meta<typeof Popover>;
@@ -22,7 +35,7 @@ export const PopoverStory: Story = {
<Popover {...props}>
<PopoverTrigger asChild>
<As component={Button} theme={"secondary"}>
Open
Click me
</As>
</PopoverTrigger>
<PopoverContent title={"Title"}>
@@ -33,20 +46,41 @@ export const PopoverStory: Story = {
),
};

export const PopoverBordered: Story = {
name: "Popover Bordered",
render: props => (
<Popover {...props}>
<PopoverTrigger asChild>
<As component={Button} theme={"secondary"}>
Click me
</As>
</PopoverTrigger>
<PopoverContent title={"Title"} variant={"bordered"}>
About Kobalte A UI toolkit for building accessible web apps and design systems
with SolidJS.
</PopoverContent>
</Popover>
),
};

export const CustomPosition: Story = {
render: () => (
<DocsItemsContainer>
<Popover placement={"bottom-start"}>
<PopoverTrigger asChild>
<As component={Button} theme={"secondary"}>
Custom position
</As>
</PopoverTrigger>
<PopoverContent title={"Title"}>
About Kobalte A UI toolkit for building accessible web apps and design systems
with SolidJS.
</PopoverContent>
</Popover>
<For each={placements}>
{position => (
<Popover placement={position}>
<PopoverTrigger asChild>
<As component={Button} theme={"secondary"}>
{position}
</As>
</PopoverTrigger>
<PopoverContent title={"Title"}>
About Kobalte A UI toolkit for building accessible web apps and design
systems with SolidJS.
</PopoverContent>
</Popover>
)}
</For>
</DocsItemsContainer>
),
};
107 changes: 107 additions & 0 deletions packages/storybook/src/stories/Tooltip.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import type { Meta, StoryObj } from "storybook-solidjs";

import { Button, Tooltip } from "@codeui/kit";

const placements = [
"top-start",
"top-end",
"right-start",
"right-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
] as const;

const meta = {
title: "DesignSystem/Tooltip",
component: props => {
return <Tooltip {...props} />;
},
tags: ["autodocs"],
argTypes: {
placement: {
options: placements,
defaultValue: "top-start",
control: { type: "select" },
},
theme: {
options: ["primary", "secondary"],
defaultValue: "primary",
control: { type: "inline-radio" },
},
disabled: {
defaultValue: false,
type: "boolean",
},
},
} satisfies Meta<typeof Tooltip>;

export default meta;

type Story = StoryObj<typeof meta>;

export const TooltipStory: Story = {
name: "Primary (default)",
args: {
content: "My tooltip content.",
theme: "primary",
},
render: props => (
<Tooltip {...props}>
<Button theme="primary" disabled={props.disabled}>
Hover me
</Button>
</Tooltip>
),
};

export const TooltipSecondary: Story = {
name: "Secondary",
args: {
content: "My tooltip content.",
theme: "secondary",
},
render: props => (
<Tooltip {...props}>
<Button theme="secondary">Hover me</Button>
</Tooltip>
),
};

export const TooltipDisabled: Story = {
name: "Disabled",
args: {
content: "My tooltip content.",
theme: "secondary",
disabled: true,
},
render: () => (
<Tooltip content={"My tooltip content."} theme={"secondary"} disabled>
<Button theme="secondary" disabled>
Hover me
</Button>
</Tooltip>
),
};

export const CustomJsxComponent: Story = {
name: "Custom component",
args: {
content: "My tooltip content.",
theme: "secondary",
disabled: true,
},
render: () => (
<Tooltip
content={
<Button theme={"primary"} size="xs">
Custom content
</Button>
}
theme={"secondary"}
>
<Button theme="secondary">Hover me</Button>
</Tooltip>
),
};

0 comments on commit 2b64d7f

Please sign in to comment.