playbook_ui 14.12.0.pre.alpha.PLAY1865reactdatepickerreinitializingbug5732 → 14.12.0.pre.alpha.PLAY1888initializeOncereactdatepickerslowdown5956
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_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 +9 -10
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +34 -21
- data/app/pb_kits/playbook/pb_advanced_table/index.js +9 -6
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +8 -5
- 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_date/_date.tsx +14 -4
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +13 -5
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -1
- 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_lightbox/lightbox.scss +7 -6
- 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_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-CkemExmL.js} +3 -3
- data/dist/chunks/_weekday_stacked-4-ehPAbR.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-bORvL0Zi.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: 7ce26ea4ae1198511f9c6a804ac3eec019188d988ddb66b30f1a6ceabfc9e589
|
4
|
+
data.tar.gz: 0f2e7f4cf50aab69444666dff81daf2732ec181f117ae90208a59c987367f8d9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1efdf76471fd6db0e49fd5b9f39dc27089b7ad8d60c6429a4cfcaf9fe0fd743461d1b208a0cbf038ef6275c632b93601afca00de6d24a890c12fedaf25eb2929
|
7
|
+
data.tar.gz: b445830027fd9114880207b3cc33c1fb3df745ef23a2d84b078306a38d57eb319a21e8f6537448e4636698f2806d236425a89577eb99cd8de7242d7fb3559394
|
@@ -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
|
}
|
@@ -89,7 +89,6 @@
|
|
89
89
|
}
|
90
90
|
}
|
91
91
|
|
92
|
-
|
93
92
|
.table-header-cells-active:first-child {
|
94
93
|
color: $primary !important;
|
95
94
|
}
|
@@ -179,7 +178,7 @@
|
|
179
178
|
}
|
180
179
|
|
181
180
|
// Responsive Styles
|
182
|
-
@media only screen and (max-width: $screen-xl-min) {
|
181
|
+
@media only screen and (max-width: $screen-xl-min) {
|
183
182
|
&[class*="advanced-table-responsive-scroll"] {
|
184
183
|
border-radius: 4px;
|
185
184
|
box-shadow: 1px 0 0 0px $border_light,
|
@@ -215,7 +214,7 @@
|
|
215
214
|
.bg-white td:first-child {
|
216
215
|
background-color: $white;
|
217
216
|
}
|
218
|
-
|
217
|
+
|
219
218
|
}
|
220
219
|
}
|
221
220
|
@media only screen and (min-width: $screen-xl-min) {
|
@@ -306,4 +305,4 @@
|
|
306
305
|
}
|
307
306
|
}
|
308
307
|
}
|
309
|
-
}
|
308
|
+
}
|
@@ -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}
|
@@ -133,15 +133,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
133
133
|
if (!elements.length) return;
|
134
134
|
|
135
135
|
const isVisible = elements[0].classList.contains("is-visible");
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
136
|
+
|
137
|
+
isVisible ? this.hideElement(elements) : this.showElement(elements);
|
138
|
+
isVisible ? this.displayDownArrow() : this.displayUpArrow();
|
139
|
+
|
140
|
+
const row = this.element.closest("tr");
|
141
|
+
if (row) {
|
142
|
+
row.classList.toggle("bg-silver", !isVisible);
|
143
|
+
row.classList.toggle("bg-white", isVisible);
|
142
144
|
}
|
143
145
|
}
|
144
146
|
|
147
|
+
|
145
148
|
displayDownArrow() {
|
146
149
|
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
|
147
150
|
"inline-block";
|
@@ -14,10 +14,13 @@
|
|
14
14
|
<div style="padding-left: <%= depth * 1.25 %>em">
|
15
15
|
<%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
|
16
16
|
<% if index.zero? && object.row[:children].present? %>
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
17
|
+
<button
|
18
|
+
id="<%= "#{object.id}_#{object.row.object_id}" %>"
|
19
|
+
class="gray-icon expand-toggle-icon"
|
20
|
+
data-advanced-table="true">
|
21
|
+
<%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
|
22
|
+
<%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
|
23
|
+
</button>
|
21
24
|
<% end %>
|
22
25
|
<%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
|
23
26
|
<% if column[:custom_renderer].present? %>
|
@@ -42,4 +45,4 @@
|
|
42
45
|
<% end %>
|
43
46
|
<% end %>
|
44
47
|
<% end %>
|
45
|
-
<% end %>
|
48
|
+
<% end %>
|
@@ -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
|
+
}
|