playbook_ui_docs 13.27.0.pre.alpha.testingcollapsible2912 → 13.27.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +66 -46
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +29 -8
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +33 -13
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +67 -48
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +0 -20
- data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -41
- data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure_rails.html.erb → _dropdown_subcomponent_structure.html.erb} +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +6 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options_rails.html.erb → _dropdown_with_custom_options.html.erb} +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger_rails.html.erb → _dropdown_with_custom_trigger.html.erb} +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
- data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +9 -9
- metadata +9 -17
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +0 -3
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +0 -3
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.html.erb +0 -23
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +0 -76
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +0 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +0 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +0 -1
- /data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display_rails.html.erb → _dropdown_with_custom_display.html.erb} +0 -0
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui_docs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 13.27.0
|
4
|
+
version: 13.27.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
8
8
|
- Power Devs
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-05-
|
12
|
+
date: 2024-05-06 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -61,10 +61,8 @@ files:
|
|
61
61
|
- app/pb_kits/playbook/pb_advanced_table/docs/index.js
|
62
62
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb
|
63
63
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
|
64
|
-
- app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md
|
65
64
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb
|
66
65
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
|
67
|
-
- app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md
|
68
66
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb
|
69
67
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx
|
70
68
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_default_swift.md
|
@@ -352,8 +350,6 @@ files:
|
|
352
350
|
- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx
|
353
351
|
- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md
|
354
352
|
- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md
|
355
|
-
- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.html.erb
|
356
|
-
- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
|
357
353
|
- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
|
358
354
|
- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
|
359
355
|
- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md
|
@@ -609,29 +605,25 @@ files:
|
|
609
605
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
|
610
606
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
|
611
607
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
|
608
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb
|
612
609
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
|
613
610
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
|
614
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb
|
615
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md
|
616
611
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
|
617
612
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
|
618
613
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
|
619
614
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
|
615
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb
|
620
616
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
|
621
617
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
|
622
|
-
- app/pb_kits/playbook/pb_dropdown/docs/
|
623
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md
|
618
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb
|
624
619
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
|
625
620
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
|
626
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb
|
627
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md
|
628
621
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
|
629
622
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
|
630
623
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
|
624
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb
|
631
625
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
|
632
626
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
|
633
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
|
634
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md
|
635
627
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
|
636
628
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
|
637
629
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
|
@@ -1857,7 +1849,7 @@ homepage: https://playbook.powerapp.cloud/
|
|
1857
1849
|
licenses:
|
1858
1850
|
- ISC
|
1859
1851
|
metadata: {}
|
1860
|
-
post_install_message:
|
1852
|
+
post_install_message:
|
1861
1853
|
rdoc_options: []
|
1862
1854
|
require_paths:
|
1863
1855
|
- lib
|
@@ -1873,7 +1865,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
1873
1865
|
version: '0'
|
1874
1866
|
requirements: []
|
1875
1867
|
rubygems_version: 3.5.3
|
1876
|
-
signing_key:
|
1868
|
+
signing_key:
|
1877
1869
|
specification_version: 4
|
1878
1870
|
summary: Playbook Design System Docs
|
1879
1871
|
test_files: []
|
@@ -1,3 +0,0 @@
|
|
1
|
-
NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
|
2
|
-
|
3
|
-
When passing the `badge` component as an overlay, you must also specify its text content,and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/badge#colors) as a `variant`.
|
@@ -1,3 +0,0 @@
|
|
1
|
-
NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
|
2
|
-
|
3
|
-
When passing the `iconCircle` component as an overlay, you must also specify an `icon`, and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/icon_circle/rails#color) as a `variant`.
|
@@ -1,23 +0,0 @@
|
|
1
|
-
<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
|
2
|
-
<%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
|
3
|
-
<%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
|
4
|
-
<%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
|
5
|
-
<%= pb_rails("icon_circle", props: {
|
6
|
-
icon: "check",
|
7
|
-
size: "xs"
|
8
|
-
}) %>
|
9
|
-
<% end %>
|
10
|
-
<% end %>
|
11
|
-
<%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
|
12
|
-
<% end %>
|
13
|
-
<%= pb_rails("collapsible/collapsible_content", props: { padding: "none" }) do %>
|
14
|
-
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
|
15
|
-
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
16
|
-
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
17
|
-
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
18
|
-
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
19
|
-
<%= pb_rails("list/item") do %> Checklist Item <% end %>
|
20
|
-
<% end %>
|
21
|
-
<% end %>
|
22
|
-
<% end %>
|
23
|
-
|
@@ -1,76 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Collapsible, useCollapsible, Background, Flex, Title, IconCircle, List, ListItem } from '../..'
|
3
|
-
|
4
|
-
const CollapsibleCustomMain = () => {
|
5
|
-
const [isCollapsed, setIsCollapsed] = useCollapsible(true)
|
6
|
-
|
7
|
-
return (
|
8
|
-
<>
|
9
|
-
<Collapsible
|
10
|
-
collapsed={isCollapsed}
|
11
|
-
>
|
12
|
-
<Background
|
13
|
-
backgroundColor="white"
|
14
|
-
cursor="pointer"
|
15
|
-
htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
|
16
|
-
position="sticky"
|
17
|
-
top="0"
|
18
|
-
>
|
19
|
-
<Flex
|
20
|
-
align="center"
|
21
|
-
gap="sm"
|
22
|
-
justify="between"
|
23
|
-
>
|
24
|
-
<Title
|
25
|
-
size={4}
|
26
|
-
text="Custom Main Section"
|
27
|
-
/>
|
28
|
-
<IconCircle
|
29
|
-
icon="check"
|
30
|
-
size="xs"
|
31
|
-
/>
|
32
|
-
</Flex>
|
33
|
-
</Background>
|
34
|
-
<Collapsible.Content padding="none">
|
35
|
-
<div>
|
36
|
-
<List>
|
37
|
-
<ListItem
|
38
|
-
align="stretch"
|
39
|
-
flexDirection="column"
|
40
|
-
>
|
41
|
-
Checklist item
|
42
|
-
</ListItem>
|
43
|
-
<ListItem
|
44
|
-
align="stretch"
|
45
|
-
flexDirection="column"
|
46
|
-
>
|
47
|
-
Checklist item
|
48
|
-
</ListItem>
|
49
|
-
<ListItem
|
50
|
-
align="stretch"
|
51
|
-
flexDirection="column"
|
52
|
-
>
|
53
|
-
Checklist item
|
54
|
-
</ListItem>
|
55
|
-
<ListItem
|
56
|
-
align="stretch"
|
57
|
-
flexDirection="column"
|
58
|
-
>
|
59
|
-
Checklist item
|
60
|
-
</ListItem>
|
61
|
-
<ListItem
|
62
|
-
align="stretch"
|
63
|
-
flexDirection="column"
|
64
|
-
>
|
65
|
-
Checklist item
|
66
|
-
</ListItem>
|
67
|
-
</List>
|
68
|
-
</div>
|
69
|
-
</Collapsible.Content>
|
70
|
-
</Collapsible>
|
71
|
-
|
72
|
-
</>
|
73
|
-
)
|
74
|
-
}
|
75
|
-
|
76
|
-
export default CollapsibleCustomMain
|
@@ -1,6 +0,0 @@
|
|
1
|
-
The dropdown is built using all of the following required subcomponents:
|
2
|
-
|
3
|
-
`dropdown/dropdown_trigger` is the UI component that users interact with to toggle the dropdown.
|
4
|
-
`dropdown/dropdown_container` is the floating container that wraps the list of dropdown options.
|
5
|
-
`dropdown/dropdown_option` renders options that are passed to the container.
|
6
|
-
Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.
|
@@ -1,5 +0,0 @@
|
|
1
|
-
Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
|
2
|
-
|
3
|
-
The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`.
|
4
|
-
|
5
|
-
The dropdown follows the typical rails pattern of utilizing hidden inputs for form submission. The hidden input value is the selected options' id.
|
@@ -1 +0,0 @@
|
|
1
|
-
`dropdown/dropdown_option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.
|
@@ -1 +0,0 @@
|
|
1
|
-
Optionally replace the default trigger's select element by passing child components directly to the `dropdown/dropdown_trigger`.
|