colibri-ui 0.8.95 → 0.8.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Modal/Modal.module.css +10 -0
- package/Modal/index.js +4 -2
- package/Modal/index.props.d.ts +6 -0
- package/esm/Modal/Modal.module.css +10 -0
- package/esm/Modal/index.js +4 -2
- package/esm/Modal/index.props.d.ts +6 -0
- package/package.json +1 -1
package/Modal/Modal.module.css
CHANGED
|
@@ -61,4 +61,14 @@
|
|
|
61
61
|
max-height: calc(100% - var(--space-8));
|
|
62
62
|
max-width: calc(100% - var(--space-8));
|
|
63
63
|
min-width: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.modal-wrapper_contained.modal-wrapper_fill {
|
|
67
|
+
border: 0;
|
|
68
|
+
border-radius: 0;
|
|
69
|
+
height: 100%;
|
|
70
|
+
max-height: none;
|
|
71
|
+
max-width: none;
|
|
72
|
+
min-width: 0;
|
|
73
|
+
width: 100%;
|
|
64
74
|
}
|
package/Modal/index.js
CHANGED
|
@@ -30,7 +30,8 @@ const ModalRoot = ({
|
|
|
30
30
|
className,
|
|
31
31
|
onClose,
|
|
32
32
|
title,
|
|
33
|
-
withinParent = false
|
|
33
|
+
withinParent = false,
|
|
34
|
+
fillParent = false
|
|
34
35
|
}) => {
|
|
35
36
|
const [dialog, setDialog] = React.useState(null);
|
|
36
37
|
const [container, setContainer] = React.useState(null);
|
|
@@ -108,7 +109,8 @@ const ModalRoot = ({
|
|
|
108
109
|
className: clsx__default.default(styles__default.default["modal-wrapper"], {
|
|
109
110
|
[styles__default.default["modal-wrapper_desktop"]]: isDesktop,
|
|
110
111
|
[styles__default.default["modal-wrapper_mobile"]]: !isDesktop,
|
|
111
|
-
[styles__default.default["modal-wrapper_contained"]]: isContained
|
|
112
|
+
[styles__default.default["modal-wrapper_contained"]]: isContained,
|
|
113
|
+
[styles__default.default["modal-wrapper_fill"]]: isContained && fillParent
|
|
112
114
|
}, className),
|
|
113
115
|
ref: setContainer
|
|
114
116
|
}, content))));
|
package/Modal/index.props.d.ts
CHANGED
|
@@ -13,6 +13,12 @@ export type ModalProps = {
|
|
|
13
13
|
* rendered inside another `Modal`.
|
|
14
14
|
*/
|
|
15
15
|
withinParent?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Makes a `withinParent` modal take the whole parent window, with no
|
|
18
|
+
* offset. The parent border and radius form the edges. Has no effect
|
|
19
|
+
* without `withinParent` or a parent modal.
|
|
20
|
+
*/
|
|
21
|
+
fillParent?: boolean;
|
|
16
22
|
};
|
|
17
23
|
export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
18
24
|
/**
|
|
@@ -61,4 +61,14 @@
|
|
|
61
61
|
max-height: calc(100% - var(--space-8));
|
|
62
62
|
max-width: calc(100% - var(--space-8));
|
|
63
63
|
min-width: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.modal-wrapper_contained.modal-wrapper_fill {
|
|
67
|
+
border: 0;
|
|
68
|
+
border-radius: 0;
|
|
69
|
+
height: 100%;
|
|
70
|
+
max-height: none;
|
|
71
|
+
max-width: none;
|
|
72
|
+
min-width: 0;
|
|
73
|
+
width: 100%;
|
|
64
74
|
}
|
package/esm/Modal/index.js
CHANGED
|
@@ -22,7 +22,8 @@ const ModalRoot = ({
|
|
|
22
22
|
className,
|
|
23
23
|
onClose,
|
|
24
24
|
title,
|
|
25
|
-
withinParent = false
|
|
25
|
+
withinParent = false,
|
|
26
|
+
fillParent = false
|
|
26
27
|
}) => {
|
|
27
28
|
const [dialog, setDialog] = useState(null);
|
|
28
29
|
const [container, setContainer] = useState(null);
|
|
@@ -100,7 +101,8 @@ const ModalRoot = ({
|
|
|
100
101
|
className: clsx(styles["modal-wrapper"], {
|
|
101
102
|
[styles["modal-wrapper_desktop"]]: isDesktop,
|
|
102
103
|
[styles["modal-wrapper_mobile"]]: !isDesktop,
|
|
103
|
-
[styles["modal-wrapper_contained"]]: isContained
|
|
104
|
+
[styles["modal-wrapper_contained"]]: isContained,
|
|
105
|
+
[styles["modal-wrapper_fill"]]: isContained && fillParent
|
|
104
106
|
}, className),
|
|
105
107
|
ref: setContainer
|
|
106
108
|
}, content))));
|
|
@@ -13,6 +13,12 @@ export type ModalProps = {
|
|
|
13
13
|
* rendered inside another `Modal`.
|
|
14
14
|
*/
|
|
15
15
|
withinParent?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Makes a `withinParent` modal take the whole parent window, with no
|
|
18
|
+
* offset. The parent border and radius form the edges. Has no effect
|
|
19
|
+
* without `withinParent` or a parent modal.
|
|
20
|
+
*/
|
|
21
|
+
fillParent?: boolean;
|
|
16
22
|
};
|
|
17
23
|
export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
18
24
|
/**
|