Skip to content

Commit 91b079b

Browse files
nmergetgithub-actions[bot]michaelmkraus
authored
feat: add position for DBDrawer to control the css behavior (#4470)
* feat: add `position` for DBDrawer to control the css behavior * auto update snapshots (#4471) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update packages/components/src/components/drawer/model.ts Co-authored-by: Michael Kraus <[email protected]> * auto update snapshots (#4473) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Michael Kraus <[email protected]>
1 parent 5f62dde commit 91b079b

File tree

9 files changed

+88
-17
lines changed

9 files changed

+88
-17
lines changed
-5.46 KB
Loading

packages/components/configs/angular/index.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const onClickPlugin = require('../plugins/on-click.cjs');
44
* @type {import('@builder.io/mitosis').ToAngularOptions}
55
*/
66
module.exports = {
7+
typescript: true,
78
attributePassing: {
89
customRef: '_ref'
910
},

packages/components/configs/react/index.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ const onClickPlugin = require('../plugins/on-click.cjs');
44
* @type {import('@builder.io/mitosis').ToReactOptions}
55
*/
66
module.exports = {
7+
typescript: true,
78
plugins: [onClickPlugin]
89
};

packages/components/configs/stencil/index.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const onClickPlugin = require('../plugins/on-click.cjs');
44
* @type {import('@builder.io/mitosis').ToStencilOptions}
55
*/
66
module.exports = {
7+
typescript: true,
78
attributePassing: {
89
enabled: true,
910
customRef: '_ref'

packages/components/configs/vue/index.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const onClickPlugin = require('../plugins/on-click.cjs');
44
* @type {import('@builder.io/mitosis').ToVueOptions}
55
*/
66
module.exports = {
7+
typescript: true,
78
api: 'composition',
89
plugins: [onClickPlugin]
910
};

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default function DBDrawer(props: DBDrawerProps) {
2121
const _ref = useRef<HTMLDialogElement | any>(null);
2222
const dialogContainerRef = useRef<HTMLDivElement | any>(null);
2323
const state = useStore<DBDrawerState>({
24+
initialized: false,
2425
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2526
handleClose: (
2627
event?:
@@ -67,6 +68,7 @@ export default function DBDrawer(props: DBDrawerProps) {
6768
dialogContainerRef.hidden = false;
6869
}
6970
if (
71+
props.position === 'absolute' ||
7072
props.backdrop === 'none' ||
7173
props.variant === 'inside'
7274
) {
@@ -92,20 +94,33 @@ export default function DBDrawer(props: DBDrawerProps) {
9294

9395
onMount(() => {
9496
state.handleDialogOpen();
97+
state.initialized = true;
9598
});
9699

97100
onUpdate(() => {
98101
state.handleDialogOpen();
99102
}, [props.open]);
100103

104+
onUpdate(() => {
105+
if (_ref && state.initialized && props.position === 'absolute') {
106+
const refElement = _ref as HTMLDialogElement;
107+
const parent = refElement.parentElement;
108+
if (parent) {
109+
parent.style.position = 'relative';
110+
}
111+
}
112+
}, [_ref, state.initialized, props.position]);
113+
101114
return (
102115
<dialog
103116
id={props.id}
104117
ref={_ref}
105118
class="db-drawer"
106119
onClick={(event) => state.handleClose(event)}
107120
onKeyDown={(event) => state.handleClose(event)}
121+
data-position={props.position}
108122
data-backdrop={props.backdrop}
123+
data-direction={props.direction}
109124
data-variant={props.variant}>
110125
<article
111126
ref={dialogContainerRef}

packages/components/src/components/drawer/drawer.scss

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@
3030
--db-drawer-max-height,
3131
calc(100% - #{variables.$db-spacing-fixed-xl})
3232
);
33+
min-block-size: var(
34+
--db-drawer-min-height,
35+
calc(100% - #{variables.$db-spacing-fixed-xl})
36+
);
3337
max-inline-size: none;
3438
}
3539
}
@@ -134,6 +138,10 @@ $spacings: (
134138
--db-drawer-max-width,
135139
calc(100% - #{variables.$db-spacing-fixed-xl})
136140
);
141+
min-inline-size: var(
142+
--db-drawer-min-width,
143+
calc(100% - #{variables.$db-spacing-fixed-xl})
144+
);
137145

138146
&:not([data-direction]),
139147
&[data-direction="right"] {
@@ -195,6 +203,40 @@ $spacings: (
195203
}
196204
}
197205

206+
&[data-position="absolute"] {
207+
position: absolute;
208+
z-index: 3;
209+
inset: 0;
210+
block-size: 100%;
211+
inline-size: 100%;
212+
background-color: transparent;
213+
214+
&[open] {
215+
display: flex;
216+
}
217+
218+
&:not([data-direction]),
219+
&[data-direction="right"],
220+
&[data-direction="left"] {
221+
flex-direction: column;
222+
}
223+
224+
&[data-direction="left"],
225+
&[data-direction="down"] {
226+
align-items: start;
227+
}
228+
229+
&:not([data-direction]),
230+
&[data-direction="right"],
231+
&[data-direction="up"] {
232+
align-items: end;
233+
}
234+
235+
.db-drawer-container {
236+
position: relative;
237+
}
238+
}
239+
198240
&[open] {
199241
.db-drawer-container {
200242
@media screen and (prefers-reduced-motion: no-preference) {

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
GeneralKeyboardEvent,
66
GlobalProps,
77
GlobalState,
8+
InitializedState,
89
InnerCloseButtonProps,
910
SpacingProps,
1011
WidthProps
@@ -24,6 +25,9 @@ export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
2425
export const DrawerVariantList = ['modal', 'inside'] as const;
2526
export type DrawerVariantType = (typeof DrawerVariantList)[number];
2627

28+
export const DrawerPositionList = ['fixed', 'absolute'] as const;
29+
export type DrawerPositionType = (typeof DrawerPositionList)[number];
30+
2731
export type DBDrawerDefaultProps = {
2832
/**
2933
* The backdrop attribute changes the opacity of the backdrop.
@@ -54,6 +58,13 @@ export type DBDrawerDefaultProps = {
5458
* Set the variant modal|inside. Defaults to modal.
5559
*/
5660
variant?: DrawerVariantType;
61+
/**
62+
* The position attribute changes the css-position (fixed or absolute) of the drawer.
63+
*
64+
* - `fixed` (default): Renders with `showModal()`, creating a true modal with a focus trap.
65+
* - `absolute`: Renders with `show()`, acting as a simple overlay **without** a focus trap.
66+
*/
67+
position?: DrawerPositionType;
5768
};
5869

5970
export type DBDrawerProps = DBDrawerDefaultProps &
@@ -75,4 +86,5 @@ export type DBDrawerState = DBDrawerDefaultState &
7586
CloseEventState<
7687
| ClickEvent<HTMLButtonElement | HTMLDialogElement>
7788
| GeneralKeyboardEvent<HTMLDialogElement>
78-
>;
89+
> &
90+
InitializedState;

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,28 @@ $backdrop-color-weak: color(
1111
#{variables.$db-opacity-sm}
1212
);
1313

14-
%dialog-container {
15-
position: fixed;
16-
inset: 0;
17-
z-index: 9995;
18-
}
19-
2014
dialog {
2115
padding: 0;
2216
margin: 0;
2317
border: 0;
2418
z-index: 9996;
2519
color: inherit;
2620

27-
&[data-variant],
28-
&[data-backdrop] {
29-
@extend %dialog-container;
30-
}
21+
&:not([data-position="absolute"]) {
22+
&[data-variant],
23+
&[data-backdrop] {
24+
position: fixed;
25+
inset: 0;
26+
z-index: 9995;
27+
}
3128

32-
&[data-variant="inside"] {
33-
&:not([data-backdrop="none"]) {
34-
&::before {
35-
content: "";
36-
position: fixed;
37-
inset: 0;
29+
&[data-variant="inside"] {
30+
&:not([data-backdrop="none"]) {
31+
&::before {
32+
content: "";
33+
position: fixed;
34+
inset: 0;
35+
}
3836
}
3937
}
4038
}

0 commit comments

Comments
 (0)