@snokam/ui 7.1.0 → 7.2.1
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/CHANGELOG.md +12 -0
- package/dist/components/dropzone/components/SingleFilePreview.styles.js +4 -4
- package/dist/components/overlay/index.d.ts.map +1 -1
- package/dist/components/overlay/index.js +41 -0
- package/dist/components/overlay/index.js.map +1 -1
- package/dist/styles/global.css +16 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [7.2.1](https://github.com/snokam/components/compare/@snokam/ui@7.2.0...@snokam/ui@7.2.1) (2026-11-04)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **ui:** keep dropzone remove-button icon readable in dark mode ([#3118](https://github.com/snokam/components/issues/3118)) ([6b2122a](https://github.com/snokam/components/commit/6b2122a98254eb744b5abdcf50afa4d29617788c)), closes [#e1f8](https://github.com/snokam/components/issues/e1f8)
|
|
11
|
+
|
|
12
|
+
# [7.2.0](https://github.com/snokam/components/compare/@snokam/ui@7.1.0...@snokam/ui@7.2.0) (2026-11-02)
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
- **mobile:** cards instead of wide tables, full-screen panels and olaf, action sheets, 44px touch targets, no ios input zoom ([71418fe](https://github.com/snokam/components/commit/71418feb79347c44cff8e9e5ff869635928dad8b))
|
|
17
|
+
|
|
6
18
|
# [7.1.0](https://github.com/snokam/components/compare/@snokam/ui@7.0.0...@snokam/ui@7.1.0) (2026-11-01)
|
|
7
19
|
|
|
8
20
|
### Bug Fixes
|
|
@@ -74,6 +74,10 @@ export const RemoveButton = styled(IconButton) `
|
|
|
74
74
|
top: 8px;
|
|
75
75
|
right: 8px;
|
|
76
76
|
background-color: rgba(255, 255, 255, 0.8);
|
|
77
|
+
/* Button background stays light in every theme, so keep the icon dark
|
|
78
|
+
regardless of [data-theme="dark"]. Previously this flipped to
|
|
79
|
+
--color-light-blue in dark mode, which is a pale blue (#e1f8ff) on a
|
|
80
|
+
near-white button background \u2014 effectively invisible. */
|
|
77
81
|
color: var(--color-primary);
|
|
78
82
|
transition: background-color 0.2s;
|
|
79
83
|
|
|
@@ -85,9 +89,5 @@ export const RemoveButton = styled(IconButton) `
|
|
|
85
89
|
opacity: 0.5;
|
|
86
90
|
cursor: not-allowed;
|
|
87
91
|
}
|
|
88
|
-
|
|
89
|
-
[data-theme="dark"] & {
|
|
90
|
-
color: var(--color-light-blue);
|
|
91
|
-
}
|
|
92
92
|
`;
|
|
93
93
|
//# sourceMappingURL=SingleFilePreview.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AA+GpD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA8CA;AA+BD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAe,GAChB,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC/B,+BAeA"}
|
|
@@ -7,6 +7,7 @@ import CloseIcon from "@mui/icons-material/Close";
|
|
|
7
7
|
import { tokens, SPACE } from "@snokam/ui/tokens";
|
|
8
8
|
import { useDockedPanelWidth } from "./useDockedPanelWidth";
|
|
9
9
|
import { useEscapeToClose } from "./useEscapeToClose";
|
|
10
|
+
const PHONE = "@media (max-width: 599px)";
|
|
10
11
|
const OverlayHeader = styled.div `
|
|
11
12
|
display: flex;
|
|
12
13
|
align-items: center;
|
|
@@ -15,6 +16,10 @@ const OverlayHeader = styled.div `
|
|
|
15
16
|
padding: ${SPACE.lg} ${SPACE.xl};
|
|
16
17
|
border-bottom: 1px solid var(--o-border);
|
|
17
18
|
background: var(--o-surface-section);
|
|
19
|
+
|
|
20
|
+
${PHONE} {
|
|
21
|
+
padding: ${SPACE.md} ${SPACE.lg};
|
|
22
|
+
}
|
|
18
23
|
`;
|
|
19
24
|
const OverlayTitle = styled.h2 `
|
|
20
25
|
margin: 0;
|
|
@@ -22,8 +27,15 @@ const OverlayTitle = styled.h2 `
|
|
|
22
27
|
color: var(--o-text);
|
|
23
28
|
`;
|
|
24
29
|
const OverlayBody = styled.div `
|
|
30
|
+
flex: 1 1 auto;
|
|
31
|
+
min-height: 0;
|
|
25
32
|
padding: ${SPACE.xl};
|
|
26
33
|
overflow-y: auto;
|
|
34
|
+
overscroll-behavior: contain;
|
|
35
|
+
|
|
36
|
+
${PHONE} {
|
|
37
|
+
padding: ${SPACE.lg};
|
|
38
|
+
}
|
|
27
39
|
`;
|
|
28
40
|
const OverlayFooter = styled.div `
|
|
29
41
|
display: flex;
|
|
@@ -32,6 +44,12 @@ const OverlayFooter = styled.div `
|
|
|
32
44
|
gap: ${SPACE.md};
|
|
33
45
|
padding: ${SPACE.lg} ${SPACE.xl};
|
|
34
46
|
border-top: 1px solid var(--o-border);
|
|
47
|
+
|
|
48
|
+
${PHONE} {
|
|
49
|
+
flex-wrap: wrap;
|
|
50
|
+
padding: ${SPACE.md} ${SPACE.lg}
|
|
51
|
+
calc(${SPACE.md} + env(safe-area-inset-bottom, 0px));
|
|
52
|
+
}
|
|
35
53
|
`;
|
|
36
54
|
const DrawerBackdrop = styled(Backdrop) `
|
|
37
55
|
z-index: 1299;
|
|
@@ -58,6 +76,16 @@ const PanelDrawer = styled(MuiDrawer, {
|
|
|
58
76
|
);
|
|
59
77
|
box-shadow: var(--o-shadow-card);
|
|
60
78
|
}
|
|
79
|
+
|
|
80
|
+
${PHONE} {
|
|
81
|
+
& .MuiDrawer-paper,
|
|
82
|
+
&[data-docked="true"] .MuiDrawer-paper {
|
|
83
|
+
top: 0;
|
|
84
|
+
right: 0;
|
|
85
|
+
height: 100dvh;
|
|
86
|
+
border-left: none;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
61
89
|
`;
|
|
62
90
|
const DrawerPanel = styled.div `
|
|
63
91
|
display: flex;
|
|
@@ -85,6 +113,14 @@ const StyledDialog = styled(MuiDialog) `
|
|
|
85
113
|
margin: ${SPACE.lg};
|
|
86
114
|
max-width: calc(100vw - ${SPACE.lg} * 2);
|
|
87
115
|
}
|
|
116
|
+
|
|
117
|
+
${PHONE} {
|
|
118
|
+
& .MuiDialog-paper {
|
|
119
|
+
margin: ${SPACE.sm};
|
|
120
|
+
max-width: calc(100vw - ${SPACE.sm} * 2);
|
|
121
|
+
max-height: calc(100dvh - ${SPACE.sm} * 2);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
88
124
|
`;
|
|
89
125
|
const DialogPanel = styled.div `
|
|
90
126
|
display: flex;
|
|
@@ -93,6 +129,11 @@ const DialogPanel = styled.div `
|
|
|
93
129
|
color: var(--o-text);
|
|
94
130
|
min-width: min(440px, calc(100vw - ${SPACE.lg} * 2));
|
|
95
131
|
max-width: 100%;
|
|
132
|
+
|
|
133
|
+
${PHONE} {
|
|
134
|
+
min-width: calc(100vw - ${SPACE.sm} * 2);
|
|
135
|
+
max-height: 100%;
|
|
136
|
+
}
|
|
96
137
|
`;
|
|
97
138
|
export function Dialog({ open, onClose, title, footer, children, maxWidth = "sm", }) {
|
|
98
139
|
return (_jsx(StyledDialog, { open: open, onClose: onClose, maxWidth: maxWidth, children: _jsxs(DialogPanel, { children: [_jsxs(OverlayHeader, { children: [_jsx(OverlayTitle, { children: title }), _jsx(IconButton, { onClick: onClose, "aria-label": "Lukk", size: "small", children: _jsx(CloseIcon, {}) })] }), _jsx(OverlayBody, { children: children }), footer ? _jsx(OverlayFooter, { children: footer }) : null] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/overlay/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAa,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EACL,QAAQ,EACR,MAAM,IAAI,SAAS,EACnB,MAAM,IAAI,SAAS,EACnB,UAAU,EACV,MAAM,EACN,kBAAkB,IAAI,SAAS,GAChC,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;SAIvB,KAAK,CAAC,EAAE;aACJ,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/overlay/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/styles/global.css
CHANGED
|
@@ -250,3 +250,19 @@ li {
|
|
|
250
250
|
font-size: 2.5rem;
|
|
251
251
|
}
|
|
252
252
|
}
|
|
253
|
+
|
|
254
|
+
@supports (-webkit-touch-callout: none) {
|
|
255
|
+
input,
|
|
256
|
+
textarea,
|
|
257
|
+
select {
|
|
258
|
+
font-size: max(16px, 1em) !important;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
@media (pointer: coarse) {
|
|
263
|
+
.MuiButtonBase-root::after {
|
|
264
|
+
content: "";
|
|
265
|
+
position: absolute;
|
|
266
|
+
inset: min(0px, calc((100% - 44px) / 2));
|
|
267
|
+
}
|
|
268
|
+
}
|
package/package.json
CHANGED