playbook_ui 12.4.0 → 12.5.0.pre.alpha.datepicker1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +4 -1
  3. data/app/pb_kits/playbook/pb_awesome/_awesome.scss +3 -0
  4. data/app/pb_kits/playbook/pb_awesome/_awesome.tsx +41 -0
  5. data/app/pb_kits/playbook/pb_awesome/awesome.html.erb +7 -0
  6. data/app/pb_kits/playbook/pb_awesome/awesome.rb +8 -0
  7. data/app/pb_kits/playbook/pb_awesome/awesome.test.jsx +17 -0
  8. data/app/pb_kits/playbook/pb_awesome/docs/_awesome_default.html.erb +1 -0
  9. data/app/pb_kits/playbook/pb_awesome/docs/_awesome_default.jsx +12 -0
  10. data/app/pb_kits/playbook/pb_awesome/docs/example.yml +9 -0
  11. data/app/pb_kits/playbook/pb_awesome/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_button/_button.tsx +2 -2
  13. data/app/pb_kits/playbook/pb_cool/_cool.scss +3 -0
  14. data/app/pb_kits/playbook/pb_cool/_cool.tsx +41 -0
  15. data/app/pb_kits/playbook/pb_cool/cool.html.erb +7 -0
  16. data/app/pb_kits/playbook/pb_cool/cool.rb +8 -0
  17. data/app/pb_kits/playbook/pb_cool/cool.test.jsx +17 -0
  18. data/app/pb_kits/playbook/pb_cool/docs/_cool_default.html.erb +1 -0
  19. data/app/pb_kits/playbook/pb_cool/docs/_cool_default.jsx +12 -0
  20. data/app/pb_kits/playbook/pb_cool/docs/example.yml +9 -0
  21. data/app/pb_kits/playbook/pb_cool/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_coolness/_coolness.scss +3 -0
  23. data/app/pb_kits/playbook/pb_coolness/_coolness.tsx +41 -0
  24. data/app/pb_kits/playbook/pb_coolness/coolness.html.erb +7 -0
  25. data/app/pb_kits/playbook/pb_coolness/coolness.rb +8 -0
  26. data/app/pb_kits/playbook/pb_coolness/coolness.test.jsx +17 -0
  27. data/app/pb_kits/playbook/pb_coolness/docs/_coolness_default.html.erb +1 -0
  28. data/app/pb_kits/playbook/pb_coolness/docs/_coolness_default.jsx +12 -0
  29. data/app/pb_kits/playbook/pb_coolness/docs/example.yml +9 -0
  30. data/app/pb_kits/playbook/pb_coolness/docs/index.js +1 -0
  31. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +9 -6
  32. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +77 -56
  33. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -1
  34. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -0
  35. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +68 -0
  36. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +55 -0
  37. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +41 -0
  38. data/app/pb_kits/playbook/pb_map/_map.scss +114 -2
  39. data/app/pb_kits/playbook/pb_map/_map.tsx +42 -2
  40. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +47 -24
  41. data/app/pb_kits/playbook/pb_map/docs/_map_default.md +5 -5
  42. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +20 -17
  43. data/app/pb_kits/playbook/pb_map/docs/example.yml +0 -1
  44. data/app/pb_kits/playbook/pb_map/pbMapTheme.ts +23 -0
  45. data/app/pb_kits/playbook/pb_message/{_message.jsx → _message.tsx} +35 -35
  46. data/app/pb_kits/playbook/pb_message/message.test.js +63 -0
  47. data/app/pb_kits/playbook/pb_passphrase/{_passphrase.jsx → _passphrase.tsx} +56 -56
  48. data/app/pb_kits/playbook/pb_phone_number_input/PhoneNumberHelper.js +12 -0
  49. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +3 -0
  50. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb +3 -0
  51. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.html.erb +4 -0
  52. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb +4 -0
  53. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -0
  54. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb +15 -0
  55. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +43 -0
  56. data/app/pb_kits/playbook/pb_popover/_popover.tsx +3 -3
  57. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +1 -1
  58. data/app/pb_kits/playbook/pb_test/_test.scss +3 -0
  59. data/app/pb_kits/playbook/pb_test/_test.tsx +41 -0
  60. data/app/pb_kits/playbook/pb_test/docs/_test_default.html.erb +1 -0
  61. data/app/pb_kits/playbook/pb_test/docs/_test_default.jsx +12 -0
  62. data/app/pb_kits/playbook/pb_test/docs/example.yml +9 -0
  63. data/app/pb_kits/playbook/pb_test/docs/index.js +1 -0
  64. data/app/pb_kits/playbook/pb_test/test.html.erb +7 -0
  65. data/app/pb_kits/playbook/pb_test/test.rb +8 -0
  66. data/app/pb_kits/playbook/pb_test/test.test.jsx +17 -0
  67. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +4 -0
  68. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -0
  69. data/lib/playbook/version.rb +2 -2
  70. metadata +54 -7
  71. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx +0 -37
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4c9cb603d0564380dc76fd27efdc587607430f9e349d5288672a6f44ae9cdd7e
4
- data.tar.gz: b677f2dfb9bfe0bfc848018c3a84be1f94af01e87372ff4ba0dbf78a50c0857c
3
+ metadata.gz: 327c132ebc8c159f50f33488ecef9d5cdaa9332dedfb1d100557c5c2e1f08aa9
4
+ data.tar.gz: 40b8ae76091ff0e087d4b3b2560d6aab6db9adde5686c65927cc863af69e78d0
5
5
  SHA512:
6
- metadata.gz: 5671ee0b58e71684f090dcac6d15c2297d19c071b7f58082badd065319fdf91e27a3884779a8e3c021101515a40c7a9b2c0c07c880b632894faafb23a16322ac
7
- data.tar.gz: ea93cf50049661329f814c893e245ceff4d3be4c4bd5ce9264624eafea84d0a82a833d50cebb6e233d90e5e124c60372d68f5516c4ba4269992325b4178e5b86
6
+ metadata.gz: 622a1cc9d58859cbc96dbd5682d928f910f1dd372591cbc8b1638edd1abf83b4489d32aa6cefa53766f8607f0048b0c6bf1d9f881f0f50e560c826ba49962acb
7
+ data.tar.gz: ad04ed9a79aef5146285899b45f4cc6e07b3a760ec52b7e4d31db2f3c3048f55d84e7fff7a2a592a53fc88aec7c81bc111711703871d054acbc8186a98920c81
@@ -123,4 +123,7 @@ export { default as PbTable } from './pb_table'
123
123
  export { default as PbTextarea } from './pb_textarea'
124
124
  export { default as PbTooltip } from './pb_tooltip'
125
125
  export { default as PbTypeahead } from './pb_typeahead'
126
- export { default as dialogHelper } from './pb_dialog/dialogHelper'
126
+ export { default as dialogHelper } from './pb_dialog/dialogHelper'
127
+
128
+ //Theming
129
+ export {default as mapTheme} from './pb_map/pbMapTheme'
@@ -0,0 +1,3 @@
1
+ .pb_awesome {
2
+
3
+ }
@@ -0,0 +1,41 @@
1
+
2
+
3
+ /* @flow */
4
+
5
+ import React from 'react'
6
+ import classnames from 'classnames'
7
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
+ import { globalProps } from '../utilities/globalProps'
9
+
10
+ type AwesomeProps = {
11
+ aria?: { [key: string]: string },
12
+ className?: string,
13
+ data?: { [key: string]: string },
14
+ id?: string,
15
+ }
16
+
17
+ const Awesome = (props: AwesomeProps) => {
18
+ const {
19
+ aria = {},
20
+ className,
21
+ data = {},
22
+ id,
23
+ } = props
24
+
25
+ const ariaProps = buildAriaProps(aria)
26
+ const dataProps = buildDataProps(data)
27
+ const classes = classnames(buildCss('pb_awesome'), globalProps(props), className)
28
+
29
+ return (
30
+ <div
31
+ {...ariaProps}
32
+ {...dataProps}
33
+ className={classes}
34
+ id={id}
35
+ >
36
+ {className}
37
+ </div>
38
+ )
39
+ }
40
+
41
+ export default Awesome
@@ -0,0 +1,7 @@
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
6
+ <span>AWESOME CONTENT</span>
7
+ <% end %>
@@ -0,0 +1,8 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbAwesome
5
+ class Awesome < ::Playbook::KitBase
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,17 @@
1
+ import { ensureAccessible, renderKit } from '../utilities/test-utils'
2
+
3
+ import { Awesome } from '../'
4
+
5
+ /* See these resources for more testing info:
6
+ - https://github.com/testing-library/jest-dom#usage for useage and examples
7
+ - https://jestjs.io/docs/en/using-matchers
8
+ */
9
+
10
+ test('generated scaffold test - update me', () => {
11
+ const props = {
12
+ data: { testid: 'default' }
13
+ }
14
+
15
+ const kit = renderKit(Awesome , props)
16
+ expect(kit).toBeInTheDocument()
17
+ })
@@ -0,0 +1 @@
1
+ <%= pb_rails("awesome") %>
@@ -0,0 +1,12 @@
1
+ import React from 'react'
2
+ import Awesome from '../_Awesome'
3
+
4
+ const AwesomeDefault = (props) => (
5
+ <div>
6
+ <Awesome
7
+ {...props}
8
+ />
9
+ </div>
10
+ )
11
+
12
+ export default AwesomeDefault
@@ -0,0 +1,9 @@
1
+ examples:
2
+
3
+ rails:
4
+ - awesome_default: Default
5
+
6
+
7
+ react:
8
+ - awesome_default: Default
9
+
@@ -0,0 +1 @@
1
+ export { default as AwesomeDefault } from './_awesome_default.jsx'
@@ -27,9 +27,9 @@ type ButtonPropTypes = {
27
27
  size?: 'sm' | 'md' | 'lg',
28
28
  text?: string,
29
29
  type?: 'inline' | null,
30
- htmlType: 'submit' | 'reset' | 'button' | undefined,
30
+ htmlType?: 'submit' | 'reset' | 'button' | undefined,
31
31
  value?: string | null,
32
- variant: 'primary' | 'secondary' | 'link',
32
+ variant?: 'primary' | 'secondary' | 'link',
33
33
  wrapperClass?: string,
34
34
  } & GlobalProps
35
35
 
@@ -0,0 +1,3 @@
1
+ .pb_cool {
2
+
3
+ }
@@ -0,0 +1,41 @@
1
+
2
+
3
+ /* @flow */
4
+
5
+ import React from 'react'
6
+ import classnames from 'classnames'
7
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
+ import { globalProps } from '../utilities/globalProps'
9
+
10
+ type CoolProps = {
11
+ aria?: { [key: string]: string },
12
+ className?: string,
13
+ data?: { [key: string]: string },
14
+ id?: string,
15
+ }
16
+
17
+ const Cool = (props: CoolProps) => {
18
+ const {
19
+ aria = {},
20
+ className,
21
+ data = {},
22
+ id,
23
+ } = props
24
+
25
+ const ariaProps = buildAriaProps(aria)
26
+ const dataProps = buildDataProps(data)
27
+ const classes = classnames(buildCss('pb_cool'), globalProps(props), className)
28
+
29
+ return (
30
+ <div
31
+ {...ariaProps}
32
+ {...dataProps}
33
+ className={classes}
34
+ id={id}
35
+ >
36
+ {className}
37
+ </div>
38
+ )
39
+ }
40
+
41
+ export default Cool
@@ -0,0 +1,7 @@
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
6
+ <span>COOL CONTENT</span>
7
+ <% end %>
@@ -0,0 +1,8 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbCool
5
+ class Cool < ::Playbook::KitBase
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,17 @@
1
+ import { ensureAccessible, renderKit } from '../utilities/test-utils'
2
+
3
+ import { Cool } from '../'
4
+
5
+ /* See these resources for more testing info:
6
+ - https://github.com/testing-library/jest-dom#usage for useage and examples
7
+ - https://jestjs.io/docs/en/using-matchers
8
+ */
9
+
10
+ test('generated scaffold test - update me', () => {
11
+ const props = {
12
+ data: { testid: 'default' }
13
+ }
14
+
15
+ const kit = renderKit(Cool , props)
16
+ expect(kit).toBeInTheDocument()
17
+ })
@@ -0,0 +1 @@
1
+ <%= pb_rails("cool") %>
@@ -0,0 +1,12 @@
1
+ import React from 'react'
2
+ import Cool from '../_Cool'
3
+
4
+ const CoolDefault = (props) => (
5
+ <div>
6
+ <Cool
7
+ {...props}
8
+ />
9
+ </div>
10
+ )
11
+
12
+ export default CoolDefault
@@ -0,0 +1,9 @@
1
+ examples:
2
+
3
+ rails:
4
+ - cool_default: Default
5
+
6
+
7
+ react:
8
+ - cool_default: Default
9
+
@@ -0,0 +1 @@
1
+ export { default as CoolDefault } from './_cool_default.jsx'
@@ -0,0 +1,3 @@
1
+ .pb_coolness {
2
+
3
+ }
@@ -0,0 +1,41 @@
1
+
2
+
3
+ /* @flow */
4
+
5
+ import React from 'react'
6
+ import classnames from 'classnames'
7
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
+ import { globalProps } from '../utilities/globalProps'
9
+
10
+ type CoolnessProps = {
11
+ aria?: { [key: string]: string },
12
+ className?: string,
13
+ data?: { [key: string]: string },
14
+ id?: string,
15
+ }
16
+
17
+ const Coolness = (props: CoolnessProps) => {
18
+ const {
19
+ aria = {},
20
+ className,
21
+ data = {},
22
+ id,
23
+ } = props
24
+
25
+ const ariaProps = buildAriaProps(aria)
26
+ const dataProps = buildDataProps(data)
27
+ const classes = classnames(buildCss('pb_coolness'), globalProps(props), className)
28
+
29
+ return (
30
+ <div
31
+ {...ariaProps}
32
+ {...dataProps}
33
+ className={classes}
34
+ id={id}
35
+ >
36
+ {className}
37
+ </div>
38
+ )
39
+ }
40
+
41
+ export default Coolness
@@ -0,0 +1,7 @@
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
6
+ <span>COOLNESS CONTENT</span>
7
+ <% end %>
@@ -0,0 +1,8 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbCoolness
5
+ class Coolness < ::Playbook::KitBase
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,17 @@
1
+ import { ensureAccessible, renderKit } from '../utilities/test-utils'
2
+
3
+ import { Coolness } from '../'
4
+
5
+ /* See these resources for more testing info:
6
+ - https://github.com/testing-library/jest-dom#usage for useage and examples
7
+ - https://jestjs.io/docs/en/using-matchers
8
+ */
9
+
10
+ test('generated scaffold test - update me', () => {
11
+ const props = {
12
+ data: { testid: 'default' }
13
+ }
14
+
15
+ const kit = renderKit(Coolness , props)
16
+ expect(kit).toBeInTheDocument()
17
+ })
@@ -0,0 +1 @@
1
+ <%= pb_rails("coolness") %>
@@ -0,0 +1,12 @@
1
+ import React from 'react'
2
+ import Coolness from '../_Coolness'
3
+
4
+ const CoolnessDefault = (props) => (
5
+ <div>
6
+ <Coolness
7
+ {...props}
8
+ />
9
+ </div>
10
+ )
11
+
12
+ export default CoolnessDefault
@@ -0,0 +1,9 @@
1
+ examples:
2
+
3
+ rails:
4
+ - coolness_default: Default
5
+
6
+
7
+ react:
8
+ - coolness_default: Default
9
+
@@ -0,0 +1 @@
1
+ export { default as CoolnessDefault } from './_coolness_default.jsx'
@@ -5,8 +5,7 @@
5
5
  @import "./sass_partials/inline_styles";
6
6
  @import "./sass_partials/month_and_year_styles";
7
7
  @import "./sass_partials/time_selection_styles";
8
-
9
-
8
+ @import "./sass_partials/input_styles";
10
9
 
11
10
  [class^=pb_date_picker_kit] {
12
11
  .input_wrapper {
@@ -20,8 +19,10 @@
20
19
  @import "./sass_partials/calendar_input_icon";
21
20
  }
22
21
 
23
- &:focus, :focus-within {
24
- div.cal_icon_wrapper, input.text_input{
22
+ &:focus,
23
+ :focus-within {
24
+ div.cal_icon_wrapper,
25
+ input.date_picker_input {
25
26
  @include transition_default;
26
27
  border-color: $primary;
27
28
  }
@@ -33,18 +34,20 @@
33
34
  @import "./sass_partials/header_styles";
34
35
  @import "./sass_partials/overrides";
35
36
 
36
- .text_input.flatpickr-input {
37
+ .date_picker_input.flatpickr-input {
37
38
  text-overflow: ellipsis;
38
39
  padding-right: $space_xl + 10 !important;
39
40
  }
41
+
40
42
  // Calendar Shadow and Border
41
43
  .flatpickr-calendar {
42
44
  box-shadow: $shadow_deeper;
43
45
  border: 1px solid $border_light;
44
46
  }
47
+
45
48
  // Hide Caret
46
49
  &:before,
47
50
  &:after {
48
51
  content: none;
49
52
  }
50
- }
53
+ }
@@ -5,16 +5,16 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
5
  import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
6
6
 
7
7
  import datePickerHelper from './date_picker_helper'
8
-
9
8
  import Icon from '../pb_icon/_icon'
10
- import TextInput from '../pb_text_input/_text_input'
9
+ import Caption from '../pb_caption/_caption'
10
+ import Body from '../pb_body/_body'
11
11
 
12
12
  type DatePickerProps = {
13
13
  allowInput?: boolean,
14
- aria?: {[key: string]: string},
14
+ aria?: { [key: string]: string },
15
15
  className?: string,
16
16
  dark?: boolean,
17
- data?: object,
17
+ data?: { [key: string]: string },
18
18
  defaultDate?: string,
19
19
  disableDate?: number[],
20
20
  disableInput?: boolean,
@@ -27,15 +27,15 @@ type DatePickerProps = {
27
27
  hideLabel?: boolean,
28
28
  id?: string,
29
29
  inLine?: boolean,
30
- inputAria?: object,
31
- inputData?: object,
32
- inputOnChange?: (arg: string) => void,
30
+ inputAria?: { [key: string]: string },
31
+ inputData?: { [key: string]: string },
32
+ inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
33
33
  inputValue?: any,
34
34
  label?: string,
35
35
  maxDate: string,
36
36
  minDate: string,
37
37
  name: string,
38
- pickerId?: ArrayLike<Node> | Node | string,
38
+ pickerId?: string,
39
39
  placeholder?: string,
40
40
  positionElement?: HTMLElement | null,
41
41
  scrollContainer?: string,
@@ -47,11 +47,11 @@ type DatePickerProps = {
47
47
  yearRange?: number[],
48
48
  } & GlobalProps
49
49
 
50
- const DatePicker = (props: DatePickerProps) => {
50
+ const DatePicker = (props: DatePickerProps): React.ReactElement => {
51
51
  if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
52
52
 
53
53
  const {
54
- allowInput = false,
54
+ allowInput = true,
55
55
  aria = {},
56
56
  className,
57
57
  dark = false,
@@ -67,9 +67,9 @@ const DatePicker = (props: DatePickerProps) => {
67
67
  hideIcon = false,
68
68
  hideLabel = false,
69
69
  id,
70
- inLine = true,
71
- inputAria,
72
- inputData,
70
+ inLine = false,
71
+ inputAria = {},
72
+ inputData = {},
73
73
  inputOnChange,
74
74
  inputValue,
75
75
  label = 'Date Picker',
@@ -77,7 +77,7 @@ const DatePicker = (props: DatePickerProps) => {
77
77
  minDate,
78
78
  mode = 'single',
79
79
  name,
80
- onChange = () => {},
80
+ onChange = () => { void 0 },
81
81
  pickerId,
82
82
  placeholder = 'Select Date',
83
83
  plugins = false,
@@ -87,11 +87,14 @@ const DatePicker = (props: DatePickerProps) => {
87
87
  selectionType = '',
88
88
  showTimezone = false,
89
89
  staticPosition = true,
90
- yearRange = [ 1900, 2100 ],
90
+ yearRange = [1900, 2100],
91
91
  } = props
92
92
 
93
93
  const ariaProps = buildAriaProps(aria)
94
94
  const dataProps = buildDataProps(data)
95
+ const inputAriaProps = buildAriaProps(inputAria)
96
+ const inputDataProps = buildDataProps(inputData)
97
+
95
98
  const classes = classnames(
96
99
  buildCss('pb_date_picker_kit'),
97
100
  globalProps(props),
@@ -128,13 +131,13 @@ const DatePicker = (props: DatePickerProps) => {
128
131
 
129
132
  const iconWrapperClass = () => {
130
133
  let base = 'cal_icon_wrapper'
131
- if (dark){
134
+ if (dark) {
132
135
  base += ' dark'
133
136
  }
134
- if (hideLabel){
137
+ if (hideLabel) {
135
138
  base += ' no_label_shift'
136
139
  }
137
- if (error){
140
+ if (error) {
138
141
  base += ' error'
139
142
  }
140
143
  return base
@@ -142,57 +145,75 @@ const DatePicker = (props: DatePickerProps) => {
142
145
 
143
146
  return (
144
147
  <div
145
- {...ariaProps}
146
- {...dataProps}
147
- className={classes}
148
- id={id}
148
+ {...ariaProps}
149
+ {...dataProps}
150
+ className={classes}
151
+ id={id}
149
152
  >
150
- <div className="input_wrapper">
151
- <TextInput
152
- aria={inputAria}
153
+ <div
154
+ {...inputAriaProps}
155
+ {...inputDataProps}
156
+ className="input_wrapper">
157
+
158
+ <Caption
159
+ className="pb_date_picker_kit_label"
160
+ text={hideLabel ? null : label}
161
+ />
162
+
163
+ <div className="date_picker_input_wrapper">
164
+ <input
153
165
  autoComplete="off"
154
- dark={dark}
155
- data={inputData}
166
+ className="date_picker_input"
156
167
  disabled={disableInput}
157
- error={error}
158
168
  id={pickerId}
159
- label={hideLabel ? null : label}
160
169
  name={name}
161
170
  onChange={inputOnChange}
162
171
  placeholder={placeholder}
163
172
  value={inputValue}
164
- />
173
+ />
174
+
175
+ {error && <Body
176
+ status="negative"
177
+ text={error}
178
+ variant={null}
179
+ />
180
+ }
181
+ </div>
165
182
 
166
183
  {!hideIcon &&
167
184
  <div
168
- className={iconWrapperClass()}
169
- id={`cal-icon-${pickerId}`}
170
- >
171
- <Icon
172
- className="cal_icon"
173
- icon="calendar-alt"
174
- />
175
- </div>
176
- }
177
-
178
-
179
- { hideIcon && inLine ? <><div
180
- className={iconWrapperClass()}
181
- id={`${pickerId}-icon-plus`}
182
- >
183
- <Icon
184
- className="date-picker-plus-icon"
185
- icon="plus" />
186
- </div><div
187
- className={iconWrapperClass()}
188
- id={`${pickerId}-angle-down`}
189
- >
185
+ className={iconWrapperClass()}
186
+ id={`cal-icon-${pickerId}`}
187
+ >
190
188
  <Icon
191
- className="angle_down_icon"
192
- icon="angle-down" />
193
- </div></> : null}
194
-
189
+ className="cal_icon"
190
+ icon="calendar-alt"
191
+ />
192
+ </div>
193
+ }
195
194
 
195
+ {hideIcon && inLine ?
196
+ <div>
197
+ <div
198
+ className={iconWrapperClass()}
199
+ id={`${pickerId}-icon-plus`}
200
+ >
201
+ <Icon
202
+ className="date-picker-plus-icon"
203
+ icon="plus"
204
+ />
205
+ </div>
206
+ <div
207
+ className={iconWrapperClass()}
208
+ id={`${pickerId}-angle-down`}
209
+ >
210
+ <Icon
211
+ className="angle_down_icon"
212
+ icon="angle-down"
213
+ />
214
+ </div>
215
+ </div>
216
+ : null}
196
217
  </div>
197
218
  </div>
198
219
  )
@@ -4,7 +4,7 @@ module Playbook
4
4
  module PbDatePicker
5
5
  class DatePicker < Playbook::KitBase
6
6
  prop :allow_input, type: Playbook::Props::Boolean,
7
- default: false
7
+ default: true
8
8
  prop :dark, type: Playbook::Props::Boolean,
9
9
  default: false
10
10
  prop :default_date, type: Playbook::Props::String,
@@ -112,6 +112,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
112
112
  // ===========================================================
113
113
 
114
114
  flatpickr(`#${pickerId}`, {
115
+ allowInput,
115
116
  closeOnSelect,
116
117
  disableMobile: true,
117
118
  dateFormat: getDateFormat(),