playbook_ui_docs 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6462
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_headers_custom_cell.jsx +75 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx +50 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json +152002 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +69 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +22 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +34 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_currency/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +99 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +61 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +90 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -5
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb +8 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +33 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +20 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +24 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +49 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +2 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +11 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +22 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +27 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +61 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +37 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +11 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +37 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx +7 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx +18 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +88 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +15 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/dist/playbook-doc.js +1 -1
- metadata +63 -14
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
- /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_with_custom_click.md → _table_with_collapsible_with_custom_click_react.md} +0 -0
@@ -1 +1,20 @@
|
|
1
|
-
<%= pb_rails("
|
1
|
+
<%= pb_rails("flex") do %>
|
2
|
+
<%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
|
3
|
+
|
4
|
+
<%= pb_rails("drawer", props: {
|
5
|
+
id:"drawer-1",
|
6
|
+
}) do %>
|
7
|
+
Test me (Left Drawer)
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
|
11
|
+
<%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
|
12
|
+
|
13
|
+
<%= pb_rails("drawer", props: {
|
14
|
+
id:"drawer-2",
|
15
|
+
placement: "right"
|
16
|
+
}) do %>
|
17
|
+
Test me (Right Drawer)
|
18
|
+
<% end %>
|
19
|
+
<% end %>
|
20
|
+
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
|
2
|
+
<%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
|
3
|
+
<% end %>
|
4
|
+
|
5
|
+
<%= pb_rails("drawer", props: {
|
6
|
+
id:"drawer-4",
|
7
|
+
within_element: true,
|
8
|
+
placement: "bottom",
|
9
|
+
breakpoint: "md",
|
10
|
+
size: "full"
|
11
|
+
}) do %>
|
12
|
+
<%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
|
13
|
+
<%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
|
14
|
+
<%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
|
15
|
+
<%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
|
16
|
+
<%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
|
17
|
+
<% end %>
|
18
|
+
<%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
|
19
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
20
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
21
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
22
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
23
|
+
<% end %>
|
24
|
+
<% end %>
|
@@ -0,0 +1,21 @@
|
|
1
|
+
<%= pb_rails("flex") do %>
|
2
|
+
<%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
|
3
|
+
|
4
|
+
<%= pb_rails("drawer", props: {
|
5
|
+
id:"drawer-10",
|
6
|
+
overlay: false
|
7
|
+
}) do %>
|
8
|
+
Test me (No Overlay)
|
9
|
+
<% end %>
|
10
|
+
|
11
|
+
|
12
|
+
<%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
|
13
|
+
|
14
|
+
<%= pb_rails("drawer", props: {
|
15
|
+
id:"drawer-11",
|
16
|
+
placement: "right"
|
17
|
+
}) do %>
|
18
|
+
Test me (Has Overlay)
|
19
|
+
<% end %>
|
20
|
+
<% end %>
|
21
|
+
|
@@ -0,0 +1 @@
|
|
1
|
+
Click the button to close the drawer when there is no overlay.
|
@@ -0,0 +1,49 @@
|
|
1
|
+
<%= pb_rails("flex") do %>
|
2
|
+
<%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
|
3
|
+
|
4
|
+
<%= pb_rails("drawer", props: {
|
5
|
+
id:"drawer-5",
|
6
|
+
size: "xs"
|
7
|
+
}) do %>
|
8
|
+
XS
|
9
|
+
<% end %>
|
10
|
+
|
11
|
+
<%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
|
12
|
+
|
13
|
+
<%= pb_rails("drawer", props: {
|
14
|
+
id:"drawer-6",
|
15
|
+
size: "sm",
|
16
|
+
placement: "right"
|
17
|
+
}) do %>
|
18
|
+
This is a small drawer
|
19
|
+
<% end %>
|
20
|
+
|
21
|
+
<%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
|
22
|
+
|
23
|
+
<%= pb_rails("drawer", props: {
|
24
|
+
id:"drawer-7",
|
25
|
+
size: "md"
|
26
|
+
}) do %>
|
27
|
+
This is a medium drawer
|
28
|
+
<% end %>
|
29
|
+
|
30
|
+
<%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
|
31
|
+
|
32
|
+
<%= pb_rails("drawer", props: {
|
33
|
+
id:"drawer-8",
|
34
|
+
size: "lg",
|
35
|
+
placement: "right"
|
36
|
+
}) do %>
|
37
|
+
This is a large drawer
|
38
|
+
<% end %>
|
39
|
+
|
40
|
+
<%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
|
41
|
+
|
42
|
+
<%= pb_rails("drawer", props: {
|
43
|
+
id:"drawer-9",
|
44
|
+
size: "xl"
|
45
|
+
}) do %>
|
46
|
+
This is an extra large drawer
|
47
|
+
<% end %>
|
48
|
+
<% end %>
|
49
|
+
|
@@ -46,6 +46,7 @@
|
|
46
46
|
%>
|
47
47
|
<%= form.date_picker :example_date_picker_1, props: { label: true } %>
|
48
48
|
<%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
|
49
|
+
<%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
|
49
50
|
|
50
51
|
<%= form.actions do |action| %>
|
51
52
|
<%= action.submit %>
|
@@ -32,11 +32,12 @@
|
|
32
32
|
<%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
|
33
33
|
<%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
|
34
34
|
<%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
|
35
|
-
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
|
35
|
+
<%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
|
36
36
|
<%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
|
37
37
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
38
38
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
39
39
|
<%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
|
40
|
+
<%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
|
40
41
|
|
41
42
|
<%= form.actions do |action| %>
|
42
43
|
<%= action.submit %>
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= pb_rails("home_address_street", props: {
|
2
|
+
address: "70 pRoSpEcT ave",
|
3
|
+
address_cont: "Apt M18",
|
4
|
+
city: "West Chester",
|
5
|
+
home_id: 8250263,
|
6
|
+
home_url: "https://powerhrg.com/",
|
7
|
+
preserve_case: true,
|
8
|
+
state: "pa",
|
9
|
+
zipcode: "19382",
|
10
|
+
territory: "PHL",
|
11
|
+
}) %>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import HomeAddressStreet from '../_home_address_street'
|
4
|
+
|
5
|
+
const HomeAddressStreetFormatting = (props) => {
|
6
|
+
return (
|
7
|
+
<HomeAddressStreet
|
8
|
+
address="70 pRoSpEcT ave"
|
9
|
+
addressCont="Apt M18"
|
10
|
+
city="West Chester"
|
11
|
+
homeId="8250263"
|
12
|
+
homeUrl="https://powerhrg.com/"
|
13
|
+
preserveCase
|
14
|
+
state="pa"
|
15
|
+
territory="PHL"
|
16
|
+
zipcode="19382"
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
)
|
20
|
+
}
|
21
|
+
|
22
|
+
export default HomeAddressStreetFormatting
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.
|
@@ -5,12 +5,14 @@ examples:
|
|
5
5
|
- home_address_street_emphasis: Emphasis
|
6
6
|
- home_address_street_modified: Modified
|
7
7
|
- home_address_street_link: Link
|
8
|
+
- home_address_street_formatting: Formatting
|
8
9
|
|
9
10
|
react:
|
10
11
|
- home_address_street_default: Default
|
11
12
|
- home_address_street_emphasis: Emphasis
|
12
13
|
- home_address_street_modified: Modified
|
13
14
|
- home_address_street_link: Link
|
15
|
+
- home_address_street_formatting: Formatting
|
14
16
|
|
15
17
|
swift:
|
16
18
|
- home_address_street_default_swift: Default
|
@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
|
|
2
2
|
export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
|
3
3
|
export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
|
4
4
|
export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
|
5
|
+
export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { IconButton } from 'playbook-ui'
|
3
|
+
|
4
|
+
const IconButtonDefault = (props) => (
|
5
|
+
<div>
|
6
|
+
<IconButton
|
7
|
+
{...props}
|
8
|
+
/>
|
9
|
+
<IconButton
|
10
|
+
{...props}
|
11
|
+
marginTop="md"
|
12
|
+
variant="link"
|
13
|
+
/>
|
14
|
+
</div>
|
15
|
+
)
|
16
|
+
|
17
|
+
export default IconButtonDefault
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<%= pb_rails("flex", props: { align: "center"}) do %>
|
2
|
+
<%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
|
3
|
+
<% end %>
|
4
|
+
|
5
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
6
|
+
<%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
|
7
|
+
<% end %>
|
8
|
+
|
9
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
10
|
+
<%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
|
11
|
+
<% end %>
|
12
|
+
|
13
|
+
<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
|
14
|
+
<%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
|
15
|
+
<% end %>
|
16
|
+
|
17
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
18
|
+
<%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
|
19
|
+
<% end %>
|
20
|
+
|
21
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
22
|
+
<%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
|
23
|
+
<% end %>
|
24
|
+
|
25
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
26
|
+
<%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
|
27
|
+
<% end %>
|
@@ -0,0 +1,61 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { IconButton, Flex } from 'playbook-ui'
|
3
|
+
|
4
|
+
const IconButtonSizes = (props) => (
|
5
|
+
<div>
|
6
|
+
<Flex align="center">
|
7
|
+
<IconButton
|
8
|
+
{...props}
|
9
|
+
size="lg"
|
10
|
+
/>
|
11
|
+
<span>Large</span>
|
12
|
+
</Flex>
|
13
|
+
<Flex align="center">
|
14
|
+
<IconButton
|
15
|
+
{...props}
|
16
|
+
size="sm"
|
17
|
+
/>
|
18
|
+
<span>Small</span>
|
19
|
+
</Flex>
|
20
|
+
<Flex align="center">
|
21
|
+
<IconButton
|
22
|
+
{...props}
|
23
|
+
size="xs"
|
24
|
+
/>
|
25
|
+
<span>XSmall</span>
|
26
|
+
</Flex>
|
27
|
+
<Flex
|
28
|
+
align="center"
|
29
|
+
marginTop="md"
|
30
|
+
>
|
31
|
+
<IconButton
|
32
|
+
{...props}
|
33
|
+
size="1x"
|
34
|
+
/>
|
35
|
+
<span>1x</span>
|
36
|
+
</Flex>
|
37
|
+
<Flex align="center">
|
38
|
+
<IconButton
|
39
|
+
{...props}
|
40
|
+
size="2x"
|
41
|
+
/>
|
42
|
+
<span>2x</span>
|
43
|
+
</Flex>
|
44
|
+
<Flex align="center">
|
45
|
+
<IconButton
|
46
|
+
{...props}
|
47
|
+
size="3x"
|
48
|
+
/>
|
49
|
+
<span>3x</span>
|
50
|
+
</Flex>
|
51
|
+
<Flex align="center">
|
52
|
+
<IconButton
|
53
|
+
{...props}
|
54
|
+
size="4x"
|
55
|
+
/>
|
56
|
+
<span>4x</span>
|
57
|
+
</Flex>
|
58
|
+
</div>
|
59
|
+
)
|
60
|
+
|
61
|
+
export default IconButtonSizes
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", scroll_bar_none: true }) do %>
|
2
|
+
<%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
|
3
|
+
<% 15.times do %>
|
4
|
+
<%= pb_rails("flex/flex_item") do %>
|
5
|
+
<%= pb_rails("card") do %>
|
6
|
+
Card content
|
7
|
+
<% end %>
|
8
|
+
<% end %>
|
9
|
+
<% end %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import {
|
3
|
+
Overlay,
|
4
|
+
Card,
|
5
|
+
Flex,
|
6
|
+
FlexItem,
|
7
|
+
} from 'playbook-ui'
|
8
|
+
|
9
|
+
const InlineCardsExample = () => {
|
10
|
+
return (
|
11
|
+
<Flex
|
12
|
+
columnGap="lg"
|
13
|
+
orientation="row"
|
14
|
+
overflowX="auto"
|
15
|
+
>
|
16
|
+
{Array.from({ length: 15 }, (_, index) => (
|
17
|
+
<FlexItem key={index}>
|
18
|
+
<Card>{"Card Content"}</Card>
|
19
|
+
</FlexItem>
|
20
|
+
))}
|
21
|
+
</Flex>
|
22
|
+
)
|
23
|
+
}
|
24
|
+
|
25
|
+
const OverlayHideScrollBar = () => (
|
26
|
+
<>
|
27
|
+
<Overlay
|
28
|
+
color="card_light"
|
29
|
+
layout={{"x": "xl"}}
|
30
|
+
scrollBarNone
|
31
|
+
>
|
32
|
+
<InlineCardsExample />
|
33
|
+
</Overlay>
|
34
|
+
</>
|
35
|
+
)
|
36
|
+
|
37
|
+
export default OverlayHideScrollBar
|
@@ -0,0 +1 @@
|
|
1
|
+
Pass the `scroll_bar_none` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.
|
@@ -0,0 +1 @@
|
|
1
|
+
Pass the `scrollBarNone` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.
|
data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
|
2
|
+
<%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
|
3
|
+
<% 15.times do %>
|
4
|
+
<%= pb_rails("flex/flex_item") do %>
|
5
|
+
<%= pb_rails("card") do %>
|
6
|
+
Card content
|
7
|
+
<% end %>
|
8
|
+
<% end %>
|
9
|
+
<% end %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React, { forwardRef } from 'react'
|
2
|
+
import {
|
3
|
+
Overlay,
|
4
|
+
Card,
|
5
|
+
Flex,
|
6
|
+
FlexItem,
|
7
|
+
} from 'playbook-ui'
|
8
|
+
|
9
|
+
const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
|
10
|
+
return (
|
11
|
+
<Flex
|
12
|
+
columnGap="lg"
|
13
|
+
orientation="row"
|
14
|
+
ref={ref}
|
15
|
+
>
|
16
|
+
{Array.from({ length: 15 }, (_, index) => (
|
17
|
+
<FlexItem key={index}>
|
18
|
+
<Card>{"Card Content"}</Card>
|
19
|
+
</FlexItem>
|
20
|
+
))}
|
21
|
+
</Flex>
|
22
|
+
)
|
23
|
+
})
|
24
|
+
|
25
|
+
const OverlayVerticalDynamicMultiDirectional = () => (
|
26
|
+
<>
|
27
|
+
<Overlay
|
28
|
+
color="card_light"
|
29
|
+
dynamic
|
30
|
+
layout={{"x": "xl"}}
|
31
|
+
>
|
32
|
+
<InlineCardsExample />
|
33
|
+
</Overlay>
|
34
|
+
</>
|
35
|
+
)
|
36
|
+
|
37
|
+
export default OverlayVerticalDynamicMultiDirectional
|
@@ -0,0 +1 @@
|
|
1
|
+
Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.
|
data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar. You must also add a `ref` to the child that's being passed through the Overlay.
|
@@ -2,9 +2,13 @@ examples:
|
|
2
2
|
react:
|
3
3
|
- overlay_default: Default
|
4
4
|
- overlay_multi_directional: Multi-directional
|
5
|
+
- overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
|
5
6
|
- overlay_toggle: Toggle
|
7
|
+
- overlay_hide_scroll_bar: Hide Scroll Bar
|
6
8
|
|
7
9
|
rails:
|
8
10
|
- overlay_default: Default
|
9
11
|
- overlay_multi_directional: Multi-directional
|
12
|
+
- overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
|
10
13
|
- overlay_toggle: Toggle
|
14
|
+
- overlay_hide_scroll_bar: Hide Scroll Bar
|
@@ -1,3 +1,5 @@
|
|
1
1
|
export { default as OverlayDefault } from './_overlay_default.jsx'
|
2
2
|
export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
|
3
3
|
export { default as OverlayToggle } from './_overlay_toggle.jsx'
|
4
|
+
export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
|
5
|
+
export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
|
@@ -0,0 +1 @@
|
|
1
|
+
Progress pills start at `45px` wide if the container allows, but will shrink down to `1px` as the container gets smaller. Resize this window to see each pill shrink.
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import ProgressPills from '../_progress_pills'
|
3
|
+
|
4
|
+
const ProgressPillsFullWidth = (props) => {
|
5
|
+
return (
|
6
|
+
<>
|
7
|
+
<ProgressPills
|
8
|
+
active={2}
|
9
|
+
aria={{ label: '2 out of 5 steps complete' }}
|
10
|
+
fullWidthPill
|
11
|
+
steps={5}
|
12
|
+
{...props}
|
13
|
+
/>
|
14
|
+
</>
|
15
|
+
)
|
16
|
+
}
|
17
|
+
|
18
|
+
export default ProgressPillsFullWidth
|
@@ -0,0 +1 @@
|
|
1
|
+
Pass `full_width_pill: true` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.
|
@@ -0,0 +1 @@
|
|
1
|
+
Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.
|
@@ -3,9 +3,11 @@ examples:
|
|
3
3
|
rails:
|
4
4
|
- progress_pills_default: Default
|
5
5
|
- progress_pills_status: Status
|
6
|
+
- progress_pills_full_width: Full Container Width
|
6
7
|
|
7
8
|
|
8
9
|
|
9
10
|
react:
|
10
11
|
- progress_pills_default: Default
|
11
12
|
- progress_pills_status: Status
|
13
|
+
- progress_pills_full_width: Full Container Width
|
@@ -0,0 +1,47 @@
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
2
|
+
<%= pb_rails("table/table_head") do %>
|
3
|
+
<%= pb_rails("table/table_row") do %>
|
4
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
|
9
|
+
<%= pb_rails("table/table_header", props: { text: "" }) %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
<%= pb_rails("table/table_body") do %>
|
13
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) 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
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
20
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
21
|
+
<% end %>
|
22
|
+
<% end %>
|
23
|
+
|
24
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) do %>
|
25
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
30
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
31
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
32
|
+
<% end %>
|
33
|
+
<% end %>
|
34
|
+
|
35
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) do %>
|
36
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
37
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
41
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
42
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
43
|
+
<% end %>
|
44
|
+
<% end %>
|
45
|
+
<% end %>
|
46
|
+
<% end %>
|
47
|
+
|