Skip to content

Commit

Permalink
feat: new ToggleGroup component (#378)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hngngn
hngngn authored Mar 29, 2024
1 parent a8160aa commit d7b53ec
Show file tree
Hide file tree
Showing 11 changed files with 1,409 additions and 1 deletion.
42 changes: 42 additions & 0 deletions apps/docs/src/examples/toggle-group.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.toggle-group {
display: flex;
padding: 0.5rem;
gap: 0.5rem;
}

.toggle-group[data-orientation="vertical"] {
flex-direction: column;
}

.toggle-group__item {
padding: 0.5rem;
border-radius: 0.5rem;
appearance: none;
user-select: none;
outline: none;
display: flex;
justify-content: center;
align-items: center;
transition-property: background-color, color;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
}

.toggle-group__item:hover {
background-color: hsl(200 98% 39% / 0.8);
color: hsla(0 100% 100% / 0.9);
}

[data-kb-theme="dark"] .toggle-group__item:hover {
background-color: hsl(200 98% 39% / 0.5);
}

.toggle-group__item[data-pressed] {
background-color: hsl(200 98% 39%);
color: hsla(0 100% 100% / 0.9);
}

.toggle-group__item:focus-visible {
outline: 2px solid hsl(200 98% 39%);
outline-offset: 2px;
}
321 changes: 321 additions & 0 deletions apps/docs/src/examples/toggle-group.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,321 @@
import { ToggleGroup } from "@kobalte/core";

import { JSXElement, createSignal } from "solid-js";
import style from "./toggle-group.module.css";

export function BasicExample() {
return (
<ToggleGroup.Root class={style["toggle-group"]}>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="bold"
aria-label="Bold"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
/>
<title>Bold</title>
</svg>
</ToggleGroup.Item>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="italic"
aria-label="Italic"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleGroup.Item>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="underline"
aria-label="Underline"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
/>
<title>Underline</title>
</svg>
</ToggleGroup.Item>
</ToggleGroup.Root>
);
}

export function DefaultValueExample() {
return (
<ToggleGroup.Root class={style["toggle-group"]} defaultValue="bold">
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="bold"
aria-label="Bold"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
/>
<title>Bold</title>
</svg>
</ToggleGroup.Item>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="italic"
aria-label="Italic"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleGroup.Item>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="underline"
aria-label="Underline"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
/>
<title>Underline</title>
</svg>
</ToggleGroup.Item>
</ToggleGroup.Root>
);
}

export function ControlledExample() {
const [value, setValue] = createSignal("bold");

const list: Record<string, JSXElement> = {
bold: <strong>{value()}</strong>,
italic: <i>{value()}</i>,
underline: <u>{value()}</u>,
};

const render = () => {
return list[value()];
};

return (
<>
<ToggleGroup.Root
class={style["toggle-group"]}
value={value()}
onChange={setValue}
>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="bold"
aria-label="Bold"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
/>
<title>Bold</title>
</svg>
</ToggleGroup.Item>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="italic"
aria-label="Italic"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleGroup.Item>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="underline"
aria-label="Underline"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
/>
<title>Underline</title>
</svg>
</ToggleGroup.Item>
</ToggleGroup.Root>
<div class="text-sm">
Your text style is: <span class="capitalize">{render()}.</span>
</div>
</>
);
}

export function MultipleSelectionExample() {
return (
<ToggleGroup.Root
class={style["toggle-group"]}
multiple
defaultValue={["bold", "underline"]}
>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="bold"
aria-label="Bold"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
/>
<title>Bold</title>
</svg>
</ToggleGroup.Item>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="italic"
aria-label="Italic"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14"
/>
<title>Italic</title>
</svg>
</ToggleGroup.Item>
<ToggleGroup.Item
class={style["toggle-group__item"]}
value="underline"
aria-label="Underline"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24px"
height="24px"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 5v5a5 5 0 0 0 10 0V5M5 19h14"
/>
<title>Underline</title>
</svg>
</ToggleGroup.Item>
</ToggleGroup.Root>
);
}
6 changes: 5 additions & 1 deletion apps/docs/src/routes/docs/core.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@ const CORE_NAV_SECTIONS: NavSection[] = [
{
title: "Number Field",
href: "/docs/core/components/number-field",
status: "new",
},
{
title: "Pagination",
Expand Down Expand Up @@ -154,6 +153,11 @@ const CORE_NAV_SECTIONS: NavSection[] = [
title: "Toggle Button",
href: "/docs/core/components/toggle-button",
},
{
title: "Toggle Group",
href: "/docs/core/components/toggle-group",
status: "new",
},
{
title: "Tooltip",
href: "/docs/core/components/tooltip",
Expand Down
Loading

0 comments on commit d7b53ec

Please sign in to comment.