playbook_ui_docs 16.9.0.pre.rc.2 → 16.9.0.pre.rc.3
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_scroll_limitation.jsx +68 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md +7 -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 +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx +2 -2
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_icon/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb +90 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx +100 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md +1 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md +1 -1
- metadata +7 -5
- data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb +0 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx +0 -21
- data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.md +0 -7
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0c4926f8f92b152b64e4d26cd5a503beb4e1b6f06652b791c26a9c58df77f361
|
|
4
|
+
data.tar.gz: 44ac225e3eddc055c4a287f7bd7ad7ce7f8602cb312e83d291f444a5fe8d6fce
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4ee7242da1614707a9cf79bd49a872f0ce613d65282138c1ae357bee38b660b20bbe4af2a427317c65f130fa52c5d26813584e9bd1aed57f96ddd58e50de47fa
|
|
7
|
+
data.tar.gz: 83e536093e3cc266eed5c1252d325cdc61bd488d5bf5743e7372296acc5e1390132639555b6f28850be80daab7336f8bd8dffd5f57609308ac55ab00c2aa36b6
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from "../../pb_advanced_table/_advanced_table"
|
|
3
|
+
import Title from "../../pb_title/_title"
|
|
4
|
+
|
|
5
|
+
const COLUMN_COUNT = 10
|
|
6
|
+
const ROW_COUNT = 40
|
|
7
|
+
|
|
8
|
+
const columnDefinitions = [
|
|
9
|
+
{
|
|
10
|
+
accessor: "region",
|
|
11
|
+
label: "Region",
|
|
12
|
+
id: "region",
|
|
13
|
+
columnStyling: { minWidth: 160 },
|
|
14
|
+
},
|
|
15
|
+
...Array.from({ length: COLUMN_COUNT }, (_, index) => ({
|
|
16
|
+
accessor: `metric${index + 1}`,
|
|
17
|
+
label: `Metric ${index + 1}`,
|
|
18
|
+
id: `metric${index + 1}`,
|
|
19
|
+
columnStyling: { minWidth: 180 },
|
|
20
|
+
})),
|
|
21
|
+
]
|
|
22
|
+
|
|
23
|
+
const tableData = Array.from({ length: ROW_COUNT }, (_, row) => ({
|
|
24
|
+
region: `Region ${row + 1}`,
|
|
25
|
+
...Object.fromEntries(
|
|
26
|
+
Array.from({ length: COLUMN_COUNT }, (_, col) => [
|
|
27
|
+
`metric${col + 1}`,
|
|
28
|
+
String((row + 1) * (col + 1)),
|
|
29
|
+
])
|
|
30
|
+
),
|
|
31
|
+
}))
|
|
32
|
+
|
|
33
|
+
const tableProps = { sticky: true }
|
|
34
|
+
|
|
35
|
+
const AdvancedTableStickyScrollLimitation = (props) => (
|
|
36
|
+
<div>
|
|
37
|
+
<Title
|
|
38
|
+
size={4}
|
|
39
|
+
text="Without maxHeight"
|
|
40
|
+
{...props}
|
|
41
|
+
/>
|
|
42
|
+
<AdvancedTable
|
|
43
|
+
columnDefinitions={columnDefinitions}
|
|
44
|
+
responsive="none"
|
|
45
|
+
stickyLeftColumn={["region"]}
|
|
46
|
+
tableData={tableData}
|
|
47
|
+
tableProps={tableProps}
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
50
|
+
<Title
|
|
51
|
+
paddingTop="sm"
|
|
52
|
+
size={4}
|
|
53
|
+
text="With maxHeight"
|
|
54
|
+
{...props}
|
|
55
|
+
/>
|
|
56
|
+
<AdvancedTable
|
|
57
|
+
columnDefinitions={columnDefinitions}
|
|
58
|
+
maxHeight="sm"
|
|
59
|
+
responsive="none"
|
|
60
|
+
stickyLeftColumn={["region"]}
|
|
61
|
+
tableData={tableData}
|
|
62
|
+
tableProps={tableProps}
|
|
63
|
+
{...props}
|
|
64
|
+
/>
|
|
65
|
+
</div>
|
|
66
|
+
)
|
|
67
|
+
|
|
68
|
+
export default AdvancedTableStickyScrollLimitation
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
`stickyLeftColumn` adds horizontal overflow to the table wrapper. Without `maxHeight`, the page scrolls vertically while the table scrolls horizontally — two scroll containers.
|
|
2
|
+
|
|
3
|
+
Sticky columns work in that setup, but the sticky header cannot stick to the page. Scroll down on the page, then scroll the first table horizontally to see the conflict.
|
|
4
|
+
|
|
5
|
+
The second table uses `maxHeight` so both axes share one scroll container. The header sticks to the top of the table box instead of the page.
|
|
6
|
+
|
|
7
|
+
For a typical implementation with subrows, see [Sticky Columns with Sticky Header](#sticky-columns-with-sticky-header).
|
|
@@ -52,6 +52,7 @@ examples:
|
|
|
52
52
|
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
|
53
53
|
- advanced_table_sticky_columns: Sticky Columns
|
|
54
54
|
- advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
|
|
55
|
+
- advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
|
|
55
56
|
- advanced_table_responsive: Responsive Tables
|
|
56
57
|
- advanced_table_custom_cell: Custom Components for Cells
|
|
57
58
|
- advanced_table_with_custom_header: Custom Header Cell
|
|
@@ -27,6 +27,7 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
|
|
|
27
27
|
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
|
28
28
|
export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
|
|
29
29
|
export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
|
|
30
|
+
export { default as AdvancedTableStickyScrollLimitation } from './_advanced_table_sticky_scroll_limitation.jsx'
|
|
30
31
|
export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
|
|
31
32
|
export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
|
|
32
33
|
export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
|
|
@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
|
|
|
36
36
|
<Dialog.Body>
|
|
37
37
|
<DatePicker
|
|
38
38
|
defaultDate={dateFixed || undefined}
|
|
39
|
-
key={
|
|
39
|
+
key={"fixed-" + pickerInstance}
|
|
40
40
|
label="Date"
|
|
41
41
|
onChange={(dateStr) => setDateFixed(dateStr || "")}
|
|
42
|
-
pickerId={
|
|
42
|
+
pickerId={"datePickerFixed-" + pickerInstance}
|
|
43
43
|
staticPosition={false}
|
|
44
44
|
/>
|
|
45
45
|
</Dialog.Body>
|
|
@@ -8,7 +8,6 @@ examples:
|
|
|
8
8
|
- icon_border: Icon Border
|
|
9
9
|
- icon_sizes: Icon Sizes
|
|
10
10
|
- icon_custom: Icon Custom
|
|
11
|
-
- icon_fa_kit: Icon with FontAwesome Kit
|
|
12
11
|
- icon_color: Icon Color
|
|
13
12
|
|
|
14
13
|
react:
|
|
@@ -20,7 +19,6 @@ examples:
|
|
|
20
19
|
- icon_border: Icon Border
|
|
21
20
|
- icon_sizes: Icon Sizes
|
|
22
21
|
- icon_custom: Icon Custom
|
|
23
|
-
- icon_fa_kit: Icon with FontAwesome Kit
|
|
24
22
|
- icon_color: Icon Color
|
|
25
23
|
|
|
26
24
|
swift:
|
|
@@ -6,5 +6,4 @@ export { default as IconPull } from './_icon_pull.jsx'
|
|
|
6
6
|
export { default as IconBorder } from './_icon_border.jsx'
|
|
7
7
|
export { default as IconSizes } from './_icon_sizes.jsx'
|
|
8
8
|
export { default as IconCustom } from './_icon_custom.jsx'
|
|
9
|
-
export { default as IconFaKit} from './_icon_fa_kit.jsx'
|
|
10
9
|
export { default as IconColor } from './_icon_color.jsx'
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<% data = [
|
|
2
|
+
{
|
|
3
|
+
name: "EV",
|
|
4
|
+
y: 23.9,
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
name: "Hybrids",
|
|
8
|
+
y: 12.6,
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name: "Diesel",
|
|
12
|
+
y: 37.0,
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: "Petrol",
|
|
16
|
+
y: 26.4,
|
|
17
|
+
},
|
|
18
|
+
] %>
|
|
19
|
+
|
|
20
|
+
<% total = data.sum { |point| point[:y] } %>
|
|
21
|
+
<% subtitle_rows = data.map { |point| "#{point[:name]}: #{point[:y]}%" }.join("<br>") %>
|
|
22
|
+
|
|
23
|
+
<% chart_options = {
|
|
24
|
+
chart: {
|
|
25
|
+
type: "pie",
|
|
26
|
+
},
|
|
27
|
+
accessibility: {
|
|
28
|
+
point: {
|
|
29
|
+
valueSuffix: "%",
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
title: {
|
|
33
|
+
text: "2023 Norway car registrations",
|
|
34
|
+
floating: true,
|
|
35
|
+
align: "center",
|
|
36
|
+
verticalAlign: "top",
|
|
37
|
+
y: 8,
|
|
38
|
+
},
|
|
39
|
+
subtitle: {
|
|
40
|
+
text: "Total<br><strong>#{total.round(1)}</strong><br><br>#{subtitle_rows}",
|
|
41
|
+
useHTML: true,
|
|
42
|
+
floating: true,
|
|
43
|
+
align: "center",
|
|
44
|
+
verticalAlign: "middle",
|
|
45
|
+
y: 8,
|
|
46
|
+
style: {
|
|
47
|
+
textAlign: "center",
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
tooltip: {
|
|
51
|
+
pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
|
|
52
|
+
},
|
|
53
|
+
legend: {
|
|
54
|
+
enabled: false,
|
|
55
|
+
},
|
|
56
|
+
plotOptions: {
|
|
57
|
+
series: {
|
|
58
|
+
allowPointSelect: true,
|
|
59
|
+
cursor: "pointer",
|
|
60
|
+
borderRadius: 8,
|
|
61
|
+
dataLabels: [
|
|
62
|
+
{
|
|
63
|
+
enabled: true,
|
|
64
|
+
distance: 20,
|
|
65
|
+
format: "{point.name}",
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
enabled: true,
|
|
69
|
+
distance: -15,
|
|
70
|
+
format: "{point.percentage:.0f}%",
|
|
71
|
+
style: {
|
|
72
|
+
fontSize: "0.9em",
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
],
|
|
76
|
+
showInLegend: true,
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
series: [
|
|
80
|
+
{
|
|
81
|
+
name: "Registrations",
|
|
82
|
+
colorByPoint: true,
|
|
83
|
+
center: ["50%", "50%"],
|
|
84
|
+
innerSize: "75%",
|
|
85
|
+
data: data,
|
|
86
|
+
},
|
|
87
|
+
],
|
|
88
|
+
} %>
|
|
89
|
+
|
|
90
|
+
<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import PbCircleChart from "../_pb_circle_chart";
|
|
3
|
+
|
|
4
|
+
const data = [
|
|
5
|
+
{
|
|
6
|
+
name: "EV",
|
|
7
|
+
y: 23.9,
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
name: "Hybrids",
|
|
11
|
+
y: 12.6,
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
name: "Diesel",
|
|
15
|
+
y: 37.0,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
name: "Petrol",
|
|
19
|
+
y: 26.4,
|
|
20
|
+
},
|
|
21
|
+
];
|
|
22
|
+
|
|
23
|
+
const total = data.reduce((sum, point) => sum + point.y, 0);
|
|
24
|
+
const subtitleRows = data.map((point) => `${point.name}: ${point.y}%`).join("<br>");
|
|
25
|
+
|
|
26
|
+
const chartOptions = {
|
|
27
|
+
chart: {
|
|
28
|
+
type: "pie",
|
|
29
|
+
},
|
|
30
|
+
accessibility: {
|
|
31
|
+
point: {
|
|
32
|
+
valueSuffix: "%",
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
title: {
|
|
36
|
+
text: "2023 Norway car registrations",
|
|
37
|
+
floating: true,
|
|
38
|
+
align: "center",
|
|
39
|
+
verticalAlign: "top",
|
|
40
|
+
y: 8,
|
|
41
|
+
},
|
|
42
|
+
subtitle: {
|
|
43
|
+
text: `Total<br><strong>${total.toFixed(1)}</strong><br><br>${subtitleRows}`,
|
|
44
|
+
useHTML: true,
|
|
45
|
+
floating: true,
|
|
46
|
+
align: "center",
|
|
47
|
+
verticalAlign: "middle",
|
|
48
|
+
y: 8,
|
|
49
|
+
style: {
|
|
50
|
+
textAlign: "center",
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
tooltip: {
|
|
54
|
+
pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
|
|
55
|
+
},
|
|
56
|
+
legend: {
|
|
57
|
+
enabled: false,
|
|
58
|
+
},
|
|
59
|
+
plotOptions: {
|
|
60
|
+
series: {
|
|
61
|
+
allowPointSelect: true,
|
|
62
|
+
cursor: "pointer",
|
|
63
|
+
borderRadius: 8,
|
|
64
|
+
dataLabels: [
|
|
65
|
+
{
|
|
66
|
+
enabled: true,
|
|
67
|
+
distance: 20,
|
|
68
|
+
format: "{point.name}",
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
enabled: true,
|
|
72
|
+
distance: -15,
|
|
73
|
+
format: "{point.percentage:.0f}%",
|
|
74
|
+
style: {
|
|
75
|
+
fontSize: "0.9em",
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
],
|
|
79
|
+
showInLegend: true,
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
series: [
|
|
83
|
+
{
|
|
84
|
+
name: "Registrations",
|
|
85
|
+
colorByPoint: true,
|
|
86
|
+
center: ["50%", "50%"],
|
|
87
|
+
innerSize: "75%",
|
|
88
|
+
data,
|
|
89
|
+
},
|
|
90
|
+
],
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
const PbCircleChartCenteredData = (props) => (
|
|
94
|
+
<PbCircleChart
|
|
95
|
+
options={chartOptions}
|
|
96
|
+
{...props}
|
|
97
|
+
/>
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
export default PbCircleChartCenteredData;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
This example shows how to achieve centered data. This data will remain in the center of all screen sizes.
|
|
@@ -11,6 +11,7 @@ examples:
|
|
|
11
11
|
- pb_circle_chart_with_title: With Title
|
|
12
12
|
- pb_circle_chart_inner_sizes: Inner Circle Size Options
|
|
13
13
|
- pb_circle_chart_custom_tooltip: Tooltip Customization
|
|
14
|
+
- pb_circle_chart_centered_data: Centered Data
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
react:
|
|
@@ -25,5 +26,6 @@ examples:
|
|
|
25
26
|
- pb_circle_chart_with_title: With Title
|
|
26
27
|
- pb_circle_chart_inner_sizes: Inner Circle Size Options
|
|
27
28
|
- pb_circle_chart_custom_tooltip: Tooltip Customization
|
|
29
|
+
- pb_circle_chart_centered_data: Centered Data
|
|
28
30
|
|
|
29
31
|
|
|
@@ -8,4 +8,5 @@ export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_
|
|
|
8
8
|
export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
|
|
9
9
|
export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
|
|
10
10
|
export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
|
|
11
|
-
export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
|
|
11
|
+
export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
|
|
12
|
+
export { default as PbCircleChartCenteredData } from './_pb_circle_chart_centered_data.jsx'
|
|
@@ -36,4 +36,4 @@ When `filter` is present, `filter_content` and `filter_props` are ignored.
|
|
|
36
36
|
<% end %>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.
|
|
39
|
+
For Nitro apps that use a shared search/filter pattern, reference the [example on Alpha](https://github.com/powerhome/nitro-web/pull/56859/changes/aa2afcdc97d39d74beb65cf53eb3bb2517eb2181) for implementation details.
|
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: 16.9.0.pre.rc.
|
|
4
|
+
version: 16.9.0.pre.rc.3
|
|
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: 2026-05-
|
|
12
|
+
date: 2026-05-28 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -175,6 +175,8 @@ files:
|
|
|
175
175
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
|
|
176
176
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
|
|
177
177
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
|
|
178
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx
|
|
179
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md
|
|
178
180
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
|
|
179
181
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
|
|
180
182
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
|
|
@@ -1305,9 +1307,6 @@ files:
|
|
|
1305
1307
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
|
|
1306
1308
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
|
|
1307
1309
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default_swift.md
|
|
1308
|
-
- app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb
|
|
1309
|
-
- app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx
|
|
1310
|
-
- app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.md
|
|
1311
1310
|
- app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb
|
|
1312
1311
|
- app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx
|
|
1313
1312
|
- app/pb_kits/playbook/pb_icon/docs/_icon_flip_swift.md
|
|
@@ -1841,6 +1840,9 @@ files:
|
|
|
1841
1840
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md
|
|
1842
1841
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
|
|
1843
1842
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
|
|
1843
|
+
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb
|
|
1844
|
+
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx
|
|
1845
|
+
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md
|
|
1844
1846
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
|
|
1845
1847
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
|
|
1846
1848
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x" }) %>
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import Icon from '../_icon'
|
|
4
|
-
|
|
5
|
-
import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
|
|
6
|
-
|
|
7
|
-
const IconFaKit = (props) => {
|
|
8
|
-
return (
|
|
9
|
-
<div>
|
|
10
|
-
<Icon
|
|
11
|
-
{...props}
|
|
12
|
-
fixedWidth
|
|
13
|
-
fontStyle="fak"
|
|
14
|
-
icon="powergon"
|
|
15
|
-
size="5x"
|
|
16
|
-
/>
|
|
17
|
-
</div>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export default IconFaKit
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
Our Icon kit allows integration with [FontAwesome's custom kit](https://fontawesome.com/v6/docs/web/setup/use-kit#contentHeader) functionality out-of-the-box.
|
|
2
|
-
|
|
3
|
-
All you need to do is 3 things:
|
|
4
|
-
1) Import your custom-icon.js file as outlined in the FontAwesome docs.
|
|
5
|
-
2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon.
|
|
6
|
-
3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
|
|
7
|
-
|