playbook_ui_docs 15.4.0.pre.alpha.PLAY2582rails722112532 → 15.4.0.pre.alpha.PLAY2627requiredmultiselectdropdownbug12416
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_column_styling.jsx +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +1 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +2 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +0 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_date_time/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +1 -2
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +1 -2
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +1 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +1 -4
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +1 -1
- 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/_pb_circle_chart_inner_sizes.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx +1 -4
- data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +5 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +1 -4
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +3 -14
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb +7 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +1 -3
- data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +1 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +1 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +1 -2
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx +1 -1
- data/dist/playbook-doc.js +19 -0
- metadata +3 -21
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb +0 -9
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx +0 -24
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md +0 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md +0 -1
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx +0 -14
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md +0 -1
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md +0 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx +0 -22
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md +0 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.html.erb +0 -14
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.jsx +0 -29
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md +0 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.jsx +0 -31
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md +0 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.md +0 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.md +0 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.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: 15.4.0.pre.alpha.
|
|
4
|
+
version: 15.4.0.pre.alpha.PLAY2627requiredmultiselectdropdownbug12416
|
|
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-
|
|
12
|
+
date: 2025-11-17 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -533,10 +533,6 @@ files:
|
|
|
533
533
|
- app/pb_kits/playbook/pb_contact/docs/_description.md
|
|
534
534
|
- app/pb_kits/playbook/pb_contact/docs/example.yml
|
|
535
535
|
- app/pb_kits/playbook/pb_contact/docs/index.js
|
|
536
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb
|
|
537
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx
|
|
538
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md
|
|
539
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md
|
|
540
536
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb
|
|
541
537
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx
|
|
542
538
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
|
|
@@ -747,10 +743,6 @@ files:
|
|
|
747
743
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
|
|
748
744
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md
|
|
749
745
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md
|
|
750
|
-
- app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb
|
|
751
|
-
- app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx
|
|
752
|
-
- app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md
|
|
753
|
-
- app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md
|
|
754
746
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
|
|
755
747
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
|
|
756
748
|
- app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md
|
|
@@ -761,9 +753,6 @@ files:
|
|
|
761
753
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
|
|
762
754
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md
|
|
763
755
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md
|
|
764
|
-
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb
|
|
765
|
-
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx
|
|
766
|
-
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md
|
|
767
756
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
|
|
768
757
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/index.js
|
|
769
758
|
- app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.html.erb
|
|
@@ -1914,23 +1903,15 @@ files:
|
|
|
1914
1903
|
- app/pb_kits/playbook/pb_progress_simple/docs/example.yml
|
|
1915
1904
|
- app/pb_kits/playbook/pb_progress_simple/docs/index.js
|
|
1916
1905
|
- app/pb_kits/playbook/pb_progress_step/docs/_description.md
|
|
1917
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.html.erb
|
|
1918
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.jsx
|
|
1919
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md
|
|
1920
1906
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
|
|
1921
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.jsx
|
|
1922
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md
|
|
1923
1907
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
|
|
1924
1908
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx
|
|
1925
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.md
|
|
1926
1909
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb
|
|
1927
1910
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb
|
|
1928
1911
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx
|
|
1929
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.md
|
|
1930
1912
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx
|
|
1931
1913
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb
|
|
1932
1914
|
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx
|
|
1933
|
-
- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.md
|
|
1934
1915
|
- app/pb_kits/playbook/pb_progress_step/docs/example.yml
|
|
1935
1916
|
- app/pb_kits/playbook/pb_progress_step/docs/index.js
|
|
1936
1917
|
- app/pb_kits/playbook/pb_radio/docs/_description.md
|
|
@@ -2660,6 +2641,7 @@ files:
|
|
|
2660
2641
|
- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx
|
|
2661
2642
|
- app/pb_kits/playbook/pb_weekday_stacked/docs/example.yml
|
|
2662
2643
|
- app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
|
|
2644
|
+
- dist/playbook-doc.js
|
|
2663
2645
|
homepage: https://playbook.powerapp.cloud/
|
|
2664
2646
|
licenses:
|
|
2665
2647
|
- ISC
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("copy_button", props: {
|
|
2
|
-
text: "Copy Text",
|
|
3
|
-
tooltip_position: "right",
|
|
4
|
-
tooltip_text: "Text copied!",
|
|
5
|
-
value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook's 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease.",
|
|
6
|
-
variant: "button",
|
|
7
|
-
}) %>
|
|
8
|
-
|
|
9
|
-
<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import CopyButton from '../_copy_button'
|
|
4
|
-
import Textarea from '../../pb_textarea/_textarea'
|
|
5
|
-
|
|
6
|
-
const CopyButtonVariant = (props) => (
|
|
7
|
-
<div>
|
|
8
|
-
<CopyButton
|
|
9
|
-
{...props}
|
|
10
|
-
text="Copy Text"
|
|
11
|
-
tooltipPlacement="right"
|
|
12
|
-
tooltipText="Text copied!"
|
|
13
|
-
value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
|
|
14
|
-
variant="button"
|
|
15
|
-
/>
|
|
16
|
-
|
|
17
|
-
<Textarea
|
|
18
|
-
{...props}
|
|
19
|
-
placeholder="Copy and paste here"
|
|
20
|
-
/>
|
|
21
|
-
</div>
|
|
22
|
-
)
|
|
23
|
-
|
|
24
|
-
export default CopyButtonVariant
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass in `variant: "button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass in `variant="button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import DateTime from '../_date_time'
|
|
3
|
-
|
|
4
|
-
const DateTimeShowCurrentYear = (props) => (
|
|
5
|
-
<div>
|
|
6
|
-
<DateTime
|
|
7
|
-
datetime={new Date()}
|
|
8
|
-
showCurrentYear
|
|
9
|
-
{...props}
|
|
10
|
-
/>
|
|
11
|
-
</div>
|
|
12
|
-
)
|
|
13
|
-
|
|
14
|
-
export default DateTimeShowCurrentYear
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass in `show_current_year` to show this date's current year.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass in `showCurrentYear` to show this date's current year.
|
data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import DateTimeStacked from '../_date_time_stacked'
|
|
4
|
-
|
|
5
|
-
const DateTimeStackedShowCurrentYear = (props) => (
|
|
6
|
-
<div>
|
|
7
|
-
<DateTimeStacked
|
|
8
|
-
datetime={new Date()}
|
|
9
|
-
showCurrentYear
|
|
10
|
-
{...props}
|
|
11
|
-
/>
|
|
12
|
-
<br />
|
|
13
|
-
<DateTimeStacked
|
|
14
|
-
datetime={new Date()}
|
|
15
|
-
showCurrentYear
|
|
16
|
-
timeZone="America/Denver"
|
|
17
|
-
{...props}
|
|
18
|
-
/>
|
|
19
|
-
</div>
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
export default DateTimeStackedShowCurrentYear;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
By default, the Date Time Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<br><br>
|
|
2
|
-
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true, color: "info"}) do %>
|
|
3
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
|
|
4
|
-
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
|
5
|
-
<% end %>
|
|
6
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
|
|
7
|
-
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
8
|
-
<% end %>
|
|
9
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
|
|
10
|
-
<%= pb_rails("caption", props:{text: "Delivered"})%>
|
|
11
|
-
<% end %>
|
|
12
|
-
<% end %>
|
|
13
|
-
|
|
14
|
-
<br>
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import ProgressStep from '../_progress_step.tsx'
|
|
4
|
-
import ProgressStepItem from '../_progress_step_item.tsx'
|
|
5
|
-
import Caption from '../../pb_caption/_caption'
|
|
6
|
-
|
|
7
|
-
const ProgressStepColor = (props) => (
|
|
8
|
-
<div>
|
|
9
|
-
<br />
|
|
10
|
-
<ProgressStep
|
|
11
|
-
color="info"
|
|
12
|
-
icon
|
|
13
|
-
variant="tracker"
|
|
14
|
-
{...props}
|
|
15
|
-
>
|
|
16
|
-
<ProgressStepItem status="complete">
|
|
17
|
-
<Caption>{'Ordered'}</Caption>
|
|
18
|
-
</ProgressStepItem>
|
|
19
|
-
<ProgressStepItem status="active">
|
|
20
|
-
<Caption>{'Shipped'}</Caption>
|
|
21
|
-
</ProgressStepItem>
|
|
22
|
-
<ProgressStepItem status="inactive">
|
|
23
|
-
<Caption>{'Delivered'}</Caption>
|
|
24
|
-
</ProgressStepItem>
|
|
25
|
-
</ProgressStep>
|
|
26
|
-
</div>
|
|
27
|
-
)
|
|
28
|
-
|
|
29
|
-
export default ProgressStepColor
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
import ProgressStep from '../_progress_step.tsx'
|
|
4
|
-
import ProgressStepItem from '../_progress_step_item.tsx'
|
|
5
|
-
import Caption from '../../pb_caption/_caption'
|
|
6
|
-
|
|
7
|
-
const ProgressStepCustomIcon = (props) => (
|
|
8
|
-
<div>
|
|
9
|
-
<br />
|
|
10
|
-
<ProgressStep
|
|
11
|
-
icon
|
|
12
|
-
variant="tracker"
|
|
13
|
-
{...props}
|
|
14
|
-
>
|
|
15
|
-
<ProgressStepItem status="complete">
|
|
16
|
-
<Caption>{'Ordered'}</Caption>
|
|
17
|
-
</ProgressStepItem>
|
|
18
|
-
<ProgressStepItem
|
|
19
|
-
icon="exclamation-triangle"
|
|
20
|
-
status="active"
|
|
21
|
-
>
|
|
22
|
-
<Caption>{'Shipped'}</Caption>
|
|
23
|
-
</ProgressStepItem>
|
|
24
|
-
<ProgressStepItem status="inactive">
|
|
25
|
-
<Caption>{'Delivered'}</Caption>
|
|
26
|
-
</ProgressStepItem>
|
|
27
|
-
</ProgressStep>
|
|
28
|
-
</div>
|
|
29
|
-
)
|
|
30
|
-
|
|
31
|
-
export default ProgressStepCustomIcon
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Custom icons can also be set for individual steps. Simply use the `icon` prop for the relevant `ProgressStepItem`/`progress_step_item` as shown here.
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
The `variant` prop can be set to `tracker` to achieve this UI. Tracker is only available with the horizontal orientation and it is also recommended that you set the `icon` prop to true for this variant.
|
|
2
|
-
|
|
3
|
-
This variant takes children just like the default progress step, however, it is best to use the caption kit for children in this variant.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
`orientation` can also be set to `vertical` as shown here. By default, this is set to `horizontal`.
|