Skip to content

Commit 9f72457

Browse files
nicosammitonicosammito
authored
Merge pull request #685 from code0-tech/feat/dialog-adjustments
Dialog adjustments
2 parents cebb26a + 96107b7 commit 9f72457

4 files changed

Lines changed: 155 additions & 58 deletions

File tree

‎src/components/command/Command.stories.tsx‎

Lines changed: 144 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
11
import {Meta} from "@storybook/react-vite"
22
import React from "react"
33
import {
4-
CommandItem,
5-
CommandInput,
6-
CommandList,
4+
CommandDialog,
75
CommandEmpty,
86
CommandGroup,
7+
CommandInput,
8+
CommandItem,
9+
CommandList,
910
CommandSeparator,
10-
CommandShortcut,
11-
CommandDialog
11+
CommandShortcut
1212
} from "./Command"
13+
import {Tab, TabList, TabTrigger} from "../tab/Tab";
14+
import {Button} from "../button/Button";
15+
import {
16+
IconBrandDiscord,
17+
IconBrandTeams,
18+
IconMath,
19+
IconNumber, IconSearch,
20+
IconSelectAll,
21+
IconSwitch,
22+
IconTextGrammar
23+
} from "@tabler/icons-react";
24+
import {Text} from "../text/Text";
25+
import {hashToColor} from "../../utils";
26+
import {ScrollArea, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport} from "../scroll-area/ScrollArea";
27+
import {Layout} from "../layout/Layout";
28+
import {Card} from "../card/Card";
1329

1430
export default {
1531
title: "Command",
@@ -19,38 +35,129 @@ export default {
1935
export const ExampleCommand = () => {
2036

2137
return (
22-
<CommandDialog open={true}>
23-
<CommandInput placeholder="Type a command or search..." clearable />
24-
<CommandSeparator />
25-
<CommandList>
26-
<CommandEmpty>No results found.</CommandEmpty>
27-
<CommandGroup heading="Suggestions">
28-
<CommandItem>
29-
<span>Calendar</span>
30-
</CommandItem>
31-
<CommandItem>
32-
<span>Search Emoji</span>
33-
</CommandItem>
34-
<CommandItem disabled>
35-
<span>Calculator</span>
36-
</CommandItem>
37-
</CommandGroup>
38-
<CommandSeparator />
39-
<CommandGroup heading="Settings">
40-
<CommandItem>
41-
<span>Profile</span>
42-
<CommandShortcut>⌘P</CommandShortcut>
43-
</CommandItem>
44-
<CommandItem>
45-
<span>Billing</span>
46-
<CommandShortcut>⌘B</CommandShortcut>
47-
</CommandItem>
48-
<CommandItem>
49-
<span>Settings</span>
50-
<CommandShortcut>⌘S</CommandShortcut>
51-
</CommandItem>
52-
</CommandGroup>
53-
</CommandList>
38+
<CommandDialog p={"0"} open={true} contentProps={{h: "75vh"}}>
39+
<Layout p={0.7} layoutGap={0} showLayoutSplitter={false} bottomContent={<Text>sd</Text>} topContent={<div style={{paddingBottom: "0.35rem"}}><CommandInput left={<IconSearch size={13}/>} placeholder="Type a command or search..." clearable/></div>}>
40+
<Card mx={-0.5} h={"100%"} paddingSize={"xxs"}>
41+
<Layout style={{overflow: "hidden"}} leftContent={<ScrollArea p={0.7} h={"100%"} type={"always"} w={"fit-content"} miw={"25%"}>
42+
<ScrollAreaViewport h={"100%"} w={"100%"}>
43+
<Tab orientation={"vertical"} defaultValue={"all"}>
44+
<TabList>
45+
<TabTrigger value={"all"} asChild>
46+
<Button w={"100%"} justify={"start"} paddingSize={"xxs"} variant={"none"}>
47+
<IconSelectAll color={hashToColor("all")} size={13}/>
48+
<Text size={"sm"}>All</Text>
49+
</Button>
50+
</TabTrigger>
51+
<TabTrigger value={"control"} asChild>
52+
<Button w={"100%"} justify={"start"} paddingSize={"xxs"} variant={"none"}>
53+
<IconMath color={hashToColor("control")} size={13}/>
54+
<Text size={"sm"}>Control</Text>
55+
</Button>
56+
</TabTrigger>
57+
<TabTrigger value={"number"} asChild>
58+
<Button w={"100%"} justify={"start"} paddingSize={"xxs"} variant={"none"}>
59+
<IconNumber color={hashToColor("number")} size={13}/>
60+
<Text size={"sm"}>Number</Text>
61+
</Button>
62+
</TabTrigger>
63+
<TabTrigger value={"text"} asChild>
64+
<Button w={"100%"} justify={"start"} paddingSize={"xxs"} variant={"none"}>
65+
<IconTextGrammar color={hashToColor("text")} size={13}/>
66+
<Text size={"sm"}>Text</Text>
67+
</Button>
68+
</TabTrigger>
69+
<TabTrigger value={"bool"} asChild>
70+
<Button w={"100%"} justify={"start"} paddingSize={"xxs"} variant={"none"}>
71+
<IconSwitch color={hashToColor("bool")} size={13}/>
72+
<Text size={"sm"}>Boolean</Text>
73+
</Button>
74+
</TabTrigger>
75+
<TabTrigger value={"teams"} asChild>
76+
<Button w={"100%"} justify={"start"} paddingSize={"xxs"} variant={"none"}>
77+
<IconBrandTeams color={hashToColor("teams")} size={16}/>
78+
<Text size={"sm"}>Teams</Text>
79+
</Button>
80+
</TabTrigger>
81+
<TabTrigger value={"discord"} asChild>
82+
<Button w={"100%"} justify={"start"} paddingSize={"xxs"} variant={"none"}>
83+
<IconBrandDiscord color={hashToColor("discord")} size={16}/>
84+
<Text size={"sm"}>Discord</Text>
85+
</Button>
86+
</TabTrigger>
87+
</TabList>
88+
</Tab>
89+
</ScrollAreaViewport>
90+
<ScrollAreaScrollbar orientation={"vertical"}>
91+
<ScrollAreaThumb/>
92+
</ScrollAreaScrollbar>
93+
</ScrollArea>}>
94+
<ScrollArea h={"100%"} w={"100%"} type={"always"}>
95+
<ScrollAreaViewport>
96+
<CommandList w={"100%"}>
97+
<CommandEmpty>No results found.</CommandEmpty>
98+
<CommandGroup heading="Suggestions">
99+
<CommandItem>
100+
<span>Calendar</span>
101+
</CommandItem>
102+
<CommandItem>
103+
<span>Search Emoji</span>
104+
</CommandItem>
105+
<CommandItem disabled>
106+
<span>Calculator</span>
107+
</CommandItem>
108+
</CommandGroup>
109+
<CommandSeparator/>
110+
<CommandGroup heading="Settings">
111+
<CommandItem value={"profile3"}>
112+
<span>Profile</span>
113+
<CommandShortcut>⌘P</CommandShortcut>
114+
</CommandItem>
115+
<CommandItem>
116+
<span>Billing</span>
117+
<CommandShortcut>⌘B</CommandShortcut>
118+
</CommandItem>
119+
<CommandItem>
120+
<span>Settings</span>
121+
<CommandShortcut>⌘S</CommandShortcut>
122+
</CommandItem>
123+
</CommandGroup>
124+
<CommandGroup heading="Settings2">
125+
<CommandItem>
126+
<span>Profile</span>
127+
<CommandShortcut>⌘P</CommandShortcut>
128+
</CommandItem>
129+
<CommandItem>
130+
<span>Billing</span>
131+
<CommandShortcut>⌘B</CommandShortcut>
132+
</CommandItem>
133+
<CommandItem>
134+
<span>Settings</span>
135+
<CommandShortcut>⌘S</CommandShortcut>
136+
</CommandItem>
137+
</CommandGroup>
138+
<CommandGroup heading="Settings3">
139+
<CommandItem>
140+
<span>Profile</span>
141+
<CommandShortcut>⌘P</CommandShortcut>
142+
</CommandItem>
143+
<CommandItem>
144+
<span>Billing</span>
145+
<CommandShortcut>⌘B</CommandShortcut>
146+
</CommandItem>
147+
<CommandItem>
148+
<span>Settings</span>
149+
<CommandShortcut>⌘S</CommandShortcut>
150+
</CommandItem>
151+
</CommandGroup>
152+
</CommandList>
153+
</ScrollAreaViewport>
154+
<ScrollAreaScrollbar orientation={"vertical"}>
155+
<ScrollAreaThumb/>
156+
</ScrollAreaScrollbar>
157+
</ScrollArea>
158+
</Layout>
159+
</Card>
160+
</Layout>
54161
</CommandDialog>
55162
)
56163

‎src/components/command/Command.style.scss‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,21 @@
44

55
.command {
66

7-
z-index: 100;
87
display: flex;
98
height: 100%;
109
width: 100%;
1110
flex-direction: column;
1211
overflow: hidden;
13-
background: variables.$primary;
1412
padding: variables.$xs;
13+
box-sizing: border-box;
1514

16-
& {
17-
@include box.box(variables.$primary, variables.$primary, variables.$primary);
18-
@include helpers.borderRadius();
19-
}
2015

2116
&__dialog {
2217
padding: 0;
23-
box-shadow: none;
2418
}
2519

2620
&__list {
2721
@include helpers.noFocusStyle();
28-
29-
max-height: 300px;
30-
overflow-y: auto;
31-
overflow-x: hidden;
3222
}
3323

3424
&__input.input,
@@ -108,8 +98,7 @@
10898
}
10999

110100
&[data-selected='true'] {
111-
@include box.box(variables.$white, variables.$white, variables.$white);
112-
box-shadow: none;
101+
@include box.box(variables.$tertiary, variables.$tertiary, variables.$tertiary);
113102
width: 100%;
114103
}
115104

@@ -124,7 +113,7 @@
124113
&__separator {
125114
height: 1px;
126115
margin: variables.$xxs 0;
127-
background: helpers.backgroundColor(variables.$white);
116+
background: helpers.borderColor(variables.$white);
128117
}
129118

130119
&__shortcut {

‎src/components/command/Command.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react"
22
import {Command as CommandPrimitive} from "cmdk"
33
import {ComponentProps, mergeComponentProps} from "../../utils"
4-
import {Dialog, DialogContent} from "../dialog/Dialog"
4+
import {Dialog, DialogContent, DialogOverlay} from "../dialog/Dialog"
55
import "./Command.style.scss"
66
import {Badge} from "../badge/Badge"
77
import {TextInput, TextInputProps} from "../form"
@@ -15,7 +15,7 @@ export type CommandDialogProps = {
1515
children: React.ReactNode
1616
}
1717
export type CommandListProps = ComponentProps & React.ComponentProps<typeof CommandPrimitive.List>
18-
export type CommandInputProps = ComponentProps & TextInputProps
18+
export type CommandInputProps = TextInputProps
1919
export type CommandEmptyProps = ComponentProps & React.ComponentProps<typeof CommandPrimitive.Empty>
2020
export type CommandGroupProps = ComponentProps & React.ComponentProps<typeof CommandPrimitive.Group>
2121
export type CommandItemProps = ComponentProps & React.ComponentProps<typeof CommandPrimitive.Item>
@@ -29,8 +29,9 @@ export const Command: React.FC<CommandProps> = (props) => {
2929
export const CommandDialog: React.FC<CommandDialogProps> = (props) => {
3030
return (
3131
<Dialog {...props.dialogProps} open={props.open} onOpenChange={props.onOpenChange}>
32-
<DialogContent {...mergeComponentProps("command__dialog", props.contentProps ?? {}) as ComponentProps & React.ComponentProps<typeof DialogContent>}>
33-
<Command {...props}>
32+
<DialogOverlay/>
33+
<DialogContent className={"command__dialog"} {...props.contentProps}>
34+
<Command {...props} h={"100%"}>
3435
{props.children}
3536
</Command>
3637
</DialogContent>
@@ -57,7 +58,7 @@ export const CommandInput: React.FC<CommandInputProps> = (props) => {
5758
}}
5859
asChild
5960
>
60-
<TextInput {...mergeComponentProps("command__input", props)} />
61+
<TextInput className={"command__input"} {...props} />
6162
</CommandPrimitive.Input>
6263
)
6364
}

‎src/components/layout/Layout.style.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
height: 100%;
99
overflow: hidden;
1010
display: flex;
11+
box-sizing: border-box;
1112
}
1213

1314
.d-layout__inner {
@@ -42,7 +43,7 @@
4243

4344
&[aria-orientation=horizontal] {
4445
width: 100%;
45-
height: 0;
46+
height: 1px;
4647
}
4748

4849
}
@@ -57,5 +58,4 @@
5758
flex: 1 1 auto;
5859
min-width: 0;
5960
min-height: 0;
60-
overflow: auto;
6161
}

0 commit comments

Comments
 (0)