playbook_ui 15.3.0.pre.alpha.play249512047 → 15.3.0.pre.alpha.play259311731

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 (70) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +0 -15
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +1 -4
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md +2 -3
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +1 -1
  10. data/app/pb_kits/playbook/pb_background/docs/_background_category.md +1 -1
  11. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  14. data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -1
  15. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +11 -25
  16. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -2
  17. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +1 -1
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +1 -1
  19. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md +1 -1
  20. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +1 -1
  21. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +1 -1
  22. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md +1 -1
  23. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md +1 -1
  24. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +14 -7
  25. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +15 -6
  26. data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md +1 -1
  27. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md +1 -1
  28. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md +1 -1
  29. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +1 -1
  30. data/app/pb_kits/playbook/pb_pill/docs/_description.md +1 -1
  31. data/app/pb_kits/playbook/pb_popover/_popover.tsx +34 -69
  32. data/app/pb_kits/playbook/pb_popover/docs/example.yml +0 -1
  33. data/app/pb_kits/playbook/pb_popover/docs/index.js +0 -1
  34. data/app/pb_kits/playbook/pb_popover/popover.test.js +0 -80
  35. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -1
  36. data/app/pb_kits/playbook/pb_section_separator/docs/_description.md +1 -1
  37. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +0 -29
  38. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md +1 -1
  39. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_react.md +1 -1
  40. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md +1 -1
  41. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md +1 -1
  42. data/app/pb_kits/playbook/pb_table/docs/_table_sm.md +1 -1
  43. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
  44. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
  45. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -2
  46. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb +2 -2
  47. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx +1 -1
  48. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md +1 -1
  49. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb +1 -67
  50. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx +6 -68
  51. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md +1 -1
  52. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -2
  53. data/dist/chunks/{_line_graph-CqE0-dq5.js → _line_graph-CUts2R88.js} +1 -1
  54. data/dist/chunks/_typeahead--U_6fwUM.js +6 -0
  55. data/dist/chunks/{_weekday_stacked-BFB3mjtE.js → _weekday_stacked-GooEyiGT.js} +2 -2
  56. data/dist/chunks/vendor.js +1 -1
  57. data/dist/playbook-doc.js +2 -2
  58. data/dist/playbook-rails-react-bindings.js +1 -1
  59. data/dist/playbook-rails.js +1 -1
  60. data/dist/playbook.css +1 -1
  61. data/lib/playbook/version.rb +1 -1
  62. metadata +6 -12
  63. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx +0 -68
  64. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md +0 -1
  65. data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb +0 -63
  66. data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx +0 -89
  67. data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md +0 -4
  68. data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md +0 -3
  69. data/dist/chunks/_typeahead-3ZAbZUqU.js +0 -6
  70. /data/app/pb_kits/playbook/pb_popover/docs/{_popover_append_to_rails.md → _popover_append_to.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "15.3.0"
5
- VERSION = "15.3.0.pre.alpha.play249512047"
5
+ VERSION = "15.3.0.pre.alpha.play259311731"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 15.3.0.pre.alpha.play249512047
4
+ version: 15.3.0.pre.alpha.play259311731
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-11-04 00:00:00.000000000 Z
12
+ date: 2025-10-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -2638,9 +2638,7 @@ files:
2638
2638
  - app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb
2639
2639
  - app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx
2640
2640
  - app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb
2641
- - app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx
2642
- - app/pb_kits/playbook/pb_popover/docs/_popover_append_to_rails.md
2643
- - app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md
2641
+ - app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md
2644
2642
  - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
2645
2643
  - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
2646
2644
  - app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
@@ -3180,10 +3178,6 @@ files:
3180
3178
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
3181
3179
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
3182
3180
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
3183
- - app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb
3184
- - app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx
3185
- - app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md
3186
- - app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md
3187
3181
  - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
3188
3182
  - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
3189
3183
  - app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
@@ -3800,9 +3794,9 @@ files:
3800
3794
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3801
3795
  - app/pb_kits/playbook/utilities/text.ts
3802
3796
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3803
- - dist/chunks/_line_graph-CqE0-dq5.js
3804
- - dist/chunks/_typeahead-3ZAbZUqU.js
3805
- - dist/chunks/_weekday_stacked-BFB3mjtE.js
3797
+ - dist/chunks/_line_graph-CUts2R88.js
3798
+ - dist/chunks/_typeahead--U_6fwUM.js
3799
+ - dist/chunks/_weekday_stacked-GooEyiGT.js
3806
3800
  - dist/chunks/componentRegistry-DzmmLR2x.js
3807
3801
  - dist/chunks/lazysizes-B7xYodB-.js
3808
3802
  - dist/chunks/lib-CGxXTQ75.js
@@ -1,68 +0,0 @@
1
- import React, { useState } from "react";
2
- import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
3
-
4
- const PopoverAppendTo = (props) => {
5
- const [showParentPopover, setShowParentPopover] = useState(false);
6
- const [showSelectorPopover, setShowSelectorPopover] = useState(false);
7
-
8
- const parentPopoverReference = (
9
- <CircleIconButton
10
- icon="info"
11
- onClick={() => setShowParentPopover(!showParentPopover)}
12
- variant="secondary"
13
- />
14
- );
15
-
16
- const selectorPopoverReference = (
17
- <CircleIconButton
18
- icon="info"
19
- onClick={() => setShowSelectorPopover(!showSelectorPopover)}
20
- variant="secondary"
21
- />
22
- );
23
-
24
- return (
25
- <>
26
- <Flex
27
- marginBottom="md"
28
- orientation="row"
29
- vertical="center"
30
- {...props}
31
- >
32
- <Body text="Click info for more details" />
33
- &nbsp;
34
- <PbReactPopover
35
- appendTo="parent"
36
- offset
37
- placement="top"
38
- reference={parentPopoverReference}
39
- show={showParentPopover}
40
- {...props}
41
- >
42
- {'I\'m a popover. I have been appended to my parent element.'}
43
- </PbReactPopover>
44
- </Flex>
45
-
46
- <Flex
47
- orientation="row"
48
- vertical="center"
49
- {...props}
50
- >
51
- <Body text="Click info for more details" />
52
- &nbsp;
53
- <PbReactPopover
54
- appendTo=".kit-show-wrapper"
55
- offset
56
- placement="top"
57
- reference={selectorPopoverReference}
58
- show={showSelectorPopover}
59
- {...props}
60
- >
61
- {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
62
- </PbReactPopover>
63
- </Flex>
64
- </>
65
- );
66
- };
67
-
68
- export default PopoverAppendTo;
@@ -1 +0,0 @@
1
- By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
@@ -1,63 +0,0 @@
1
- <% content = capture do %>
2
- <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
3
- <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
4
- <% end %>
5
- <% end %>
6
-
7
- <%= pb_rails("table", props: { size: "sm" }) do %>
8
- <%= pb_rails("table/table_head") do %>
9
- <%= pb_rails("table/table_row") do %>
10
- <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
11
- <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
12
- <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
13
- <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
14
- <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
15
- <%= pb_rails("table/table_header", props: { text: ""}) %>
16
- <% end %>
17
- <% end %>
18
- <%= pb_rails("table/table_body") do %>
19
- <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "11" }) do %>
20
- <%= pb_rails("table/table_cell", props: { text: "Value 1", html_options: { onclick: "toggleArrows()" }}) %>
21
- <%= pb_rails("table/table_cell", props: { text: "Value 2", html_options: { onclick: "toggleArrows()" }}) %>
22
- <%= pb_rails("table/table_cell", props: { text: "Value 3", html_options: { onclick: "toggleArrows()" }}) %>
23
- <%= pb_rails("table/table_cell", props: { text: "Value 4", html_options: { onclick: "toggleArrows()" }}) %>
24
- <%= pb_rails("table/table_cell", props: { text: "Value 5", html_options: { onclick: "toggleArrows()" }}) %>
25
- <%= pb_rails("table/table_cell", props: { text_align: "right", html_options: { onclick: "toggleArrows()" }}) do %>
26
- <%= pb_rails("icon", props: {id: "chevron-icon-down", icon: "chevron-down", fixed_width: true, color: "primary" }) %>
27
- <%= pb_rails("icon", props: {id: "chevron-icon-up", icon: "chevron-up", fixed_width: true, color: "primary" }) %>
28
- <% end %>
29
- <% end %>
30
- <%= pb_rails("table/table_row") do %>
31
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
32
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
33
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
34
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
35
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
36
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
37
- <% end %>
38
- <%= pb_rails("table/table_row") do %>
39
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
40
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
41
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
42
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
43
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
44
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
45
- <% end %>
46
- <% end %>
47
- <% end %>
48
-
49
- <script>
50
- const downArrow = document.getElementById("chevron-icon-down");
51
- const upArrow = document.getElementById("chevron-icon-up");
52
-
53
- upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
54
-
55
- function toggleArrows() {
56
- if (downArrow) {
57
- downArrow.style.display = downArrow.style.display === 'none' ? 'inline-block' : 'none';
58
- }
59
- if (upArrow) {
60
- upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
61
- }
62
- }
63
- </script>
@@ -1,89 +0,0 @@
1
- import React, { useState } from 'react'
2
- import Table from '../_table'
3
- import Icon from '../../pb_icon/_icon'
4
- import Card from '../../pb_card/_card'
5
- import Body from '../../pb_body/_body'
6
-
7
- const TableWithDynamicCollapsible = (props) => {
8
-
9
- const [isOpen, setIsOpen] = useState(false);
10
-
11
- const handleToggleArrows = () => {
12
- setIsOpen(!isOpen)
13
- }
14
-
15
- const Content = () => {
16
- return (
17
- <Card
18
- borderNone
19
- borderRadius="none"
20
- padding="md"
21
- {...props}
22
- >
23
- <Body {...props}>Nested content inside a Table Row</Body>
24
- </Card>
25
- );
26
- };
27
-
28
- return (
29
- <Table
30
- size="sm"
31
- {...props}
32
- >
33
- <Table.Head>
34
- <Table.Row>
35
- <Table.Header>{'Column 1'}</Table.Header>
36
- <Table.Header>{'Column 2'}</Table.Header>
37
- <Table.Header>{'Column 3'}</Table.Header>
38
- <Table.Header>{'Column 4'}</Table.Header>
39
- <Table.Header>{'Column 5'}</Table.Header>
40
- <Table.Header>{''}</Table.Header>
41
- </Table.Row>
42
-
43
- </Table.Head>
44
- <Table.Body>
45
-
46
- <Table.Row collapsible
47
- collapsibleContent={<Content />}
48
- {...props}
49
- >
50
- <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 1'}</Table.Cell>
51
- <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 2'}</Table.Cell>
52
- <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 3'}</Table.Cell>
53
- <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 4'}</Table.Cell>
54
- <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 5'}</Table.Cell>
55
- <Table.Cell
56
- htmlOptions={{ onClick: handleToggleArrows }}
57
- textAlign="right"
58
- >
59
- {
60
- <Icon
61
- color="primary"
62
- fixedWidth
63
- icon={isOpen ? 'chevron-up' : 'chevron-down'}
64
- />}
65
- </Table.Cell>
66
-
67
- </Table.Row>
68
- <Table.Row>
69
- <Table.Cell>{'Value 1'}</Table.Cell>
70
- <Table.Cell>{'Value 2'}</Table.Cell>
71
- <Table.Cell>{'Value 3'}</Table.Cell>
72
- <Table.Cell>{'Value 4'}</Table.Cell>
73
- <Table.Cell>{'Value 5'}</Table.Cell>
74
- <Table.Cell>{''}</Table.Cell>
75
- </Table.Row>
76
- <Table.Row>
77
- <Table.Cell>{'Value 1'}</Table.Cell>
78
- <Table.Cell>{'Value 2'}</Table.Cell>
79
- <Table.Cell>{'Value 3'}</Table.Cell>
80
- <Table.Cell>{'Value 4'}</Table.Cell>
81
- <Table.Cell>{'Value 5'}</Table.Cell>
82
- <Table.Cell>{''}</Table.Cell>
83
- </Table.Row>
84
- </Table.Body>
85
- </Table>
86
- )
87
- }
88
-
89
- export default TableWithDynamicCollapsible
@@ -1,4 +0,0 @@
1
- The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
2
- Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
3
-
4
- Follow this example to make the icons dynamic following the state of the collapsible.
@@ -1,3 +0,0 @@
1
- The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
2
-
3
- Follow this example to make the icons dynamic following the state of the collapsible.