playbook_ui 7.0.1.pre.alpha14 → 7.1.1.pre.alpha1
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 +0 -2
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/data/menu.yml +4 -3
- data/app/pb_kits/playbook/index.js +4 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb +1 -12
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -1
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +3 -3
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +82 -90
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +57 -0
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +27 -0
- data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +4 -2
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +17 -7
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +32 -9
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +18 -7
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +37 -9
- data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +3 -7
- data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +1 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +1 -3
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +34 -32
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +1 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +1 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +8 -14
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +122 -39
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +33 -2
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +44 -9
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +14 -1
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +45 -1
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb +1 -8
- data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +7 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +3 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +29 -15
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +10 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +21 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +38 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +7 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +18 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +9 -6
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb +7 -2
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -0
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb +1 -13
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -1
- data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +7 -6
- data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +1 -0
- data/app/pb_kits/playbook/pb_popover/_popover.scss +6 -4
- data/app/pb_kits/playbook/pb_popover/index.js +3 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -0
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +168 -33
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +3 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +10 -8
- data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +14 -16
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +6 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +17 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +17 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +10 -3
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +11 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +68 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +61 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +89 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +68 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +43 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +80 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +63 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +4 -4
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +10 -0
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +5 -2
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +24 -20
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +19 -1
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +8 -1
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +21 -13
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +25 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +8 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +30 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +11 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +25 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +24 -1
- data/app/pb_kits/playbook/react_rails_kits.js +6 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +22 -23
- data/app/pb_kits/playbook/tokens/_typography.scss +4 -4
- data/app/pb_kits/playbook/tokens/index.scss +11 -0
- data/app/pb_kits/playbook/vendor.js +8 -0
- data/lib/playbook/engine.rb +1 -0
- data/lib/playbook/version.rb +1 -1
- metadata +32 -86
- data/app/controllers/playbook/guides_controller.rb +0 -11
- data/app/controllers/playbook/pages_controller.rb +0 -99
- data/app/controllers/playbook/samples_controller.rb +0 -40
- data/app/pb_kits/playbook/packs/application.js +0 -55
- data/app/pb_kits/playbook/packs/examples.js +0 -182
- data/app/pb_kits/playbook/packs/main.scss +0 -12
- data/app/pb_kits/playbook/packs/samples.js +0 -21
- data/app/pb_kits/playbook/packs/site_styles/_samples.scss +0 -72
- data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss +0 -43
- data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +0 -146
- data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss +0 -10
- data/app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss +0 -7
- data/app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss +0 -531
- data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss +0 -92
- data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss +0 -15
- data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +0 -148
- data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +0 -15
- data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +0 -88
- data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss +0 -72
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +0 -11
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +0 -29
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +0 -11
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +0 -34
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +0 -13
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +0 -13
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +0 -45
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +0 -27
- data/app/views/layouts/playbook/_mobile_hamburger.html.erb +0 -2
- data/app/views/layouts/playbook/_nav.html.erb +0 -37
- data/app/views/layouts/playbook/_sidebar.html.erb +0 -51
- data/app/views/layouts/playbook/application.html.erb +0 -26
- data/app/views/layouts/playbook/fullscreen.html.slim +0 -10
- data/app/views/layouts/playbook/grid.html.slim +0 -10
- data/app/views/layouts/playbook/samples.html.erb +0 -19
- data/app/views/playbook/guides/create_kit.html.slim +0 -16
- data/app/views/playbook/guides/create_kit/_file_naming.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_generator.html.md +0 -6
- data/app/views/playbook/guides/create_kit/_kit_examples.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_kit_rails.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_kit_react.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_layout.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_view_objects.html.md +0 -2
- data/app/views/playbook/guides/create_kit/_writing_sass.md +0 -10
- data/app/views/playbook/guides/use_nitro.html.slim +0 -6
- data/app/views/playbook/guides/use_nitro/_local.html.md +0 -2
- data/app/views/playbook/guides/use_nitro/_nitro_components.html.md +0 -2
- data/app/views/playbook/guides/use_nitro/_versions.html.md +0 -2
- data/app/views/playbook/pages/fullscreen.html.slim +0 -10
- data/app/views/playbook/pages/grid.html.slim +0 -2
- data/app/views/playbook/pages/home.html.slim +0 -4
- data/app/views/playbook/pages/kit_category_show.html.erb +0 -14
- data/app/views/playbook/pages/kit_show.html.erb +0 -33
- data/app/views/playbook/pages/kits.html.erb +0 -12
- data/app/views/playbook/pages/principals/_getting_started.html.md +0 -30
- data/app/views/playbook/pages/principles.html.slim +0 -3
- data/app/views/playbook/pages/tokens.html.slim +0 -15
- data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +0 -61
- data/app/views/playbook/pages/utilities.html.slim +0 -116
- data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim +0 -15
- data/app/views/playbook/samples/collection_detail/index.html.erb +0 -169
- data/app/views/playbook/samples/collection_detail/index.jsx +0 -372
- data/app/views/playbook/samples/dashboards/index.html.erb +0 -81
- data/app/views/playbook/samples/dashboards/index.jsx +0 -130
- data/app/views/playbook/samples/filter_table/index.html.erb +0 -348
- data/app/views/playbook/samples/filter_table/index.jsx +0 -433
- data/app/views/playbook/samples/registration/index.html.erb +0 -316
- data/app/views/playbook/samples/registration/index.jsx +0 -476
- data/app/views/playbook/samples/sample_show.html.erb +0 -36
- data/lib/generators/kit/USAGE +0 -5
- data/lib/generators/kit/kit_generator.rb +0 -95
- data/lib/generators/kit/templates/kit_example_rails.erb.tt +0 -1
- data/lib/generators/kit/templates/kit_example_react.erb.tt +0 -10
- data/lib/generators/kit/templates/kit_example_yml.erb.tt +0 -9
- data/lib/generators/kit/templates/kit_html.erb.tt +0 -7
- data/lib/generators/kit/templates/kit_js.erb.tt +0 -1
- data/lib/generators/kit/templates/kit_jsx.erb.tt +0 -68
- data/lib/generators/kit/templates/kit_ruby.erb.tt +0 -11
- data/lib/generators/kit/templates/kit_ruby_spec.erb.tt +0 -11
- data/lib/generators/kit/templates/kit_scss.erb +0 -3
- data/lib/tasks/pb_release.rake +0 -77
- data/lib/tasks/playbook_tasks.rake +0 -26
@@ -1,7 +1,18 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
<%= pb_rails("button", props: { text: "
|
6
|
-
<%= pb_rails("button", props: { text: "
|
7
|
-
|
1
|
+
|
2
|
+
<div class="pb--doc-demo-row">
|
3
|
+
|
4
|
+
<%= pb_rails("button_toolbar", props: { orientation: "vertical", variant: "secondary" }) do %>
|
5
|
+
<%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
|
6
|
+
<%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
|
7
|
+
<%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
|
8
|
+
<%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
|
9
|
+
<% end %>
|
10
|
+
|
11
|
+
<%= pb_rails("button_toolbar", props: { orientation: "horizontal", variant: "secondary" }) do %>
|
12
|
+
<%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
|
13
|
+
<%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
|
14
|
+
<%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
|
15
|
+
<%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
|
16
|
+
<% end %>
|
17
|
+
|
18
|
+
</div>
|
@@ -1,30 +1,58 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Button, ButtonToolbar } from '../..'
|
3
3
|
|
4
|
-
const ButtonToolbarSecondary = () => (
|
5
|
-
<div>
|
4
|
+
const ButtonToolbarSecondary = (props) => (
|
5
|
+
<div className="pb--doc-demo-row">
|
6
6
|
<ButtonToolbar
|
7
|
-
|
8
|
-
orientation="
|
7
|
+
{...props}
|
8
|
+
orientation="vertical"
|
9
|
+
variant="secondary"
|
9
10
|
>
|
10
11
|
<Button
|
11
|
-
|
12
|
+
{...props}
|
13
|
+
text="Create"
|
14
|
+
variant="secondary"
|
15
|
+
/>
|
16
|
+
<Button
|
17
|
+
{...props}
|
18
|
+
text="Edit"
|
12
19
|
variant="secondary"
|
13
20
|
/>
|
14
21
|
<Button
|
15
|
-
|
22
|
+
{...props}
|
23
|
+
text="Copy"
|
24
|
+
variant="secondary"
|
25
|
+
/>
|
26
|
+
<Button
|
27
|
+
{...props}
|
28
|
+
text="Cut"
|
29
|
+
variant="secondary"
|
30
|
+
/>
|
31
|
+
</ButtonToolbar>
|
32
|
+
|
33
|
+
<ButtonToolbar
|
34
|
+
{...props}
|
35
|
+
orientation="horizontal"
|
36
|
+
variant="secondary"
|
37
|
+
>
|
38
|
+
<Button
|
39
|
+
{...props}
|
40
|
+
text="Create"
|
16
41
|
variant="secondary"
|
17
42
|
/>
|
18
43
|
<Button
|
19
|
-
|
44
|
+
{...props}
|
45
|
+
text="Edit"
|
20
46
|
variant="secondary"
|
21
47
|
/>
|
22
48
|
<Button
|
23
|
-
|
49
|
+
{...props}
|
50
|
+
text="Copy"
|
24
51
|
variant="secondary"
|
25
52
|
/>
|
26
53
|
<Button
|
27
|
-
|
54
|
+
{...props}
|
55
|
+
text="Cut"
|
28
56
|
variant="secondary"
|
29
57
|
/>
|
30
58
|
</ButtonToolbar>
|
@@ -1,15 +1,11 @@
|
|
1
1
|
examples:
|
2
2
|
|
3
3
|
rails:
|
4
|
-
- button_toolbar_default:
|
5
|
-
-
|
6
|
-
- button_toolbar_secondary: Horizontal Secondary Button Toolbar
|
7
|
-
- button_toolbar_vertical_secondary: Vertical Secondary Button Toolbar
|
4
|
+
- button_toolbar_default: Default
|
5
|
+
- button_toolbar_secondary: Secondary
|
8
6
|
|
9
7
|
|
10
8
|
react:
|
11
9
|
- button_toolbar_default: Default
|
12
|
-
-
|
13
|
-
- button_toolbar_secondary: Horizontal Secondary Button Toolbar
|
14
|
-
- button_toolbar_vertical_secondary: Vertical Secondary Button Toolbar
|
10
|
+
- button_toolbar_secondary: Secondary
|
15
11
|
|
@@ -1,4 +1,2 @@
|
|
1
1
|
export { default as ButtonToolbarDefault } from './_button_toolbar_default.jsx'
|
2
|
-
export { default as ButtonToolbarVertical } from './_button_toolbar_vertical.jsx'
|
3
2
|
export { default as ButtonToolbarSecondary } from './_button_toolbar_secondary.jsx'
|
4
|
-
export { default as ButtonToolbarVerticalSecondary } from './_button_toolbar_vertical_secondary.jsx'
|
@@ -62,8 +62,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
62
62
|
name,
|
63
63
|
onChange = () => {},
|
64
64
|
pickerId,
|
65
|
-
placeholder,
|
66
|
-
type,
|
65
|
+
placeholder = 'Select Date',
|
67
66
|
yearRange = [ 1900, 2100 ],
|
68
67
|
} = props
|
69
68
|
|
@@ -128,7 +127,6 @@ const DatePicker = (props: DatePickerProps) => {
|
|
128
127
|
label={hideLabel ? null : label}
|
129
128
|
name={name}
|
130
129
|
placeholder={placeholder}
|
131
|
-
type={type}
|
132
130
|
/>
|
133
131
|
<If condition={!hideIcon}>
|
134
132
|
<div
|
@@ -41,10 +41,10 @@ module Playbook
|
|
41
41
|
default: "single"
|
42
42
|
prop :picker_id, type: Playbook::Props::String,
|
43
43
|
required: true
|
44
|
-
prop :placeholder, type: Playbook::Props::String
|
44
|
+
prop :placeholder, type: Playbook::Props::String,
|
45
|
+
default: "Select Date"
|
45
46
|
prop :required, type: Playbook::Props::Boolean,
|
46
47
|
default: false
|
47
|
-
prop :type, type: Playbook::Props::String
|
48
48
|
prop :year_range, type: Playbook::Props::Array,
|
49
49
|
default: [1900, 2100]
|
50
50
|
|
@@ -65,6 +65,7 @@ module Playbook
|
|
65
65
|
minDate: min_date,
|
66
66
|
mode: mode,
|
67
67
|
pickerId: picker_id,
|
68
|
+
required: required,
|
68
69
|
yearRange: year_range,
|
69
70
|
}.to_json.html_safe
|
70
71
|
end
|
@@ -11,8 +11,9 @@ const datePickerHelper = (config) => {
|
|
11
11
|
maxDate,
|
12
12
|
minDate,
|
13
13
|
mode,
|
14
|
-
onChange,
|
14
|
+
onChange = () => {},
|
15
15
|
pickerId,
|
16
|
+
required,
|
16
17
|
yearRange,
|
17
18
|
} = config
|
18
19
|
|
@@ -21,20 +22,10 @@ const datePickerHelper = (config) => {
|
|
21
22
|
// ===========================================================
|
22
23
|
|
23
24
|
const defaultDateGetter = () => {
|
24
|
-
if (defaultDate
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
return defaultDate
|
29
|
-
}
|
30
|
-
}
|
31
|
-
if (mode === 'single' && defaultDate === '') {
|
32
|
-
return new Date()
|
33
|
-
} else if (mode === 'range' && defaultDate === '') {
|
34
|
-
const today = new Date()
|
35
|
-
const tomorrow = new Date(today)
|
36
|
-
tomorrow.setDate(tomorrow.getDate() + 1)
|
37
|
-
return [today, tomorrow]
|
25
|
+
if (defaultDate === '') {
|
26
|
+
return null
|
27
|
+
} else {
|
28
|
+
return defaultDate
|
38
29
|
}
|
39
30
|
}
|
40
31
|
const disabledParser = () => {
|
@@ -103,7 +94,9 @@ const datePickerHelper = (config) => {
|
|
103
94
|
onChange: [(selectedDates, dateStr) => {
|
104
95
|
onChange(dateStr, selectedDates)
|
105
96
|
}],
|
106
|
-
onYearChange: [
|
97
|
+
onYearChange: [() => {
|
98
|
+
yearChangeHook()
|
99
|
+
}],
|
107
100
|
prevArrow: '<i class="far fa-angle-left"></i>',
|
108
101
|
static: true,
|
109
102
|
})
|
@@ -125,7 +118,7 @@ const datePickerHelper = (config) => {
|
|
125
118
|
years += `<option value="${year}">${year}</option>`
|
126
119
|
}
|
127
120
|
|
128
|
-
// variablize each dropdown
|
121
|
+
// variablize each dropdown selector
|
129
122
|
const dropdown = document.querySelector(`#year-${pickerId}`)
|
130
123
|
|
131
124
|
// inject year options into dropdown and assign it the flatpickr's current year value
|
@@ -137,33 +130,42 @@ const datePickerHelper = (config) => {
|
|
137
130
|
picker.changeYear(Number(e.target.value))
|
138
131
|
})
|
139
132
|
|
133
|
+
// Reverse month and year dropdown reset on form.reset()
|
134
|
+
if (picker.input.form) {
|
135
|
+
picker.input.form.addEventListener('reset', () => {
|
136
|
+
// Code block triggers after form.reset() is called and executed
|
137
|
+
setTimeout(() => {
|
138
|
+
dropdown.value = picker.currentYear
|
139
|
+
picker.monthsDropdownContainer.value = picker.currentMonth
|
140
|
+
|
141
|
+
/* Reset date picker to default value on form.reset() */
|
142
|
+
if (defaultDate){
|
143
|
+
picker.setDate(defaultDate)
|
144
|
+
yearChangeHook()
|
145
|
+
}
|
146
|
+
}, 0)
|
147
|
+
})
|
148
|
+
}
|
149
|
+
|
140
150
|
// two way binding
|
141
151
|
const yearChangeHook = () => {
|
142
152
|
dropdown.value = picker.currentYear
|
143
153
|
}
|
144
|
-
picker.config.onYearChange.push(yearChangeHook)
|
145
154
|
|
146
155
|
// Adding dropdown icons to year and month selects
|
147
156
|
picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
|
148
157
|
dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
|
149
158
|
|
150
|
-
//
|
151
|
-
picker.input.setAttribute('value', picker.input.value)
|
152
|
-
// logic for updating value when typing
|
153
|
-
document.querySelector(`#${pickerId}`).addEventListener('input', (e) => {
|
154
|
-
picker.input.setAttribute('value', e.target.value)
|
155
|
-
const variant = picker.config.mode
|
156
|
-
if (variant === 'single' && e.target.value.split('').length === 10) {
|
157
|
-
picker.setDate(e.target.value)
|
158
|
-
dropdown.value = picker.currentYear
|
159
|
-
} else if (variant === 'range' && e.target.value.split('').length === 24) {
|
160
|
-
picker.setDate(e.target.value)
|
161
|
-
dropdown.value = picker.currentYear
|
162
|
-
}
|
163
|
-
})
|
159
|
+
// Remove readonly attribute for validation and or text input
|
164
160
|
if (allowInput){
|
165
161
|
picker.input.removeAttribute('readonly')
|
166
162
|
}
|
163
|
+
if (required){
|
164
|
+
picker.input.removeAttribute('readonly')
|
165
|
+
picker.input.addEventListener('keydown', (e) => e.preventDefault())
|
166
|
+
picker.input.style.caretColor = 'transparent'
|
167
|
+
picker.input.style.cursor = 'pointer'
|
168
|
+
}
|
167
169
|
}
|
168
170
|
|
169
171
|
export default datePickerHelper
|
@@ -0,0 +1 @@
|
|
1
|
+
The `defaultDate`/`default_date` prop has a null or empty string value by default. You can pass a string or date object if you want a default value on page load.
|
@@ -1,19 +1,23 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
|
+
default_date: (Date.today).httpdate,
|
2
3
|
format: "m-d-Y",
|
3
4
|
picker_id: "date-picker-format1"
|
4
5
|
}) %>
|
5
6
|
|
6
7
|
<%= pb_rails("date_picker", props: {
|
8
|
+
default_date: (Date.today).httpdate,
|
7
9
|
format: "m/d/y",
|
8
10
|
picker_id: "date-picker-format2"
|
9
11
|
}) %>
|
10
12
|
|
11
13
|
<%= pb_rails("date_picker", props: {
|
14
|
+
default_date: (Date.today).httpdate,
|
12
15
|
format: "n-j-y",
|
13
16
|
picker_id: "date-picker-format3"
|
14
17
|
}) %>
|
15
18
|
|
16
19
|
<%= pb_rails("date_picker", props: {
|
20
|
+
default_date: (Date.today).httpdate,
|
17
21
|
format: "Y-d-m",
|
18
22
|
picker_id: "date-picker-format4"
|
19
23
|
}) %>
|
@@ -4,18 +4,22 @@ import { DatePicker } from '../../'
|
|
4
4
|
const DatePickerFormat = () => (
|
5
5
|
<div>
|
6
6
|
<DatePicker
|
7
|
+
defaultDate={new Date()}
|
7
8
|
format="m-d-Y"
|
8
9
|
pickerId="date-picker-format1"
|
9
10
|
/>
|
10
11
|
<DatePicker
|
12
|
+
defaultDate={new Date()}
|
11
13
|
format="m/d/y"
|
12
14
|
pickerId="date-picker-format2"
|
13
15
|
/>
|
14
16
|
<DatePicker
|
17
|
+
defaultDate={new Date()}
|
15
18
|
format="n-j-y"
|
16
19
|
pickerId="date-picker-format3"
|
17
20
|
/>
|
18
21
|
<DatePicker
|
22
|
+
defaultDate={new Date()}
|
19
23
|
format="Y-d-m"
|
20
24
|
pickerId="date-picker-format4"
|
21
25
|
/>
|
@@ -1,26 +1,26 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
2
|
input_aria: { label: "input-field" },
|
3
3
|
input_data: { key: "value", key2: "value2" },
|
4
|
+
label: "Aria, Name, and Data Attributes",
|
4
5
|
name: "date-field",
|
5
6
|
picker_id: "date-picker-input1",
|
6
|
-
type: "date"
|
7
7
|
}) %>
|
8
8
|
|
9
9
|
<%= pb_rails("date_picker", props: {
|
10
|
-
|
10
|
+
label: "Custom Placeholder",
|
11
11
|
picker_id: "date-picker-input2",
|
12
|
-
placeholder: "
|
12
|
+
placeholder: "custom-placeholder",
|
13
13
|
}) %>
|
14
14
|
|
15
15
|
<%= pb_rails("date_picker", props: {
|
16
|
-
|
17
|
-
disable_input: true,
|
16
|
+
label: "Blank Placeholder",
|
18
17
|
picker_id: "date-picker-input3",
|
19
|
-
placeholder: "
|
18
|
+
placeholder: ""
|
20
19
|
}) %>
|
21
20
|
|
22
21
|
<%= pb_rails("date_picker", props: {
|
23
|
-
|
24
|
-
|
25
|
-
picker_id: "date-picker-input4"
|
22
|
+
disable_input: true,
|
23
|
+
label: "Disable Input",
|
24
|
+
picker_id: "date-picker-input4",
|
25
|
+
placeholder: "Disabled Input"
|
26
26
|
}) %>
|
@@ -6,25 +6,25 @@ const DatePickerInput = () => (
|
|
6
6
|
<DatePicker
|
7
7
|
inputAria={{ label: 'input-field' }}
|
8
8
|
inputData={{ key: 'value', key2: 'value2' }}
|
9
|
+
label="Aria, Name, and Data Attributes"
|
9
10
|
name="date-field"
|
10
11
|
pickerId="date-picker-input1"
|
11
|
-
type="date"
|
12
12
|
/>
|
13
13
|
<DatePicker
|
14
|
-
|
14
|
+
label="Custom Placeholder"
|
15
15
|
pickerId="date-picker-input2"
|
16
|
-
placeholder="
|
16
|
+
placeholder="custom-placeholder"
|
17
17
|
/>
|
18
18
|
<DatePicker
|
19
|
-
|
20
|
-
disableInput
|
19
|
+
label="Blank Placeholder"
|
21
20
|
pickerId="date-picker-input3"
|
22
|
-
placeholder="
|
21
|
+
placeholder=""
|
23
22
|
/>
|
24
23
|
<DatePicker
|
25
|
-
|
26
|
-
|
24
|
+
disableInput
|
25
|
+
label="Disable Input"
|
27
26
|
pickerId="date-picker-input4"
|
27
|
+
placeholder="Disabled Input"
|
28
28
|
/>
|
29
29
|
</div>
|
30
30
|
)
|
@@ -1,3 +1,5 @@
|
|
1
1
|
The date picker is built with the text input kit. Text input props you pass to the date picker kit will be forwarded to the input, with a few exceptions. The `value` attribute is automatically handled and bound to whatever date string is contained by the input field. You cannot pass a custom value prop. `id` props passed to the date picker kit will be assigned to it's parent/wrapper div. The `pickerId` prop is passed directly to the input and is required to instatiate the date picker.
|
2
2
|
|
3
|
-
You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit. If you use `data` or `aria` props they will be passed to the date picker kit itself instead. Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.
|
3
|
+
You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit. If you use `data` or `aria` props they will be passed to the date picker kit itself instead. Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.
|
4
|
+
|
5
|
+
The placeholder prop has a default string value: "Select Date". You can replace this with your own string or an empty string if you'd prefer it blank.
|