feat: add variant="inside" for DBDrawer (#3262)

packages/components/src/components/drawer/drawer.lite.tsx

@@ -41,7 +41,10 @@ export default function DBDrawer(props: DBDrawerProps) {
 					if (dialogContainerRef) {
 						dialogContainerRef.hidden = false;
 					}
-					if (props.backdrop === 'none') {
+					if (
+						props.backdrop === 'none' ||
+						props.variant === 'inside'
+					) {
 						ref.show();
 					} else {
 						ref.showModal();
@@ -79,7 +82,8 @@ export default function DBDrawer(props: DBDrawerProps) {
 				state.handleClose(event);
 			}}
 			onKeyDown={(event) => state.handleClose(event)}
-			data-backdrop={props.backdrop}>
+			data-backdrop={props.backdrop}
+			data-variant={props.variant}>
 			<article
 				ref={dialogContainerRef}
 				class={cls('db-drawer-container', props.className)}

packages/components/src/components/drawer/model.ts

@@ -19,13 +19,15 @@ export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
 export const DrawerDirectionList = ['left', 'right', 'up', 'down'] as const;
 export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
 
+export const DrawerVariantList = ['modal', 'inside'] as const;
+export type DrawerVariantType = (typeof DrawerVariantList)[number];
+
 export type DBDrawerDefaultProps = {
 	/**
 	 * The backdrop attribute changes the opacity of the backdrop.
 	 * The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`
 	 */
 	backdrop?: DrawerBackdropType;
-
 	/**
 	 * The direction attribute changes the position & animation of the drawer.
 	 * E.g. "left" slides from left screen border to the right.
@@ -36,6 +38,7 @@ export type DBDrawerDefaultProps = {
 	 * React specific to change the header of the drawer.
 	 */
 	drawerHeader?: unknown;
+
 	/**
 	 * The open attribute opens or closes the drawer based on the state.
 	 */
@@ -45,6 +48,10 @@ export type DBDrawerDefaultProps = {
 	 * The "end" depends on which direction you use.
 	 */
 	rounded?: boolean;
+	/**
+	 * Set the variant modal|inside. Defaults to modal.
+	 */
+	variant?: DrawerVariantType;
 };
 
 export type DBDrawerProps = DBDrawerDefaultProps &

packages/components/src/styles/dialog-init.scss

@@ -18,24 +18,38 @@ dialog {
 	z-index: 9996;
 	color: inherit;
 
+	&[data-variant],
 	&[data-backdrop] {
 		@extend %dialog-container;
 	}
 
+	&[data-variant="inside"] {
+		&:not([data-backdrop="none"]) {
+			&::before {
+				content: "";
+				position: fixed;
+				inset: 0;
+			}
+		}
+	}
+
 	&:not([data-backdrop="none"]) {
-		&::backdrop {
+		&::backdrop,
+		&::before {
 			background-color: $backdrop-color;
 			opacity: $backdrop-opacity-strong;
 		}
 
 		&[data-backdrop="invisible"] {
-			&::backdrop {
+			&::backdrop,
+			&::before {
 				opacity: 0;
 			}
 		}
 
 		&[data-backdrop="weak"] {
-			&::backdrop {
+			&::backdrop,
+			&::before {
 				opacity: $backdrop-opacity-weak;
 			}
 		}

showcases/angular-showcase/src/app/components/drawer/drawer.component.html

@@ -19,6 +19,7 @@
 			[width]="exampleProps?.width"
 			[spacing]="exampleProps?.spacing"
 			[direction]="exampleProps?.direction"
+			[variant]="exampleProps?.variant"
 			[open]="openDrawer === exampleName"
 			(onClose)="toggleDrawer(undefined)"
 			(close)="toggleDrawer(undefined)"

showcases/react-showcase/src/components/drawer/index.tsx

@@ -19,7 +19,8 @@ const getDrawer = ({
 	setOpenDrawer,
 	direction,
 	children,
-	backdrop
+	backdrop,
+	variant
 }: DBDrawerProps & AdditionalDrawerProperties) => (
 	<div>
 		<DBButton
@@ -34,6 +35,7 @@ const getDrawer = ({
 			spacing={spacing}
 			backdrop={backdrop}
 			direction={direction}
+			variant={variant}
 			open={openDrawer === id}
 			onClose={() => {
 				setOpenDrawer(undefined);

showcases/shared/drawer.json

@@ -175,5 +175,26 @@
 				}
 			}
 		]
+	},
+	{
+		"name": "Example",
+		"examples": [
+			{
+				"name": "(Default) As modal",
+				"props": {
+					"variant": "modal",
+					"open": "open",
+					"onClose": "toggleDrawer(false)"
+				}
+			},
+			{
+				"name": "Inside",
+				"props": {
+					"variant": "inside",
+					"open": "open",
+					"onClose": "toggleDrawer(false)"
+				}
+			}
+		]
 	}
 ]

showcases/vue-showcase/src/components/drawer/Drawer.vue

@@ -25,6 +25,7 @@ const toggleDrawer = (example?: string) => {
 				:width="exampleProps?.width"
 				:spacing="exampleProps?.spacing"
 				:direction="exampleProps?.direction"
+				:variant="exampleProps?.variant"
 				:open="openDrawer && openDrawer === exampleName"
 				@close="toggleDrawer(undefined)"
 			>