Skip to content

Commit d16564c

Browse files
riccardoperrariccardoperra
committed
Merge pull request #1 from riccardoperra/feat/dropdown
Feat/dropdown
2 parents ae92f70 + bba98dd commit d16564c

23 files changed

+817
-157
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<p>
2-
<img width="100%" src="https://assets.solidjs.com/banner?type=your-repository-name&background=tiles&project=Monorepo" alt="your-repository-name Monorepo">
2+
<img width="100%" src="codeui.png" alt="CodeUI Monorepo">
33
</p>
44

5-
# your-repository-name
5+
# CodeUI
66

77
[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
88
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)

‎codeui.png

43.3 KB
Loading

‎packages/kit/dev/App.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { DialogDemo } from "./demo/Dialog";
44
import { ButtonDemo } from "./demo/Button";
55
import { TextInputDemo } from "./demo/TextInput";
66
import { DemoSection } from "./ui/DemoSection";
7+
import { DropdownMenuDemo } from "./demo/DropdownMenu";
8+
import { PopoverDemo } from "./demo/Popover";
79

810
const App: Component = () => {
911
document.documentElement.classList.add(theme);
@@ -12,14 +14,18 @@ const App: Component = () => {
1214
<DemoSection>
1315
<ButtonDemo />
1416
</DemoSection>
15-
1617
<DemoSection>
1718
<TextInputDemo />
1819
</DemoSection>
19-
20+
<DemoSection>
21+
<DropdownMenuDemo />
22+
</DemoSection>
2023
<DemoSection>
2124
<DialogDemo />
2225
</DemoSection>
26+
<DemoSection>
27+
<PopoverDemo />
28+
</DemoSection>
2329
</div>
2430
);
2531
};

‎packages/kit/dev/demo/Button.tsx

-19
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,6 @@ import { For, JSX } from "solid-js";
22
import { Button, ButtonProps, IconButton } from "@codeui/kit";
33
import { DemoSectionRow } from "../ui/DemoSection";
44

5-
function ArrowRightIcon(props: JSX.IntrinsicElements["svg"]) {
6-
return (
7-
<svg
8-
xmlns="http://www.w3.org/2000/svg"
9-
viewBox="0 0 20 20"
10-
fill="currentColor"
11-
{...props}
12-
width={"1.1em"}
13-
height={"1.1em"}
14-
>
15-
<path
16-
fill-rule="evenodd"
17-
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
18-
clip-rule="evenodd"
19-
/>
20-
</svg>
21-
);
22-
}
23-
245
function Clipboard() {
256
return (
267
<svg

‎packages/kit/dev/demo/DropdownMenu.tsx

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import {
2+
Button,
3+
DropdownMenu,
4+
DropdownMenuContent,
5+
DropdownMenuItem,
6+
DropdownMenuPortal,
7+
DropdownMenuSeparator,
8+
DropdownMenuTrigger,
9+
DropdownSubMenu,
10+
DropdownSubMenuContent,
11+
DropdownSubMenuTrigger,
12+
} from "@codeui/kit";
13+
import { DemoSectionRow } from "../ui/DemoSection";
14+
import { createSignal, JSX } from "solid-js";
15+
16+
function ArrowRightIcon(props: JSX.IntrinsicElements["svg"]) {
17+
return (
18+
<svg
19+
xmlns="http://www.w3.org/2000/svg"
20+
viewBox="0 0 20 20"
21+
fill="currentColor"
22+
{...props}
23+
width={"1.1em"}
24+
height={"1.1em"}
25+
>
26+
<path
27+
fill-rule="evenodd"
28+
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
29+
clip-rule="evenodd"
30+
/>
31+
</svg>
32+
);
33+
}
34+
35+
export function DropdownMenuDemo() {
36+
const [menuControlled, setMenuControlled] = createSignal(false);
37+
38+
return (
39+
<div style={{ "min-height": "600px" }}>
40+
<h1 class={"title"}>Dropdown Menu</h1>
41+
42+
<DemoSectionRow>
43+
<DropdownMenu>
44+
<Button as={DropdownMenuTrigger} theme={"primary"}>
45+
Menu
46+
</Button>
47+
<DropdownMenuPortal>
48+
<DropdownMenuContent>
49+
<DropdownMenuItem>Item 1</DropdownMenuItem>
50+
<DropdownMenuItem>Item 2</DropdownMenuItem>
51+
<DropdownMenuItem>Item 3</DropdownMenuItem>
52+
</DropdownMenuContent>
53+
</DropdownMenuPortal>
54+
</DropdownMenu>
55+
56+
<DropdownMenu
57+
gutter={6}
58+
isOpen={menuControlled()}
59+
onOpenChange={setMenuControlled}
60+
>
61+
<Button as={DropdownMenuTrigger} theme={"tertiary"}>
62+
Menu {menuControlled() ? "Close" : "Open"}
63+
</Button>
64+
65+
<DropdownMenuPortal>
66+
<DropdownMenuContent>
67+
<DropdownMenuItem rightSlot={"⌘+K"}>Commit</DropdownMenuItem>
68+
<DropdownMenuItem rightSlot={"⇧+⌘+K"}>Push</DropdownMenuItem>
69+
<DropdownMenuSeparator />
70+
71+
<DropdownMenuItem isDisabled rightSlot={"⌘+T"}>
72+
Update Project
73+
</DropdownMenuItem>
74+
<DropdownSubMenu>
75+
<DropdownSubMenuTrigger rightSlot={<ArrowRightIcon />}>
76+
GitHub
77+
</DropdownSubMenuTrigger>
78+
<DropdownMenuPortal>
79+
<DropdownSubMenuContent class="dropdown-menu__sub-content">
80+
<DropdownMenuItem>Create Pull Request…</DropdownMenuItem>
81+
<DropdownMenuItem>View Pull Requests</DropdownMenuItem>
82+
<DropdownMenuItem>Sync Fork</DropdownMenuItem>
83+
<DropdownMenuSeparator />
84+
<DropdownMenuItem>Open on GitHub</DropdownMenuItem>
85+
86+
<DropdownSubMenu>
87+
<DropdownSubMenuTrigger rightSlot={<ArrowRightIcon />}>
88+
GitHub
89+
</DropdownSubMenuTrigger>
90+
<DropdownMenuPortal>
91+
<DropdownSubMenuContent class="dropdown-menu__sub-content">
92+
<DropdownMenuItem>Create Pull Request…</DropdownMenuItem>
93+
<DropdownMenuItem>View Pull Requests</DropdownMenuItem>
94+
<DropdownMenuItem>Sync Fork</DropdownMenuItem>
95+
<DropdownMenuSeparator />
96+
<DropdownMenuItem>Open on GitHub</DropdownMenuItem>
97+
</DropdownSubMenuContent>
98+
</DropdownMenuPortal>
99+
</DropdownSubMenu>
100+
</DropdownSubMenuContent>
101+
</DropdownMenuPortal>
102+
</DropdownSubMenu>
103+
</DropdownMenuContent>
104+
</DropdownMenuPortal>
105+
</DropdownMenu>
106+
</DemoSectionRow>
107+
</div>
108+
);
109+
}

‎packages/kit/dev/demo/Popover.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Button, Popover, PopoverContent, PopoverTrigger } from "@codeui/kit";
2+
import { DemoSectionRow } from "../ui/DemoSection";
3+
import { createSignal, JSX } from "solid-js";
4+
5+
function ArrowRightIcon(props: JSX.IntrinsicElements["svg"]) {
6+
return (
7+
<svg
8+
xmlns="http://www.w3.org/2000/svg"
9+
viewBox="0 0 20 20"
10+
fill="currentColor"
11+
{...props}
12+
width={"1.1em"}
13+
height={"1.1em"}
14+
>
15+
<path
16+
fill-rule="evenodd"
17+
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
18+
clip-rule="evenodd"
19+
/>
20+
</svg>
21+
);
22+
}
23+
24+
export function PopoverDemo() {
25+
const [open, setOpen] = createSignal(false);
26+
27+
return (
28+
<div style={{ "min-height": "300px" }}>
29+
<h1 class={"title"}>Popover</h1>
30+
31+
<DemoSectionRow>
32+
<Popover>
33+
<Button as={PopoverTrigger} theme={"secondary"}>
34+
Open
35+
</Button>
36+
<PopoverContent title={"Title"}>
37+
About Kobalte A UI toolkit for building accessible web apps and design systems
38+
with SolidJS.
39+
</PopoverContent>
40+
</Popover>
41+
42+
<Popover isOpen={open()} onOpenChange={setOpen}>
43+
<PopoverTrigger as={Button} theme={"secondary"}>
44+
Open (controlled)
45+
</PopoverTrigger>
46+
<PopoverContent title={"Title"}>About Kobalte A UI toolkit</PopoverContent>
47+
</Popover>
48+
</DemoSectionRow>
49+
</div>
50+
);
51+
}

‎packages/kit/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,9 @@
6767
},
6868
"packageManager": "[email protected]",
6969
"dependencies": {
70-
"@kobalte/core": "^0.2.0",
71-
"@kobalte/utils": "^0.2.0",
70+
"@kobalte/core": "^0.3.0",
71+
"@kobalte/utils": "^0.3.0",
72+
"@kobalte/vanilla-extract": "^0.1.0",
7273
"@motionone/solid": "^10.15.5",
7374
"@radix-ui/colors": "^0.1.8",
7475
"@vanilla-extract/css": "^1.9.2",

‎packages/kit/src/components/Button/Button.css.ts

+13-15
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createTheme, keyframes, style } from "@vanilla-extract/css";
22
import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
33
import { themeTokens } from "../../foundation/themes.css";
44
import { mapSizeValue } from "../../foundation/sizes.css";
5+
import { componentStateStyles } from "@kobalte/vanilla-extract";
56

67
export const [buttonTheme, buttonVars] = createTheme({
78
buttonHeight: "",
@@ -67,29 +68,26 @@ export const button = recipe({
6768
border: `1px solid ${buttonVars.borderColor}`,
6869
transition: "opacity .2s, background-color .2s, transform .2s",
6970
gap: themeTokens.spacing["2"],
70-
7171
vars: {
7272
[buttonVars.borderColor]: buttonVars.background,
7373
},
74-
75-
":disabled": {
74+
},
75+
componentStateStyles({
76+
hover: {
77+
background: buttonVars.hoverBackground,
78+
},
79+
active: {
80+
background: buttonVars.activeBackground,
81+
animation: "none",
82+
transform: "scale(0.95)",
83+
},
84+
disabled: {
7685
vars: {
7786
[buttonVars.background]: themeTokens.colors.gray2,
7887
[buttonVars.color]: themeTokens.colors.gray8,
7988
},
8089
},
81-
82-
selectors: {
83-
"&[data-hover]": {
84-
background: buttonVars.hoverBackground,
85-
},
86-
"&[data-active]": {
87-
background: buttonVars.activeBackground,
88-
animation: "none",
89-
transform: "scale(0.95)",
90-
},
91-
},
92-
},
90+
}),
9391
],
9492
variants: {
9593
size: {

‎packages/kit/src/components/Button/Button.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
import { Button as KButton, ButtonOptions } from "@kobalte/core";
1+
import { Button as KButton } from "@kobalte/core";
22
import { JSX, ParentProps, Show, splitProps } from "solid-js";
33
import * as styles from "./Button.css";
44
import { mergeClasses } from "../../utils/css";
55
import { ButtonIcon } from "./ButtonIcon";
6+
import type { As } from "@kobalte/utils/dist/types/polymorphic";
7+
import { PolymorphicProps } from "@kobalte/utils/dist/types/polymorphic";
68

7-
export type ButtonProps = ButtonOptions &
9+
export type ButtonProps<T extends As = As> = PolymorphicProps<T> &
10+
KButton.ButtonRootOptions &
811
styles.ButtonVariants & {
912
class?: string;
1013
leftIcon?: JSX.Element;
1114
};
1215

13-
export function Button(props: ParentProps<ButtonProps>) {
16+
export function Button<Type extends As = As>(props: ParentProps<ButtonProps<Type>>) {
1417
const [local, internal, others] = splitProps(
1518
props,
1619
["size", "theme", "pill"],
@@ -27,7 +30,7 @@ export function Button(props: ParentProps<ButtonProps>) {
2730
);
2831

2932
return (
30-
<KButton
33+
<KButton.Root
3134
data-cui="button"
3235
data-theme={local.theme}
3336
data-size={local.size}
@@ -39,6 +42,6 @@ export function Button(props: ParentProps<ButtonProps>) {
3942
</Show>
4043

4144
{internal.children}
42-
</KButton>
45+
</KButton.Root>
4346
);
4447
}

‎packages/kit/src/components/Dialog/Dialog.css.ts

-10
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,6 @@ export const overlay = style([
2323
left: 0,
2424
right: 0,
2525
bottom: 0,
26-
selectors: {
27-
["&[data-visible=false]"]: {
28-
visibility: "hidden",
29-
},
30-
},
3126
},
3227
]);
3328

@@ -59,11 +54,6 @@ export const positioner = style({
5954
display: "flex",
6055
alignItems: "center",
6156
justifyContent: "center",
62-
selectors: {
63-
["&[data-visible=false]"]: {
64-
visibility: "hidden",
65-
},
66-
},
6757
});
6858

6959
export const title = style([

0 commit comments

Comments
 (0)