playbook_ui 6.5.1 → 6.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a55e48ca8ae05485ef1443fa53c0ec9aa3e8ec8b0440f5f3a76517836f12b72
-  data.tar.gz: a37c2427c4d7ba65f8a58d119544030af41d3ab2450dba05a314b9ba906394b7
+  metadata.gz: 189a578c049c4d3de980ed42c9f15390a0c2e75eb001a30ef49952c0bdcfb708
+  data.tar.gz: 5e13504ed89a6452cf39ce141d2f9a2859b4e3c5a56b545c64e72b10d156f61c
 SHA512:
-  metadata.gz: 6ffe757fc8fe8546fdf46e14924c0f73df7a01070933dc715e707d22af58fe158276313af9dd3cd9ef1694faa0f5979cfba0b6c6acae8c50cce61eff66b151ec
-  data.tar.gz: 404dcd5a6dbd49fc5287bced646df7135c85c1ea56c37253645b6f9998e459e2c690acb0e7c2cc52137dd06e4958271b586c5a9d689dcf29f4232d091ff9536b
+  metadata.gz: 9cb88a7b04c68efa695d9794036ce648beebd22802437f6663cbb6e102589000ce24827fde7eb93fc0faa61b9a9c4a93dba77a4fe7c1c8b6d035954d4d11d23f
+  data.tar.gz: 1c6118da84bc1ab07fc64c9b19f60370ff59ea45aa636bb46ae02c770d15b519b3c609fa443ec535cef6ac162a90fa9550efeb2482264b5cc0d1f9f53f32778c

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -8,6 +8,7 @@ import { Icon, TextInput } from '../'
 import datePickerHelper from './date_picker_helper.js'
 
 type DatePickerProps = {
+  allowInput?: Boolean,
   aria?: object,
   className?: String,
   dark?: Boolean,
@@ -29,14 +30,15 @@ type DatePickerProps = {
   minDate: String,
   mode?: String,
   name: String,
+  onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
-  readOnly?: Boolean,
   type?: String,
   yearRange?: Array,
 }
 const DatePicker = (props: DatePickerProps) => {
   const {
+    allowInput = false,
     aria = {},
     className,
     dark = false,
@@ -58,9 +60,9 @@ const DatePicker = (props: DatePickerProps) => {
     minDate,
     mode = 'single',
     name,
+    onChange = () => {},
     pickerId,
     placeholder,
-    readOnly = false,
     type,
     yearRange = [ 1900, 2100 ],
   } = props
@@ -76,6 +78,7 @@ const DatePicker = (props: DatePickerProps) => {
 
   useEffect(() => {
     datePickerHelper({
+      allowInput: allowInput,
       defaultDate: defaultDate,
       disableDate: disableDate,
       disableRange: disableRange,
@@ -86,7 +89,6 @@ const DatePicker = (props: DatePickerProps) => {
       minDate: minDate,
       mode: mode,
       pickerId: pickerId,
-      readOnly: readOnly,
       yearRange: yearRange,
     })
   }, [])
@@ -124,6 +126,7 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
+            onChange={onChange}
             placeholder={placeholder}
             type={type}
         />

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -7,6 +7,8 @@ module Playbook
 
       partial "pb_date_picker/date_picker"
 
+      prop :allow_input, type: Playbook::Props::Boolean,
+                         default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :default_date, type: Playbook::Props::String,
@@ -40,8 +42,6 @@ module Playbook
       prop :picker_id, type: Playbook::Props::String,
                        required: true
       prop :placeholder, type: Playbook::Props::String
-      prop :read_only, type: Playbook::Props::Boolean,
-                       default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :type, type: Playbook::Props::String
@@ -54,6 +54,7 @@ module Playbook
 
       def date_picker_config
         {
+          allowInput: allow_input,
           defaultDate: default_date,
           disableDate: disable_date,
           disableRange: disable_range,
@@ -64,7 +65,6 @@ module Playbook
           minDate: min_date,
           mode: mode,
           pickerId: picker_id,
-          readOnly: read_only,
           yearRange: year_range,
         }.to_json.html_safe
       end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -2,17 +2,16 @@ import flatpickr from 'flatpickr'
 
 const datePickerHelper = (config) => {
   const {
+    allowInput,
     defaultDate,
     disableDate,
     disableRange,
     disableWeekdays,
     format,
-    hideIcon,
     maxDate,
     minDate,
     mode,
     pickerId,
-    readOnly,
     yearRange,
   } = config
 
@@ -65,7 +64,6 @@ const datePickerHelper = (config) => {
 
   flatpickr(`#${pickerId}`, {
     disableMobile: true,
-    allowInput: !readOnly,
     dateFormat: format,
     defaultDate: defaultDateGetter(),
     disable: disableWeekdays && disableWeekdays.length > 0 ? [
@@ -141,13 +139,6 @@ const datePickerHelper = (config) => {
   }
   picker.config.onYearChange.push(yearChangeHook)
 
-  // click handling for Calendar Icon
-  if (!hideIcon){
-    document.querySelector(`#cal-icon-${pickerId}`).addEventListener('click', () => {
-      picker.toggle()
-    })
-  }
-
   // Adding dropdown icons to year and month selects
   picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
@@ -166,6 +157,9 @@ const datePickerHelper = (config) => {
       dropdown.value = picker.currentYear
     }
   })
+  if (allowInput){
+    picker.input.removeAttribute('readonly')
+  }
 }
 
 export default datePickerHelper

data/app/pb_kits/playbook/pb_date_picker/docs/{_date_picker_read_only.html.erb → _date_picker_allow_input.html.erb}

@@ -1,4 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  read_only: true,
+  allow_input: true,
   picker_id: "date-picker-read-only"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../..'
+
+const DatePickerAllowInput = () => (
+  <div>
+    <DatePicker
+        allowInput
+        pickerId="date-picker-read-only"
+    />
+  </div>
+)
+
+export default DatePickerAllowInput

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md

@@ -0,0 +1 @@
+By default the date picker input can only be modified by picking a date on the calendar.  This prop allows your users to manually type in the date.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -12,7 +12,7 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  - date_picker_read_only: Read Only
+  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
   - date_picker_dark: Dark
   
@@ -29,7 +29,7 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  - date_picker_read_only: Read Only
+  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
   - date_picker_dark: Dark
   

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -9,6 +9,6 @@ export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
 export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
 export { default as DatePickerError } from './_date_picker_error.jsx'
 export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
-export { default as DatePickerReadOnly } from './_date_picker_read_only.jsx'
+// export { default as DatePickerAllowInput } from './_date_picker_allow_input.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
 export { default as DatePickerDark } from './_date_picker_dark.jsx'

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -1,5 +1,6 @@
 // Calendar Icon Styles
 .cal_icon_wrapper {
+  pointer-events: none;
   position: absolute;
   top: $space_md + 2;
   right: 0;

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "6.5.1"
+  VERSION = "6.5.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 6.5.1
+  version: 6.5.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-09 00:00:00.000000000 Z
+date: 2020-09-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -712,6 +712,9 @@ files:
 - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
 - app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
@@ -740,9 +743,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import { DatePicker } from '../../'
-
-const DatePickerReadOnly = () => (
-  <div>
-    <DatePicker
-        pickerId="date-picker-read-only"
-        readOnly
-    />
-  </div>
-)
-
-export default DatePickerReadOnly

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.md

@@ -1 +0,0 @@
-Read only inputs do not accept keyboard input.  The only way to change the date value is by picking a date on the calendar.  Especially useful on mobile as it prevents the keyboard from popping up and obscuring the date picker.