diff --git a/lerna.json b/lerna.json index 621b01195..cf519538c 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": ["packages/*"], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.11.9", + "version": "0.12.0-alpha.11", "command": { "version": { "message": "chore(release): publish %s" diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json index 5e715f4bb..5ddf12e75 100644 --- a/packages/apsara-icons/package.json +++ b/packages/apsara-icons/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/icons", - "version": "0.11.9", + "version": "0.12.0-alpha.11", "description": "Apsara icons", "scripts": { "build": "node scripts/build.js", diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json index 7ca5002f7..365c92347 100644 --- a/packages/apsara-ui/package.json +++ b/packages/apsara-ui/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/apsara", - "version": "0.11.9", + "version": "0.12.0-alpha.11", "description": "A list of base components for apsara", "author": "Praveen Yadav ", "license": "Apache-2.0", diff --git a/packages/apsara-ui/src/Drawer/Drawer.stories.tsx b/packages/apsara-ui/src/Drawer/Drawer.stories.tsx index 7e9a3ec80..dd2525712 100644 --- a/packages/apsara-ui/src/Drawer/Drawer.stories.tsx +++ b/packages/apsara-ui/src/Drawer/Drawer.stories.tsx @@ -1,23 +1,24 @@ -import { useState } from 'react'; -import Drawer from './Drawer'; +import { useState } from "react"; +import Drawer from "./Drawer"; export const Basic = () => { const [open, setOpen] = useState(false); return ( <> - - setOpen(false)} - > + + setOpen(false)}>

This is sample drawer content

- + ); -} +}; export default { title: "Overlay/Drawer", component: Drawer, -}; \ No newline at end of file +}; diff --git a/packages/apsara-ui/src/Drawer/Drawer.tsx b/packages/apsara-ui/src/Drawer/Drawer.tsx index 083cb3f70..d6e608b17 100644 --- a/packages/apsara-ui/src/Drawer/Drawer.tsx +++ b/packages/apsara-ui/src/Drawer/Drawer.tsx @@ -11,25 +11,37 @@ type DrawerProps = { className?: string; position?: "left" | "right"; children?: React.ReactNode; + ContainerStyle?: React.CSSProperties; + ContainerClassName?: string; }; -const Drawer = ({ onOverlayClick, disableCloseOnOverlayClick, onClose, open = false, children, className = "", position = "right" }: DrawerProps) => { +const Drawer = ({ + onOverlayClick, + disableCloseOnOverlayClick, + onClose, + open = false, + children, + className = "", + position = "right", + ContainerStyle = {}, + ContainerClassName = "", +}: DrawerProps) => { const theme = useContext(ThemeContext); if (!open) return null; return ( - - { - if (!disableCloseOnOverlayClick) onClose(); - if (onOverlayClick) onOverlayClick(); - }}> - + + { + if (!disableCloseOnOverlayClick) onClose(); + if (onOverlayClick) onOverlayClick(); + }} + > {children} - ); };