playbook_ui_docs 16.1.0.pre.alpha.play277814027 → 16.1.0.pre.rc.0
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_inline_row_loading.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +9 -16
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -5
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +5 -5
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +4 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +33 -35
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +0 -1
- data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_passphrase/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb +3 -3
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx +0 -3
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -4
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx +2 -5
- data/app/pb_kits/playbook/pb_time_picker/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_time_picker/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
- metadata +2 -46
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx +0 -71
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md +0 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb +0 -64
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md +0 -18
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx +0 -30
- data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md +0 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md +0 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb +0 -52
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx +0 -72
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md +0 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx +0 -33
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb +0 -20
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md +0 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md +0 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb +0 -9
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx +0 -33
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb +0 -74
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx +0 -87
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md +0 -3
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb +0 -30
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb +0 -7
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx +0 -24
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb +0 -5
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx +0 -14
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +0 -35
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -21
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_table/docs/_sections.yml +0 -68
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md +0 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb +0 -39
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md +0 -3
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb +0 -5
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx +0 -25
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md +0 -3
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb +0 -6
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx +0 -16
- data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1a500947d189faf49975a04214fc6a7777068bb6e97e701b56120716e8ea496e
|
|
4
|
+
data.tar.gz: cda73d66b6a43912b4729d9852e46fcd1521e4066b79f1b60a4290b8bbb6a256
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: df07ec138ac3b2a63260de43aa35051bc3fd6d8cbbba11989e789d02a486092763e936cf69c6856145cacf3b1197f0486b83dad239885c842e8165071b86428e
|
|
7
|
+
data.tar.gz: 1e2254818a11b43ce09a4dc1c319abaa7fa1be93a793d5917be95d5d966f9da7e5f345d9d895e03982b956df10874fddab545066849d30cdbf32fa81bbc6b3e4
|
|
@@ -6,9 +6,9 @@ In the first Advanced Table in this code example, 2021 has an empty children arr
|
|
|
6
6
|
This prop is set to `false` by default.
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
###
|
|
9
|
+
### persistToggleExpansion
|
|
10
10
|
The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
|
|
11
11
|
|
|
12
12
|
In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`.
|
|
13
13
|
|
|
14
|
-
This prop is set to
|
|
14
|
+
This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
|
|
@@ -29,7 +29,6 @@ examples:
|
|
|
29
29
|
- advanced_table_background_control_rails: Column Styling Background Color
|
|
30
30
|
- advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
|
|
31
31
|
- advanced_table_column_border_color_rails: Column Group Border Color
|
|
32
|
-
- advanced_table_inline_row_loading_rails: Inline Row Loading
|
|
33
32
|
|
|
34
33
|
|
|
35
34
|
react:
|
|
@@ -78,7 +77,6 @@ examples:
|
|
|
78
77
|
- advanced_table_column_styling: Column Styling
|
|
79
78
|
- advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
|
|
80
79
|
- advanced_table_column_styling_background: Column Styling Background Color
|
|
81
|
-
- advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
|
|
82
80
|
- advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
|
|
83
81
|
- advanced_table_padding_control: Padding Control using Column Styling
|
|
84
82
|
- advanced_table_column_border_color: Column Group Border Color
|
|
@@ -47,5 +47,4 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
|
|
|
47
47
|
export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
|
|
48
48
|
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
|
49
49
|
export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
|
|
50
|
-
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
51
|
-
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
50
|
+
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
@@ -7,4 +7,3 @@ export { default as BackgroundStatusSubtle } from './_background_status_subtle.j
|
|
|
7
7
|
export { default as BackgroundCategory } from './_background_category.jsx'
|
|
8
8
|
export { default as BackgroundSize } from './_background_size.jsx'
|
|
9
9
|
export { default as BackgroundOverlay } from './_background_overlay.jsx'
|
|
10
|
-
export { default as BackgroundResponsive } from './_background_responsive.jsx'
|
|
@@ -21,10 +21,7 @@ examples:
|
|
|
21
21
|
- dropdown_default_value: Default Value
|
|
22
22
|
- dropdown_multi_select_with_default: Multi Select Default Value
|
|
23
23
|
- dropdown_blank_selection: Blank Selection
|
|
24
|
-
- dropdown_with_placeholder: Placeholder
|
|
25
24
|
- dropdown_separators_hidden: Separators Hidden
|
|
26
|
-
- dropdown_with_clearable: Clearable
|
|
27
|
-
- dropdown_with_constrain_height_rails: Constrain Height
|
|
28
25
|
- dropdown_quickpick_rails: Quick Pick Variant
|
|
29
26
|
- dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
|
|
30
27
|
- dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
|
|
@@ -55,10 +52,7 @@ examples:
|
|
|
55
52
|
- dropdown_default_value: Default Value
|
|
56
53
|
- dropdown_multi_select_with_default: Multi Select Default Value
|
|
57
54
|
- dropdown_blank_selection: Blank Selection
|
|
58
|
-
- dropdown_with_placeholder: Placeholder
|
|
59
55
|
- dropdown_clear_selection: Clear Selection
|
|
60
|
-
- dropdown_with_clearable: Clearable
|
|
61
|
-
- dropdown_with_constrain_height: Constrain Height
|
|
62
56
|
- dropdown_separators_hidden: Separators Hidden
|
|
63
57
|
- dropdown_with_external_control: useDropdown Hook
|
|
64
58
|
- dropdown_quickpick: Quick Pick Variant
|
|
@@ -11,7 +11,6 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
|
|
|
11
11
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
|
12
12
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
|
13
13
|
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
|
14
|
-
export { default as DropdownWithPlaceholder } from './_dropdown_with_placeholder.jsx'
|
|
15
14
|
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|
|
16
15
|
export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
|
|
17
16
|
export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
|
|
@@ -28,6 +27,4 @@ export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
|
|
|
28
27
|
export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
|
|
29
28
|
export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
|
|
30
29
|
export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
|
|
31
|
-
export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
|
|
32
|
-
export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
|
|
33
|
-
export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
|
|
30
|
+
export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<%=
|
|
2
2
|
pb_rails("filter", props: {
|
|
3
3
|
min_width: "360px",
|
|
4
|
-
id: "
|
|
4
|
+
id: "1",
|
|
5
5
|
margin_bottom: "xl",
|
|
6
6
|
filters: [
|
|
7
7
|
{ name: "name", value: "John Wick" },
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
<%=
|
|
45
45
|
pb_rails("filter", props: {
|
|
46
46
|
min_width: "360px",
|
|
47
|
-
id: "
|
|
47
|
+
id: "def2",
|
|
48
48
|
sort_menu: [
|
|
49
49
|
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
|
50
50
|
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react'
|
|
2
2
|
|
|
3
3
|
import Button from '../../pb_button/_button'
|
|
4
4
|
import Filter from '../../pb_filter/_filter'
|
|
@@ -6,18 +6,11 @@ import Flex from '../../pb_flex/_flex'
|
|
|
6
6
|
import Select from '../../pb_select/_select'
|
|
7
7
|
import TextInput from '../../pb_text_input/_text_input'
|
|
8
8
|
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const handleSortChange = (sortOptions) => {
|
|
14
|
-
setSortValue(sortOptions)
|
|
15
|
-
alert(JSON.stringify(sortOptions[0]))
|
|
16
|
-
}
|
|
9
|
+
const SortingChangeCallback = (sortOptions) => {
|
|
10
|
+
alert(JSON.stringify(sortOptions[0]))
|
|
11
|
+
}
|
|
17
12
|
|
|
18
|
-
|
|
19
|
-
setSortValue2(sortOptions)
|
|
20
|
-
}
|
|
13
|
+
const FilterDefault = (props) => {
|
|
21
14
|
const options = [
|
|
22
15
|
{ value: 'USA' },
|
|
23
16
|
{ value: 'Canada' },
|
|
@@ -36,7 +29,7 @@ const FilterDefault = (props) => {
|
|
|
36
29
|
}}
|
|
37
30
|
marginBottom="xl"
|
|
38
31
|
minWidth="375px"
|
|
39
|
-
onSortChange={
|
|
32
|
+
onSortChange={SortingChangeCallback}
|
|
40
33
|
results={1}
|
|
41
34
|
sortOptions={{
|
|
42
35
|
popularity: 'Popularity',
|
|
@@ -45,7 +38,7 @@ const FilterDefault = (props) => {
|
|
|
45
38
|
// eslint-disable-next-line
|
|
46
39
|
manager_name: 'Manager\'s Name',
|
|
47
40
|
}}
|
|
48
|
-
sortValue={
|
|
41
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
|
49
42
|
{...props}
|
|
50
43
|
>
|
|
51
44
|
{({ closePopover }) => (
|
|
@@ -89,7 +82,7 @@ const FilterDefault = (props) => {
|
|
|
89
82
|
<Filter
|
|
90
83
|
double
|
|
91
84
|
minWidth="375px"
|
|
92
|
-
onSortChange={
|
|
85
|
+
onSortChange={SortingChangeCallback}
|
|
93
86
|
results={0}
|
|
94
87
|
sortOptions={{
|
|
95
88
|
popularity: 'Popularity',
|
|
@@ -98,7 +91,7 @@ const FilterDefault = (props) => {
|
|
|
98
91
|
// eslint-disable-next-line
|
|
99
92
|
manager_name: 'Manager\'s Name',
|
|
100
93
|
}}
|
|
101
|
-
sortValue={
|
|
94
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
|
102
95
|
{...props}
|
|
103
96
|
>
|
|
104
97
|
{({ closePopover }) => (
|
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
|
|
2
2
|
<%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
|
|
3
3
|
<%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
|
|
4
|
-
<%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
|
|
5
|
-
<%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
|
|
6
4
|
<%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
|
|
7
5
|
<%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
|
|
8
6
|
<%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
|
|
9
7
|
<%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
|
|
10
8
|
<%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
|
|
11
|
-
<%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
|
|
12
|
-
<%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
13
9
|
|
|
14
10
|
<%= form.actions do |action| %>
|
|
15
11
|
<%= action.submit %>
|
|
16
12
|
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
|
17
13
|
<% end %>
|
|
18
|
-
<% end %>
|
|
14
|
+
<% end %>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
options: names,
|
|
16
16
|
label: "Truncation Within Typeahead",
|
|
17
17
|
pills: true,
|
|
18
|
-
truncate:
|
|
18
|
+
truncate: 1,
|
|
19
19
|
}) %>
|
|
20
20
|
|
|
21
21
|
<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
|
|
@@ -24,19 +24,19 @@
|
|
|
24
24
|
name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
|
|
25
25
|
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
|
26
26
|
tabindex: 0,
|
|
27
|
-
truncate:
|
|
27
|
+
truncate: 1,
|
|
28
28
|
id: "truncation-1"
|
|
29
29
|
}) %>
|
|
30
30
|
<%= pb_rails("form_pill", props: {
|
|
31
31
|
icon: "badge-check",
|
|
32
32
|
text: "icon and a very long tag to show truncation",
|
|
33
33
|
tabindex: 0,
|
|
34
|
-
truncate:
|
|
34
|
+
truncate: 1,
|
|
35
35
|
id: "truncation-2"
|
|
36
36
|
}) %>
|
|
37
37
|
<%= pb_rails("form_pill", props: {
|
|
38
38
|
text: "form pill long tag no tooltip show truncation",
|
|
39
39
|
tabindex: 0,
|
|
40
|
-
truncate:
|
|
40
|
+
truncate: 1,
|
|
41
41
|
}) %>
|
|
42
|
-
<% end %>
|
|
42
|
+
<% end %>
|
|
@@ -21,7 +21,7 @@ const FormPillTruncatedText = (props) => {
|
|
|
21
21
|
isMulti
|
|
22
22
|
label="Truncation Within Typeahead"
|
|
23
23
|
options={names}
|
|
24
|
-
truncate={
|
|
24
|
+
truncate={1}
|
|
25
25
|
{...props}
|
|
26
26
|
/>
|
|
27
27
|
<Caption text="Form Pill Truncation"/>
|
|
@@ -31,20 +31,20 @@ const FormPillTruncatedText = (props) => {
|
|
|
31
31
|
name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
|
|
32
32
|
onClick={() => alert('Click!')}
|
|
33
33
|
tabIndex={0}
|
|
34
|
-
truncate={
|
|
34
|
+
truncate={1}
|
|
35
35
|
/>
|
|
36
36
|
<FormPill
|
|
37
37
|
icon="badge-check"
|
|
38
38
|
onClick={() => {alert('Click!')}}
|
|
39
39
|
tabIndex={0}
|
|
40
40
|
text="icon and a very long tag to show truncation"
|
|
41
|
-
truncate={
|
|
41
|
+
truncate={1}
|
|
42
42
|
/>
|
|
43
43
|
<FormPill
|
|
44
44
|
onClick={() => {alert('Click!')}}
|
|
45
45
|
tabIndex={0}
|
|
46
46
|
text="form pill with a very long tag to show truncation"
|
|
47
|
-
truncate={
|
|
47
|
+
truncate={1}
|
|
48
48
|
/>
|
|
49
49
|
</Card>
|
|
50
50
|
</>
|
|
@@ -1,39 +1,37 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
3
|
+
- multi_level_select_default: Default
|
|
4
|
+
- multi_level_select_single: Single Select
|
|
5
|
+
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
|
6
|
+
- multi_level_select_return_all_selected: Return All Selected
|
|
7
|
+
- multi_level_select_selected_ids: Selected Ids
|
|
8
|
+
- multi_level_select_with_form: With Form
|
|
9
|
+
- multi_level_select_color: With Pills (Custom Color)
|
|
10
|
+
- multi_level_select_reset: Reset Selection
|
|
11
|
+
- multi_level_select_label: With Label
|
|
12
|
+
- multi_level_select_error: Error
|
|
13
|
+
- multi_level_select_disabled: Disabled Input
|
|
14
|
+
- multi_level_select_disabled_options_default: Disabled Options (Default)
|
|
15
|
+
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
16
|
+
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
17
|
+
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
18
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
20
19
|
|
|
21
20
|
react:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
21
|
+
- multi_level_select_default: Default
|
|
22
|
+
- multi_level_select_react_hook: React Hook
|
|
23
|
+
- multi_level_select_single: Single Select
|
|
24
|
+
- multi_level_select_single_children_only: Single Select w/ Hidden Radios
|
|
25
|
+
- multi_level_select_return_all_selected: Return All Selected
|
|
26
|
+
- multi_level_select_selected_ids_react: Selected Ids
|
|
27
|
+
- multi_level_select_color: With Pills (Custom Color)
|
|
28
|
+
- multi_level_select_with_children: Checkboxes With Children
|
|
29
|
+
- multi_level_select_with_children_with_radios: Single Select With Children
|
|
30
|
+
- multi_level_select_label: With Label
|
|
31
|
+
- multi_level_select_error: Error
|
|
32
|
+
- multi_level_select_disabled: Disabled Input
|
|
33
|
+
- multi_level_select_disabled_options_default: Disabled Options (Default)
|
|
34
|
+
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
35
|
+
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
36
|
+
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
37
|
+
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
@@ -4,7 +4,6 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
|
|
|
4
4
|
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
|
5
5
|
export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
|
|
6
6
|
export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
|
|
7
|
-
export { default as MultiLevelSelectInputDisplay } from './_multi_level_select_input_display.jsx'
|
|
8
7
|
export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
|
|
9
8
|
export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
|
|
10
9
|
export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use the `withTooltip`
|
|
1
|
+
Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.
|
|
@@ -120,7 +120,6 @@ const PassphraseMeterSettings = (props) => {
|
|
|
120
120
|
"These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings."
|
|
121
121
|
}
|
|
122
122
|
</Body>
|
|
123
|
-
<br/>
|
|
124
123
|
<Passphrase
|
|
125
124
|
label={"Type your passphrase"}
|
|
126
125
|
onChange={handleChange}
|
|
@@ -9,7 +9,6 @@ examples:
|
|
|
9
9
|
- passphrase_strength_change: Strength Change
|
|
10
10
|
- passphrase_common: Common Passphrases
|
|
11
11
|
- passphrase_breached: Breached Passphrases
|
|
12
|
-
- passphrase_required_indicator: Required Indicator
|
|
13
12
|
|
|
14
13
|
react:
|
|
15
14
|
- passphrase_default: Default
|
|
@@ -20,4 +19,3 @@ examples:
|
|
|
20
19
|
- passphrase_strength_change: Strength Change
|
|
21
20
|
- passphrase_common: Common Passphrases
|
|
22
21
|
- passphrase_breached: Breached Passphrases
|
|
23
|
-
- passphrase_required_indicator: Required Indicator
|
|
@@ -6,4 +6,3 @@ export { default as PassphraseTips } from './_passphrase_tips'
|
|
|
6
6
|
export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
|
|
7
7
|
export { default as PassphraseCommon } from './_passphrase_common'
|
|
8
8
|
export { default as PassphraseBreached } from './_passphrase_breached'
|
|
9
|
-
export { default as PassphraseRequiredIndicator } from './_passphrase_required_indicator.jsx'
|
|
@@ -12,7 +12,6 @@ examples:
|
|
|
12
12
|
- phone_number_input_format: Format as You Type
|
|
13
13
|
- phone_number_input_strict_mode: Strict Mode
|
|
14
14
|
- phone_number_input_country_search: Country Search
|
|
15
|
-
- phone_number_input_required_indicator: Required Indicator
|
|
16
15
|
|
|
17
16
|
rails:
|
|
18
17
|
- phone_number_input_default: Default
|
|
@@ -25,4 +24,3 @@ examples:
|
|
|
25
24
|
- phone_number_input_strict_mode: Strict Mode
|
|
26
25
|
- phone_number_input_hidden_inputs: Hidden Inputs
|
|
27
26
|
- phone_number_input_country_search: Country Search
|
|
28
|
-
- phone_number_input_required_indicator: Required Indicator
|
|
@@ -9,4 +9,3 @@ export { default as PhoneNumberInputAccessInputElement } from './_phone_number_i
|
|
|
9
9
|
export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
|
|
10
10
|
export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
|
|
11
11
|
export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
|
|
12
|
-
export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'
|
|
@@ -9,7 +9,6 @@ examples:
|
|
|
9
9
|
- rich_text_editor_templates: Templates
|
|
10
10
|
# - rich_text_editor_toolbar_bottom: Toolbar Bottom
|
|
11
11
|
- rich_text_editor_inline: Inline
|
|
12
|
-
- rich_text_editor_required_indicator: Required Indicator
|
|
13
12
|
- rich_text_editor_preview: Preview
|
|
14
13
|
|
|
15
14
|
react:
|
|
@@ -32,7 +31,5 @@ examples:
|
|
|
32
31
|
- rich_text_editor_advanced_inline: Advanced (Inline)
|
|
33
32
|
- rich_text_editor_advanced_height: Advanced Height
|
|
34
33
|
- rich_text_editor_advanced_min_height: Advanced Min Height
|
|
35
|
-
- rich_text_editor_required_indicator: Required Indicator
|
|
36
|
-
- rich_text_editor_advanced_required_indicator: Advanced Required Indicator
|
|
37
34
|
- rich_text_editor_preview: Preview
|
|
38
35
|
- rich_text_editor_advanced_preview: Advanced Preview
|
|
@@ -19,5 +19,3 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
|
|
|
19
19
|
export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
|
|
20
20
|
export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
|
|
21
21
|
export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
|
|
22
|
-
export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
|
|
23
|
-
export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<%= pb_rails("textarea", props: { label: "Label", rows: 4
|
|
1
|
+
<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
|
|
2
2
|
|
|
3
3
|
<br/>
|
|
4
4
|
|
|
5
|
-
<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text"
|
|
5
|
+
<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
|
|
6
6
|
|
|
7
7
|
<br/>
|
|
8
8
|
|
|
9
|
-
<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text"
|
|
9
|
+
<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
|
|
@@ -13,7 +13,6 @@ const TextareaDefault = (props) => {
|
|
|
13
13
|
label="Label"
|
|
14
14
|
rows={4}
|
|
15
15
|
{...props}
|
|
16
|
-
id="default-example-1"
|
|
17
16
|
/>
|
|
18
17
|
|
|
19
18
|
<br />
|
|
@@ -22,7 +21,6 @@ const TextareaDefault = (props) => {
|
|
|
22
21
|
label="Label"
|
|
23
22
|
placeholder="Placeholder text"
|
|
24
23
|
{...props}
|
|
25
|
-
id="default-example-2"
|
|
26
24
|
/>
|
|
27
25
|
|
|
28
26
|
<br />
|
|
@@ -34,7 +32,6 @@ const TextareaDefault = (props) => {
|
|
|
34
32
|
placeholder="Placeholder text"
|
|
35
33
|
value={value}
|
|
36
34
|
{...props}
|
|
37
|
-
id="default-example-3"
|
|
38
35
|
/>
|
|
39
36
|
|
|
40
37
|
</div>
|
|
@@ -8,8 +8,6 @@ examples:
|
|
|
8
8
|
- textarea_character_counter: Character Counter
|
|
9
9
|
- textarea_inline: Inline
|
|
10
10
|
- textarea_emoji_mask: Emoji Mask
|
|
11
|
-
- textarea_required_indicator: Required Indicator
|
|
12
|
-
- textarea_input_options: Input Options
|
|
13
11
|
|
|
14
12
|
react:
|
|
15
13
|
- textarea_default: Default
|
|
@@ -19,9 +17,8 @@ examples:
|
|
|
19
17
|
- textarea_character_counter: Character Counter
|
|
20
18
|
- textarea_inline: Inline
|
|
21
19
|
- textarea_emoji_mask: Emoji Mask
|
|
22
|
-
- textarea_required_indicator: Required Indicator
|
|
23
20
|
|
|
24
21
|
swift:
|
|
25
22
|
- textarea_default_swift: Default
|
|
26
23
|
- textarea_error_swift: Textarea w/ Error
|
|
27
|
-
- textarea_props_swift: ""
|
|
24
|
+
- textarea_props_swift: ""
|
|
@@ -5,4 +5,3 @@ export { default as TextareaError } from './_textarea_error.jsx'
|
|
|
5
5
|
export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
|
|
6
6
|
export { default as TextareaInline } from './_textarea_inline.jsx'
|
|
7
7
|
export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'
|
|
8
|
-
export { default as TextareaRequiredIndicator } from './_textarea_required_indicator.jsx'
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react'
|
|
2
2
|
import TimePicker from '../../pb_time_picker/_time_picker'
|
|
3
3
|
import Body from '../../pb_body/_body'
|
|
4
|
-
import Flex from '../../pb_flex/_flex'
|
|
5
4
|
|
|
6
5
|
const TimePickerOnHandler = (props) => {
|
|
7
6
|
const [selectedTime, setSelectedTime] = useState('')
|
|
@@ -18,9 +17,7 @@ const TimePickerOnHandler = (props) => {
|
|
|
18
17
|
return (
|
|
19
18
|
<div>
|
|
20
19
|
{(selectedTime || closedTime) && (
|
|
21
|
-
<
|
|
22
|
-
orientation="column"
|
|
23
|
-
>
|
|
20
|
+
<div style={{ marginBottom: '16px' }}>
|
|
24
21
|
{selectedTime && (
|
|
25
22
|
<Body
|
|
26
23
|
text={`onChange: ${selectedTime}`}
|
|
@@ -32,7 +29,7 @@ const TimePickerOnHandler = (props) => {
|
|
|
32
29
|
text={`onClose: ${closedTime}`}
|
|
33
30
|
/>
|
|
34
31
|
)}
|
|
35
|
-
</
|
|
32
|
+
</div>
|
|
36
33
|
)}
|
|
37
34
|
<TimePicker
|
|
38
35
|
id="time-picker-on-handler"
|
|
@@ -9,7 +9,6 @@ examples:
|
|
|
9
9
|
- time_picker_min_max_time: Min & Max Time
|
|
10
10
|
- time_picker_error: Error
|
|
11
11
|
- time_picker_disabled: Disabled
|
|
12
|
-
- time_picker_required_indicator: Required Indicator
|
|
13
12
|
- time_picker_input_options: Input Options
|
|
14
13
|
|
|
15
14
|
|
|
@@ -22,5 +21,4 @@ examples:
|
|
|
22
21
|
- time_picker_min_max_time: Min & Max Time
|
|
23
22
|
- time_picker_error: Error
|
|
24
23
|
- time_picker_disabled: Disabled
|
|
25
|
-
- time_picker_required_indicator: Required Indicator
|
|
26
24
|
- time_picker_on_handler: onChange & onClose Handlers
|
|
@@ -7,4 +7,3 @@ export { default as TimePickerOnHandler } from './_time_picker_on_handler.jsx'
|
|
|
7
7
|
export { default as TimePickerMinMaxTime } from './_time_picker_min_max_time.jsx'
|
|
8
8
|
export { default as TimePickerError } from './_time_picker_error.jsx'
|
|
9
9
|
export { default as TimePickerDisabled } from './_time_picker_disabled.jsx'
|
|
10
|
-
export { default as TimePickerRequiredIndicator } from './_time_picker_required_indicator.jsx'
|