playbook_ui 7.0.1 → 7.1.0.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (137) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +4 -3
  3. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +0 -1
  4. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
  5. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +3 -3
  6. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +82 -90
  7. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +57 -0
  8. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +27 -0
  9. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +4 -2
  10. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +17 -7
  11. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +32 -9
  12. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +18 -7
  13. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +37 -9
  14. data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +3 -7
  15. data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +0 -2
  16. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +1 -2
  17. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +1 -3
  18. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -2
  19. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +34 -32
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +1 -2
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +1 -2
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -0
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +4 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -1
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  31. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -2
  32. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +8 -14
  33. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +122 -39
  34. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +33 -2
  35. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +44 -9
  36. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +14 -1
  37. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +45 -1
  38. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +3 -2
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +29 -15
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +10 -0
  41. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +21 -0
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +38 -0
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +2 -1
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +1 -2
  45. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
  50. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
  51. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +7 -1
  52. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +18 -0
  53. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  54. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
  56. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
  57. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -0
  58. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +0 -1
  59. data/app/pb_kits/playbook/pb_popover/_popover.scss +6 -4
  60. data/app/pb_kits/playbook/pb_popover/index.js +3 -1
  61. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -0
  62. data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +168 -33
  63. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +3 -1
  64. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +10 -8
  65. data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
  66. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +14 -16
  67. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +6 -3
  68. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +17 -1
  69. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +17 -1
  70. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +10 -3
  71. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +11 -1
  72. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
  73. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +34 -0
  74. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +68 -0
  75. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +2 -0
  76. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +61 -0
  77. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +89 -0
  78. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +1 -0
  79. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +34 -0
  80. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +68 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +2 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +43 -0
  83. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +80 -0
  84. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +1 -0
  85. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +34 -0
  86. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +63 -0
  87. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +1 -0
  88. data/app/pb_kits/playbook/pb_table/docs/example.yml +12 -0
  89. data/app/pb_kits/playbook/pb_table/docs/index.js +6 -0
  90. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
  91. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +10 -0
  92. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -0
  93. data/app/pb_kits/playbook/pb_toggle/toggle.rb +4 -1
  94. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +24 -20
  95. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +19 -1
  96. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +8 -1
  97. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +21 -13
  98. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
  99. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
  100. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +25 -0
  101. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -3
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +8 -0
  103. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +30 -0
  104. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +11 -0
  105. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +25 -0
  106. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -3
  107. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +1 -0
  108. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
  109. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +24 -1
  110. data/app/pb_kits/playbook/react_rails_kits.js +1 -0
  111. data/app/pb_kits/playbook/vendor.js +3 -0
  112. data/lib/playbook/version.rb +1 -1
  113. metadata +32 -28
  114. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +0 -11
  115. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +0 -29
  116. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +0 -11
  117. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +0 -34
  118. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +0 -4
  119. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +0 -13
  120. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +0 -1
  121. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +0 -4
  122. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +0 -13
  123. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +0 -45
  124. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +0 -27
  125. data/lib/generators/kit/USAGE +0 -5
  126. data/lib/generators/kit/kit_generator.rb +0 -95
  127. data/lib/generators/kit/templates/kit_example_rails.erb.tt +0 -1
  128. data/lib/generators/kit/templates/kit_example_react.erb.tt +0 -10
  129. data/lib/generators/kit/templates/kit_example_yml.erb.tt +0 -9
  130. data/lib/generators/kit/templates/kit_html.erb.tt +0 -7
  131. data/lib/generators/kit/templates/kit_js.erb.tt +0 -1
  132. data/lib/generators/kit/templates/kit_jsx.erb.tt +0 -68
  133. data/lib/generators/kit/templates/kit_ruby.erb.tt +0 -11
  134. data/lib/generators/kit/templates/kit_ruby_spec.erb.tt +0 -11
  135. data/lib/generators/kit/templates/kit_scss.erb +0 -3
  136. data/lib/tasks/pb_release.rake +0 -88
  137. data/lib/tasks/playbook_tasks.rake +0 -26
@@ -1,7 +1,18 @@
1
- <%= pb_rails("button_toolbar", props: { orientation: "horizontal", connected: true }) do %>
2
- <%= pb_rails("button", props: { text: "Field", variant: "secondary" }) %>
3
- <%= pb_rails("button", props: { text: "Retail", variant: "secondary"}) %>
4
- <%= pb_rails("button", props: { text: "Event", variant: "secondary"}) %>
5
- <%= pb_rails("button", props: { text: "Training", variant: "secondary"}) %>
6
- <%= pb_rails("button", props: { text: "Not Working", variant: "secondary"}) %>
7
- <% end %>
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
- connected
8
- orientation="horizontal"
7
+ {...props}
8
+ orientation="vertical"
9
+ variant="secondary"
9
10
  >
10
11
  <Button
11
- text="Field"
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
- text="Retail"
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
- text="Event"
44
+ {...props}
45
+ text="Edit"
20
46
  variant="secondary"
21
47
  />
22
48
  <Button
23
- text="Training"
49
+ {...props}
50
+ text="Copy"
24
51
  variant="secondary"
25
52
  />
26
53
  <Button
27
- text="Not Working"
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: Horizontal Button Toolbar
5
- - button_toolbar_vertical: Vertical Button Toolbar
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
- - button_toolbar_vertical: Vertical Button Toolbar
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'
@@ -15,8 +15,7 @@
15
15
  label: object.hide_label ? nil : object.label,
16
16
  name: object.name,
17
17
  placeholder: object.placeholder,
18
- required: object.required,
19
- type: object.type
18
+ required: object.required
20
19
  }) %>
21
20
  <% if !object.hide_icon %>
22
21
  <div
@@ -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
- if (defaultDate === 'blank') {
26
- return ''
27
- } else {
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 selecttor
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
- // Set input value attribute on page load
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
@@ -18,7 +18,6 @@
18
18
  }) %>
19
19
 
20
20
  <%= pb_rails("date_picker", props: {
21
- default_date: "blank",
22
- label: "Blank",
21
+ label: "Default Behavior",
23
22
  picker_id: "date-picker-default-date4"
24
23
  }) %>
@@ -20,8 +20,7 @@ const DatePickerDefaultDate = () => (
20
20
  pickerId="date-picker-default-date3"
21
21
  />
22
22
  <DatePicker
23
- defaultDate="blank"
24
- label="Blank"
23
+ label="Default Behavior"
25
24
  pickerId="date-picker-default-date4"
26
25
  />
27
26
  </div>
@@ -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
- default_date: "blank",
10
+ label: "Custom Placeholder",
11
11
  picker_id: "date-picker-input2",
12
- placeholder: "Select Date",
12
+ placeholder: "custom-placeholder",
13
13
  }) %>
14
14
 
15
15
  <%= pb_rails("date_picker", props: {
16
- default_date: "blank",
17
- disable_input: true,
16
+ label: "Blank Placeholder",
18
17
  picker_id: "date-picker-input3",
19
- placeholder: "Disabled Input"
18
+ placeholder: ""
20
19
  }) %>
21
20
 
22
21
  <%= pb_rails("date_picker", props: {
23
- dark: true,
24
- hide_label: true,
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
- defaultDate="blank"
14
+ label="Custom Placeholder"
15
15
  pickerId="date-picker-input2"
16
- placeholder="Select Date"
16
+ placeholder="custom-placeholder"
17
17
  />
18
18
  <DatePicker
19
- defaultDate="blank"
20
- disableInput
19
+ label="Blank Placeholder"
21
20
  pickerId="date-picker-input3"
22
- placeholder="Disabled Input"
21
+ placeholder=""
23
22
  />
24
23
  <DatePicker
25
- dark
26
- hideLabel
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.
@@ -1,4 +1,5 @@
1
1
  <%= pb_rails("date_picker", props: {
2
+ default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
2
3
  mode: "range",
3
4
  picker_id: "date-picker-range"
4
5
  }) %>
@@ -4,6 +4,7 @@ import { DatePicker } from '../../'
4
4
  const DatePickerRange = () => (
5
5
  <div>
6
6
  <DatePicker
7
+ defaultDate={[new Date(), new Date().fp_incr(6)]}
7
8
  mode="range"
8
9
  pickerId="date-picker-range"
9
10
  />