playbook_ui 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5655 → 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5781

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -4
  6. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +3 -3
  7. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +3 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +33 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md +1 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading.md → _advanced_table_loading_react.md} +2 -2
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb +38 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/index.js +9 -6
  15. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +17 -3
  16. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +15 -11
  17. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +14 -3
  18. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +10 -7
  19. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +9 -1
  20. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +9 -0
  22. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +5 -0
  23. data/app/pb_kits/playbook/pb_button/button.rb +1 -1
  24. data/app/pb_kits/playbook/pb_card/card.html.erb +21 -2
  25. data/app/pb_kits/playbook/pb_card/card.rb +7 -0
  26. data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +3 -0
  27. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +92 -0
  28. data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx +64 -0
  29. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +21 -0
  30. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +45 -0
  31. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md +1 -0
  32. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +8 -0
  33. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -0
  34. data/app/pb_kits/playbook/pb_date/_date.tsx +14 -4
  35. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +2 -1
  36. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +13 -5
  37. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +1 -3
  38. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +7 -0
  39. data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +1 -1
  40. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +12 -8
  41. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb +52 -0
  42. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md +0 -0
  43. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb +52 -0
  44. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -0
  45. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb +80 -0
  46. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -0
  47. data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
  48. data/app/pb_kits/playbook/pb_table/table_row.rb +1 -1
  49. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +3 -1
  50. data/dist/chunks/{_typeahead-BWwaAo_0.js → _typeahead-BIhRQo8Q.js} +3 -3
  51. data/dist/chunks/_weekday_stacked-CttHBFW3.js +45 -0
  52. data/dist/chunks/vendor.js +1 -1
  53. data/dist/menu.yml +6 -0
  54. data/dist/playbook-doc.js +1 -1
  55. data/dist/playbook-rails-react-bindings.js +1 -1
  56. data/dist/playbook-rails.js +1 -1
  57. data/dist/playbook.css +1 -1
  58. data/lib/playbook/pb_forms_global_props_helper.rb +136 -0
  59. data/lib/playbook/pb_forms_helper.rb +13 -4
  60. data/lib/playbook/version.rb +1 -1
  61. metadata +23 -5
  62. data/dist/chunks/_weekday_stacked-zyBCd1s8.js +0 -45
data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx ADDED
@@ -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
+ })
data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md ADDED
@@ -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.
data/app/pb_kits/playbook/pb_copy_button/docs/example.yml ADDED
@@ -0,0 +1,8 @@
1
+ examples:
2
+
3
+
4
+ react:
5
+ - copy_button_default: Default
6
+ - copy_button_from: Copy From
7
+
8
+
data/app/pb_kits/playbook/pb_copy_button/docs/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { default as CopyButtonDefault } from './_copy_button_default.jsx'
2
+ export { default as CopyButtonFrom } from './_copy_button_from.jsx'
data/app/pb_kits/playbook/pb_date/_date.tsx CHANGED
@@ -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 size={4}
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 tag="div">{weekday}</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 tag="span">
158
+ <Caption dark={dark}
159
+ tag="span">
150
160
  {month} {day}
151
161
  {currentYear != year && <>{`, ${year}`}</>}
152
162
  </Caption>
data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx CHANGED
@@ -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
 
data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx CHANGED
@@ -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 size="xs"
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 size="xs"
19
+ <Caption {...props}
20
+
21
+ size="xs"
19
22
  text="Example with wrapping typography kit"
20
23
  />
21
- <Title size={1}>
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 size="xs"
36
+ <Caption {...props}
37
+ size="xs"
32
38
  text="Example with icon + subcaption"
33
39
  />
34
- <Caption size="xs">
40
+ <Caption {...props}
41
+ size="xs"
42
+ >
35
43
  <FormattedDate
36
44
  showDayOfWeek
37
45
  showIcon
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb CHANGED
@@ -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
- <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
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 %>
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md CHANGED
@@ -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.
data/app/pb_kits/playbook/pb_lightbox/lightbox.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @import "../tokens/screen_sizes";
3
3
 
4
4
  $slides-margin: $space-md;
5
- $lightbox-z-index-floor: 9999900;
5
+ $lightbox-z-index-floor: $z_10 !default;
6
6
 
7
7
  .carousel {
8
8
 
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx CHANGED
@@ -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
- url="https://via.placeholder.com/150"
22
+ size="sm"
23
+ url="https://unsplash.it/500/400/?image=634"
23
24
  />
24
25
  <Image
25
- url="https://via.placeholder.com/150"
26
+ size="sm"
27
+ url="https://unsplash.it/500/400/?image=634"
26
28
  />
27
29
  <Image
28
- url="https://via.placeholder.com/150"
30
+ size="sm"
31
+ url="https://unsplash.it/500/400/?image=634"
29
32
  />
30
33
  <Image
31
- url="https://via.placeholder.com/150"
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 %>
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_rows_rails.md ADDED
@@ -0,0 +1,3 @@
1
+ The `collapsible_content` can display any content, including nested Table Rows.
2
+
3
+ Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
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 %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md ADDED
@@ -0,0 +1 @@
1
+ The `collapsible_content` can also be used to display nested Tables within each Row.
data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED
@@ -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
data/app/pb_kits/playbook/pb_table/table_row.rb CHANGED
@@ -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: false
15
+ default: true
16
16
 
17
17
  def classname
18
18
  generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx CHANGED
@@ -32,6 +32,7 @@ type TooltipProps = {
32
32
  position?: "absolute" | "fixed";
33
33
  text: string,
34
34
  showTooltip?: boolean,
35
+ forceOpenTooltip?: boolean,
35
36
  } & GlobalProps
36
37
 
37
38
  const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
@@ -49,6 +50,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
49
50
  text,
50
51
  showTooltip = true,
51
52
  zIndex,
53
+ forceOpenTooltip = false,
52
54
  ...rest
53
55
  } = props
54
56
 
@@ -135,7 +137,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
135
137
  >
136
138
  {children}
137
139
  </div>
138
- {open && (
140
+ {(open || forceOpenTooltip) && (
139
141
  <div
140
142
  {...getFloatingProps({
141
143
  className: `tooltip_tooltip ${placement} visible`,