playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +84 -3
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +28 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +10 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
- data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form/form.rb +2 -0
- data/app/pb_kits/playbook/pb_form/formHelper.js +27 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
- data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -2
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +28 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +5 -1
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
- data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
- data/dist/chunks/_weekday_stacked-B9Sy5PN8.js +45 -0
- data/dist/chunks/{lib-CEpcaI8y.js → lib-D-mTv-kp.js} +1 -1
- data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-BkWGwJsl.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/kit_base.rb +21 -1
- data/lib/playbook/pb_forms_helper.rb +3 -1
- data/lib/playbook/version.rb +1 -1
- metadata +24 -6
- data/dist/chunks/_typeahead-C9g4qCcE.js +0 -22
- data/dist/chunks/_weekday_stacked-B0Zid7Rv.js +0 -45
@@ -13,13 +13,18 @@ module Playbook
|
|
13
13
|
prop :default_value
|
14
14
|
prop :blank_selection, type: Playbook::Props::String,
|
15
15
|
default: ""
|
16
|
+
prop :variant, type: Playbook::Props::Enum,
|
17
|
+
values: %w[default subtle],
|
18
|
+
default: "default"
|
19
|
+
prop :separators, type: Playbook::Props::Boolean,
|
20
|
+
default: true
|
16
21
|
|
17
22
|
def data
|
18
23
|
Hash(prop(:data)).merge(pb_dropdown: true)
|
19
24
|
end
|
20
25
|
|
21
26
|
def classname
|
22
|
-
generate_classname("pb_dropdown")
|
27
|
+
generate_classname("pb_dropdown", variant, separators_class, separator: " ")
|
23
28
|
end
|
24
29
|
|
25
30
|
private
|
@@ -32,6 +37,10 @@ module Playbook
|
|
32
37
|
default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
|
33
38
|
end
|
34
39
|
|
40
|
+
def separators_class
|
41
|
+
separators ? "" : "separators_hidden"
|
42
|
+
end
|
43
|
+
|
35
44
|
def options_with_blank
|
36
45
|
blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
|
37
46
|
end
|
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
73
73
|
!autocomplete && "select_only"
|
74
74
|
);
|
75
75
|
|
76
|
-
const customDisplayPlaceholder = selected
|
76
|
+
const customDisplayPlaceholder = selected?.label ? (
|
77
77
|
<b>{selected.label}</b>
|
78
78
|
) : autocomplete ? (
|
79
79
|
""
|
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
83
83
|
"Select..."
|
84
84
|
);
|
85
85
|
|
86
|
-
const defaultDisplayPlaceholder = selected
|
86
|
+
const defaultDisplayPlaceholder = selected?.label
|
87
87
|
? selected.label
|
88
88
|
: autocomplete
|
89
89
|
? ""
|
@@ -34,6 +34,7 @@ const FilterDouble = ({
|
|
34
34
|
maxHeight,
|
35
35
|
minWidth,
|
36
36
|
placement,
|
37
|
+
popoverProps,
|
37
38
|
...bgProps
|
38
39
|
}: FilterDoubleProps): React.ReactElement => (
|
39
40
|
<FilterBackground
|
@@ -49,6 +50,7 @@ const FilterDouble = ({
|
|
49
50
|
maxHeight={maxHeight}
|
50
51
|
minWidth={minWidth}
|
51
52
|
placement={placement}
|
53
|
+
popoverProps={popoverProps}
|
52
54
|
>
|
53
55
|
{children}
|
54
56
|
</FiltersPopover>
|
@@ -33,6 +33,7 @@ const FilterSingle = ({
|
|
33
33
|
maxHeight,
|
34
34
|
minWidth,
|
35
35
|
placement,
|
36
|
+
popoverProps,
|
36
37
|
...bgProps
|
37
38
|
}: FilterSingleProps): React.ReactElement => {
|
38
39
|
return (
|
@@ -52,6 +53,7 @@ const FilterSingle = ({
|
|
52
53
|
maxHeight={maxHeight}
|
53
54
|
minWidth={minWidth}
|
54
55
|
placement={placement}
|
56
|
+
popoverProps={popoverProps}
|
55
57
|
>
|
56
58
|
{children}
|
57
59
|
</FiltersPopover>
|
@@ -2,6 +2,7 @@ import React, { ReactNode, useState } from 'react'
|
|
2
2
|
|
3
3
|
import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
|
4
4
|
import PbReactPopover from '../../pb_popover/_popover'
|
5
|
+
import { GenericObject } from '../../types'
|
5
6
|
|
6
7
|
type FiltersPopoverProps = {
|
7
8
|
children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) => ReactNode),
|
@@ -9,8 +10,9 @@ type FiltersPopoverProps = {
|
|
9
10
|
maxHeight?: string,
|
10
11
|
minWidth?: string,
|
11
12
|
placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
|
13
|
+
popoverProps?: GenericObject,
|
12
14
|
}
|
13
|
-
const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
|
15
|
+
const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start", popoverProps }: FiltersPopoverProps): React.ReactElement => {
|
14
16
|
const [hide, updateHide] = useState(true)
|
15
17
|
const toggle = () => updateHide(!hide)
|
16
18
|
|
@@ -33,6 +35,7 @@ const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bott
|
|
33
35
|
reference={filterButton}
|
34
36
|
shouldClosePopover={updateHide}
|
35
37
|
show={!hide}
|
38
|
+
{...popoverProps}
|
36
39
|
>
|
37
40
|
<div className="pb-form">
|
38
41
|
{typeof children === 'function'
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<%=
|
2
|
+
pb_rails("filter", props: {
|
3
|
+
id: "filter_popover_props",
|
4
|
+
position: "top",
|
5
|
+
filters: [
|
6
|
+
{ name: "name", value: "John Wick" },
|
7
|
+
{ name: "city", value: "San Francisco"}
|
8
|
+
],
|
9
|
+
sort_menu: [
|
10
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
11
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
12
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
13
|
+
],
|
14
|
+
template: "default",
|
15
|
+
results: 1,
|
16
|
+
popover_props: { width: "250px" },
|
17
|
+
}) do
|
18
|
+
%>
|
19
|
+
<%
|
20
|
+
example_collection = [
|
21
|
+
OpenStruct.new(name: "USA", value: 1),
|
22
|
+
OpenStruct.new(name: "Canada", value: 2),
|
23
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
24
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
25
|
+
OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
|
26
|
+
]
|
27
|
+
%>
|
28
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
29
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
30
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
31
|
+
|
32
|
+
<%= form.actions do |action| %>
|
33
|
+
<%= action.submit props: {
|
34
|
+
text: "Apply",
|
35
|
+
data: {
|
36
|
+
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
37
|
+
},}%>
|
38
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
@@ -0,0 +1,71 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
|
3
|
+
|
4
|
+
const FilterPopoverProps = (props) => {
|
5
|
+
const options = [
|
6
|
+
{ value: 'USA' },
|
7
|
+
{ value: 'Canada' },
|
8
|
+
{ value: 'Brazil' },
|
9
|
+
{ value: 'Philippines' },
|
10
|
+
{ value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
|
11
|
+
]
|
12
|
+
|
13
|
+
const popoverProps = {
|
14
|
+
width: "250px"
|
15
|
+
}
|
16
|
+
|
17
|
+
return (
|
18
|
+
<Filter
|
19
|
+
{...props}
|
20
|
+
double
|
21
|
+
filters={{
|
22
|
+
'Full Name': 'John Wick',
|
23
|
+
'City': 'San Francisco',
|
24
|
+
}}
|
25
|
+
popoverProps={popoverProps}
|
26
|
+
results={1}
|
27
|
+
sortOptions={{
|
28
|
+
popularity: 'Popularity',
|
29
|
+
// eslint-disable-next-line
|
30
|
+
manager_title: 'Manager\'s Title',
|
31
|
+
// eslint-disable-next-line
|
32
|
+
manager_name: 'Manager\'s Name',
|
33
|
+
}}
|
34
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
35
|
+
>
|
36
|
+
{({ closePopover }) => (
|
37
|
+
<form>
|
38
|
+
<TextInput
|
39
|
+
label="Example Text Field"
|
40
|
+
placeholder="Enter Text"
|
41
|
+
{...props}
|
42
|
+
/>
|
43
|
+
<Select
|
44
|
+
blankSelection="Select One..."
|
45
|
+
label="Example Collection Select"
|
46
|
+
name="Collection Select"
|
47
|
+
options={options}
|
48
|
+
{...props}
|
49
|
+
/>
|
50
|
+
<Flex
|
51
|
+
spacing="between"
|
52
|
+
{...props}
|
53
|
+
>
|
54
|
+
<Button
|
55
|
+
onClick={closePopover}
|
56
|
+
text="Apply"
|
57
|
+
{...props}
|
58
|
+
/>
|
59
|
+
<Button
|
60
|
+
text="Clear"
|
61
|
+
variant="secondary"
|
62
|
+
{...props}
|
63
|
+
/>
|
64
|
+
</Flex>
|
65
|
+
</form>
|
66
|
+
)}
|
67
|
+
</Filter>
|
68
|
+
)
|
69
|
+
}
|
70
|
+
|
71
|
+
export default FilterPopoverProps
|
@@ -0,0 +1 @@
|
|
1
|
+
This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popover_props` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover).
|
@@ -0,0 +1 @@
|
|
1
|
+
This kit uses the [Popover kit](https://playbook.powerapp.cloud/kits/popover/react) under the hood for the Filter Popover which comes with its own set of props. If you want to apply certain Popover props to that underlying kit, you can do so by using the optional `popoverProps` prop. This prop must be an object that contains valid Popover props. For a full list of Popover props, see [here](https://playbook.powerapp.cloud/kits/popover/react).
|
@@ -10,6 +10,7 @@ examples:
|
|
10
10
|
- filter_max_width: Max Width for Popover Inside of Filter
|
11
11
|
- filter_max_height: Max Height for Popover Inside of Filter
|
12
12
|
- filter_placement: Filter Placement
|
13
|
+
- filter_popover_props: Popover Props
|
13
14
|
|
14
15
|
react:
|
15
16
|
- filter_default: Default
|
@@ -21,3 +22,5 @@ examples:
|
|
21
22
|
- filter_max_width: Max Width for Popover Inside of Filter
|
22
23
|
- filter_max_height: Max Height for Popover Inside of Filter
|
23
24
|
- filter_placement: Filter Placement
|
25
|
+
- filter_popover_props: Popover Props
|
26
|
+
|
@@ -7,3 +7,4 @@ export { default as SortOnly } from './_sort_only.jsx'
|
|
7
7
|
export { default as FilterMaxWidth } from './_filter_max_width.jsx'
|
8
8
|
export { default as FilterMaxHeight } from './_filter_max_height.jsx'
|
9
9
|
export { default as FilterPlacement } from './_filter_placement.jsx'
|
10
|
+
export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
|
@@ -71,13 +71,13 @@
|
|
71
71
|
<% end %>
|
72
72
|
|
73
73
|
<% if object.template != "sort_only"%>
|
74
|
-
<%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
|
74
|
+
<%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }.merge(object.popover_props)) do %>
|
75
75
|
<%= content %>
|
76
76
|
<% end %>
|
77
77
|
<%end%>
|
78
78
|
|
79
79
|
<% if object.template != "filter_only"%>
|
80
|
-
<%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
|
80
|
+
<%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}.merge(object.popover_props)) do %>
|
81
81
|
<%= pb_rails("list") do %>
|
82
82
|
<% object.sort_menu.each do |item| %>
|
83
83
|
<%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
|
@@ -15,6 +15,8 @@ module Playbook
|
|
15
15
|
prop :placement, type: Playbook::Props::Enum,
|
16
16
|
values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
|
17
17
|
default: "bottom-start"
|
18
|
+
prop :popover_props, type: Playbook::Props::HashProp,
|
19
|
+
default: {}
|
18
20
|
|
19
21
|
def classname
|
20
22
|
generate_classname("pb_filter_kit").rstrip
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
|
-
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
4
|
+
import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
|
5
5
|
import { GenericObject, Sizes } from '../types'
|
6
6
|
|
7
7
|
type FlexProps = {
|
@@ -61,6 +61,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
|
|
61
61
|
const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
|
62
62
|
const dataProps = buildDataProps(data)
|
63
63
|
const htmlProps = buildHtmlProps(htmlOptions)
|
64
|
+
const dynamicInlineProps = globalInlineProps(props)
|
64
65
|
|
65
66
|
|
66
67
|
return (
|
@@ -83,6 +84,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
|
|
83
84
|
globalProps(props),
|
84
85
|
className
|
85
86
|
)}
|
87
|
+
style={dynamicInlineProps}
|
86
88
|
{...dataProps}
|
87
89
|
{...htmlProps}
|
88
90
|
>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildCss, buildHtmlProps } from '../utilities/props'
|
4
|
-
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
4
|
+
import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
|
5
5
|
type FlexItemPropTypes = {
|
6
6
|
children: React.ReactNode[] | React.ReactNode,
|
7
7
|
fixedSize?: string,
|
@@ -35,14 +35,20 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
35
35
|
const fixedStyle =
|
36
36
|
fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
|
37
37
|
const orderClass = order !== 'none' ? `order_${order}` : null
|
38
|
+
const dynamicInlineProps = globalInlineProps(props)
|
39
|
+
const combinedStyles = {
|
40
|
+
...fixedStyle,
|
41
|
+
...dynamicInlineProps
|
42
|
+
}
|
38
43
|
|
39
44
|
const htmlProps = buildHtmlProps(htmlOptions)
|
40
45
|
|
46
|
+
|
41
47
|
return (
|
42
48
|
<div
|
43
49
|
{...htmlProps}
|
44
50
|
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
|
45
|
-
style={
|
51
|
+
style={combinedStyles}
|
46
52
|
>
|
47
53
|
{children}
|
48
54
|
</div>
|
@@ -20,8 +20,13 @@ module Playbook
|
|
20
20
|
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
|
21
21
|
end
|
22
22
|
|
23
|
-
def
|
24
|
-
|
23
|
+
def inline_styles
|
24
|
+
styles = []
|
25
|
+
styles << "flex-basis: #{fixed_size};" if fixed_size.present?
|
26
|
+
styles << "height: #{height};" if height.present?
|
27
|
+
styles << "min-height: #{min_height};" if min_height.present?
|
28
|
+
styles << "max-height: #{max_height};" if max_height.present?
|
29
|
+
styles.join(" ")
|
25
30
|
end
|
26
31
|
|
27
32
|
private
|
@@ -0,0 +1,39 @@
|
|
1
|
+
<%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
|
2
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
3
|
+
|
4
|
+
<%= form.actions do |action| %>
|
5
|
+
<%= action.submit %>
|
6
|
+
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
7
|
+
<% end %>
|
8
|
+
<% end %>
|
9
|
+
|
10
|
+
<script>
|
11
|
+
const loadingForm = document.querySelector(".pb_form_loading")
|
12
|
+
if (loadingForm) {
|
13
|
+
loadingForm.addEventListener("submit", function(event) {
|
14
|
+
event.preventDefault();
|
15
|
+
|
16
|
+
const submitButton = event['submitter'];
|
17
|
+
const cancelButton = event['target'].querySelector('button[type="reset"]');
|
18
|
+
|
19
|
+
if (submitButton) {
|
20
|
+
let currentClass = submitButton.className;
|
21
|
+
let newClass = currentClass.replace("_disabled_loading", "_enabled");
|
22
|
+
|
23
|
+
let cancelClass = cancelButton ? cancelButton.className : "";
|
24
|
+
let newCancelClass = cancelClass.replace("_disabled", "_enabled");
|
25
|
+
|
26
|
+
setTimeout(function() {
|
27
|
+
submitButton.disabled = false;
|
28
|
+
submitButton.className = currentClass;
|
29
|
+
|
30
|
+
if (cancelButton) {
|
31
|
+
cancelButton.disabled = false;
|
32
|
+
cancelButton.className = cancelClass;
|
33
|
+
}
|
34
|
+
}, 5000);
|
35
|
+
}
|
36
|
+
});
|
37
|
+
}
|
38
|
+
</script>
|
39
|
+
|
@@ -0,0 +1 @@
|
|
1
|
+
Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled.
|
@@ -7,6 +7,7 @@ module Playbook
|
|
7
7
|
type: Playbook::Props::Base
|
8
8
|
prop :form_system_options, deprecated: "Use options instead",
|
9
9
|
type: Playbook::Props::Base
|
10
|
+
prop :loading, type: Playbook::Props::Boolean, default: false
|
10
11
|
prop :options, type: Playbook::Props::Base
|
11
12
|
prop :validate, type: Playbook::Props::Boolean, default: false
|
12
13
|
|
@@ -22,6 +23,7 @@ module Playbook
|
|
22
23
|
aria: aria,
|
23
24
|
class: classname,
|
24
25
|
data: data,
|
26
|
+
loading: loading,
|
25
27
|
validate: validate,
|
26
28
|
}.merge(prop(:options) || prop(:form_system_options) || {})
|
27
29
|
end
|
@@ -0,0 +1,27 @@
|
|
1
|
+
const formHelper = () => {
|
2
|
+
const loadingForm = document.querySelector(".pb_form_loading")
|
3
|
+
if (loadingForm) {
|
4
|
+
loadingForm.addEventListener("submit", function(event) {
|
5
|
+
const submitButton = event['submitter'];
|
6
|
+
const cancelButton = event['target'].querySelector('button[type="reset"]');
|
7
|
+
|
8
|
+
if (submitButton) {
|
9
|
+
let currentClass = submitButton.className;
|
10
|
+
let newClass = currentClass.replace("_enabled", "_disabled_loading");
|
11
|
+
|
12
|
+
let cancelClass = cancelButton ? cancelButton.className : "";
|
13
|
+
let newCancelClass = cancelClass.replace("_enabled", "_disabled");
|
14
|
+
|
15
|
+
submitButton.disabled = true;
|
16
|
+
submitButton.className = newClass;
|
17
|
+
|
18
|
+
if (cancelButton) {
|
19
|
+
cancelButton.disabled = true;
|
20
|
+
cancelButton.className = newCancelClass;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
});
|
24
|
+
}
|
25
|
+
};
|
26
|
+
|
27
|
+
export default formHelper;
|