Skip to content
This repository was archived by the owner on Jan 23, 2024. It is now read-only.

Commit 458480c

Browse files
jrachelrcschroeter
jrachelr
and
cschroeter
authored
feat(drawer): add theming section
* text added, need to figure out sandpack and anatomy diagram * updated anatomy url and added skeleton for sandpack * updated sandpack content for drawer and added to theming.mdx * fix: svg issue --------- Co-authored-by: Christian Schröter <dev@grizzly.codes>
1 parent 3ed037d commit 458480c

File tree

7 files changed

+1101
-18
lines changed

7 files changed

+1101
-18
lines changed

‎configs/sandpack-contents/component-theming/drawer.js

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
module.exports = {
2+
App: `import {
3+
Drawer,
4+
DrawerBody,
5+
DrawerFooter,
6+
DrawerHeader,
7+
DrawerOverlay,
8+
DrawerContent,
9+
DrawerCloseButton,
10+
useDisclosure,
11+
Button,
12+
Box,
13+
IconButton,
14+
useColorMode,
15+
} from "@chakra-ui/react";
16+
import { FaMoon, FaSun } from "react-icons/fa";
17+
18+
19+
export default function App() {
20+
const { isOpen, onOpen, onClose } = useDisclosure();
21+
const { toggleColorMode, colorMode } = useColorMode();
22+
23+
return (
24+
<Box position="relative" h="100vh" p={12}>
25+
<Button onClick={onOpen}>Open Drawer</Button>
26+
27+
<Drawer isOpen={isOpen} onClose={onClose}>
28+
<DrawerOverlay />
29+
<DrawerContent>
30+
<DrawerHeader>Drawer Title</DrawerHeader>
31+
<DrawerCloseButton />
32+
<DrawerBody>
33+
Lorem ipsum dolor sit amet. Et corporis quisquam eum adipisci
34+
impedit quo eius nisi est aspernatur vel veniam velit qui numquam
35+
totam. Vel debitis sint ut culpa cupiditate a dolores voluptates ut
36+
vero voluptatem non rerum aliquid qui sapiente possimus. Eum natus
37+
voluptates hic galisum architecto et nobis incidunt ut odio ipsum
38+
qui repudiandae voluptatem.
39+
</DrawerBody>
40+
41+
<DrawerFooter>
42+
<Button colorScheme="blue" mr={3} onClick={onClose}>
43+
Close
44+
</Button>
45+
<Button variant="ghost">Secondary Action</Button>
46+
</DrawerFooter>
47+
</DrawerContent>
48+
</Drawer>
49+
<IconButton
50+
aria-label="change theme"
51+
rounded="full"
52+
size="xs"
53+
position="absolute"
54+
bottom={4}
55+
left={4}
56+
onClick={toggleColorMode}
57+
icon={colorMode === "dark" ? <FaSun /> : <FaMoon />}
58+
/>
59+
</Box>
60+
);
61+
}`,
62+
Index: `import * as React from "react";
63+
import { createRoot } from "react-dom/client";
64+
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
65+
66+
import App from "./App";
67+
import { drawerTheme } from "./theme/components/drawer";
68+
69+
const theme = extendTheme({
70+
components: {
71+
Drawer: drawerTheme
72+
},
73+
});
74+
75+
const container = document.getElementById("root");
76+
const root = createRoot(container!);
77+
root.render(
78+
<ChakraProvider theme={theme}>
79+
<App />
80+
</ChakraProvider>
81+
);`,
82+
DrawerTheme: `import { drawerAnatomy as parts } from "@chakra-ui/anatomy";
83+
import {
84+
createMultiStyleConfigHelpers,
85+
defineStyle,
86+
} from "@chakra-ui/styled-system";
87+
88+
const { definePartsStyle, defineMultiStyleConfig } =
89+
createMultiStyleConfigHelpers(parts.keys);
90+
91+
const baseStyle = definePartsStyle((props) => {
92+
const { colorScheme: c } = props;
93+
return {
94+
dialog: {
95+
borderRadius: "md",
96+
bg: \`\${c}.100\`,
97+
_dark: {
98+
bg: \`\${c}.600\`,
99+
color: "white",
100+
},
101+
},
102+
};
103+
});
104+
105+
const xl = defineStyle({
106+
px: "6",
107+
py: "0",
108+
fontSize: "xl",
109+
});
110+
111+
const sm = defineStyle({
112+
fontSize: "sm",
113+
py: "2",
114+
pt: "8",
115+
});
116+
117+
const sizes = {
118+
xl: definePartsStyle({ header: sm, dialog: xl }),
119+
};
120+
121+
export const drawerTheme = defineMultiStyleConfig({
122+
baseStyle,
123+
sizes,
124+
defaultProps: {
125+
colorScheme: "purple", //set the default color scheme to purple
126+
size: "xl",
127+
},
128+
});`,
129+
}

‎configs/search-meta.json

+78
Original file line numberDiff line numberDiff line change
@@ -51887,6 +51887,84 @@
5188751887
"url": "/docs/components/drawer/theming",
5188851888
"hierarchy": {}
5188951889
},
51890+
{
51891+
"content": "Theming",
51892+
"id": "//docs/components/drawer/theming",
51893+
"type": "lvl2",
51894+
"url": "/docs/components/drawer/theming#theming",
51895+
"hierarchy": { "lvl2": "Theming", "lvl3": null }
51896+
},
51897+
{
51898+
"content": "Anatomy",
51899+
"id": "//docs/components/drawer/theming",
51900+
"type": "lvl3",
51901+
"url": "/docs/components/drawer/theming#anatomy",
51902+
"hierarchy": { "lvl2": "Theming", "lvl3": "Anatomy" }
51903+
},
51904+
{
51905+
"content": "Theming properties",
51906+
"id": "//docs/components/drawer/theming",
51907+
"type": "lvl3",
51908+
"url": "/docs/components/drawer/theming#theming-properties",
51909+
"hierarchy": { "lvl2": "Anatomy", "lvl3": "Theming properties" }
51910+
},
51911+
{
51912+
"content": "Theming utilities",
51913+
"id": "//docs/components/drawer/theming",
51914+
"type": "lvl3",
51915+
"url": "/docs/components/drawer/theming#theming-utilities",
51916+
"hierarchy": { "lvl2": "Theming properties", "lvl3": "Theming utilities" }
51917+
},
51918+
{
51919+
"content": "Customizing the default theme",
51920+
"id": "//docs/components/drawer/theming",
51921+
"type": "lvl3",
51922+
"url": "/docs/components/drawer/theming#customizing-the-default-theme",
51923+
"hierarchy": {
51924+
"lvl2": "Theming utilities",
51925+
"lvl3": "Customizing the default theme"
51926+
}
51927+
},
51928+
{
51929+
"content": "Adding a custom size",
51930+
"id": "//docs/components/drawer/theming",
51931+
"type": "lvl3",
51932+
"url": "/docs/components/drawer/theming#adding-a-custom-size",
51933+
"hierarchy": {
51934+
"lvl2": "Customizing the default theme",
51935+
"lvl3": "Adding a custom size"
51936+
}
51937+
},
51938+
{
51939+
"content": "Adding a custom variant",
51940+
"id": "//docs/components/drawer/theming",
51941+
"type": "lvl3",
51942+
"url": "/docs/components/drawer/theming#adding-a-custom-variant",
51943+
"hierarchy": {
51944+
"lvl2": "Adding a custom size",
51945+
"lvl3": "Adding a custom variant"
51946+
}
51947+
},
51948+
{
51949+
"content": "Changing the default properties",
51950+
"id": "//docs/components/drawer/theming",
51951+
"type": "lvl3",
51952+
"url": "/docs/components/drawer/theming#changing-the-default-properties",
51953+
"hierarchy": {
51954+
"lvl2": "Adding a custom variant",
51955+
"lvl3": "Changing the default properties"
51956+
}
51957+
},
51958+
{
51959+
"content": "Showcase",
51960+
"id": "//docs/components/drawer/theming",
51961+
"type": "lvl3",
51962+
"url": "/docs/components/drawer/theming#showcase",
51963+
"hierarchy": {
51964+
"lvl2": "Changing the default properties",
51965+
"lvl3": "Showcase"
51966+
}
51967+
},
5189051968
{
5189151969
"content": "Drawer",
5189251970
"id": "//docs/components/drawer/usage",

0 commit comments

Comments
 (0)