playbook_ui 14.12.0.pre.alpha.playrailsinputmaskissue5775 → 14.12.0.pre.alpha.playrailsinputmaskissue5933
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +10 -3
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts +26 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +6 -6
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +34 -21
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +9 -0
- data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +11 -7
- data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +6 -7
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +9 -3
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +6 -2
- data/app/pb_kits/playbook/pb_button/button.rb +1 -1
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +2 -1
- data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb +15 -0
- data/app/pb_kits/playbook/pb_copy_button/copy_button.rb +28 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +5 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +3 -3
- data/app/pb_kits/playbook/pb_copy_button/index.js +47 -0
- data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -6
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -5
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +58 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +3 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +7 -5
- data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +1 -6
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_link/_link.tsx +18 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +15 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +29 -0
- data/app/pb_kits/playbook/pb_link/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_link/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_link/link.html.erb +1 -1
- data/app/pb_kits/playbook/pb_link/link.rb +6 -0
- data/app/pb_kits/playbook/pb_link/link.test.jsx +30 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +6 -9
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +6 -9
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +26 -0
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +0 -1
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +25 -0
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +25 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/index.js +12 -42
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +45 -27
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +5 -1
- data/app/pb_kits/playbook/pb_user/_user.tsx +3 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +42 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +59 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +2 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_user/user.html.erb +1 -1
- data/app/pb_kits/playbook/pb_user/user.rb +1 -0
- data/app/pb_kits/playbook/pb_user/user.test.js +14 -0
- data/dist/chunks/{_typeahead-BIhRQo8Q.js → _typeahead-qhstadx9.js} +3 -3
- data/dist/chunks/_weekday_stacked-CAHsfiaG.js +45 -0
- data/dist/chunks/{lib-kMuhBuU7.js → lib-DjpLC8uO.js} +1 -1
- data/dist/chunks/{pb_form_validation-DBJ0wZuS.js → pb_form_validation-S56UaHZl.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +20 -7
- data/dist/chunks/_weekday_stacked-CttHBFW3.js +0 -45
- /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close.md → _fixed_confirmation_toast_auto_close_react.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5d0b37aeb1934fcd42145b3b00c5ccdb1d0d202320271ffb3f6cce025a8842c1
|
4
|
+
data.tar.gz: d4947bdab12110f001ddb7a4dccd6cb76632f77c5d834aa7ceb4c2ca3f090de9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ed89b4908906b35935f6dc4a95243dbcecc890b73cad32d5e91420d9ccaf762a4ab38fecb391b0c4c72af07d04222066a38b7e8a2c31881da1038457c91861b6
|
7
|
+
data.tar.gz: 07a73fd48069b741436c35ed29821d438f1f2114ff1d90eda9626ca2d6632fbf6a0c997eefe8398e0b37b1935fc929c45160e2a959574b7b4f400fd9195e7229
|
@@ -39,8 +39,15 @@ export const TableHeaderCell = ({
|
|
39
39
|
sortIcon,
|
40
40
|
table
|
41
41
|
}: TableHeaderCellProps) => {
|
42
|
-
const {
|
43
|
-
|
42
|
+
const {
|
43
|
+
sortControl,
|
44
|
+
responsive,
|
45
|
+
selectableRows,
|
46
|
+
hasAnySubRows,
|
47
|
+
showActionsBar,
|
48
|
+
inlineRowLoading,
|
49
|
+
isActionBarVisible,
|
50
|
+
} = useContext(AdvancedTableContext);
|
44
51
|
|
45
52
|
type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
|
46
53
|
|
@@ -65,7 +72,7 @@ export const TableHeaderCell = ({
|
|
65
72
|
|
66
73
|
const cellClassName = classnames(
|
67
74
|
"table-header-cells",
|
68
|
-
`${showActionsBar && "header-cells-with-actions"}`,
|
75
|
+
`${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
|
69
76
|
`${isChrome() ? "chrome-styles" : ""}`,
|
70
77
|
`${enableSorting ? "table-header-cells-active" : ""}`,
|
71
78
|
{ "pinned-left": responsive === "scroll" && isPinnedLeft },
|
@@ -0,0 +1,26 @@
|
|
1
|
+
export const showActionBar = (elem: HTMLElement) => {
|
2
|
+
elem.style.display = "block";
|
3
|
+
const height = elem.scrollHeight + "px";
|
4
|
+
elem.style.height = height;
|
5
|
+
elem.classList.add("is-visible");
|
6
|
+
elem.style.overflow = "hidden";
|
7
|
+
|
8
|
+
window.setTimeout(() => {
|
9
|
+
if (elem.classList.contains("is-visible")) {
|
10
|
+
elem.style.height = "";
|
11
|
+
elem.style.overflow = "visible";
|
12
|
+
}
|
13
|
+
}, 300);
|
14
|
+
};
|
15
|
+
|
16
|
+
export const hideActionBar = (elem: HTMLElement) => {
|
17
|
+
elem.style.height = elem.scrollHeight + "px";
|
18
|
+
elem.offsetHeight;
|
19
|
+
window.setTimeout(() => {
|
20
|
+
elem.style.height = "0";
|
21
|
+
elem.style.overflow = "hidden";
|
22
|
+
}, 10);
|
23
|
+
window.setTimeout(() => {
|
24
|
+
elem.classList.remove("is-visible");
|
25
|
+
}, 300);
|
26
|
+
};
|
@@ -31,12 +31,12 @@
|
|
31
31
|
width: 100%;
|
32
32
|
}
|
33
33
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
34
|
+
.row-selection-actions-card {
|
35
|
+
border-bottom-right-radius: 0px !important;
|
36
|
+
border-bottom-left-radius: 0px !important;
|
37
|
+
border-bottom-color: transparent;
|
38
|
+
transition: height 300ms ease;
|
39
|
+
}
|
40
40
|
.table-header-cells:first-child {
|
41
41
|
min-width: 180px;
|
42
42
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useState, useEffect, useCallback } from "react"
|
1
|
+
import React, { useState, useEffect, useCallback, useRef } from "react"
|
2
2
|
import classnames from "classnames"
|
3
3
|
|
4
4
|
import { GenericObject } from "../types"
|
@@ -27,6 +27,7 @@ import FlexItem from "../pb_flex/_flex_item"
|
|
27
27
|
import AdvancedTableContext from "./Context/AdvancedTableContext"
|
28
28
|
|
29
29
|
import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
|
30
|
+
import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
|
30
31
|
|
31
32
|
import { CustomCell } from "./Components/CustomCell"
|
32
33
|
import { TableHeader } from "./SubKits/TableHeader"
|
@@ -295,6 +296,20 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
295
296
|
const onPageChange = (page: number) => {
|
296
297
|
table.setPageIndex(page - 1)
|
297
298
|
}
|
299
|
+
//When to show the actions bar as a whole
|
300
|
+
const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
|
301
|
+
|
302
|
+
//Ref and useEffect for animating the actions bar
|
303
|
+
const cardRef = useRef(null);
|
304
|
+
useEffect(() => {
|
305
|
+
if (cardRef.current) {
|
306
|
+
if (isActionBarVisible) {
|
307
|
+
showActionBar(cardRef.current);
|
308
|
+
} else {
|
309
|
+
hideActionBar(cardRef.current);
|
310
|
+
}
|
311
|
+
}
|
312
|
+
}, [isActionBarVisible]);
|
298
313
|
|
299
314
|
return (
|
300
315
|
<div {...ariaProps}
|
@@ -311,6 +326,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
311
326
|
expandedControl,
|
312
327
|
handleExpandOrCollapse,
|
313
328
|
inlineRowLoading,
|
329
|
+
isActionBarVisible,
|
314
330
|
loading,
|
315
331
|
responsive,
|
316
332
|
setExpanded,
|
@@ -333,27 +349,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
333
349
|
total={table.getPageCount()}
|
334
350
|
/>
|
335
351
|
}
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
352
|
+
<Card
|
353
|
+
borderNone={!isActionBarVisible}
|
354
|
+
className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
|
355
|
+
htmlOptions={{ ref: cardRef as any }}
|
356
|
+
padding={`${isActionBarVisible ? "xs" : "none"}`}
|
357
|
+
>
|
358
|
+
<Flex alignItems="center"
|
359
|
+
justify="between"
|
360
|
+
>
|
361
|
+
<Caption color="light"
|
362
|
+
paddingLeft="xs"
|
363
|
+
size="xs"
|
340
364
|
>
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
size="xs"
|
347
|
-
>
|
348
|
-
{selectedRowsLength} Selected
|
349
|
-
</Caption>
|
350
|
-
<FlexItem>
|
351
|
-
{actions}
|
352
|
-
</FlexItem>
|
353
|
-
</Flex>
|
354
|
-
</Card>
|
355
|
-
)
|
356
|
-
}
|
365
|
+
{selectedRowsLength} Selected
|
366
|
+
</Caption>
|
367
|
+
<FlexItem>{actions}</FlexItem>
|
368
|
+
</Flex>
|
369
|
+
</Card>
|
357
370
|
<Table
|
358
371
|
className={`${loading ? "content-loading" : ""}`}
|
359
372
|
dark={dark}
|
@@ -27,6 +27,9 @@ $avatar-sizes: (
|
|
27
27
|
flex-basis: $size;
|
28
28
|
|
29
29
|
& > [class^=pb_flex_kit] {
|
30
|
+
[class^=pb_card_kit] {
|
31
|
+
padding: 2px;
|
32
|
+
}
|
30
33
|
[class^=pb_card_kit].overlay_bottom_center,
|
31
34
|
[class^=pb_card_kit].overlay_top_center {
|
32
35
|
left: 50%;
|
@@ -52,6 +55,10 @@ $avatar-sizes: (
|
|
52
55
|
flex-grow: 0;
|
53
56
|
flex-basis: $size;
|
54
57
|
|
58
|
+
.dark & {
|
59
|
+
background: $text_dk_light;
|
60
|
+
}
|
61
|
+
|
55
62
|
&::before {
|
56
63
|
content: attr(data-initials);
|
57
64
|
width: 100%;
|
@@ -78,9 +85,11 @@ $avatar-sizes: (
|
|
78
85
|
}
|
79
86
|
}
|
80
87
|
}
|
88
|
+
|
81
89
|
&.dark {
|
82
90
|
[class^=pb_card_kit] {
|
83
91
|
position: absolute;
|
92
|
+
padding: 2px;
|
84
93
|
}
|
85
94
|
}
|
86
95
|
}
|
@@ -23,8 +23,8 @@ export type AvatarProps = {
|
|
23
23
|
variant?: string,
|
24
24
|
icon?: string
|
25
25
|
},
|
26
|
-
data?: {[key: string]: string},
|
27
26
|
dark?: boolean,
|
27
|
+
data?: {[key: string]: string},
|
28
28
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
29
29
|
id?: string,
|
30
30
|
imageAlt?: string,
|
@@ -71,13 +71,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
|
|
71
71
|
|
72
72
|
const canShowImage = imageUrl && !error
|
73
73
|
|
74
|
-
const onlineStatusSize =
|
74
|
+
const onlineStatusSize =
|
75
75
|
['xxs', 'xs'].includes(size) ? 'sm' :
|
76
76
|
['sm', 'md'].includes(size) ? 'md' :
|
77
77
|
['lg', 'xl'].includes(size) ? 'lg' :
|
78
78
|
'sm';
|
79
79
|
|
80
|
-
const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
|
80
|
+
const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
|
81
81
|
{
|
82
82
|
top: { inset: true, value: "0" },
|
83
83
|
right: { inset: false, value: "xxs" }
|
@@ -96,10 +96,10 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
|
|
96
96
|
id={id}
|
97
97
|
>
|
98
98
|
{componentOverlay ? (
|
99
|
-
<Flex display="display_inline_block"
|
99
|
+
<Flex display="display_inline_block"
|
100
100
|
position="relative"
|
101
101
|
>
|
102
|
-
<div className="avatar_wrapper"
|
102
|
+
<div className="avatar_wrapper"
|
103
103
|
data-initials={initials}
|
104
104
|
>
|
105
105
|
{canShowImage && (
|
@@ -115,12 +115,14 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
|
|
115
115
|
<Card
|
116
116
|
borderNone
|
117
117
|
borderRadius="rounded"
|
118
|
+
dark={dark}
|
118
119
|
padding="none"
|
119
120
|
position="absolute"
|
120
121
|
{...getPlacementProps(componentOverlay.placement, size)}
|
121
122
|
>
|
122
|
-
|
123
|
+
|
123
124
|
<Badge
|
125
|
+
dark={dark}
|
124
126
|
rounded
|
125
127
|
text={componentOverlay.text}
|
126
128
|
variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
|
@@ -131,11 +133,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
|
|
131
133
|
<Card
|
132
134
|
borderNone
|
133
135
|
borderRadius="rounded"
|
136
|
+
dark={dark}
|
134
137
|
htmlOptions={{style: {padding:"2px"}}}
|
135
138
|
position="absolute"
|
136
139
|
{...getPlacementProps(componentOverlay.placement, size)}
|
137
140
|
>
|
138
141
|
<IconCircle
|
142
|
+
dark={dark}
|
139
143
|
icon={componentOverlay.icon}
|
140
144
|
size="xxs"
|
141
145
|
variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
|
@@ -145,7 +149,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
|
|
145
149
|
</Flex>
|
146
150
|
) : (
|
147
151
|
<>
|
148
|
-
<div className="avatar_wrapper"
|
152
|
+
<div className="avatar_wrapper"
|
149
153
|
data-initials={initials}
|
150
154
|
>
|
151
155
|
{canShowImage && (
|
@@ -1,22 +1,22 @@
|
|
1
1
|
|
2
2
|
<%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
|
3
3
|
<% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
|
4
|
-
<%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
|
4
|
+
<%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
|
5
5
|
<%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
|
6
6
|
<%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
|
7
7
|
<% end %>
|
8
|
-
<%= pb_rails("card", props: { border_none: true, border_radius: "rounded",
|
8
|
+
<%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %>
|
9
9
|
|
10
|
-
<%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
|
10
|
+
<%= pb_rails("icon_circle", props: { dark: object.dark, size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
|
11
11
|
<% end %>
|
12
12
|
<% end %>
|
13
13
|
<% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
|
14
|
-
<%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
|
14
|
+
<%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
|
15
15
|
<%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
|
16
16
|
<%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
|
17
17
|
<% end %>
|
18
|
-
<%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
|
19
|
-
<%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
|
18
|
+
<%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
|
19
|
+
<%= pb_rails("badge", props: { dark: object.dark, rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
|
20
20
|
<% end %>
|
21
21
|
<% end %>
|
22
22
|
<% else %>
|
@@ -26,4 +26,3 @@
|
|
26
26
|
<%= pb_rails("online_status", props: object.online_status_props) if object.status %>
|
27
27
|
<% end %>
|
28
28
|
<% end %>
|
29
|
-
|
@@ -1,18 +1,19 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Avatar } from 'playbook-ui'
|
3
3
|
|
4
|
-
const AvatarBadgeComponentOverlay = () => {
|
4
|
+
const AvatarBadgeComponentOverlay = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<Avatar
|
8
8
|
componentOverlay={{
|
9
9
|
component: "badge",
|
10
10
|
placement: "bottom-right",
|
11
|
-
text: "12"
|
11
|
+
text: "12",
|
12
12
|
}}
|
13
13
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
14
14
|
marginBottom="sm"
|
15
15
|
size="sm"
|
16
|
+
{...props}
|
16
17
|
/>
|
17
18
|
|
18
19
|
<Avatar
|
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
|
|
24
25
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
25
26
|
marginBottom="sm"
|
26
27
|
size="md"
|
28
|
+
{...props}
|
29
|
+
|
27
30
|
/>
|
28
31
|
|
29
32
|
<Avatar
|
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
|
|
36
39
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
37
40
|
marginBottom="sm"
|
38
41
|
size="lg"
|
42
|
+
{...props}
|
43
|
+
|
39
44
|
/>
|
40
45
|
|
41
46
|
<Avatar
|
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
|
|
48
53
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
49
54
|
marginBottom="sm"
|
50
55
|
size="xl"
|
51
|
-
|
56
|
+
{...props}
|
57
|
+
/>
|
52
58
|
</div>
|
53
59
|
)
|
54
60
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Avatar } from 'playbook-ui'
|
3
3
|
|
4
|
-
const AvatarCircleIconComponentOverlay = () => {
|
4
|
+
const AvatarCircleIconComponentOverlay = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<Avatar
|
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
14
14
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
15
15
|
marginBottom="sm"
|
16
16
|
size="sm"
|
17
|
+
{...props}
|
17
18
|
/>
|
18
19
|
|
19
20
|
<Avatar
|
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
26
27
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
27
28
|
marginBottom="sm"
|
28
29
|
size="md"
|
30
|
+
{...props}
|
29
31
|
/>
|
30
32
|
|
31
33
|
<Avatar
|
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
38
40
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
39
41
|
marginBottom="sm"
|
40
42
|
size="lg"
|
43
|
+
{...props}
|
41
44
|
/>
|
42
45
|
|
43
46
|
<Avatar
|
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
|
|
50
53
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
51
54
|
marginBottom="sm"
|
52
55
|
size="xl"
|
53
|
-
|
56
|
+
{...props}
|
57
|
+
/>
|
54
58
|
</div>
|
55
59
|
)
|
56
60
|
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<%= pb_content_tag do %>
|
2
|
+
<%= pb_rails("button", props: { icon: "copy" }) do %>
|
3
|
+
<%= object.text %>
|
4
|
+
<% end %>
|
5
|
+
<% if object.id %>
|
6
|
+
<%= pb_rails("tooltip", props: {
|
7
|
+
trigger_element_selector: "##{object.id}",
|
8
|
+
position: object.tooltip_position,
|
9
|
+
tooltip_id: "#{object.id}_tooltip",
|
10
|
+
trigger_method: "click"
|
11
|
+
}) do %>
|
12
|
+
<%= object.tooltip_text %>
|
13
|
+
<% end %>
|
14
|
+
<% end %>
|
15
|
+
<% end %>
|
@@ -0,0 +1,28 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbCopyButton
|
5
|
+
class CopyButton < ::Playbook::KitBase
|
6
|
+
prop :text
|
7
|
+
prop :tooltip_position,
|
8
|
+
type: Playbook::Props::Enum,
|
9
|
+
values: %w[top right bottom left],
|
10
|
+
default: "top"
|
11
|
+
prop :tooltip_text, type: Playbook::Props::String,
|
12
|
+
default: "Copied!"
|
13
|
+
prop :value
|
14
|
+
prop :from
|
15
|
+
|
16
|
+
def classname
|
17
|
+
generate_classname("pb_copy_button_kit")
|
18
|
+
end
|
19
|
+
|
20
|
+
def data
|
21
|
+
Hash(values[:data]).merge(
|
22
|
+
"copy-value": value,
|
23
|
+
"from": from
|
24
|
+
)
|
25
|
+
end
|
26
|
+
end
|
27
|
+
end
|
28
|
+
end
|
@@ -0,0 +1,2 @@
|
|
1
|
+
<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
|
2
|
+
<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
@@ -0,0 +1,5 @@
|
|
1
|
+
<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
|
2
|
+
<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
|
3
|
+
<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
4
|
+
<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
|
5
|
+
<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import PbEnhancedElement from "../pb_enhanced_element"
|
2
|
+
|
3
|
+
export default class PbCopyButton extends PbEnhancedElement {
|
4
|
+
static get selector() {
|
5
|
+
return '.pb_copy_button_kit'
|
6
|
+
}
|
7
|
+
|
8
|
+
connect() {
|
9
|
+
this.handleClick = this.handleClick.bind(this)
|
10
|
+
this.button = this.element.querySelector('button')
|
11
|
+
if (this.button) {
|
12
|
+
this.button.addEventListener('click', this.handleClick)
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
disconnect() {
|
17
|
+
if (this.button) {
|
18
|
+
this.button.removeEventListener('click', this.handleClick)
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
handleClick() {
|
23
|
+
const fromId = this.element.getAttribute('data-from')
|
24
|
+
if (fromId) {
|
25
|
+
const fromElement = document.querySelector(`#${fromId}`)
|
26
|
+
if (fromElement) {
|
27
|
+
let contentToCopy = ''
|
28
|
+
if (fromElement.tagName.toLowerCase() === 'input') {
|
29
|
+
contentToCopy = fromElement.value
|
30
|
+
} else {
|
31
|
+
contentToCopy = fromElement.innerText
|
32
|
+
}
|
33
|
+
navigator.clipboard.writeText(contentToCopy)
|
34
|
+
.catch(err => console.error('Failed to copy text', err))
|
35
|
+
return
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
const textToCopy = this.element.getAttribute('data-copy-value')
|
40
|
+
if (textToCopy) {
|
41
|
+
navigator.clipboard.writeText(textToCopy)
|
42
|
+
.catch(err => console.error('Failed to copy text', err))
|
43
|
+
} else {
|
44
|
+
console.warn('No data-copy-value attribute found or data-from element')
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag(:div) do %>
|
7
2
|
<%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
|
8
3
|
<label
|
9
4
|
for="upload-<%= object.id %>"
|
@@ -1,8 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
id: object.id,
|
3
|
-
data: object.data,
|
4
|
-
class: object.classname,
|
5
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag(:div) do %>
|
6
2
|
<%= object.wrapper do %>
|
7
3
|
<%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
|
8
4
|
<% if (object.template != "sort_only") %>
|
@@ -0,0 +1,58 @@
|
|
1
|
+
<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
|
2
|
+
<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
|
3
|
+
|
4
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
5
|
+
auto_close: 3000,
|
6
|
+
classname: "toast-to-hide",
|
7
|
+
id: "toast-auto-close",
|
8
|
+
text: "I will disappear in 3 seconds.",
|
9
|
+
status: "tip",
|
10
|
+
vertical: "top",
|
11
|
+
horizontal: "center"
|
12
|
+
}) %>
|
13
|
+
|
14
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
15
|
+
auto_close: 10000,
|
16
|
+
closeable: true,
|
17
|
+
id: "toast-auto-close-closeable",
|
18
|
+
text: "I will disappear in 10 seconds.",
|
19
|
+
status: "tip",
|
20
|
+
vertical: "top",
|
21
|
+
horizontal: "center"
|
22
|
+
}) %>
|
23
|
+
|
24
|
+
<script>
|
25
|
+
document.addEventListener('DOMContentLoaded', () => {
|
26
|
+
// Initialize toast elements and buttons
|
27
|
+
const toasts = {
|
28
|
+
'#toast-auto-close': document.querySelector("#toast-auto-close"),
|
29
|
+
'#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
|
30
|
+
}
|
31
|
+
|
32
|
+
const buttons = {
|
33
|
+
'#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
|
34
|
+
'#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
|
35
|
+
}
|
36
|
+
|
37
|
+
// Store original toasts and remove them from DOM
|
38
|
+
const originalToasts = {}
|
39
|
+
Object.entries(toasts).forEach(([id, toast]) => {
|
40
|
+
if (toast) {
|
41
|
+
originalToasts[id] = toast.cloneNode(true)
|
42
|
+
toast.remove()
|
43
|
+
}
|
44
|
+
})
|
45
|
+
|
46
|
+
// Set up button click handlers
|
47
|
+
Object.keys(buttons).forEach((toastId) => {
|
48
|
+
const button = buttons[toastId]
|
49
|
+
if (button) {
|
50
|
+
button.onclick = () => {
|
51
|
+
const newToast = originalToasts[toastId].cloneNode(true)
|
52
|
+
newToast.style.display = "flex"
|
53
|
+
document.body.appendChild(newToast)
|
54
|
+
}
|
55
|
+
}
|
56
|
+
})
|
57
|
+
})
|
58
|
+
</script>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
|
2
|
+
|
3
|
+
The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.
|
@@ -5,6 +5,7 @@ examples:
|
|
5
5
|
- fixed_confirmation_toast_multi_line: Multi Line
|
6
6
|
- fixed_confirmation_toast_close: Click to Close
|
7
7
|
- fixed_confirmation_toast_positions: Click to Show Positions
|
8
|
+
- fixed_confirmation_toast_auto_close: Click to Show Auto Close
|
8
9
|
- fixed_confirmation_toast_children: Children
|
9
10
|
- fixed_confirmation_toast_custom_icon: Custom Icon
|
10
11
|
|