playbook_ui_docs 13.21.0.pre.alpha.PBNTR224letuserresetrowexpansion2466 → 13.21.0.pre.alpha.PBNTR225advancedtablefeedback2438
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/docs/_advanced_table_expanded_control.jsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -51
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +11 -62
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +2 -7
- data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +4 -0
- data/dist/playbook-doc.js +5 -5
- metadata +5 -7
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.html.erb +0 -7
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_margin_bottom.jsx +0 -41
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5a7abf0ceeb7d0ed9e4cd3b915bf3af0baf851e488a03437584ba7aea31ad7f7
|
4
|
+
data.tar.gz: 894ada11f2499a8eed0f3b76b0a13e31eb2c8e78741fee6372422db99030eb2f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: '09b137eaf2072c5feefdab4375780d82a5fc4a644d9a3be84d9f6534d6d45ec118222f03cc9d0068506d7fd5b1c07aabf169b5a60e731492cb646f9b72a10721'
|
7
|
+
data.tar.gz: ac620b4c6d31a9d2e565cb535c20af628e31165ec312393a12997422162b43c01c89aa3573fdb925c457b20bd590ce12251d6329aa8312cfaf97ceae21edd1c5
|
@@ -44,16 +44,11 @@ const AdvancedTableExpandedControl = (props) => {
|
|
44
44
|
onChange: setExpanded,
|
45
45
|
}
|
46
46
|
|
47
|
-
const onRowToggleClick = (row) => {
|
48
|
-
setExpanded({ ...expanded, [row.id]: !expanded[row.id] })
|
49
|
-
}
|
50
|
-
|
51
47
|
return (
|
52
48
|
<div>
|
53
49
|
<AdvancedTable
|
54
50
|
columnDefinitions={columnDefinitions}
|
55
51
|
expandedControl={expandedControl}
|
56
|
-
onRowToggleClick={onRowToggleClick}
|
57
52
|
tableData={MOCK_DATA}
|
58
53
|
{...props}
|
59
54
|
/>
|
@@ -20,7 +20,6 @@ examples:
|
|
20
20
|
- date_picker_hooks: Hooks
|
21
21
|
- date_picker_year_range: Year Range
|
22
22
|
- date_picker_anti_patterns: Anti-Patterns
|
23
|
-
- date_picker_margin_bottom: Margin Bottom
|
24
23
|
- date_picker_inline: Inline
|
25
24
|
- date_picker_month_and_year: Month & Year Only
|
26
25
|
- date_picker_week: Week
|
@@ -49,7 +48,6 @@ examples:
|
|
49
48
|
- date_picker_flatpickr_methods: Flatpickr Methods
|
50
49
|
- date_picker_hooks: Hooks
|
51
50
|
- date_picker_year_range: Year Range
|
52
|
-
- date_picker_margin_bottom: Margin Bottom
|
53
51
|
- date_picker_inline: Inline
|
54
52
|
- date_picker_month_and_year: Month & Year Only
|
55
53
|
- date_picker_week: Week
|
@@ -19,7 +19,6 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
|
|
19
19
|
export { default as DatePickerPositions } from './_date_picker_positions.jsx'
|
20
20
|
export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
|
21
21
|
export { default as DatePickerAllowInput } from './_date_picker_allow_input'
|
22
|
-
export { default as DatePickerMarginBottom} from './_date_picker_margin_bottom'
|
23
22
|
export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
|
24
23
|
export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
|
25
24
|
export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
@@ -1,55 +1,5 @@
|
|
1
|
-
<%= pb_rails("button", props: { text: "Short Multiline", variant: "secondary", data: { multitoast: "#toast-short" } }) %>
|
2
|
-
|
3
1
|
<%= pb_rails("fixed_confirmation_toast", props: {
|
4
|
-
classname: "multitoast-to-hide",
|
5
|
-
closeable: true,
|
6
|
-
id: "toast-short",
|
7
2
|
multi_line: true,
|
8
|
-
text: "
|
3
|
+
text: "Scan to Assign Selected Items. Click here to generate report",
|
9
4
|
status: "tip",
|
10
|
-
vertical: "top",
|
11
|
-
horizontal: "center"
|
12
5
|
}) %>
|
13
|
-
|
14
|
-
<%= pb_rails("button", props: { text: "Long Multiline", variant: "secondary", data: { multitoast: "#toast-long" } }) %>
|
15
|
-
|
16
|
-
<%= pb_rails("fixed_confirmation_toast", props: {
|
17
|
-
classname: "multitoast-to-hide",
|
18
|
-
closeable: true,
|
19
|
-
id: "toast-long",
|
20
|
-
multi_line: true,
|
21
|
-
text: "Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.",
|
22
|
-
status: "tip",
|
23
|
-
vertical: "top",
|
24
|
-
horizontal: "center"
|
25
|
-
}) %>
|
26
|
-
|
27
|
-
|
28
|
-
<script type="text/javascript">
|
29
|
-
const multitoasts = document.querySelectorAll(".multitoast-to-hide")
|
30
|
-
const multibuttons = document.querySelectorAll("button[data-multitoast]")
|
31
|
-
|
32
|
-
const hideMultiToasts = () => {
|
33
|
-
multitoasts.forEach((toast) => {
|
34
|
-
toast.style.display = "none"
|
35
|
-
})
|
36
|
-
}
|
37
|
-
|
38
|
-
multibuttons.forEach((button) => {
|
39
|
-
button.onclick = () => {
|
40
|
-
hideMultiToasts()
|
41
|
-
let toast = document.querySelector(button.getAttribute("data-multitoast"))
|
42
|
-
|
43
|
-
if (toast) {
|
44
|
-
toast.style.display = "flex"
|
45
|
-
}
|
46
|
-
}
|
47
|
-
})
|
48
|
-
</script>
|
49
|
-
|
50
|
-
<!-- hiding toast on page load -->
|
51
|
-
<style>
|
52
|
-
#toast-long, #toast-short {
|
53
|
-
display: none;
|
54
|
-
}
|
55
|
-
</style>
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
CHANGED
@@ -1,69 +1,18 @@
|
|
1
|
-
import React
|
1
|
+
import React from 'react'
|
2
2
|
|
3
|
-
import Button from '../../pb_button/_button'
|
4
3
|
import FixedConfirmationToast from '../_fixed_confirmation_toast'
|
5
4
|
|
6
5
|
const FixedConfirmationToastMultiLine = (props) => {
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
const handleCloseShort = () => {
|
19
|
-
setOpenShort(false)
|
20
|
-
}
|
21
|
-
|
22
|
-
const handleCloseLong= () => {
|
23
|
-
setOpenLong(false)
|
24
|
-
}
|
25
|
-
|
26
|
-
return (
|
27
|
-
<>
|
28
|
-
<Button
|
29
|
-
onClick={handleClickShort}
|
30
|
-
text="Short Multiline"
|
31
|
-
variant="secondary"
|
32
|
-
{...props}
|
33
|
-
/>
|
34
|
-
{' '}
|
35
|
-
<Button
|
36
|
-
onClick={handleClickLong}
|
37
|
-
text="Long Multiline"
|
38
|
-
variant="secondary"
|
39
|
-
{...props}
|
40
|
-
/>
|
41
|
-
|
42
|
-
<FixedConfirmationToast
|
43
|
-
closeable
|
44
|
-
horizontal='center'
|
45
|
-
multiLine
|
46
|
-
onClose={handleCloseShort}
|
47
|
-
open={openShort}
|
48
|
-
status='tip'
|
49
|
-
text='Multi-line is used when the given text will not fit on one line.'
|
50
|
-
vertical='top'
|
51
|
-
{...props}
|
52
|
-
/>
|
53
|
-
|
54
|
-
<FixedConfirmationToast
|
55
|
-
closeable
|
56
|
-
horizontal='center'
|
57
|
-
multiLine
|
58
|
-
onClose={handleCloseLong}
|
59
|
-
open={openLong}
|
60
|
-
status='tip'
|
61
|
-
text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
|
62
|
-
vertical='top'
|
63
|
-
{...props}
|
64
|
-
/>
|
65
|
-
</>
|
66
|
-
)
|
6
|
+
return (
|
7
|
+
<div>
|
8
|
+
<FixedConfirmationToast
|
9
|
+
multiLine
|
10
|
+
status="tip"
|
11
|
+
text="Scan to Assign Selected Items. Click here to generate report"
|
12
|
+
{...props}
|
13
|
+
/>
|
14
|
+
</div>
|
15
|
+
)
|
67
16
|
}
|
68
17
|
|
69
18
|
export default FixedConfirmationToastMultiLine
|
@@ -75,6 +75,8 @@
|
|
75
75
|
})
|
76
76
|
}
|
77
77
|
|
78
|
+
hideToasts()
|
79
|
+
|
78
80
|
buttons.forEach((button) => {
|
79
81
|
button.onclick = () => {
|
80
82
|
hideToasts()
|
@@ -86,10 +88,3 @@
|
|
86
88
|
}
|
87
89
|
})
|
88
90
|
</script>
|
89
|
-
|
90
|
-
<!-- hiding toast on page load -->
|
91
|
-
<style>
|
92
|
-
#toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
|
93
|
-
display: none;
|
94
|
-
}
|
95
|
-
</style>
|