Skip to content

Commit 29da066

Browse files
paanSinghCoderpaanSinghCoder
authored
Feat/overlay v1 (#270)
* feat: add overlay initial code * chore: add exports * docs: add overlay docs * chore: fix comment * chore: remove overlay * chore: merge overlay styling to dialog * chore: add aria label to sheet overlay * chore: remove dedicated overlay component
1 parent 27ecad0 commit 29da066

File tree

4 files changed

+64
-157
lines changed

4 files changed

+64
-157
lines changed

‎apps/www/utils/routes.ts

Lines changed: 45 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -9,162 +9,51 @@ export const primitivesRoutes = [
99
},
1010
],
1111
},
12-
{
13-
label: "Components",
14-
pages: [
15-
{
16-
title: "Annoucement Bar",
17-
slug: "docs/primitives/components/announcementbar",
18-
newBadge: true,
19-
},
20-
{
21-
title: "Avatar",
22-
slug: "docs/primitives/components/avatar",
23-
newBadge: true,
24-
},
25-
{
26-
title: "Badge",
27-
slug: "docs/primitives/components/badge",
28-
newBadge: true,
29-
},
30-
{
31-
title: "Breadcrumb",
32-
slug: "docs/primitives/components/breadcrumb",
33-
newBadge: true,
34-
},
35-
{
36-
title: "Button",
37-
slug: "docs/primitives/components/button",
38-
newBadge: true,
39-
},
40-
{ title: "Callout", slug: "docs/primitives/components/callout", newBadge: true },
41-
{ title: "Calendar", slug: "docs/primitives/components/calendar", newBadge: true },
42-
{ title: "Command", slug: "docs/primitives/components/command", newBadge: true },
43-
{
44-
title: "Checkbox",
45-
slug: "docs/primitives/components/checkbox",
46-
newBadge: true,
47-
},
48-
{
49-
title: "Chip",
50-
slug: "docs/primitives/components/chip",
51-
newBadge: true,
52-
},
53-
{
54-
title: "Container",
55-
slug: "docs/primitives/components/container",
56-
newBadge: true,
57-
},
58-
{ title: "Datatable", slug: "docs/primitives/components/datatable" },
59-
{ title: "Dialog", slug: "docs/primitives/components/dialog", newBadge: true },
60-
{
61-
title: "Dropdown Menu",
62-
slug: "docs/primitives/components/dropdownmenu",
63-
newBadge: true,
64-
},
65-
{
66-
title: "Empty State",
67-
slug: "docs/primitives/components/emptystate",
68-
newBadge: true,
69-
},
70-
{ title: "ErrorState", slug: "docs/primitives/components/errorstate" },
71-
{
72-
title: "Flex",
73-
slug: "docs/primitives/components/flex",
74-
newBadge: true,
75-
},
76-
{
77-
title: "Filter Chip",
78-
slug: "docs/primitives/components/filter-chip",
79-
newBadge: true,
80-
},
81-
{
82-
title: "Headline",
83-
slug: "docs/primitives/components/headline",
84-
newBadge: true,
85-
},
86-
{
87-
title: "IconButton",
88-
slug: "docs/primitives/components/iconButton",
89-
newBadge: true,
90-
},
91-
{
92-
title: "Image",
93-
slug: "docs/primitives/components/image",
94-
newBadge: true,
95-
},
96-
{
97-
title: "Indicator",
98-
slug: "docs/primitives/components/indicator",
99-
newBadge: true,
100-
},
101-
{
102-
title: "Input Field",
103-
slug: "docs/primitives/components/inputField",
104-
newBadge: true,
105-
},
106-
{ title: "Label", slug: "docs/primitives/components/label", newBadge: true },
107-
{ title: "Link", slug: "docs/primitives/components/link", newBadge: true },
108-
{ title: "List", slug: "docs/primitives/components/list", newBadge: true },
109-
{ title: "Popover", slug: "docs/primitives/components/popover", newBadge: true },
110-
{ title: "Radio", slug: "docs/primitives/components/radio", newBadge: true },
111-
{ title: "Select", slug: "docs/primitives/components/select" },
112-
{ title: "Search", slug: "docs/primitives/components/search", newBadge: true },
113-
{ title: "Separator", slug: "docs/primitives/components/separator", newBadge: true },
114-
{ title: "Sheet", slug: "docs/primitives/components/sheet", newBadge: true },
115-
{
116-
title: "Spinner",
117-
slug: "docs/primitives/components/spinner",
118-
newBadge: true,
119-
},
120-
{
121-
title: "Switch",
122-
slug: "docs/primitives/components/switch",
123-
newBadge: true,
124-
},
125-
{
126-
title: "Slider",
127-
slug: "docs/primitives/components/slider",
128-
newBadge: true,
129-
},
130-
{
131-
title: "Side panel",
132-
slug: "docs/primitives/components/sidepanel",
133-
newBadge: true,
134-
},
135-
{
136-
title: "Tabs",
137-
slug: "docs/primitives/components/tabs",
138-
newBadge: true,
139-
},
140-
{
141-
title: "Table",
142-
slug: "docs/primitives/components/table",
143-
newBadge: true,
144-
},
145-
{
146-
title: "Text",
147-
slug: "docs/primitives/components/text",
148-
newBadge: true,
149-
},
150-
{ title: "Text Field", slug: "docs/primitives/components/textfield" },
151-
{
152-
title: "Tooltip",
153-
slug: "docs/primitives/components/tooltip",
154-
newBadge: true,
155-
},
156-
{
157-
title: "Text Area",
158-
slug: "docs/primitives/components/textArea",
159-
newBadge: true,
160-
},
161-
{
162-
title: "Toast",
163-
slug: "docs/primitives/components/toast",
164-
newBadge: true,
165-
},
166-
],
167-
},
12+
{ label: "Components", pages: [
13+
{ title: "Annoucement Bar", slug: "docs/primitives/components/announcementbar", newBadge: true },
14+
{ title: "Avatar", slug: "docs/primitives/components/avatar", newBadge: true },
15+
{ title: "Badge", slug: "docs/primitives/components/badge", newBadge: true },
16+
{ title: "Breadcrumb", slug: "docs/primitives/components/breadcrumb", newBadge: true },
17+
{ title: "Button", slug: "docs/primitives/components/button", newBadge: true },
18+
{ title: "Callout", slug: "docs/primitives/components/callout", newBadge: true },
19+
{ title: "Calendar", slug: "docs/primitives/components/calendar", newBadge: true },
20+
{ title: "Command", slug: "docs/primitives/components/command" },
21+
{ title: "Checkbox", slug: "docs/primitives/components/checkbox", newBadge: true },
22+
{ title: "Chip", slug: "docs/primitives/components/chip", newBadge: true },
23+
{ title: "Container", slug: "docs/primitives/components/container", newBadge: true },
24+
{ title: "Datatable", slug: "docs/primitives/components/datatable" },
25+
{ title: "Dialog", slug: "docs/primitives/components/dialog" },
26+
{ title: "Dropdown Menu", slug: "docs/primitives/components/dropdownmenu", newBadge: true },
27+
{ title: "Empty State", slug: "docs/primitives/components/emptystate", newBadge: true },
28+
{ title: "ErrorState", slug: "docs/primitives/components/errorstate" },
29+
{ title: "Flex", slug: "docs/primitives/components/flex", newBadge: true },
30+
{ title: "Filter Chip", slug: "docs/primitives/components/filter-chip", newBadge: true },
31+
{ title: "Headline", slug: "docs/primitives/components/headline", newBadge: true },
32+
{ title: "IconButton", slug: "docs/primitives/components/iconButton", newBadge: true },
33+
{ title: "Image", slug: "docs/primitives/components/image", newBadge: true },
34+
{ title: "Indicator", slug: "docs/primitives/components/indicator", newBadge: true },
35+
{ title: "Input Field", slug: "docs/primitives/components/inputField", newBadge: true },
36+
{ title: "Label", slug: "docs/primitives/components/label", newBadge: true },
37+
{ title: "Link", slug: "docs/primitives/components/link", newBadge: true },
38+
{ title: "List", slug: "docs/primitives/components/list", newBadge: true },
39+
{ title: "Popover", slug: "docs/primitives/components/popover", newBadge: true },
40+
{ title: "Radio", slug: "docs/primitives/components/radio", newBadge: true },
41+
{ title: "Select", slug: "docs/primitives/components/select" },
42+
{ title: "Search", slug: "docs/primitives/components/search", newBadge: true },
43+
{ title: "Separator", slug: "docs/primitives/components/separator", newBadge: true },
44+
{ title: "Sheet", slug: "docs/primitives/components/sheet" },
45+
{ title: "Spinner", slug: "docs/primitives/components/spinner", newBadge: true },
46+
{ title: "Switch", slug: "docs/primitives/components/switch", newBadge: true },
47+
{ title: "Slider", slug: "docs/primitives/components/slider", newBadge: true },
48+
{ title: "Side panel", slug: "docs/primitives/components/sidepanel", newBadge: true },
49+
{ title: "Tabs", slug: "docs/primitives/components/tabs", newBadge: true },
50+
{ title: "Table", slug: "docs/primitives/components/table", newBadge: true },
51+
{ title: "Text", slug: "docs/primitives/components/text", newBadge: true },
52+
{ title: "Text Field", slug: "docs/primitives/components/textfield" },
53+
{ title: "Tooltip", slug: "docs/primitives/components/tooltip", newBadge: true },
54+
{ title: "Text Area", slug: "docs/primitives/components/textArea", newBadge: true },
55+
{ title: "Toast", slug: "docs/primitives/components/toast", newBadge: true }
56+
]}
16857
];
16958

17059
export type PageProps = {

‎packages/raystack/v1/components/dialog/dialog.module.css

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.dialogOverlay {
2-
background-color: var(--rs-color-overlay-black-a7);
2+
background-color: var(--rs-color-overlay-base-primary);
33
position: fixed;
44
inset: 0;
55
z-index: 9998;
@@ -41,3 +41,18 @@
4141
background-color: var(--rs-color-background-base-primary-hover);
4242
color: var(--rs-color-foreground-base-primary);
4343
}
44+
45+
46+
.dialogOverlay[data-state="open"] {
47+
animation: fadeIn 150ms cubic-bezier(0.22, 1, 0.36, 1);
48+
}
49+
.dialogOverlay[data-state="close"] {
50+
animation: fadeOut 150ms cubic-bezier(0.22, 1, 0.36, 1);
51+
}
52+
53+
@media (prefers-reduced-motion: reduce) {
54+
.overlay {
55+
animation: none;
56+
transition: none;
57+
}
58+
}

‎packages/raystack/v1/components/dialog/dialog.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const DialogContent = forwardRef<
2727
<DialogPrimitive.Overlay
2828
className={styles.dialogOverlay}
2929
aria-hidden="true"
30+
role="presentation"
3031
/>
3132
<DialogPrimitive.Content
3233
ref={ref}

‎packages/raystack/v1/components/sheet/sheet.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ const Overlay = forwardRef<
7676
<DialogPrimitive.Overlay
7777
ref={ref}
7878
className={overlay({ className })}
79+
aria-hidden="true"
80+
role="presentation"
7981
{...props}
8082
/>
8183
));

0 commit comments

Comments
 (0)