playbook_ui_docs 14.10.0.pre.alpha.play1662cssbargraph5193 → 14.10.0.pre.alpha.play1662cssbargraph5200
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/pb_section_separator/docs/_section_separator_color.html.erb +10 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +42 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md +3 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_description.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb +9 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md +1 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb +7 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb +119 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +10 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb +15 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +6 -2
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb +3 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb +63 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +11 -3
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +7 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +88 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +4 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +87 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +5 -0
- data/dist/playbook-doc.js +1 -1
- metadata +19 -3
- /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_border_radius.md → _skeleton_loading_border_radius_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_skeleton_loading/docs/{_skeleton_loading_height_width.md → _skeleton_loading_height_width_react.md} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6a39030ed41d0a502e8ff8487c72b4116a5949a16075d0a0a8568f5c451e8da0
|
|
4
|
+
data.tar.gz: 53510d707ca5dc79bcdb56837c1d9dcf37b78524bad6424e0bc037d409ecf6e6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ddb22c3ab914a13e3235b43c91a83ba0dadaf8a2ddb94729b89ac0e876dc905a3db74d6067aa677893e4b01b47d7af675bfb0b0b54bd873d73545b2b7ac67555
|
|
7
|
+
data.tar.gz: bebe8640c8aac8fd279a7d5b83317bd45329dc913880d06f535eaa2c3aad477c5bbda869e3f495a0e88df02383943c465e264697bf1304ef87dcfb70563d7667
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
|
|
2
|
+
<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
|
|
3
|
+
<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
|
|
4
|
+
<%= pb_rails("section_separator", props: { color: "primary" }) do %>
|
|
5
|
+
<%= pb_rails("flex", props: { padding: "xs" }) do %>
|
|
6
|
+
<%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
|
|
7
|
+
<%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
|
|
3
|
+
|
|
4
|
+
const children = (
|
|
5
|
+
<Flex padding="xs">
|
|
6
|
+
<Icon color="primary"
|
|
7
|
+
icon="arrow-down"
|
|
8
|
+
/>
|
|
9
|
+
<Detail
|
|
10
|
+
color="link"
|
|
11
|
+
size="sm"
|
|
12
|
+
text="Children"
|
|
13
|
+
/>
|
|
14
|
+
</Flex>
|
|
15
|
+
)
|
|
16
|
+
|
|
17
|
+
const SectionSeparatorColor = (props) => {
|
|
18
|
+
return (
|
|
19
|
+
<div>
|
|
20
|
+
<SectionSeparator text="Default Separator"
|
|
21
|
+
{...props}
|
|
22
|
+
/>
|
|
23
|
+
<SectionSeparator color="primary"
|
|
24
|
+
text="Primary Separator"
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
<SectionSeparator
|
|
28
|
+
color="primary"
|
|
29
|
+
lineStyle="dashed"
|
|
30
|
+
text="Primary Dashed Separator"
|
|
31
|
+
{...props}
|
|
32
|
+
/>
|
|
33
|
+
<SectionSeparator color="primary"
|
|
34
|
+
{...props}
|
|
35
|
+
>
|
|
36
|
+
{children}
|
|
37
|
+
</SectionSeparator>
|
|
38
|
+
</div>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export default SectionSeparatorColor
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Pass "primary" to the `color` prop to change any section separator color.
|
|
2
|
+
|
|
3
|
+
**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.
|
|
@@ -6,6 +6,7 @@ examples:
|
|
|
6
6
|
- section_separator_text: Text Separator
|
|
7
7
|
- section_separator_vertical: Vertical
|
|
8
8
|
- section_separator_children: Children
|
|
9
|
+
- section_separator_color: Color
|
|
9
10
|
|
|
10
11
|
react:
|
|
11
12
|
- section_separator_line: Line Separator
|
|
@@ -13,6 +14,7 @@ examples:
|
|
|
13
14
|
- section_separator_text: Text Separator
|
|
14
15
|
- section_separator_vertical: Vertical
|
|
15
16
|
- section_separator_children: Children
|
|
17
|
+
- section_separator_color: Color
|
|
16
18
|
|
|
17
19
|
swift:
|
|
18
20
|
- section_separator_line_swift: Line Separator
|
|
@@ -3,3 +3,4 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
|
|
|
3
3
|
export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
|
|
4
4
|
export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
|
|
5
5
|
export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
|
|
6
|
+
export { default as SectionSeparatorColor } from './_section_separator_color.jsx'
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading.
|
|
2
|
+
|
|
3
|
+
**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { justify: "evenly" }) do %>
|
|
2
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
|
|
3
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
|
|
4
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
|
|
5
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
|
|
6
|
+
<%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
|
|
7
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
|
|
8
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
|
|
9
|
+
<% end %>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<%= pb_rails("skeleton_loading") %>
|
|
1
|
+
<%= pb_rails("skeleton_loading") %>
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>
|
|
2
|
+
|
|
3
|
+
<div id="skeleton-loading-filter-content">
|
|
4
|
+
<%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
|
|
5
|
+
<%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
|
|
6
|
+
<%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
|
|
7
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
|
|
8
|
+
<%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
|
|
11
|
+
<%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
|
|
12
|
+
<% end %>
|
|
13
|
+
<% end %>
|
|
14
|
+
<% end %>
|
|
15
|
+
|
|
16
|
+
<%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div id="filter-content" style="display: none;">
|
|
20
|
+
<%= pb_rails("filter", props: {
|
|
21
|
+
margin_bottom: "xl",
|
|
22
|
+
min_width: "360px",
|
|
23
|
+
id: "2",
|
|
24
|
+
filters: [
|
|
25
|
+
{ name: "name", value: "John Wick" }
|
|
26
|
+
],
|
|
27
|
+
sort_menu: [
|
|
28
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
|
29
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
|
30
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
|
31
|
+
],
|
|
32
|
+
results: 546,
|
|
33
|
+
template: "single"
|
|
34
|
+
}) do %>
|
|
35
|
+
<% example_collection = [
|
|
36
|
+
OpenStruct.new(name: "USA", value: 1),
|
|
37
|
+
OpenStruct.new(name: "Canada", value: 2),
|
|
38
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
|
39
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
|
40
|
+
OpenStruct.new(name: "A galaxy far far away...", value: 5)
|
|
41
|
+
] %>
|
|
42
|
+
|
|
43
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
|
44
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
45
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
|
46
|
+
|
|
47
|
+
<%= form.actions do |action| %>
|
|
48
|
+
<%= action.submit props: {
|
|
49
|
+
text: "Apply",
|
|
50
|
+
data: {
|
|
51
|
+
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
|
52
|
+
},}%>
|
|
53
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
|
54
|
+
<% end %>
|
|
55
|
+
<% end %>
|
|
56
|
+
<% end %>
|
|
57
|
+
|
|
58
|
+
<%= pb_rails("filter", props: {
|
|
59
|
+
min_width: "360px",
|
|
60
|
+
id: "1",
|
|
61
|
+
filters: [
|
|
62
|
+
{ name: "name", value: "John Wick" },
|
|
63
|
+
{ name: "city", value: "San Francisco"}
|
|
64
|
+
],
|
|
65
|
+
sort_menu: [
|
|
66
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
|
67
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
|
68
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
|
69
|
+
],
|
|
70
|
+
template: "default",
|
|
71
|
+
results: 1,
|
|
72
|
+
}) do %>
|
|
73
|
+
<% example_collection = [
|
|
74
|
+
OpenStruct.new(name: "USA", value: 1),
|
|
75
|
+
OpenStruct.new(name: "Canada", value: 2),
|
|
76
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
|
77
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
|
78
|
+
OpenStruct.new(name: "A galaxy far far away...", value: 5)
|
|
79
|
+
] %>
|
|
80
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
|
81
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
82
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
|
83
|
+
|
|
84
|
+
<%= form.actions do |action| %>
|
|
85
|
+
<%= action.submit props: {
|
|
86
|
+
text: "Apply",
|
|
87
|
+
data: {
|
|
88
|
+
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
|
89
|
+
},}%>
|
|
90
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
|
91
|
+
<% end %>
|
|
92
|
+
<% end %>
|
|
93
|
+
<% end %>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<script>
|
|
97
|
+
document.addEventListener("DOMContentLoaded", function() {
|
|
98
|
+
const toggleButton = document.getElementById('toggle-filter-button')
|
|
99
|
+
const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
|
|
100
|
+
const filterContentDiv = document.getElementById('filter-content')
|
|
101
|
+
const secondFilterContentDiv = document.getElementById('second-filter-content')
|
|
102
|
+
|
|
103
|
+
let isLoading = true
|
|
104
|
+
|
|
105
|
+
toggleButton.addEventListener('click', function() {
|
|
106
|
+
isLoading = !isLoading
|
|
107
|
+
|
|
108
|
+
if (isLoading) {
|
|
109
|
+
skeletonFilterContentDiv.style.display = 'block'
|
|
110
|
+
filterContentDiv.style.display = 'none'
|
|
111
|
+
toggleButton.textContent = 'Show Filter'
|
|
112
|
+
} else {
|
|
113
|
+
skeletonFilterContentDiv.style.display = 'none'
|
|
114
|
+
filterContentDiv.style.display = 'block'
|
|
115
|
+
toggleButton.textContent = 'Show Skeleton Loading'
|
|
116
|
+
}
|
|
117
|
+
})
|
|
118
|
+
})
|
|
119
|
+
</script>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
|
|
3
3
|
|
|
4
4
|
const SortingChangeCallback = (sortOptions) => {
|
|
@@ -6,7 +6,8 @@ const SortingChangeCallback = (sortOptions) => {
|
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
const SkeletonLoadingFilter = (props) => {
|
|
9
|
-
const isLoading = true
|
|
9
|
+
const [isLoading, setIsLoading] = useState(true)
|
|
10
|
+
const toggleLoading = () => setIsLoading((prev) => !prev)
|
|
10
11
|
|
|
11
12
|
const options = [
|
|
12
13
|
{ value: 'USA' },
|
|
@@ -18,6 +19,13 @@ const SkeletonLoadingFilter = (props) => {
|
|
|
18
19
|
|
|
19
20
|
return (
|
|
20
21
|
<div>
|
|
22
|
+
<Button
|
|
23
|
+
marginBottom="md"
|
|
24
|
+
onClick={toggleLoading}
|
|
25
|
+
variant="secondary"
|
|
26
|
+
>
|
|
27
|
+
{isLoading ? "Show Filter" : "Show Skeleton Loading"}
|
|
28
|
+
</Button>
|
|
21
29
|
<div>
|
|
22
30
|
{isLoading ? (
|
|
23
31
|
<Card
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<%= pb_rails("skeleton_loading", props: { height: "100px", width: "50%" }) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("skeleton_loading", props: { gap: "md", height: "20px", margin_y: "md", stack: 3, width: "50px" }) %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
|
|
6
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "50%", width: "300px" }) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
|
|
10
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "30%", stack: 2, width: "70%" }) %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("skeleton_loading", props: { height: "150px", margin_y: "md", width: "150px" }) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "150px", width: "150px" }) %>
|
|
@@ -17,9 +17,11 @@ const SkeletonLoadingHeightWidth = (props) => (
|
|
|
17
17
|
width="50px"
|
|
18
18
|
{...props}
|
|
19
19
|
/>
|
|
20
|
-
<Card
|
|
20
|
+
<Card
|
|
21
|
+
height='200px'
|
|
21
22
|
marginBottom="md"
|
|
22
23
|
padding="none"
|
|
24
|
+
width='100%'
|
|
23
25
|
{...props}
|
|
24
26
|
>
|
|
25
27
|
<SkeletonLoading
|
|
@@ -30,8 +32,10 @@ const SkeletonLoadingHeightWidth = (props) => (
|
|
|
30
32
|
{...props}
|
|
31
33
|
/>
|
|
32
34
|
</Card>
|
|
33
|
-
<Card
|
|
35
|
+
<Card
|
|
36
|
+
height='200px'
|
|
34
37
|
padding="none"
|
|
38
|
+
width='100%'
|
|
35
39
|
{...props}
|
|
36
40
|
>
|
|
37
41
|
<SkeletonLoading
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
|
|
2
|
+
|
|
3
|
+
Set the `height` and `width` props to the same value to make a square. A `rounded` border_radius will make a square a circle. If using percentages to make a square, your parent container must also be a square.
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>
|
|
2
|
+
|
|
3
|
+
<div id="skeleton-loading-user-content">
|
|
4
|
+
<%= pb_rails("flex", props: { align_items: "center" }) do %>
|
|
5
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
|
|
6
|
+
<%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
|
|
7
|
+
<% end %>
|
|
8
|
+
<%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
|
|
9
|
+
<%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
|
|
10
|
+
<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
|
|
11
|
+
<%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
|
|
12
|
+
<%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
|
|
13
|
+
<% end %>
|
|
14
|
+
<% end %>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<div id="user-content" style="display: none;">
|
|
18
|
+
<div>
|
|
19
|
+
<%= pb_rails("user", props: {
|
|
20
|
+
name: "Anna Black",
|
|
21
|
+
title: "Remodeling Consultant",
|
|
22
|
+
orientation: "horizontal",
|
|
23
|
+
align: "left",
|
|
24
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
|
|
25
|
+
}) %>
|
|
26
|
+
</div>
|
|
27
|
+
<div>
|
|
28
|
+
<%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
|
|
29
|
+
<%= pb_rails("user", props: {
|
|
30
|
+
name: "Anna Black",
|
|
31
|
+
title: "Remodeling Consultant",
|
|
32
|
+
orientation: "vertical",
|
|
33
|
+
align: "center",
|
|
34
|
+
size: "lg",
|
|
35
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
|
|
36
|
+
}) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<script>
|
|
42
|
+
document.addEventListener("DOMContentLoaded", function() {
|
|
43
|
+
const toggleButton = document.getElementById('toggle-user-button')
|
|
44
|
+
const skeletonUserContentDiv = document.getElementById('skeleton-loading-user-content')
|
|
45
|
+
const userContentDiv = document.getElementById('user-content')
|
|
46
|
+
|
|
47
|
+
let isLoading = true
|
|
48
|
+
|
|
49
|
+
toggleButton.addEventListener('click', function() {
|
|
50
|
+
isLoading = !isLoading
|
|
51
|
+
|
|
52
|
+
if (isLoading) {
|
|
53
|
+
skeletonUserContentDiv.style.display = 'block'
|
|
54
|
+
userContentDiv.style.display = 'none'
|
|
55
|
+
toggleButton.textContent = 'Show User'
|
|
56
|
+
} else {
|
|
57
|
+
skeletonUserContentDiv.style.display = 'none'
|
|
58
|
+
userContentDiv.style.display = 'block'
|
|
59
|
+
toggleButton.textContent = 'Show Skeleton Loading'
|
|
60
|
+
}
|
|
61
|
+
})
|
|
62
|
+
})
|
|
63
|
+
</script>
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Flex, SkeletonLoading, User } from "playbook-ui";
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
|
|
3
3
|
|
|
4
4
|
const SkeletonLoadingUser = (props) => {
|
|
5
|
-
const isLoading = true
|
|
5
|
+
const [isLoading, setIsLoading] = useState(true)
|
|
6
|
+
const toggleLoading = () => setIsLoading((prev) => !prev)
|
|
6
7
|
|
|
7
8
|
return (
|
|
8
9
|
<div>
|
|
10
|
+
<Button
|
|
11
|
+
marginBottom="md"
|
|
12
|
+
onClick={toggleLoading}
|
|
13
|
+
variant="secondary"
|
|
14
|
+
>
|
|
15
|
+
{isLoading ? "Show User" : "Show Skeleton Loading"}
|
|
16
|
+
</Button>
|
|
9
17
|
<div>
|
|
10
18
|
{isLoading ? (
|
|
11
19
|
<Flex alignItems="center">
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
|
|
3
3
|
rails:
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
- skeleton_loading_default: Default
|
|
5
|
+
- skeleton_loading_color: Color
|
|
6
|
+
- skeleton_loading_layout: Layout
|
|
7
|
+
- skeleton_loading_border_radius: Border Radius
|
|
8
|
+
- skeleton_loading_height_width: Height & Width
|
|
9
|
+
- skeleton_loading_user: User Component Example
|
|
10
|
+
- skeleton_loading_filter: Filter Component Example
|
|
6
11
|
|
|
7
12
|
react:
|
|
8
13
|
- skeleton_loading_default: Default
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Table from '../_table'
|
|
3
|
+
|
|
4
|
+
const TableStickyColumns = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Table
|
|
7
|
+
responsive="scroll"
|
|
8
|
+
size="md"
|
|
9
|
+
stickyLeftColumn={["a"]}
|
|
10
|
+
stickyRightColumn={["b"]}
|
|
11
|
+
>
|
|
12
|
+
<thead>
|
|
13
|
+
<tr>
|
|
14
|
+
<th id="a">{'Column 1'}</th>
|
|
15
|
+
<th>{'Column 2'}</th>
|
|
16
|
+
<th>{'Column 3'}</th>
|
|
17
|
+
<th>{'Column 4'}</th>
|
|
18
|
+
<th>{'Column 5'}</th>
|
|
19
|
+
<th>{'Column 6'}</th>
|
|
20
|
+
<th>{'Column 7'}</th>
|
|
21
|
+
<th>{'Column 8'}</th>
|
|
22
|
+
<th>{'Column 9'}</th>
|
|
23
|
+
<th>{'Column 10'}</th>
|
|
24
|
+
<th>{'Column 11'}</th>
|
|
25
|
+
<th>{'Column 12'}</th>
|
|
26
|
+
<th>{'Column 13'}</th>
|
|
27
|
+
<th>{'Column 14'}</th>
|
|
28
|
+
<th id="b">{'Column 15'}</th>
|
|
29
|
+
</tr>
|
|
30
|
+
</thead>
|
|
31
|
+
<tbody>
|
|
32
|
+
<tr>
|
|
33
|
+
<td id="a">{'Value 1'}</td>
|
|
34
|
+
<td>{'Value 2'}</td>
|
|
35
|
+
<td>{'Value 3'}</td>
|
|
36
|
+
<td>{'Value 4'}</td>
|
|
37
|
+
<td>{'Value 5'}</td>
|
|
38
|
+
<td>{'Value 6'}</td>
|
|
39
|
+
<td>{'Value 7'}</td>
|
|
40
|
+
<td>{'Value 8'}</td>
|
|
41
|
+
<td>{'Value 9'}</td>
|
|
42
|
+
<td>{'Value 10'}</td>
|
|
43
|
+
<td>{'Value 11'}</td>
|
|
44
|
+
<td>{'Value 12'}</td>
|
|
45
|
+
<td>{'Value 13'}</td>
|
|
46
|
+
<td>{'Value 14'}</td>
|
|
47
|
+
<td id="b">{'Value 15'}</td>
|
|
48
|
+
</tr>
|
|
49
|
+
<tr>
|
|
50
|
+
<td id="a">{'Value 1'}</td>
|
|
51
|
+
<td>{'Value 2'}</td>
|
|
52
|
+
<td>{'Value 3'}</td>
|
|
53
|
+
<td>{'Value 4'}</td>
|
|
54
|
+
<td>{'Value 5'}</td>
|
|
55
|
+
<td>{'Value 6'}</td>
|
|
56
|
+
<td>{'Value 7'}</td>
|
|
57
|
+
<td>{'Value 8'}</td>
|
|
58
|
+
<td>{'Value 9'}</td>
|
|
59
|
+
<td>{'Value 10'}</td>
|
|
60
|
+
<td>{'Value 11'}</td>
|
|
61
|
+
<td>{'Value 12'}</td>
|
|
62
|
+
<td>{'Value 13'}</td>
|
|
63
|
+
<td>{'Value 14'}</td>
|
|
64
|
+
<td id="b">{'Value 15'}</td>
|
|
65
|
+
</tr>
|
|
66
|
+
<tr>
|
|
67
|
+
<td id="a">{'Value 1'}</td>
|
|
68
|
+
<td>{'Value 2'}</td>
|
|
69
|
+
<td>{'Value 3'}</td>
|
|
70
|
+
<td>{'Value 4'}</td>
|
|
71
|
+
<td>{'Value 5'}</td>
|
|
72
|
+
<td>{'Value 6'}</td>
|
|
73
|
+
<td>{'Value 7'}</td>
|
|
74
|
+
<td>{'Value 8'}</td>
|
|
75
|
+
<td>{'Value 9'}</td>
|
|
76
|
+
<td>{'Value 10'}</td>
|
|
77
|
+
<td>{'Value 11'}</td>
|
|
78
|
+
<td>{'Value 12'}</td>
|
|
79
|
+
<td>{'Value 13'}</td>
|
|
80
|
+
<td>{'Value 14'}</td>
|
|
81
|
+
<td id="b">{'Value 15'}</td>
|
|
82
|
+
</tr>
|
|
83
|
+
</tbody>
|
|
84
|
+
</Table>
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export default TableStickyColumns
|
|
@@ -1 +1,3 @@
|
|
|
1
1
|
The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
|
|
2
|
+
|
|
3
|
+
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
|
|
@@ -1,2 +1,5 @@
|
|
|
1
1
|
The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
|
|
4
|
+
|
|
5
|
+
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Table from '../_table'
|
|
3
|
+
|
|
4
|
+
const TableStickyRightColumns = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Table
|
|
7
|
+
responsive="scroll"
|
|
8
|
+
size="md"
|
|
9
|
+
stickyRightColumn={["13", "14", "15"]}
|
|
10
|
+
>
|
|
11
|
+
<thead>
|
|
12
|
+
<tr>
|
|
13
|
+
<th>{'Column 1'}</th>
|
|
14
|
+
<th>{'Column 2'}</th>
|
|
15
|
+
<th>{'Column 3'}</th>
|
|
16
|
+
<th>{'Column 4'}</th>
|
|
17
|
+
<th>{'Column 5'}</th>
|
|
18
|
+
<th>{'Column 6'}</th>
|
|
19
|
+
<th>{'Column 7'}</th>
|
|
20
|
+
<th>{'Column 8'}</th>
|
|
21
|
+
<th>{'Column 9'}</th>
|
|
22
|
+
<th>{'Column 10'}</th>
|
|
23
|
+
<th>{'Column 11'}</th>
|
|
24
|
+
<th>{'Column 12'}</th>
|
|
25
|
+
<th id="13">{'Column 13'}</th>
|
|
26
|
+
<th id="14">{'Column 14'}</th>
|
|
27
|
+
<th id="15">{'Column 15'}</th>
|
|
28
|
+
</tr>
|
|
29
|
+
</thead>
|
|
30
|
+
<tbody>
|
|
31
|
+
<tr>
|
|
32
|
+
<td>{'Value 1'}</td>
|
|
33
|
+
<td>{'Value 2'}</td>
|
|
34
|
+
<td>{'Value 3'}</td>
|
|
35
|
+
<td>{'Value 4'}</td>
|
|
36
|
+
<td>{'Value 5'}</td>
|
|
37
|
+
<td>{'Value 6'}</td>
|
|
38
|
+
<td>{'Value 7'}</td>
|
|
39
|
+
<td>{'Value 8'}</td>
|
|
40
|
+
<td>{'Value 9'}</td>
|
|
41
|
+
<td>{'Value 10'}</td>
|
|
42
|
+
<td>{'Value 11'}</td>
|
|
43
|
+
<td>{'Value 12'}</td>
|
|
44
|
+
<td id="13">{'Value 13'}</td>
|
|
45
|
+
<td id="14">{'Value 14'}</td>
|
|
46
|
+
<td id="15">{'Value 15'}</td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td>{'Value 1'}</td>
|
|
50
|
+
<td>{'Value 2'}</td>
|
|
51
|
+
<td>{'Value 3'}</td>
|
|
52
|
+
<td>{'Value 4'}</td>
|
|
53
|
+
<td>{'Value 5'}</td>
|
|
54
|
+
<td>{'Value 6'}</td>
|
|
55
|
+
<td>{'Value 7'}</td>
|
|
56
|
+
<td>{'Value 8'}</td>
|
|
57
|
+
<td>{'Value 9'}</td>
|
|
58
|
+
<td>{'Value 10'}</td>
|
|
59
|
+
<td>{'Value 11'}</td>
|
|
60
|
+
<td>{'Value 12'}</td>
|
|
61
|
+
<td id="13">{'Value 13'}</td>
|
|
62
|
+
<td id="14">{'Value 14'}</td>
|
|
63
|
+
<td id="15">{'Value 15'}</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td>{'Value 1'}</td>
|
|
67
|
+
<td>{'Value 2'}</td>
|
|
68
|
+
<td>{'Value 3'}</td>
|
|
69
|
+
<td>{'Value 4'}</td>
|
|
70
|
+
<td>{'Value 5'}</td>
|
|
71
|
+
<td>{'Value 6'}</td>
|
|
72
|
+
<td>{'Value 7'}</td>
|
|
73
|
+
<td>{'Value 8'}</td>
|
|
74
|
+
<td>{'Value 9'}</td>
|
|
75
|
+
<td>{'Value 10'}</td>
|
|
76
|
+
<td>{'Value 11'}</td>
|
|
77
|
+
<td>{'Value 12'}</td>
|
|
78
|
+
<td id="13">{'Value 13'}</td>
|
|
79
|
+
<td id="14">{'Value 14'}</td>
|
|
80
|
+
<td id="15">{'Value 15'}</td>
|
|
81
|
+
</tr>
|
|
82
|
+
</tbody>
|
|
83
|
+
</Table>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export default TableStickyRightColumns
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
|
|
2
|
+
|
|
3
|
+
If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
|
|
4
|
+
|
|
5
|
+
Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.
|