playbook_ui_docs 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27244 → 14.17.0.pre.alpha.PLAY20267223
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_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +118 -322
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/dist/playbook-doc.js +1 -1
- metadata +4 -8
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +0 -35
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +0 -36
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +0 -1
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 14.17.0.pre.alpha.
|
|
4
|
+
version: 14.17.0.pre.alpha.PLAY20267223
|
|
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-04-
|
|
12
|
+
date: 2025-04-15 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -93,6 +93,8 @@ files:
|
|
|
93
93
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
|
|
94
94
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
|
|
95
95
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
|
|
96
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
|
|
97
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
|
|
96
98
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
|
|
97
99
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
|
|
98
100
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
|
|
@@ -147,8 +149,6 @@ files:
|
|
|
147
149
|
- app/pb_kits/playbook/pb_background/docs/_background_image.md
|
|
148
150
|
- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
|
|
149
151
|
- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
|
|
150
|
-
- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
|
|
151
|
-
- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
|
|
152
152
|
- app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
|
|
153
153
|
- app/pb_kits/playbook/pb_background/docs/_background_size.jsx
|
|
154
154
|
- app/pb_kits/playbook/pb_background/docs/_background_size.md
|
|
@@ -1952,13 +1952,9 @@ files:
|
|
|
1952
1952
|
- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
|
|
1953
1953
|
- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
|
|
1954
1954
|
- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
|
|
1955
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
|
|
1956
1955
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
|
|
1957
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
|
|
1958
1956
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md
|
|
1959
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb
|
|
1960
1957
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx
|
|
1961
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md
|
|
1962
1958
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md
|
|
1963
1959
|
- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
|
|
1964
1960
|
- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Background from "../../pb_background/_background"
|
|
3
|
-
import Flex from "../../pb_flex/_flex"
|
|
4
|
-
import FlexItem from "../../pb_flex/_flex_item"
|
|
5
|
-
import Title from "../../pb_title/_title"
|
|
6
|
-
|
|
7
|
-
const BackgroundOverlay = (props) => {
|
|
8
|
-
return (
|
|
9
|
-
<Background
|
|
10
|
-
alt="colorful background"
|
|
11
|
-
backgroundColor="category_21"
|
|
12
|
-
className="background lazyload"
|
|
13
|
-
imageOverlay="opacity_2"
|
|
14
|
-
imageUrl="https://unsplash.it/500/400/?image=633"
|
|
15
|
-
{...props}
|
|
16
|
-
>
|
|
17
|
-
<Flex
|
|
18
|
-
orientation="column"
|
|
19
|
-
vertical="center"
|
|
20
|
-
{...props}
|
|
21
|
-
>
|
|
22
|
-
<FlexItem>
|
|
23
|
-
<Title
|
|
24
|
-
dark
|
|
25
|
-
padding="lg"
|
|
26
|
-
size={1}
|
|
27
|
-
text="Background Kit Image"
|
|
28
|
-
/>
|
|
29
|
-
</FlexItem>
|
|
30
|
-
</Flex>
|
|
31
|
-
</Background>
|
|
32
|
-
)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export default BackgroundOverlay
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
|
|
2
|
-
<thead>
|
|
3
|
-
<tr>
|
|
4
|
-
<th>Column 1</th>
|
|
5
|
-
<th>Column 2</th>
|
|
6
|
-
<th>Column 3</th>
|
|
7
|
-
<th>Column 4</th>
|
|
8
|
-
<th>Column 5</th>
|
|
9
|
-
</tr>
|
|
10
|
-
</thead>
|
|
11
|
-
<tbody>
|
|
12
|
-
<tr>
|
|
13
|
-
<td>Value 1</td>
|
|
14
|
-
<td>Value 2</td>
|
|
15
|
-
<td>Value 3</td>
|
|
16
|
-
<td>Value 4</td>
|
|
17
|
-
<td>Value 5</td>
|
|
18
|
-
</tr>
|
|
19
|
-
<tr>
|
|
20
|
-
<td>Value 1</td>
|
|
21
|
-
<td>Value 2</td>
|
|
22
|
-
<td>Value 3</td>
|
|
23
|
-
<td>Value 4</td>
|
|
24
|
-
<td>Value 5</td>
|
|
25
|
-
</tr>
|
|
26
|
-
<tr>
|
|
27
|
-
<td>Value 1</td>
|
|
28
|
-
<td>Value 2</td>
|
|
29
|
-
<td>Value 3</td>
|
|
30
|
-
<td>Value 4</td>
|
|
31
|
-
<td>Value 5</td>
|
|
32
|
-
</tr>
|
|
33
|
-
</tbody>
|
|
34
|
-
<% end %>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Customize your header by removing the header borders with the `header_style: "borderless"` prop.
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("card", props: { background: "light" }) do %>
|
|
2
|
-
<%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
|
|
3
|
-
<%= pb_rails("table/table_head") do %>
|
|
4
|
-
<%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
|
|
5
|
-
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
6
|
-
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
7
|
-
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
8
|
-
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
9
|
-
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
10
|
-
<% end %>
|
|
11
|
-
<% end %>
|
|
12
|
-
<%= pb_rails("table/table_body") do %>
|
|
13
|
-
<%= pb_rails("table/table_row") do %>
|
|
14
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
15
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
16
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
17
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
18
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
19
|
-
<% end %>
|
|
20
|
-
<%= pb_rails("table/table_row") do %>
|
|
21
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
22
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
23
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
24
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
25
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
26
|
-
<% end %>
|
|
27
|
-
<%= pb_rails("table/table_row") do %>
|
|
28
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
29
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
30
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
31
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
32
|
-
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
33
|
-
<% end %>
|
|
34
|
-
<% end %>
|
|
35
|
-
<% end %>
|
|
36
|
-
<% end %>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/rails#table-with-background-kit) logic to give your table header a custom background color. Use the `header_style: "floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `background_color` passed to Background kit should match the `background` or `background_color` for the element in which it is nested).
|