playbook_ui 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5646 → 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5781
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/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -4
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading.md → _advanced_table_loading_react.md} +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb +38 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/index.js +9 -6
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +17 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +15 -11
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +14 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +10 -7
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +9 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +9 -0
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +5 -0
- data/app/pb_kits/playbook/pb_button/button.rb +1 -1
- data/app/pb_kits/playbook/pb_card/card.html.erb +21 -2
- data/app/pb_kits/playbook/pb_card/card.rb +7 -0
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +3 -0
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +92 -0
- data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx +64 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +21 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +45 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md +1 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -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_draggable/docs/_draggable_with_cards_rails.html.erb +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +7 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +7 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +12 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md +0 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb +80 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_table/table_row.rb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +3 -1
- data/dist/chunks/{_typeahead-BWwaAo_0.js → _typeahead-BIhRQo8Q.js} +3 -3
- data/dist/chunks/_weekday_stacked-CttHBFW3.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +6 -0
- 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/pb_forms_global_props_helper.rb +136 -0
- data/lib/playbook/pb_forms_helper.rb +13 -4
- data/lib/playbook/version.rb +1 -1
- metadata +23 -5
- data/dist/chunks/_weekday_stacked-zyBCd1s8.js +0 -45
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CopyButton } from 'playbook-ui'
|
|
3
|
+
import { ensureAccessible, renderKit, render, fireEvent, screen } from '../utilities/test-utils'
|
|
4
|
+
|
|
5
|
+
const props = {
|
|
6
|
+
data: { testid: 'default', value: 'copy' }
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
test('returns namespaced class name', () => {
|
|
10
|
+
const kit = renderKit(CopyButton, props)
|
|
11
|
+
expect(kit).toBeInTheDocument()
|
|
12
|
+
expect(kit).toHaveClass('pb_copy_button_kit')
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
it('should be accessible', async () => {
|
|
16
|
+
ensureAccessible(CopyButton, props)
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
// It's difficult to actually use navigator.clipboard.readText, so we mock
|
|
20
|
+
it('copies the value to clipboard and pastes it into an input', async () => {
|
|
21
|
+
Object.defineProperty(global, 'navigator', {
|
|
22
|
+
value: {
|
|
23
|
+
clipboard: {
|
|
24
|
+
writeText: jest.fn().mockResolvedValueOnce(undefined),
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
writable: true,
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
render(<CopyButton {...props} />)
|
|
31
|
+
|
|
32
|
+
const copyButton = screen.getByTestId('default')
|
|
33
|
+
fireEvent.click(copyButton)
|
|
34
|
+
|
|
35
|
+
await navigator.clipboard.writeText('copy')
|
|
36
|
+
|
|
37
|
+
expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy");
|
|
38
|
+
})
|
|
39
|
+
|
|
40
|
+
test('passes text and tooltip props to button', () => {
|
|
41
|
+
render(
|
|
42
|
+
<CopyButton
|
|
43
|
+
data={{ testid: 'text-test' }}
|
|
44
|
+
text={"text"}
|
|
45
|
+
tooltipPlacement="right"
|
|
46
|
+
tooltipText="Text copied!"
|
|
47
|
+
value="copy"
|
|
48
|
+
/>
|
|
49
|
+
)
|
|
50
|
+
|
|
51
|
+
const content = screen.getByText("text")
|
|
52
|
+
expect(content).toHaveTextContent("text")
|
|
53
|
+
|
|
54
|
+
const kit = screen.getByTestId('text-test')
|
|
55
|
+
const button = kit.querySelector('.pb_button_kit_primary_inline_enabled')
|
|
56
|
+
expect(button).toBeInTheDocument()
|
|
57
|
+
|
|
58
|
+
fireEvent.click(button)
|
|
59
|
+
const tooltipContent = screen.getByText("Text copied!")
|
|
60
|
+
expect(tooltipContent).toHaveTextContent("Text copied!")
|
|
61
|
+
|
|
62
|
+
const tooltip = kit.querySelector('.pb_tooltip_kit')
|
|
63
|
+
expect(tooltip).toBeInTheDocument()
|
|
64
|
+
})
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { CopyButton, Textarea } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const CopyButtonDefault = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<CopyButton
|
|
7
|
+
{...props}
|
|
8
|
+
text="Copy Text"
|
|
9
|
+
tooltipPlacement="right"
|
|
10
|
+
tooltipText="Text copied!"
|
|
11
|
+
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."
|
|
12
|
+
/>
|
|
13
|
+
|
|
14
|
+
<Textarea
|
|
15
|
+
{...props}
|
|
16
|
+
placeholder="Copy and paste here"
|
|
17
|
+
/>
|
|
18
|
+
</div>
|
|
19
|
+
)
|
|
20
|
+
|
|
21
|
+
export default CopyButtonDefault
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const CopyButtonFrom = (props) => {
|
|
5
|
+
const [text, setText] = useState("Copy this text input text")
|
|
6
|
+
|
|
7
|
+
const handleChange = (event) => {
|
|
8
|
+
setText(event.target.value);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
return (<div>
|
|
12
|
+
<Body id="body">Copy this body text!</Body>
|
|
13
|
+
<CopyButton
|
|
14
|
+
{...props}
|
|
15
|
+
from="body"
|
|
16
|
+
marginBottom="sm"
|
|
17
|
+
text="Copy Body text"
|
|
18
|
+
tooltipPlacement="right"
|
|
19
|
+
tooltipText="Body text copied!"
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<TextInput
|
|
23
|
+
{...props}
|
|
24
|
+
id="textinput"
|
|
25
|
+
onChange={handleChange}
|
|
26
|
+
value={text}
|
|
27
|
+
/>
|
|
28
|
+
<CopyButton
|
|
29
|
+
{...props}
|
|
30
|
+
from="textinput"
|
|
31
|
+
marginBottom="sm"
|
|
32
|
+
text="Copy Text Input"
|
|
33
|
+
tooltipPlacement="right"
|
|
34
|
+
tooltipText="Text input copied!"
|
|
35
|
+
/>
|
|
36
|
+
|
|
37
|
+
<Textarea
|
|
38
|
+
{...props}
|
|
39
|
+
placeholder="Copy and paste here"
|
|
40
|
+
/>
|
|
41
|
+
</div>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export default CopyButtonFrom
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Provide an element's ID as the `from` parameter, and its text will be copied. If the element is an input, its `value` will be copied; otherwise, the `innerText` will be used. Additionally, if a `value` prop is provided, it will override the content from the `from` element and be copied instead.
|
|
@@ -14,6 +14,7 @@ type PbDateProps = {
|
|
|
14
14
|
alignment?: "left" | "center" | "right";
|
|
15
15
|
aria?: { [key: string]: string };
|
|
16
16
|
className?: string;
|
|
17
|
+
dark?: boolean;
|
|
17
18
|
data?: { [key: string]: string };
|
|
18
19
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
|
19
20
|
id?: string;
|
|
@@ -29,6 +30,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
|
29
30
|
aria = {},
|
|
30
31
|
alignment = "left",
|
|
31
32
|
className,
|
|
33
|
+
dark = false,
|
|
32
34
|
data = {},
|
|
33
35
|
htmlOptions = {},
|
|
34
36
|
id,
|
|
@@ -56,7 +58,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
|
56
58
|
);
|
|
57
59
|
|
|
58
60
|
return (
|
|
59
|
-
<div
|
|
61
|
+
<div
|
|
60
62
|
{...ariaProps}
|
|
61
63
|
{...dataProps}
|
|
62
64
|
{...htmlProps}
|
|
@@ -93,7 +95,9 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
|
93
95
|
</>
|
|
94
96
|
: size == "md" || size == "lg"
|
|
95
97
|
? (
|
|
96
|
-
<Title
|
|
98
|
+
<Title
|
|
99
|
+
dark={dark}
|
|
100
|
+
size={4}
|
|
97
101
|
tag="h4"
|
|
98
102
|
>
|
|
99
103
|
{showIcon && (
|
|
@@ -127,6 +131,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
|
127
131
|
<>
|
|
128
132
|
{showIcon && (
|
|
129
133
|
<Caption className="pb_icon_kit_container"
|
|
134
|
+
dark={dark}
|
|
130
135
|
tag="span"
|
|
131
136
|
>
|
|
132
137
|
<Icon fixedWidth
|
|
@@ -138,15 +143,20 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
|
|
|
138
143
|
|
|
139
144
|
{showDayOfWeek && (
|
|
140
145
|
<>
|
|
141
|
-
<Caption
|
|
146
|
+
<Caption dark={dark}
|
|
147
|
+
tag="div">
|
|
148
|
+
{weekday}
|
|
149
|
+
</Caption>
|
|
142
150
|
<Caption color="light"
|
|
151
|
+
dark={dark}
|
|
143
152
|
tag="div"
|
|
144
153
|
text=" • "
|
|
145
154
|
/>
|
|
146
155
|
</>
|
|
147
156
|
)}
|
|
148
157
|
|
|
149
|
-
<Caption
|
|
158
|
+
<Caption dark={dark}
|
|
159
|
+
tag="span">
|
|
150
160
|
{month} {day}
|
|
151
161
|
{currentYear != year && <>{`, ${year}`}</>}
|
|
152
162
|
</Caption>
|
|
@@ -18,7 +18,7 @@ const DateDefault = (props) => {
|
|
|
18
18
|
value={"2012-08-03"}
|
|
19
19
|
{...props}
|
|
20
20
|
/>
|
|
21
|
-
<Caption>{"(Hyphenated Date)"}</Caption>
|
|
21
|
+
<Caption {...props}>{"(Hyphenated Date)"}</Caption>
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
24
|
<br />
|
|
@@ -56,6 +56,7 @@ const DateDefault = (props) => {
|
|
|
56
56
|
<Title
|
|
57
57
|
size={4}
|
|
58
58
|
text={"(Hyphenated Date)"}
|
|
59
|
+
{...props}
|
|
59
60
|
/>
|
|
60
61
|
</div>
|
|
61
62
|
|
|
@@ -4,7 +4,8 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
|
|
|
4
4
|
const DateUnstyled = (props) => {
|
|
5
5
|
return (
|
|
6
6
|
<>
|
|
7
|
-
<Caption
|
|
7
|
+
<Caption {...props}
|
|
8
|
+
size="xs"
|
|
8
9
|
text="Basic unstyled example"
|
|
9
10
|
/>
|
|
10
11
|
<FormattedDate
|
|
@@ -15,10 +16,14 @@ const DateUnstyled = (props) => {
|
|
|
15
16
|
|
|
16
17
|
<br />
|
|
17
18
|
|
|
18
|
-
<Caption
|
|
19
|
+
<Caption {...props}
|
|
20
|
+
|
|
21
|
+
size="xs"
|
|
19
22
|
text="Example with wrapping typography kit"
|
|
20
23
|
/>
|
|
21
|
-
<Title
|
|
24
|
+
<Title {...props}
|
|
25
|
+
size={1}
|
|
26
|
+
>
|
|
22
27
|
<FormattedDate
|
|
23
28
|
unstyled
|
|
24
29
|
value={new Date('25 Dec 1995')}
|
|
@@ -28,10 +33,13 @@ const DateUnstyled = (props) => {
|
|
|
28
33
|
|
|
29
34
|
<br />
|
|
30
35
|
|
|
31
|
-
<Caption
|
|
36
|
+
<Caption {...props}
|
|
37
|
+
size="xs"
|
|
32
38
|
text="Example with icon + subcaption"
|
|
33
39
|
/>
|
|
34
|
-
<Caption
|
|
40
|
+
<Caption {...props}
|
|
41
|
+
size="xs"
|
|
42
|
+
>
|
|
35
43
|
<FormattedDate
|
|
36
44
|
showDayOfWeek
|
|
37
45
|
showIcon
|
|
@@ -7,8 +7,7 @@
|
|
|
7
7
|
<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
|
|
8
8
|
<%= pb_rails("draggable/draggable_container") do %>
|
|
9
9
|
<% initial_items.each do |item| %>
|
|
10
|
-
|
|
11
|
-
<%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
|
|
10
|
+
<%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
|
|
12
11
|
<%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
|
|
13
12
|
<%= pb_rails("flex", props:{gap: "xs"}) do %>
|
|
14
13
|
<%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
|
|
@@ -32,7 +31,6 @@
|
|
|
32
31
|
<% end %>
|
|
33
32
|
<% end %>
|
|
34
33
|
<% end %>
|
|
35
|
-
<% end %>
|
|
36
34
|
<% end %>
|
|
37
35
|
<% end %>
|
|
38
36
|
<% end %>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
For a simplified version of the Draggable API for the Card kit, you can do the following:
|
|
2
|
+
|
|
3
|
+
Use the `draggable` kit and manage state as shown.
|
|
4
|
+
|
|
5
|
+
`draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
|
|
6
|
+
|
|
7
|
+
The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@import "../tokens/screen_sizes";
|
|
3
3
|
|
|
4
4
|
$slides-margin: $space-md;
|
|
5
|
+
$lightbox-z-index-floor: $z_10 !default;
|
|
5
6
|
|
|
6
7
|
.carousel {
|
|
7
8
|
|
|
@@ -13,7 +14,7 @@ $slides-margin: $space-md;
|
|
|
13
14
|
top: 0;
|
|
14
15
|
left: 0;
|
|
15
16
|
right: 0;
|
|
16
|
-
z-index:
|
|
17
|
+
z-index: $lightbox-z-index-floor + 99;
|
|
17
18
|
align-items: center;
|
|
18
19
|
transition: all .5s;
|
|
19
20
|
|
|
@@ -55,7 +56,7 @@ $slides-margin: $space-md;
|
|
|
55
56
|
justify-content: space-between;
|
|
56
57
|
flex-direction: column;
|
|
57
58
|
background-color: black;
|
|
58
|
-
z-index:
|
|
59
|
+
z-index: $lightbox-z-index-floor + 1;
|
|
59
60
|
overflow: hidden;
|
|
60
61
|
}
|
|
61
62
|
|
|
@@ -63,7 +64,7 @@ $slides-margin: $space-md;
|
|
|
63
64
|
display: flex;
|
|
64
65
|
height: calc(100% - 120px);
|
|
65
66
|
width: 100%;
|
|
66
|
-
z-index:
|
|
67
|
+
z-index: $lightbox-z-index-floor + 1;
|
|
67
68
|
|
|
68
69
|
[class^="react-transform-wrapper"] {
|
|
69
70
|
flex-shrink: 0;
|
|
@@ -87,7 +88,7 @@ $slides-margin: $space-md;
|
|
|
87
88
|
.carousel-arrow-left {
|
|
88
89
|
display: block;
|
|
89
90
|
position: absolute;
|
|
90
|
-
z-index:
|
|
91
|
+
z-index: $lightbox-z-index-floor + 4;
|
|
91
92
|
top: 50%;
|
|
92
93
|
@media only screen and (max-width: $screen-xs-max) {
|
|
93
94
|
display: none;
|
|
@@ -97,7 +98,7 @@ $slides-margin: $space-md;
|
|
|
97
98
|
.carousel-arrow-right {
|
|
98
99
|
display: block;
|
|
99
100
|
position: absolute;
|
|
100
|
-
z-index:
|
|
101
|
+
z-index: $lightbox-z-index-floor + 4;
|
|
101
102
|
top: 50%;
|
|
102
103
|
right: 0;
|
|
103
104
|
@media only screen and (max-width: $screen-xs-max) {
|
|
@@ -140,7 +141,7 @@ $slides-margin: $space-md;
|
|
|
140
141
|
width: 100vw;
|
|
141
142
|
padding: 3px;
|
|
142
143
|
overflow: scroll;
|
|
143
|
-
z-index:
|
|
144
|
+
z-index: $lightbox-z-index-floor + 20;
|
|
144
145
|
&.centered {
|
|
145
146
|
justify-content: center;
|
|
146
147
|
}
|
|
@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
|
|
|
8
8
|
<Card
|
|
9
9
|
borderNone
|
|
10
10
|
borderRadius="none"
|
|
11
|
-
color="light"
|
|
11
|
+
color="light"
|
|
12
12
|
paddingX="xl"
|
|
13
13
|
paddingY="md"
|
|
14
14
|
{...props}
|
|
15
15
|
>
|
|
16
|
-
<Body paddingBottom="sm"
|
|
16
|
+
<Body paddingBottom="sm"
|
|
17
17
|
text="Expanded Custom Layout"
|
|
18
18
|
{...props}
|
|
19
19
|
/>
|
|
20
20
|
<Flex justify="between">
|
|
21
21
|
<Image
|
|
22
|
-
|
|
22
|
+
size="sm"
|
|
23
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
23
24
|
/>
|
|
24
25
|
<Image
|
|
25
|
-
|
|
26
|
+
size="sm"
|
|
27
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
26
28
|
/>
|
|
27
29
|
<Image
|
|
28
|
-
|
|
30
|
+
size="sm"
|
|
31
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
29
32
|
/>
|
|
30
33
|
<Image
|
|
31
|
-
|
|
34
|
+
size="sm"
|
|
35
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
32
36
|
/>
|
|
33
37
|
</Flex>
|
|
34
38
|
</Card>
|
|
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
|
|
|
52
56
|
|
|
53
57
|
</Table.Head>
|
|
54
58
|
<Table.Body>
|
|
55
|
-
<Table.Row collapsible
|
|
59
|
+
<Table.Row collapsible
|
|
56
60
|
collapsibleContent={<Content/>}
|
|
57
61
|
{...props}
|
|
58
62
|
>
|
|
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
|
|
|
61
65
|
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
62
66
|
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
63
67
|
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
64
|
-
<Table.Cell textAlign="right">{
|
|
68
|
+
<Table.Cell textAlign="right">{
|
|
65
69
|
<Icon
|
|
66
70
|
color="primary"
|
|
67
71
|
fixedWidth
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
|
|
3
|
+
<%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
|
|
4
|
+
<%= pb_rails("flex", props: { justify: "between" }) do %>
|
|
5
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
6
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
7
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
8
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
14
|
+
<%= pb_rails("table/table_head") do %>
|
|
15
|
+
<%= pb_rails("table/table_row") do %>
|
|
16
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
17
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
18
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
19
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
20
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
21
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<%= pb_rails("table/table_body") do %>
|
|
25
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
|
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
|
32
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<%= pb_rails("table/table_row") do %>
|
|
36
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
37
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<%= pb_rails("table/table_row") do %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
45
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
46
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
47
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
48
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
49
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% end %>
|
|
File without changes
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
|
|
3
|
+
<%= pb_rails("background", props: { tag: "tr" }) do %>
|
|
4
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
5
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
6
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
7
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
8
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
14
|
+
<%= pb_rails("table/table_head") do %>
|
|
15
|
+
<%= pb_rails("table/table_row") do %>
|
|
16
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
17
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
18
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
19
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
20
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
21
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<%= pb_rails("table/table_body") do %>
|
|
25
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
|
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
|
32
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<%= pb_rails("table/table_row") do %>
|
|
36
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
37
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<%= pb_rails("table/table_row") do %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
45
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
46
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
47
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
48
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
49
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% end %>
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
|
|
3
|
+
<%= pb_rails("table/table_head") do %>
|
|
4
|
+
<%= pb_rails("background", props: { tag: "tr" }) do %>
|
|
5
|
+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
|
|
6
|
+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
|
|
7
|
+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
|
|
8
|
+
<%= pb_rails("table/table_header") do %>Alt Header<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<%= pb_rails("table/table_body") do %>
|
|
12
|
+
<%= pb_rails("table/table_row") do %>
|
|
13
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
14
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
15
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
16
|
+
<%= pb_rails("table/table_cell") do %>
|
|
17
|
+
<%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<%= pb_rails("table/table_row") do %>
|
|
21
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
22
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
23
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
24
|
+
<%= pb_rails("table/table_cell") do %>
|
|
25
|
+
<%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
|
|
26
|
+
<% end %>
|
|
27
|
+
<% end %>
|
|
28
|
+
<%= pb_rails("table/table_row") do %>
|
|
29
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
30
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
31
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
32
|
+
<%= pb_rails("table/table_cell") do %>
|
|
33
|
+
<%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<% end %>
|
|
36
|
+
<% end %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<% end %>
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
42
|
+
<%= pb_rails("table/table_head") do %>
|
|
43
|
+
<%= pb_rails("table/table_row") do %>
|
|
44
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
45
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
46
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
47
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
48
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
49
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<%= pb_rails("table/table_body") do %>
|
|
53
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
|
|
54
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
55
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
56
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
57
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
58
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
59
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
|
60
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
61
|
+
<% end %>
|
|
62
|
+
<% end %>
|
|
63
|
+
<%= pb_rails("table/table_row") do %>
|
|
64
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
65
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
66
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
67
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
68
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
69
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
70
|
+
<% end %>
|
|
71
|
+
<%= pb_rails("table/table_row") do %>
|
|
72
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
73
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
74
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
75
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
76
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
77
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
78
|
+
<% end %>
|
|
79
|
+
<% end %>
|
|
80
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `collapsible_content` can also be used to display nested Tables within each Row.
|
|
@@ -31,6 +31,9 @@ examples:
|
|
|
31
31
|
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
32
32
|
- table_outer_padding: Outer Padding
|
|
33
33
|
- table_with_collapsible: Table with Collapsible
|
|
34
|
+
- table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
|
|
35
|
+
- table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
|
|
36
|
+
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
|
|
34
37
|
|
|
35
38
|
react:
|
|
36
39
|
- table_sm: Small
|
|
@@ -12,7 +12,7 @@ module Playbook
|
|
|
12
12
|
default: false
|
|
13
13
|
prop :collapsible_content
|
|
14
14
|
prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
|
|
15
|
-
default:
|
|
15
|
+
default: true
|
|
16
16
|
|
|
17
17
|
def classname
|
|
18
18
|
generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
|