@propellerads/dialog 0.1.0 → 0.2.0
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/README.md +24 -1
- package/dist/index.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -99,6 +99,29 @@ for a fifth name:
|
|
|
99
99
|
.onboarding .dialog { --dialog-width: 720px; }
|
|
100
100
|
```
|
|
101
101
|
|
|
102
|
+
### Long content
|
|
103
|
+
|
|
104
|
+
The box grows with what is inside it, as shadcn's does. A dialog taller than the
|
|
105
|
+
screen scrolls with the page behind it, header and footer included. Nothing
|
|
106
|
+
inside is clipped, so a select menu, a date picker or a hint opens past the edge
|
|
107
|
+
of the box and stays clickable.
|
|
108
|
+
|
|
109
|
+
Content that is long by nature brings its own scroller, the way shadcn's
|
|
110
|
+
"Scrollable content" example does. The heading and the buttons then hold their
|
|
111
|
+
place:
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
<Dialog isOpen={isOpen} onClose={close} title="Preferred columns" footer={…}>
|
|
115
|
+
<div className="columns">…</div>
|
|
116
|
+
</Dialog>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
```css
|
|
120
|
+
.columns { max-height: 50vh; overflow-y: auto; }
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
Keep menus out of that scroller: a select inside it is clipped by it.
|
|
124
|
+
|
|
102
125
|
## Props
|
|
103
126
|
|
|
104
127
|
| Prop | Type | Default | What it does |
|
|
@@ -108,7 +131,7 @@ for a fifth name:
|
|
|
108
131
|
| `onOpenChange` | `(isOpen: boolean) => void` | — | Called whenever the dialog opens or closes, whoever asked for it. |
|
|
109
132
|
| `onClose` | `() => void` | — | Called when the dialog asks to be closed. The shorthand for `onOpenChange`. |
|
|
110
133
|
| `title` | `ReactNode` | — | The heading, and the dialog's accessible name. |
|
|
111
|
-
| `children` | `ReactNode` | — | What the dialog is about.
|
|
134
|
+
| `children` | `ReactNode` | — | What the dialog is about. It does not scroll on its own: see [Long content](#long-content). |
|
|
112
135
|
| `footer` | `ReactNode` | — | The row at the bottom. Buttons end at the right edge. |
|
|
113
136
|
| `width` | `DialogWidth` | `'minimum'` | How wide the box may grow. |
|
|
114
137
|
| `isDismissable` | `boolean` | `true` | Whether the dialog can be dismissed at all: the cross, Escape and the backdrop together. |
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.dialog__backdrop{--dialog-backdrop-blur:4px;z-index:var(--dialog-layer,3000);background-color:var(--dialog-backdrop,var(--over-fullscreen));-webkit-backdrop-filter:blur(var(--dialog-backdrop-blur));backdrop-filter:blur(var(--dialog-backdrop-blur));transition:opacity var(--duration-100) var(--ease-flat);position:fixed;inset:0}.dialog__viewport{z-index:var(--dialog-layer,3000);padding:var(--space-24);overscroll-behavior:contain;justify-content:center;align-items:
|
|
1
|
+
.dialog__backdrop{--dialog-backdrop-blur:4px;z-index:var(--dialog-layer,3000);background-color:var(--dialog-backdrop,var(--over-fullscreen));-webkit-backdrop-filter:blur(var(--dialog-backdrop-blur));backdrop-filter:blur(var(--dialog-backdrop-blur));transition:opacity var(--duration-100) var(--ease-flat);position:fixed;inset:0}.dialog__viewport{z-index:var(--dialog-layer,3000);padding:var(--space-24);overscroll-behavior:contain;justify-content:center;align-items:flex-start;display:flex;position:fixed;inset:0;overflow:auto}.dialog{--dialog-bg:var(--color-light-inversion);--dialog-fg:var(--color-dark-inversion);--dialog-padding:var(--space-24);--dialog-gap:var(--space-24);--dialog-radius:var(--radius-24);--dialog-shadow:var(--shadow-big);--dialog-width:296px;box-sizing:border-box;gap:var(--dialog-gap);width:min(var(--dialog-width), 100%);padding:var(--dialog-padding);border-radius:var(--dialog-radius);background-color:var(--dialog-bg);box-shadow:var(--dialog-shadow);color:var(--dialog-fg);font:var(--font-text);font-family:var(--font-family);--dialog-ease:var(--ease-enter);transition:opacity var(--duration-100) var(--ease-flat), transform var(--duration-100) var(--dialog-ease);outline:none;flex-direction:column;margin-block:auto;display:flex;position:relative}.dialog--minimum{--dialog-width:296px}.dialog--small{--dialog-width:400px}.dialog--medium{--dialog-width:600px}.dialog--big{--dialog-width:1080px}.dialog__header{align-items:flex-start;gap:var(--space-8);display:flex}.dialog__title{min-width:0;margin:var(--space-0);font:var(--font-h2);font-family:var(--font-family);word-break:break-word;flex:auto}.dialog__header:has(.dialog__close) .dialog__title{padding-block-start:calc(var(--space-4) + var(--space-2))}.dialog__close.button{--button-accent:var(--color-quiet);flex:none}.dialog__close svg{width:var(--space-24);height:var(--space-24);fill:currentColor;display:block}.dialog__content{word-break:break-word;flex:none}.dialog__footer{justify-content:flex-end;align-items:center;gap:var(--space-12);flex-wrap:wrap;flex:none;display:flex}.dialog__backdrop[data-starting-style],.dialog__backdrop[data-ending-style]{opacity:0}.dialog[data-starting-style],.dialog[data-ending-style]{opacity:0;transform:scale(.95)}.dialog[data-ending-style]{--dialog-ease:var(--ease-exit)}@media (width<=480px){.dialog{--dialog-padding:var(--space-16);--dialog-gap:var(--space-16);--dialog-width:100%}.dialog__viewport{padding:var(--space-16)}}
|