playbook_ui 11.14.0 → 11.15.0.pre.alpha.dependencies1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +39 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +3 -2
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +2 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb +13 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +32 -8
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md +5 -2
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +2 -2
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +3 -0
- data/lib/playbook/version.rb +2 -2
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 584e7531cf26019f6d3e797e08af310d98f3b803ffbecfc5cbb15ae68ad49223
|
4
|
+
data.tar.gz: 9c2f23fcefa678b65f3754d381e2208ab1483862cf87633d7e848408fa9fb00e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c35bc21ff0de922a2caa61f9b2fc95f83271157abadf76db23338df1ba377782e5f428aac4ce758c2e65d4a775fd9d7fa0ded5dcc1ad92587fa66ff4c2839d05
|
7
|
+
data.tar.gz: 6d4c4a506aa6c5b03b97f4bc614aaac2f1c9fcd9fd641a177546adc610e3eac0252413d776cfcda24ec0fc1daaf872a5f9956dfc998b730631c3efa4eac781b7
|
@@ -68,6 +68,12 @@
|
|
68
68
|
$opacity_visible: 1;
|
69
69
|
$opacity_hidden: 0;
|
70
70
|
|
71
|
+
.dialog_sticky_header {
|
72
|
+
position: sticky;
|
73
|
+
top: 0;
|
74
|
+
background-color: $white;
|
75
|
+
}
|
76
|
+
|
71
77
|
// @include pb_card;
|
72
78
|
background-color: $white;
|
73
79
|
box-shadow: $shadow_deepest;
|
@@ -155,14 +161,29 @@
|
|
155
161
|
height: 100%;
|
156
162
|
max-height: 100%;
|
157
163
|
max-width: none;
|
164
|
+
.dialog_footer {
|
165
|
+
position:fixed;
|
166
|
+
bottom: 0;
|
167
|
+
background-color: $white;
|
168
|
+
}
|
169
|
+
|
158
170
|
&[class*="_sm"] {
|
159
171
|
width: $medium;
|
172
|
+
.dialog_footer {
|
173
|
+
width: $medium;
|
174
|
+
}
|
160
175
|
}
|
161
176
|
&[class*="_md"] {
|
162
177
|
width: $large;
|
178
|
+
.dialog_footer {
|
179
|
+
width: $large;
|
180
|
+
}
|
163
181
|
}
|
164
182
|
&[class*="_lg"] {
|
165
183
|
width: $xlarge;
|
184
|
+
.dialog_footer {
|
185
|
+
width: $xlarge;
|
186
|
+
}
|
166
187
|
}
|
167
188
|
}
|
168
189
|
}
|
@@ -170,6 +191,7 @@
|
|
170
191
|
}
|
171
192
|
|
172
193
|
//styles specific to rails version of kit
|
194
|
+
// rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
|
173
195
|
.pb_dialog_wrapper_rails {
|
174
196
|
$medium: 500px;
|
175
197
|
$large: 800px;
|
@@ -199,24 +221,41 @@
|
|
199
221
|
height: 100% !important;
|
200
222
|
max-height: 100% !important;
|
201
223
|
max-width: 100%;
|
224
|
+
.dialog_footer {
|
225
|
+
position:fixed;
|
226
|
+
bottom: 0;
|
227
|
+
background-color: $white;
|
228
|
+
}
|
202
229
|
&[class*="_sm"] {
|
203
230
|
width: $medium;
|
231
|
+
.dialog_footer {
|
232
|
+
width: $medium;
|
233
|
+
}
|
204
234
|
}
|
205
235
|
&[class*="_md"] {
|
206
236
|
width: $large;
|
237
|
+
.dialog_footer {
|
238
|
+
width: $large;
|
239
|
+
}
|
207
240
|
}
|
208
241
|
&[class*="_lg"] {
|
209
242
|
width: $xlarge;
|
243
|
+
.dialog_footer {
|
244
|
+
width: $xlarge;
|
245
|
+
}
|
210
246
|
}
|
211
247
|
}
|
212
248
|
}
|
213
249
|
|
250
|
+
// fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
|
251
|
+
//conflicts were only apparent in nitro, not in playbook local env
|
214
252
|
.pb_dialog_rails {
|
215
253
|
top: 0 !important;
|
216
254
|
padding: unset !important;
|
217
255
|
margin: auto;
|
218
256
|
|
219
257
|
}
|
258
|
+
//overlay for rails kit
|
220
259
|
dialog::backdrop {
|
221
260
|
position: fixed;
|
222
261
|
top: 0;
|
@@ -43,7 +43,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
|
|
43
43
|
/* eslint-disable react/jsx-handler-names */
|
44
44
|
|
45
45
|
return (
|
46
|
-
|
46
|
+
<div className="dialog_sticky_header">
|
47
47
|
<Flex
|
48
48
|
{...ariaProps}
|
49
49
|
{...dataProps}
|
@@ -56,11 +56,12 @@ const DialogHeader = (props: DialogHeaderProps) => {
|
|
56
56
|
onClose={api.onClose}
|
57
57
|
/>
|
58
58
|
}
|
59
|
+
|
59
60
|
</Flex>
|
60
61
|
{separator &&
|
61
62
|
<SectionSeparator />
|
62
63
|
}
|
63
|
-
|
64
|
+
</div>
|
64
65
|
)
|
65
66
|
}
|
66
67
|
|
@@ -1,6 +1,7 @@
|
|
1
1
|
<%= content_tag(:div,
|
2
2
|
id: object.id,
|
3
3
|
data: object.data,
|
4
|
+
class: object.sticky_header,
|
4
5
|
aria: object.aria) do %>
|
5
6
|
<%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
|
6
7
|
<%= content.presence || object.title %>
|
@@ -52,11 +52,11 @@ const DialogFullHeight = () => {
|
|
52
52
|
onClick={toggleHeaderSeparatorDialog}>
|
53
53
|
{"Small Dialog"}
|
54
54
|
</Button>
|
55
|
-
<Button marginRight="
|
55
|
+
<Button marginRight="md"
|
56
56
|
onClick={toggleFooterSeparatorDialog}>
|
57
57
|
{"Medium Dialog"}
|
58
58
|
</Button>
|
59
|
-
<Button marginRight="
|
59
|
+
<Button marginRight="md"
|
60
60
|
onClick={toggleBothSeparatorsDialog}>
|
61
61
|
{"Large Dialog"}
|
62
62
|
</Button>
|
@@ -1,4 +1,5 @@
|
|
1
|
-
<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"} }) %>
|
1
|
+
<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"}, margin_right: "md" }) %>
|
2
|
+
<%= pb_rails("button", props: { text: "Open Full Height Dialog", data: {"open-dialog": "dialog-scroll-full-height"}, margin_right: "md" }) %>
|
2
3
|
|
3
4
|
<%= pb_rails("dialog", props: {
|
4
5
|
id:"dialog-scroll",
|
@@ -8,4 +9,15 @@
|
|
8
9
|
cancel_button: "Cancel",
|
9
10
|
confirm_button: "Confirm",
|
10
11
|
confirm_button_id: "confirm-button-1"
|
12
|
+
}) %>
|
13
|
+
|
14
|
+
<%= pb_rails("dialog", props: {
|
15
|
+
full_height: true,
|
16
|
+
id:"dialog-scroll-full-height",
|
17
|
+
size: "sm",
|
18
|
+
title: "Header Title is the Title Prop",
|
19
|
+
text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.",
|
20
|
+
cancel_button: "Cancel",
|
21
|
+
confirm_button: "Confirm",
|
22
|
+
confirm_button_id: "confirm-button-1"
|
11
23
|
}) %>
|
@@ -2,24 +2,48 @@ import React, { useState } from 'react'
|
|
2
2
|
import { Button, Dialog } from '../../'
|
3
3
|
|
4
4
|
const DialogScrollable = () => {
|
5
|
-
|
6
|
-
const
|
7
|
-
|
5
|
+
|
6
|
+
const useDialog = (visible = false) => {
|
7
|
+
const [opened, setOpened] = useState(visible)
|
8
|
+
const toggle = () => setOpened(!opened)
|
9
|
+
|
10
|
+
return [opened, toggle]
|
11
|
+
}
|
12
|
+
|
13
|
+
const [dialog1Opened, toggleDialog1] = useDialog()
|
14
|
+
const [dialog2Opened, toggleDialog2] = useDialog()
|
8
15
|
|
9
16
|
return (
|
10
17
|
<>
|
11
|
-
<Button
|
18
|
+
<Button marginRight="md"
|
19
|
+
onClick={toggleDialog1}>{'Open Dialog'}
|
20
|
+
</Button>
|
21
|
+
<Button marginRight="md"
|
22
|
+
onClick={toggleDialog2}>{'Open Full Height Dialog'}
|
23
|
+
</Button>
|
12
24
|
<Dialog
|
13
25
|
cancelButton="Cancel"
|
14
26
|
confirmButton="Okay"
|
15
|
-
onCancel={
|
16
|
-
onClose={
|
17
|
-
onConfirm={
|
18
|
-
opened={
|
27
|
+
onCancel={toggleDialog1}
|
28
|
+
onClose={toggleDialog1}
|
29
|
+
onConfirm={toggleDialog1}
|
30
|
+
opened={dialog1Opened}
|
19
31
|
size="md"
|
20
32
|
text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
|
21
33
|
title="Header Title is the Title Prop"
|
22
34
|
/>
|
35
|
+
<Dialog
|
36
|
+
cancelButton="Cancel"
|
37
|
+
confirmButton="Okay"
|
38
|
+
fullHeight
|
39
|
+
onCancel={toggleDialog2}
|
40
|
+
onClose={toggleDialog2}
|
41
|
+
onConfirm={toggleDialog2}
|
42
|
+
opened={dialog2Opened}
|
43
|
+
size="sm"
|
44
|
+
text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in."
|
45
|
+
title="Header Title is the Title Prop"
|
46
|
+
/>
|
23
47
|
</>
|
24
48
|
)
|
25
49
|
}
|
@@ -1,2 +1,5 @@
|
|
1
|
-
The dialog will create a scroll container automatically when the text exceeds the height of the page.
|
2
|
-
|
1
|
+
The dialog will create a scroll container automatically when the text exceeds the height of the page. No prop or configuration is needed.
|
2
|
+
|
3
|
+
When such a scroll container is created, the dialog header will remain fixed at top of dialog and not scroll with the body content.
|
4
|
+
|
5
|
+
If the dialog is a `fullHeight` variant, the header and footer will both be sticky and not scroll with the body content.
|
@@ -55,13 +55,13 @@ const DialogSizes = () => {
|
|
55
55
|
{'Small Dialog'}
|
56
56
|
</Button>
|
57
57
|
<Button
|
58
|
-
marginRight="
|
58
|
+
marginRight="md"
|
59
59
|
onClick={toggleMdDialog}
|
60
60
|
>
|
61
61
|
{'Medium Dialog'}
|
62
62
|
</Button>
|
63
63
|
<Button
|
64
|
-
marginRight="
|
64
|
+
marginRight="md"
|
65
65
|
onClick={toggleLgDialog}
|
66
66
|
>
|
67
67
|
{'Large Dialog'}
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 11.
|
4
|
+
version: 11.15.0.pre.alpha.dependencies1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2023-01-04 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -2359,9 +2359,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2359
2359
|
version: '0'
|
2360
2360
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2361
2361
|
requirements:
|
2362
|
-
- - "
|
2362
|
+
- - ">"
|
2363
2363
|
- !ruby/object:Gem::Version
|
2364
|
-
version:
|
2364
|
+
version: 1.3.1
|
2365
2365
|
requirements: []
|
2366
2366
|
rubygems_version: 3.3.7
|
2367
2367
|
signing_key:
|