playbook_ui_docs 14.14.0.pre.rc.4 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700
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_inline_editing.jsx +102 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +4 -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_rails.md +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -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_rails.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 +4 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -1
- 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_date_picker/docs/_date_picker_hooks.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb +39 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb +39 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- 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_borders.jsx +3 -3
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +20 -37
- 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_menu.jsx +6 -6
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +1 -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 +6 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +4 -3
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb +40 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +50 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md +3 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
- 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.jsx +61 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +72 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +91 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +91 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/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_phone_number_input/docs/_phone_number_input_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +5 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
- 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_radio/docs/_radio_react_hook.jsx +60 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +58 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb +7 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx +54 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md +1 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
- 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_icon_rails.html.erb +22 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +69 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb +45 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md +5 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb +33 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +66 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +68 -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_tooltip/docs/_tooltip_icon.erb +0 -10
@@ -24,7 +24,7 @@
|
|
24
24
|
<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
|
25
25
|
<%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
|
26
26
|
<%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
|
27
|
-
<%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
|
27
|
+
<%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
|
28
28
|
<%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
|
29
29
|
<%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
|
30
30
|
<%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
|
@@ -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
|
-
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
38
|
+
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: 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 %>
|
@@ -0,0 +1,40 @@
|
|
1
|
+
<%
|
2
|
+
names = [
|
3
|
+
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
4
|
+
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
5
|
+
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
6
|
+
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
7
|
+
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
8
|
+
]
|
9
|
+
%>
|
10
|
+
|
11
|
+
<%= pb_rails("typeahead", props: {
|
12
|
+
html_options: { style: { maxWidth: "240px" }},
|
13
|
+
id: "typeahead-form-pill",
|
14
|
+
is_multi: true,
|
15
|
+
options: names,
|
16
|
+
label: "Wrapped Within Typeahead",
|
17
|
+
pills: true,
|
18
|
+
wrapped: true,
|
19
|
+
}) %>
|
20
|
+
|
21
|
+
<%= pb_rails("caption", props: { text: "Form Pill Wrapped Text" }) %>
|
22
|
+
<%= pb_rails("card", props: { max_width: "xs" }) do %>
|
23
|
+
<%= pb_rails("form_pill", props: {
|
24
|
+
name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
|
25
|
+
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
26
|
+
tabindex: 0,
|
27
|
+
wrapped: true,
|
28
|
+
}) %>
|
29
|
+
<%= pb_rails("form_pill", props: {
|
30
|
+
icon: "badge-check",
|
31
|
+
text: "icon and a very long tag to show wrapped text",
|
32
|
+
tabindex: 0,
|
33
|
+
wrapped: true,
|
34
|
+
}) %>
|
35
|
+
<%= pb_rails("form_pill", props: {
|
36
|
+
text: "form pill long tag no tooltip show wrapped text",
|
37
|
+
tabindex: 0,
|
38
|
+
wrapped: true,
|
39
|
+
}) %>
|
40
|
+
<% end %>
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
|
3
|
+
|
4
|
+
const names = [
|
5
|
+
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
6
|
+
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
7
|
+
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
8
|
+
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
9
|
+
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
10
|
+
]
|
11
|
+
|
12
|
+
const FormPillWrapped = (props) => {
|
13
|
+
return (
|
14
|
+
<>
|
15
|
+
<Typeahead
|
16
|
+
htmlOptions={{ style: { maxWidth: "240px" } }}
|
17
|
+
isMulti
|
18
|
+
label="Wrapped Within Typeahead"
|
19
|
+
options={names}
|
20
|
+
wrapped
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
<Caption text="Form Pill Wrapped Text"/>
|
24
|
+
<Card maxWidth="xs">
|
25
|
+
<FormPill
|
26
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
27
|
+
name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
|
28
|
+
onClick={() => alert('Click!')}
|
29
|
+
tabIndex={0}
|
30
|
+
wrapped
|
31
|
+
/>
|
32
|
+
<FormPill
|
33
|
+
icon="badge-check"
|
34
|
+
onClick={() => {alert('Click!')}}
|
35
|
+
tabIndex={0}
|
36
|
+
text="icon and a very long tag to show wrapped text"
|
37
|
+
wrapped
|
38
|
+
/>
|
39
|
+
<FormPill
|
40
|
+
onClick={() => {alert('Click!')}}
|
41
|
+
tabIndex={0}
|
42
|
+
text="form pill with a very long tag to show wrapped text"
|
43
|
+
wrapped
|
44
|
+
/>
|
45
|
+
</Card>
|
46
|
+
</>
|
47
|
+
)
|
48
|
+
}
|
49
|
+
|
50
|
+
export default FormPillWrapped
|
@@ -4,6 +4,7 @@ examples:
|
|
4
4
|
- form_pill_user: Form Pill User
|
5
5
|
- form_pill_size: Form Pill Size
|
6
6
|
- form_pill_truncated_text: Truncated Text
|
7
|
+
- form_pill_wrapped: Wrapped Text
|
7
8
|
- form_pill_tag: Form Pill Tag
|
8
9
|
- form_pill_example: Example
|
9
10
|
- form_pill_icon: Form Pill Icon
|
@@ -13,6 +14,7 @@ examples:
|
|
13
14
|
- form_pill_user: Form Pill User
|
14
15
|
- form_pill_size: Form Pill Size
|
15
16
|
- form_pill_truncated_text: Truncated Text
|
17
|
+
- form_pill_wrapped: Wrapped Text
|
16
18
|
- form_pill_tag: Form Pill Tag
|
17
19
|
- form_pill_example: Example
|
18
20
|
- form_pill_icon: Form Pill Icon
|
@@ -5,3 +5,4 @@ export { default as FormPillExample } from './_form_pill_example.jsx'
|
|
5
5
|
export { default as FormPillIcon } from './_form_pill_icon.jsx'
|
6
6
|
export { default as FormPillColors } from './_form_pill_colors.jsx'
|
7
7
|
export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
|
8
|
+
export { default as FormPillWrapped } from './_form_pill_wrapped.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,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,72 @@
|
|
1
|
+
<% treeData = [{
|
2
|
+
label: "Power Home Remodeling",
|
3
|
+
value: "Power Home Remodeling",
|
4
|
+
id: "100",
|
5
|
+
expanded: true,
|
6
|
+
children: [
|
7
|
+
{
|
8
|
+
label: "People",
|
9
|
+
value: "People",
|
10
|
+
id: "101",
|
11
|
+
expanded: true,
|
12
|
+
children: [
|
13
|
+
{
|
14
|
+
label: "Talent Acquisition",
|
15
|
+
value: "Talent Acquisition",
|
16
|
+
id: "102",
|
17
|
+
},
|
18
|
+
{
|
19
|
+
label: "Business Affairs",
|
20
|
+
value: "Business Affairs",
|
21
|
+
id: "103",
|
22
|
+
children: [
|
23
|
+
{
|
24
|
+
label: "Initiatives",
|
25
|
+
value: "Initiatives",
|
26
|
+
id: "104",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
label: "Learning & Development",
|
30
|
+
value: "Learning & Development",
|
31
|
+
id: "105",
|
32
|
+
},
|
33
|
+
],
|
34
|
+
},
|
35
|
+
{
|
36
|
+
label: "People Experience",
|
37
|
+
value: "People Experience",
|
38
|
+
id: "106",
|
39
|
+
},
|
40
|
+
],
|
41
|
+
},
|
42
|
+
{
|
43
|
+
label: "Contact Center",
|
44
|
+
value: "Contact Center",
|
45
|
+
id: "107",
|
46
|
+
children: [
|
47
|
+
{
|
48
|
+
label: "Appointment Management",
|
49
|
+
value: "Appointment Management",
|
50
|
+
id: "108",
|
51
|
+
},
|
52
|
+
{
|
53
|
+
label: "Customer Service",
|
54
|
+
value: "Customer Service",
|
55
|
+
id: "109",
|
56
|
+
},
|
57
|
+
{
|
58
|
+
label: "Energy",
|
59
|
+
value: "Energy",
|
60
|
+
id: "110",
|
61
|
+
},
|
62
|
+
],
|
63
|
+
},
|
64
|
+
],
|
65
|
+
}] %>
|
66
|
+
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
68
|
+
disabled: true,
|
69
|
+
id: "multi-level-select-default-rails",
|
70
|
+
name: "my_array",
|
71
|
+
tree_data: treeData
|
72
|
+
}) %>
|
@@ -0,0 +1,91 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
3
|
+
|
4
|
+
const treeData = [
|
5
|
+
{
|
6
|
+
label: "Power Home Remodeling",
|
7
|
+
value: "Power Home Remodeling",
|
8
|
+
id: "powerhome1",
|
9
|
+
expanded: true,
|
10
|
+
children: [
|
11
|
+
{
|
12
|
+
label: "People",
|
13
|
+
value: "People",
|
14
|
+
id: "people1",
|
15
|
+
expanded: true,
|
16
|
+
children: [
|
17
|
+
{
|
18
|
+
label: "Talent Acquisition",
|
19
|
+
value: "Talent Acquisition",
|
20
|
+
id: "talent1",
|
21
|
+
},
|
22
|
+
{
|
23
|
+
label: "Business Affairs",
|
24
|
+
value: "Business Affairs",
|
25
|
+
id: "business1",
|
26
|
+
children: [
|
27
|
+
{
|
28
|
+
label: "Initiatives",
|
29
|
+
value: "Initiatives",
|
30
|
+
id: "initiative1",
|
31
|
+
},
|
32
|
+
{
|
33
|
+
label: "Learning & Development",
|
34
|
+
value: "Learning & Development",
|
35
|
+
id: "development1",
|
36
|
+
},
|
37
|
+
],
|
38
|
+
},
|
39
|
+
{
|
40
|
+
label: "People Experience",
|
41
|
+
value: "People Experience",
|
42
|
+
id: "experience1",
|
43
|
+
},
|
44
|
+
],
|
45
|
+
},
|
46
|
+
{
|
47
|
+
label: "Contact Center",
|
48
|
+
value: "Contact Center",
|
49
|
+
id: "contact1",
|
50
|
+
children: [
|
51
|
+
{
|
52
|
+
label: "Appointment Management",
|
53
|
+
value: "Appointment Management",
|
54
|
+
id: "appointment1",
|
55
|
+
},
|
56
|
+
{
|
57
|
+
label: "Customer Service",
|
58
|
+
value: "Customer Service",
|
59
|
+
id: "customer1",
|
60
|
+
},
|
61
|
+
{
|
62
|
+
label: "Energy",
|
63
|
+
value: "Energy",
|
64
|
+
id: "energy1",
|
65
|
+
},
|
66
|
+
],
|
67
|
+
},
|
68
|
+
],
|
69
|
+
},
|
70
|
+
];
|
71
|
+
|
72
|
+
const MultiLevelSelectDisabled = (props) => {
|
73
|
+
return (
|
74
|
+
<>
|
75
|
+
<MultiLevelSelect
|
76
|
+
disabled
|
77
|
+
id='multiselect-default'
|
78
|
+
onSelect={(selectedNodes) =>
|
79
|
+
console.log(
|
80
|
+
"Selected Items",
|
81
|
+
selectedNodes
|
82
|
+
)
|
83
|
+
}
|
84
|
+
treeData={treeData}
|
85
|
+
{...props}
|
86
|
+
/>
|
87
|
+
</>
|
88
|
+
)
|
89
|
+
};
|
90
|
+
|
91
|
+
export default MultiLevelSelectDisabled
|
@@ -0,0 +1,91 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import MultiLevelSelect from "../_multi_level_select"
|
3
|
+
import { useForm } from "react-hook-form"
|
4
|
+
|
5
|
+
const treeData = [
|
6
|
+
{
|
7
|
+
label: "Power Home Remodeling",
|
8
|
+
value: "Power Home Remodeling",
|
9
|
+
id: "powerhome1",
|
10
|
+
expanded: true,
|
11
|
+
children: [
|
12
|
+
{
|
13
|
+
label: "People",
|
14
|
+
value: "People",
|
15
|
+
id: "people1",
|
16
|
+
expanded: true,
|
17
|
+
children: [
|
18
|
+
{
|
19
|
+
label: "Talent Acquisition",
|
20
|
+
value: "Talent Acquisition",
|
21
|
+
id: "talent1",
|
22
|
+
},
|
23
|
+
{
|
24
|
+
label: "Business Affairs",
|
25
|
+
value: "Business Affairs",
|
26
|
+
id: "business1",
|
27
|
+
children: [
|
28
|
+
{
|
29
|
+
label: "Initiatives",
|
30
|
+
value: "Initiatives",
|
31
|
+
id: "initiative1",
|
32
|
+
},
|
33
|
+
{
|
34
|
+
label: "Learning & Development",
|
35
|
+
value: "Learning & Development",
|
36
|
+
id: "development1",
|
37
|
+
},
|
38
|
+
],
|
39
|
+
},
|
40
|
+
{
|
41
|
+
label: "People Experience",
|
42
|
+
value: "People Experience",
|
43
|
+
id: "experience1",
|
44
|
+
},
|
45
|
+
],
|
46
|
+
},
|
47
|
+
{
|
48
|
+
label: "Contact Center",
|
49
|
+
value: "Contact Center",
|
50
|
+
id: "contact1",
|
51
|
+
children: [
|
52
|
+
{
|
53
|
+
label: "Appointment Management",
|
54
|
+
value: "Appointment Management",
|
55
|
+
id: "appointment1",
|
56
|
+
},
|
57
|
+
{
|
58
|
+
label: "Customer Service",
|
59
|
+
value: "Customer Service",
|
60
|
+
id: "customer1",
|
61
|
+
},
|
62
|
+
{
|
63
|
+
label: "Energy",
|
64
|
+
value: "Energy",
|
65
|
+
id: "energy1",
|
66
|
+
},
|
67
|
+
],
|
68
|
+
},
|
69
|
+
],
|
70
|
+
},
|
71
|
+
]
|
72
|
+
|
73
|
+
const MultiLevelSelectReactHook = (props) => {
|
74
|
+
const { register, watch } = useForm()
|
75
|
+
const selectedItems = watch("departments")
|
76
|
+
selectedItems && console.log("Selected Items", selectedItems)
|
77
|
+
|
78
|
+
return (
|
79
|
+
<div>
|
80
|
+
<MultiLevelSelect
|
81
|
+
id="multiselect-default"
|
82
|
+
marginBottom="md"
|
83
|
+
treeData={treeData}
|
84
|
+
{...register("departments")}
|
85
|
+
{...props}
|
86
|
+
/>
|
87
|
+
</div>
|
88
|
+
)
|
89
|
+
}
|
90
|
+
|
91
|
+
export default MultiLevelSelectReactHook
|
@@ -0,0 +1 @@
|
|
1
|
+
You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.
|
@@ -8,9 +8,11 @@ examples:
|
|
8
8
|
- multi_level_select_with_form: With Form
|
9
9
|
- multi_level_select_color: With Pills (Custom Color)
|
10
10
|
- multi_level_select_reset: Reset Selection
|
11
|
+
- multi_level_select_disabled: Disabled
|
11
12
|
|
12
13
|
react:
|
13
14
|
- multi_level_select_default: Default
|
15
|
+
- multi_level_select_react_hook: React Hook
|
14
16
|
- multi_level_select_single: Single Select
|
15
17
|
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
16
18
|
- multi_level_select_return_all_selected: Return All Selected
|
@@ -18,4 +20,4 @@ examples:
|
|
18
20
|
- multi_level_select_color: With Pills (Custom Color)
|
19
21
|
- multi_level_select_with_children: Checkboxes With Children
|
20
22
|
- multi_level_select_with_children_with_radios: Single Select With Children
|
21
|
-
|
23
|
+
- multi_level_select_disabled: Disabled
|
@@ -6,3 +6,5 @@ export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_sele
|
|
6
6
|
export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
|
7
7
|
export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
|
8
8
|
export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
|
9
|
+
export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
|
10
|
+
export { default as MultiLevelSelectReactHook } from './_multi_level_select_react_hook.jsx'
|
@@ -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'
|