playbook_ui 7.8.3 → 7.11.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/controllers/playbook/application_controller.rb +5 -3
- data/app/helpers/playbook/application_helper.rb +13 -19
- data/app/helpers/playbook/pb_doc_helper.rb +41 -20
- data/app/helpers/playbook/pb_kit_helper.rb +1 -25
- data/app/helpers/playbook/pb_sample_helper.rb +24 -23
- data/app/pb_kits/playbook/_playbook.scss +0 -1
- data/app/pb_kits/playbook/config/_kit_example.html.erb +18 -4
- data/app/pb_kits/playbook/config/_kit_ui.html.erb +21 -21
- data/app/pb_kits/playbook/pb_currency/_currency.html.erb +1 -1
- data/app/pb_kits/playbook/pb_currency/_currency.jsx +16 -1
- data/app/pb_kits/playbook/pb_currency/_currency.scss +23 -1
- data/app/pb_kits/playbook/pb_currency/currency.rb +22 -0
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.html.erb → _currency_alignment.html.erb} +3 -3
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.jsx → _currency_alignment.jsx} +5 -5
- data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx +17 -0
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.html.erb → _currency_size.html.erb} +8 -7
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.jsx → _currency_size.jsx} +9 -8
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +24 -0
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_medium.jsx → _currency_variants.jsx} +13 -10
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +8 -6
- data/app/pb_kits/playbook/pb_currency/docs/index.js +4 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb +23 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +8 -8
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.html.erb +27 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx +44 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +4 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +20 -3
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +51 -31
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +3 -4
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/index.jsx +17 -16
- data/app/pb_kits/playbook/pb_filter/_filter.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/_filter.scss +0 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx +57 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +0 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +35 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +47 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -0
- data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +9 -9
- data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +22 -0
- data/app/pb_kits/playbook/pb_nav/_item.jsx +3 -0
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +47 -0
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +2 -46
- data/app/pb_kits/playbook/pb_nav/docs/_new_tab.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_new_tab.jsx +34 -0
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.jsx +33 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_nav/item.rb +5 -2
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +4 -3
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +3 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.test.js +71 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss +375 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +25 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +45 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/_select.jsx +4 -3
- data/app/pb_kits/playbook/pb_select/select.test.js +51 -0
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +8 -4
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.html.erb +17 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx +28 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.html.erb +20 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx +31 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.md +1 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/example.yml +6 -4
- data/app/pb_kits/playbook/pb_stat_change/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_stat_change/stat_change.rb +12 -7
- data/app/pb_kits/playbook/pb_table/_table.scss +1 -57
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_alignment.scss +32 -0
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +4 -3
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +24 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +8 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_description.md +2 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx +7 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +78 -56
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +19 -11
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +77 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +5 -5
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +10 -7
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb +17 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +87 -37
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +3 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +5 -1
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +2 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +19 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +4 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +10 -2
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +5 -0
- data/app/pb_kits/playbook/react_rails_kits.js +1 -0
- data/lib/playbook.rb +6 -17
- data/lib/playbook/engine.rb +0 -3
- data/{app/pb_kits → lib}/playbook/props.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/array.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/base.rb +19 -3
- data/{app/pb_kits → lib}/playbook/props/boolean.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/date.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/enum.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/hash.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/hash_array.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/number.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/number_array.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/numeric.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/percentage.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/proc.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/string.rb +0 -0
- data/lib/playbook/version.rb +1 -1
- metadata +59 -28
- data/app/helpers/playbook/layout_helper.rb +0 -9
- data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.html.erb +0 -21
- data/app/pb_kits/playbook/pb_table/styles/_mixins.scss +0 -0
@@ -28,6 +28,13 @@ module Playbook
|
|
28
28
|
prop :unit, type: Playbook::Props::String,
|
29
29
|
required: false
|
30
30
|
|
31
|
+
prop :emphasized, type: Playbook::Props::Boolean,
|
32
|
+
default: true
|
33
|
+
|
34
|
+
prop :variant, type: Playbook::Props::Enum,
|
35
|
+
values: %w[default light bold],
|
36
|
+
default: "default"
|
37
|
+
|
31
38
|
prop :dark, type: Playbook::Props::Boolean,
|
32
39
|
default: false
|
33
40
|
|
@@ -61,6 +68,21 @@ module Playbook
|
|
61
68
|
}
|
62
69
|
end
|
63
70
|
|
71
|
+
def emphasized_class
|
72
|
+
emphasized ? "" : "_deemphasized"
|
73
|
+
end
|
74
|
+
|
75
|
+
def variant_class
|
76
|
+
return unless size == "sm"
|
77
|
+
|
78
|
+
case variant
|
79
|
+
when "light"
|
80
|
+
"_light"
|
81
|
+
when "bold"
|
82
|
+
"_bold"
|
83
|
+
end
|
84
|
+
end
|
85
|
+
|
64
86
|
private
|
65
87
|
|
66
88
|
def whole_value
|
data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.html.erb → _currency_alignment.html.erb}
RENAMED
@@ -1,13 +1,13 @@
|
|
1
1
|
<%= pb_rails("currency", props: {
|
2
|
-
label: "Caption",
|
3
2
|
amount: "2,000.50",
|
3
|
+
label: "Left",
|
4
4
|
size: "sm",
|
5
5
|
}) %>
|
6
6
|
|
7
7
|
<%= pb_rails("currency", props: {
|
8
8
|
align: "center",
|
9
9
|
amount: "342",
|
10
|
-
label: "
|
10
|
+
label: "Center",
|
11
11
|
size: "sm",
|
12
12
|
symbol: "€",
|
13
13
|
}) %>
|
@@ -15,7 +15,7 @@
|
|
15
15
|
<%= pb_rails("currency", props: {
|
16
16
|
align: "right",
|
17
17
|
amount: "45",
|
18
|
-
label: "
|
18
|
+
label: "Right",
|
19
19
|
unit: "/mo",
|
20
20
|
size: "sm",
|
21
21
|
}) %>
|
@@ -1,20 +1,20 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Currency } from '../../'
|
3
3
|
|
4
|
-
const
|
4
|
+
const CurrencyAlignment = (props) => {
|
5
5
|
return (
|
6
6
|
<>
|
7
7
|
<Currency
|
8
8
|
{...props}
|
9
9
|
amount="2,000.50"
|
10
|
-
label="
|
10
|
+
label="Left"
|
11
11
|
size="sm"
|
12
12
|
/>
|
13
13
|
<Currency
|
14
14
|
{...props}
|
15
15
|
align="center"
|
16
16
|
amount="342"
|
17
|
-
label="
|
17
|
+
label="Center"
|
18
18
|
size="sm"
|
19
19
|
symbol="€"
|
20
20
|
/>
|
@@ -22,7 +22,7 @@ const CurrencySmall = (props) => {
|
|
22
22
|
{...props}
|
23
23
|
align="right"
|
24
24
|
amount="45"
|
25
|
-
label="
|
25
|
+
label="Right"
|
26
26
|
size="sm"
|
27
27
|
unit="/mo"
|
28
28
|
/>
|
@@ -30,4 +30,4 @@ const CurrencySmall = (props) => {
|
|
30
30
|
)
|
31
31
|
}
|
32
32
|
|
33
|
-
export default
|
33
|
+
export default CurrencyAlignment
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Currency } from '../../'
|
3
|
+
|
4
|
+
const CurrencyNoSymbol = (props) => {
|
5
|
+
return (
|
6
|
+
<Currency
|
7
|
+
{...props}
|
8
|
+
amount="309"
|
9
|
+
label="Sales"
|
10
|
+
size="md"
|
11
|
+
symbol=""
|
12
|
+
unit="/week"
|
13
|
+
/>
|
14
|
+
)
|
15
|
+
}
|
16
|
+
|
17
|
+
export default CurrencyNoSymbol
|
data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.html.erb → _currency_size.html.erb}
RENAMED
@@ -1,20 +1,21 @@
|
|
1
1
|
<%= pb_rails("currency", props: {
|
2
2
|
amount: "2,000.50",
|
3
|
-
|
3
|
+
label: "Small",
|
4
|
+
margin_bottom: "md",
|
5
|
+
size: "sm",
|
4
6
|
}) %>
|
5
7
|
|
6
8
|
<%= pb_rails("currency", props: {
|
7
|
-
align: "center",
|
8
9
|
amount: "342",
|
9
|
-
label: "
|
10
|
-
|
10
|
+
label: "Medium",
|
11
|
+
margin_bottom: "md",
|
12
|
+
size: "md",
|
11
13
|
symbol: "€",
|
12
14
|
}) %>
|
13
15
|
|
14
16
|
<%= pb_rails("currency", props: {
|
15
|
-
align: "right",
|
16
17
|
amount: "45",
|
17
|
-
label: "
|
18
|
-
unit: "/mo",
|
18
|
+
label: "Large",
|
19
19
|
size: "lg",
|
20
|
+
unit: "/mo",
|
20
21
|
}) %>
|
@@ -1,27 +1,28 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Currency } from '../../'
|
3
3
|
|
4
|
-
const
|
4
|
+
const CurrencySize = (props) => {
|
5
5
|
return (
|
6
6
|
<>
|
7
7
|
<Currency
|
8
8
|
{...props}
|
9
9
|
amount="2,000.50"
|
10
|
-
|
10
|
+
label="Small"
|
11
|
+
marginBottom="md"
|
12
|
+
size="sm"
|
11
13
|
/>
|
12
14
|
<Currency
|
13
15
|
{...props}
|
14
|
-
align="center"
|
15
16
|
amount="342"
|
16
|
-
label="
|
17
|
-
|
17
|
+
label="Medium"
|
18
|
+
marginBottom="md"
|
19
|
+
size="md"
|
18
20
|
symbol="€"
|
19
21
|
/>
|
20
22
|
<Currency
|
21
23
|
{...props}
|
22
|
-
align="right"
|
23
24
|
amount="45"
|
24
|
-
label="
|
25
|
+
label="Large"
|
25
26
|
size="lg"
|
26
27
|
unit="/mo"
|
27
28
|
/>
|
@@ -29,4 +30,4 @@ const CurrencyLarge = (props) => {
|
|
29
30
|
)
|
30
31
|
}
|
31
32
|
|
32
|
-
export default
|
33
|
+
export default CurrencySize
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<%= pb_rails("currency", props: {
|
2
|
+
amount: "2,000.50",
|
3
|
+
emphasized: false,
|
4
|
+
label: "Emphasized False",
|
5
|
+
margin_bottom: "md",
|
6
|
+
size: "sm",
|
7
|
+
}) %>
|
8
|
+
|
9
|
+
<%= pb_rails("currency", props: {
|
10
|
+
amount: "342",
|
11
|
+
label: "Light",
|
12
|
+
margin_bottom: "md",
|
13
|
+
size: "sm",
|
14
|
+
symbol: "€",
|
15
|
+
variant: "light",
|
16
|
+
}) %>
|
17
|
+
|
18
|
+
<%= pb_rails("currency", props: {
|
19
|
+
amount: "45",
|
20
|
+
label: "Bold",
|
21
|
+
size: "sm",
|
22
|
+
unit: "/mo",
|
23
|
+
variant: "bold",
|
24
|
+
}) %>
|
@@ -1,33 +1,36 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Currency } from '../../'
|
3
3
|
|
4
|
-
const
|
4
|
+
const CurrencyVariants = (props) => {
|
5
5
|
return (
|
6
6
|
<>
|
7
7
|
<Currency
|
8
8
|
{...props}
|
9
9
|
amount="2,000.50"
|
10
|
-
|
11
|
-
|
10
|
+
emphasized={false}
|
11
|
+
label="Emphasized False"
|
12
|
+
marginBottom="md"
|
13
|
+
size="sm"
|
12
14
|
/>
|
13
15
|
<Currency
|
14
16
|
{...props}
|
15
|
-
align="center"
|
16
17
|
amount="342"
|
17
|
-
label="
|
18
|
-
|
18
|
+
label="Light"
|
19
|
+
marginBottom="md"
|
20
|
+
size="sm"
|
19
21
|
symbol="€"
|
22
|
+
variant="light"
|
20
23
|
/>
|
21
24
|
<Currency
|
22
25
|
{...props}
|
23
|
-
align="right"
|
24
26
|
amount="45"
|
25
|
-
label="
|
26
|
-
size="
|
27
|
+
label="Bold"
|
28
|
+
size="sm"
|
27
29
|
unit="/mo"
|
30
|
+
variant="bold"
|
28
31
|
/>
|
29
32
|
</>
|
30
33
|
)
|
31
34
|
}
|
32
35
|
|
33
|
-
export default
|
36
|
+
export default CurrencyVariants
|
@@ -1,11 +1,13 @@
|
|
1
1
|
examples:
|
2
2
|
|
3
3
|
rails:
|
4
|
-
-
|
5
|
-
-
|
6
|
-
-
|
4
|
+
- currency_variants: Variants
|
5
|
+
- currency_size: Size
|
6
|
+
- currency_alignment: Alignment
|
7
|
+
- currency_no_symbol: No Symbol
|
7
8
|
|
8
9
|
react:
|
9
|
-
-
|
10
|
-
-
|
11
|
-
-
|
10
|
+
- currency_variants: Variants
|
11
|
+
- currency_size: Size
|
12
|
+
- currency_alignment: Alignment
|
13
|
+
- currency_no_symbol: No Symbol
|
@@ -1,3 +1,4 @@
|
|
1
|
-
export { default as
|
2
|
-
export { default as
|
3
|
-
export { default as
|
1
|
+
export { default as CurrencyVariants } from './_currency_variants.jsx'
|
2
|
+
export { default as CurrencySize } from './_currency_size.jsx'
|
3
|
+
export { default as CurrencyAlignment } from './_currency_alignment.jsx'
|
4
|
+
export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
|
@@ -0,0 +1,23 @@
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
label: "Unformatted Date Object",
|
3
|
+
default_date: Date.today,
|
4
|
+
picker_id: "date-picker-anti-pattern1"
|
5
|
+
}) %>
|
6
|
+
|
7
|
+
<%= pb_rails("date_picker", props: {
|
8
|
+
label: "Date Object Without Time - Displays Yesterday's Date",
|
9
|
+
default_date: Date.today.to_datetime.utc.iso8601,
|
10
|
+
picker_id: "date-picker-anti-pattern2"
|
11
|
+
}) %>
|
12
|
+
|
13
|
+
<%= pb_rails("date_picker", props: {
|
14
|
+
label: "Unformatted DateTime Object",
|
15
|
+
default_date: DateTime.current,
|
16
|
+
picker_id: "date-picker-anti-pattern3"
|
17
|
+
}) %>
|
18
|
+
|
19
|
+
<%= pb_rails("date_picker", props: {
|
20
|
+
label: "String Conversion Without ISO Formatting",
|
21
|
+
default_date: DateTime.current.utc.to_s,
|
22
|
+
picker_id: "date-picker-anti-pattern5"
|
23
|
+
}) %>
|
@@ -1,17 +1,17 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
|
-
default_date: "07/
|
2
|
+
default_date: "07/25/2020",
|
3
3
|
label: "Default Date String",
|
4
4
|
picker_id: "date-picker-default-date1"
|
5
5
|
}) %>
|
6
6
|
|
7
7
|
<%= pb_rails("date_picker", props: {
|
8
|
-
default_date:
|
8
|
+
default_date: DateTime.current.utc.iso8601,
|
9
9
|
label: "Default Date Dynamic",
|
10
10
|
picker_id: "date-picker-default-date2"
|
11
11
|
}) %>
|
12
12
|
|
13
13
|
<%= pb_rails("date_picker", props: {
|
14
|
-
default_date: [
|
14
|
+
default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
|
15
15
|
label: "Default Date Range",
|
16
16
|
mode: "range",
|
17
17
|
picker_id: "date-picker-default-date3"
|
@@ -20,4 +20,4 @@
|
|
20
20
|
<%= pb_rails("date_picker", props: {
|
21
21
|
label: "Default Behavior",
|
22
22
|
picker_id: "date-picker-default-date4"
|
23
|
-
}) %>
|
23
|
+
}) %>
|
@@ -9,12 +9,12 @@ const DatePickerDefaultDate = () => (
|
|
9
9
|
pickerId="date-picker-default-date1"
|
10
10
|
/>
|
11
11
|
<DatePicker
|
12
|
-
defaultDate={new Date()
|
12
|
+
defaultDate={new Date()}
|
13
13
|
label="Default Date Dynamic"
|
14
14
|
pickerId="date-picker-default-date2"
|
15
15
|
/>
|
16
16
|
<DatePicker
|
17
|
-
defaultDate={[new Date(), new Date().fp_incr(
|
17
|
+
defaultDate={[new Date(), new Date().fp_incr(7)]}
|
18
18
|
label="Default Date Range"
|
19
19
|
mode="range"
|
20
20
|
pickerId="date-picker-default-date3"
|
@@ -1 +1,3 @@
|
|
1
|
-
The `defaultDate`/`default_date` prop has a null or empty string value by default. You can pass
|
1
|
+
The `defaultDate`/`default_date` prop has a null or empty string value by default. You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load. Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.
|
2
|
+
|
3
|
+
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
|
@@ -1,11 +1,11 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
|
-
disable_date: [(
|
2
|
+
disable_date: [(DateTime.current + 1.day).utc.iso8601],
|
3
3
|
label: "Disable Single Date",
|
4
4
|
picker_id: "single-disabled-date"
|
5
5
|
}) %>
|
6
6
|
|
7
7
|
<%= pb_rails("date_picker", props: {
|
8
|
-
disable_date: [(
|
8
|
+
disable_date: [(DateTime.current + 1.day).utc.iso8601, (DateTime.current + 2.day).utc.iso8601],
|
9
9
|
label: "Disable Multiple Dates",
|
10
10
|
picker_id: "multiple-disabled-dates"
|
11
11
|
}) %>
|
@@ -13,8 +13,8 @@
|
|
13
13
|
<%= pb_rails("date_picker", props: {
|
14
14
|
disable_range: [
|
15
15
|
{
|
16
|
-
from:
|
17
|
-
to: (
|
16
|
+
from: DateTime.current.utc.iso8601,
|
17
|
+
to: (DateTime.current + 7.day).utc.iso8601,
|
18
18
|
},
|
19
19
|
],
|
20
20
|
label: "Disable Single Range",
|
@@ -24,12 +24,12 @@
|
|
24
24
|
<%= pb_rails("date_picker", props: {
|
25
25
|
disable_range: [
|
26
26
|
{
|
27
|
-
from: (
|
28
|
-
to: (
|
27
|
+
from: (DateTime.current + 1.day).utc.iso8601,
|
28
|
+
to: (DateTime.current + 2.day).utc.iso8601,
|
29
29
|
},
|
30
30
|
{
|
31
|
-
from: (
|
32
|
-
to: (
|
31
|
+
from: (DateTime.current + 7.day).utc.iso8601,
|
32
|
+
to: (DateTime.current + 14.day).utc.iso8601,
|
33
33
|
},
|
34
34
|
],
|
35
35
|
label: "Disable Multiple Ranges",
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<%= pb_rails("button", props: { id: "close-btn", margin_right: "sm", text: "Close" }) %>
|
2
|
+
<%= pb_rails("button", props: { id: "clear-btn", margin_right: "sm", text: "Clear" }) %>
|
3
|
+
<%= pb_rails("button", props: { id: "today-btn", text: "Today" }) %>
|
4
|
+
<%= pb_rails("date_picker", props: {
|
5
|
+
hide_label: true,
|
6
|
+
margin_top: "sm",
|
7
|
+
picker_id: "fp-methods"
|
8
|
+
}) %>
|
9
|
+
|
10
|
+
<%= javascript_tag do %>
|
11
|
+
window.addEventListener("DOMContentLoaded", () => {
|
12
|
+
const fp = document.querySelector("#fp-methods")._flatpickr
|
13
|
+
const closeBtn = document.querySelector("#close-btn")
|
14
|
+
const clearBtn = document.querySelector("#clear-btn")
|
15
|
+
const todayBtn = document.querySelector("#today-btn")
|
16
|
+
|
17
|
+
closeBtn.addEventListener("click", () => {
|
18
|
+
fp.close()
|
19
|
+
})
|
20
|
+
clearBtn.addEventListener("click", () => {
|
21
|
+
fp.clear()
|
22
|
+
})
|
23
|
+
todayBtn.addEventListener("click", () => {
|
24
|
+
fp.setDate(new Date(), true)
|
25
|
+
})
|
26
|
+
})
|
27
|
+
<% end %>
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React, { useEffect } from 'react'
|
2
|
+
import { Button, DatePicker } from '../../'
|
3
|
+
|
4
|
+
const DatePickerFlatpickrMethods = () => {
|
5
|
+
let fpInstance
|
6
|
+
useEffect(() => {
|
7
|
+
fpInstance = document.querySelector('#fp-methods')._flatpickr
|
8
|
+
}, [])
|
9
|
+
const clickHandlerClear = () => {
|
10
|
+
fpInstance.clear()
|
11
|
+
}
|
12
|
+
const clickHandlerClose = () => {
|
13
|
+
fpInstance.close()
|
14
|
+
}
|
15
|
+
const clickHandlerToday = () => {
|
16
|
+
fpInstance.setDate(new Date(), true)
|
17
|
+
}
|
18
|
+
|
19
|
+
return (
|
20
|
+
<div>
|
21
|
+
<Button
|
22
|
+
marginRight="sm"
|
23
|
+
onClick={clickHandlerClose}
|
24
|
+
text="Close"
|
25
|
+
/>
|
26
|
+
<Button
|
27
|
+
marginRight="sm"
|
28
|
+
onClick={clickHandlerClear}
|
29
|
+
text="Clear"
|
30
|
+
/>
|
31
|
+
<Button
|
32
|
+
onClick={clickHandlerToday}
|
33
|
+
text="Today"
|
34
|
+
/>
|
35
|
+
<DatePicker
|
36
|
+
hideLabel
|
37
|
+
marginTop="sm"
|
38
|
+
pickerId="fp-methods"
|
39
|
+
/>
|
40
|
+
</div>
|
41
|
+
)
|
42
|
+
}
|
43
|
+
|
44
|
+
export default DatePickerFlatpickrMethods
|