playbook_ui 14.12.0.pre.alpha.PLAY1602lightboxoverlapnitrobug5655 → 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.
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`,