playbook_ui 7.0.1.pre.alpha12 → 7.0.1.pre.alpha14

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

@@ -31,7 +31,3 @@
     }
   }
 }
-// Ensures picker remains visible inside filter kit
-.pb_popover_body {
-  overflow: visible !important;
-}

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,17 @@ import flatpickr from 'flatpickr'
 
 const datePickerHelper = (config) => {
   const {
+    allowInput,
     defaultDate,
     disableDate,
     disableRange,
     disableWeekdays,
     format,
-    hideIcon,
     maxDate,
     minDate,
     mode,
+    onChange,
     pickerId,
-    readOnly,
     yearRange,
   } = config
 
@@ -65,7 +65,6 @@ const datePickerHelper = (config) => {
 
   flatpickr(`#${pickerId}`, {
     disableMobile: true,
-    allowInput: !readOnly,
     dateFormat: format,
     defaultDate: defaultDateGetter(),
     disable: disableWeekdays && disableWeekdays.length > 0 ? [
@@ -101,6 +100,9 @@ const datePickerHelper = (config) => {
     onClose: [() => {
       window.removeEventListener('resize', calendarResizer)
     }],
+    onChange: [(selectedDates, dateStr) => {
+      onChange(dateStr, selectedDates)
+    }],
     onYearChange: [],
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
@@ -141,13 +143,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 +161,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/_date_picker_on_change.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { DatePicker, LabelValue } from '../..'
+
+const DatePickerOnChange = () => {
+  const today = new Date()
+  const [dateString, setDateString] = useState(today.toLocaleDateString())
+  const [dateObj, setDateObj] = useState([today])
+
+  const changeHandler = (dateStr, selectedDates) => {
+    setDateString(dateStr)
+    setDateObj(selectedDates)
+  }
+
+  return (
+    <div>
+      <DatePicker
+          defaultDate={dateString}
+          marginBottom="lg"
+          onChange={changeHandler}
+          pickerId="date-picker-onchange"
+      />
+      <LabelValue
+          label="Date Object"
+          marginBottom="lg"
+          value={dateObj[0] ? dateObj[0].toString() : ''}
+      />
+      <LabelValue
+          label="Date String"
+          value={dateString}
+      />
+    </div>
+  )
+}
+export default DatePickerOnChange

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

@@ -0,0 +1,3 @@
+Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
+
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

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
   
@@ -23,13 +23,14 @@ examples:
   - date_picker_default_date: Default Date
   - date_picker_input: Input Field
   - date_picker_label: Label
+  - date_picker_on_change: onChange
   - date_picker_range: Range
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - 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

@@ -3,12 +3,13 @@ export { default as DatePickerHideIcon } from './_date_picker_hide_icon.jsx'
 export { default as DatePickerInput } from './_date_picker_input.jsx'
 export { default as DatePickerDefaultDate } from './_date_picker_default_date.jsx'
 export { default as DatePickerLabel } from './_date_picker_label.jsx'
+export { default as DatePickerOnChange } from './_date_picker_on_change.jsx'
 export { default as DatePickerRange } from './_date_picker_range.jsx'
 export { default as DatePickerFormat } from './_date_picker_format.jsx'
 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/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx

@@ -18,7 +18,11 @@ type DateRangeStackedProps = {
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
   const { className, dark = false, endDate, startDate } = props
-  const css = classnames(className, buildCss('pb_date_range_stacked'), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_range_stacked'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -33,12 +33,12 @@ const DateStacked = (props: DateStackedProps) => {
     size = 'sm',
   } = props
   const classes = classnames(
-    className,
     buildCss('pb_date_stacked_kit', align, size, {
       dark: dark,
       reverse: reverse,
     }),
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   const currentYear = new Date().getFullYear().toString()

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -20,7 +20,11 @@ type DateYearStackedProps = {
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date } = props
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(className, buildCss('pb_date_year_stacked', align), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_year_stacked', align),
+    globalProps(props),
+    className
+  )
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -23,9 +23,9 @@ type FixedConfirmationToastProps = {
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const { className, status = 'neutral', text } = props
   const css = classnames(
-    className,
     `pb_fixed_confirmation_toast_kit_${status}`,
-    globalProps(props)
+    globalProps(props),
+    className
   )
   const icon = iconMap[status]
 

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -51,8 +51,8 @@ const Flex = (props: FlexProps) => {
           reverseClass,
           wrapClass
         ),
-        className,
-        globalProps(props)
+        globalProps(props),
+        className
       )}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -18,7 +18,7 @@ const FlexItem = (props: FlexItemPropTypes) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), className, globalProps(props))}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -24,7 +24,12 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-  <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true } %>
+  <%= form.check_box :example_checkbox,
+                     data: { field1: "value1", field2: "value2" },
+                     props: { text: "Example Checkbox", label: true },
+                     id: "checkbox-id",
+                     name: "checkbox-name",
+                     class: "checkbox-class" %>
   <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
 
   <%= form.actions do |action| %>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -18,8 +18,9 @@ type FormPillProps = {
 const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props
   const css = classnames(
-    [`pb_form_pill_kit_${'primary'}`, className],
-    globalProps(props)
+    `pb_form_pill_kit_${'primary'}`,
+    globalProps(props),
+    className
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -101,7 +101,7 @@ const Gauge = (props: GaugeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className, globalProps(props))}
+        className={classnames(css, globalProps(props), className)}
         id={id}
     />
   )

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -27,7 +27,7 @@ const Highlight = (props: HighlightProps) => {
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={classnames(className, globalProps(props))}
+        highlightClassName={classnames(globalProps(props), className)}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -40,12 +40,12 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
 
   const classes = (className, dark) =>
     classnames(
-      className,
       {
         'pb_home_address_street': !dark,
         'pb_home_address_street_dark': dark,
       },
-      globalProps(props)
+      globalProps(props),
+      className
     )
   return (
     <div className={classes(className, dark)}>

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -56,7 +56,6 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
   const classes = classnames(
-    className,
     flipMap[flip],
     'pb_icon_kit',
     'far',
@@ -72,7 +71,8 @@ const Icon = (props: IconProps) => {
       [`fa-pull-${pull}`]: pull,
       [`fa-rotate-${rotation}`]: rotation,
     },
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   return (

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx

@@ -32,7 +32,11 @@ const IconValue = (props: IconValueProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_icon_value_kit', align), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_icon_value_kit', align),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -25,7 +25,11 @@ const Image = (props: ImageProps) => {
   } = props
 
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_image lazyload blur_up'),
+    globalProps(props),
+    className
+  )
   const dataProps = buildDataProps(data)
 
   return (

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx

@@ -30,7 +30,11 @@ const LabelPill = (props: LabelPillProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = classnames(['pb_label_pill_kit', className], globalProps(props))
+  const css = classnames(
+    'pb_label_pill_kit',
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -46,7 +46,7 @@ type LayoutFooterProps = {
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', className, globalProps(props))}>
+    <div className={classnames('layout_sidebar', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -56,7 +56,7 @@ const Side = (props: LayoutSideProps) => {
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_body', className, globalProps(props))}>
+    <div className={classnames('layout_body', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -66,7 +66,7 @@ const Body = (props: LayoutBodyProps) => {
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_header', className, globalProps(props))}>
+    <div className={classnames('layout_header', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -76,7 +76,7 @@ const Header = (props: LayoutHeaderProps) => {
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_footer', className, globalProps(props))}>
+    <div className={classnames('layout_footer', globalProps(props), className)}>
       {children}
     </div>
   )