RubyGems - playbook_ui - Versions diffs - 14.9.0.pre.alpha.PLAY16264952 → 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736 - Mend

playbook_ui 14.9.0.pre.alpha.PLAY16264952 → 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736

Files changed (88) hide show

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx CHANGED Viewed

@@ -1,11 +1,9 @@
 import React, { useEffect, useRef } from 'react'
-import { FieldValues } from 'react-hook-form'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { withReactHookForm, WithReactHookFormProps } from '../utilities/withReactHookForm'
 type CheckboxProps = {
   aria?: {[key: string]: string},
@@ -15,7 +13,7 @@ type CheckboxProps = {
   dark?: boolean,
   data?: {[key: string]: string},
   disabled?: boolean,
-  error?: boolean | string,
+  error?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   indeterminate?: boolean,
@@ -26,26 +24,27 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
-  aria = {},
-  checked = false,
-  children,
-  className,
-  dark = false,
-  data = {},
-  disabled = false,
-  error = false,
-  htmlOptions = {},
-  id,
-  indeterminate = false,
-  name = '',
-  onChange = () => { void 0 },
-  tabIndex,
-  text = '',
-  value = '',
-  ...props
-}, ref) => {
-  const checkRef = useRef<HTMLInputElement>(null)
+const Checkbox = (props: CheckboxProps): React.ReactElement => {
+  const {
+    aria = {},
+    checked = false,
+    children,
+    className,
+    dark = false,
+    data = {},
+    disabled = false,
+    error = false,
+    htmlOptions = {},
+    id,
+    indeterminate = false,
+    name = '',
+    onChange = () => { void 0 },
+    tabIndex,
+    text = '',
+    value = '',
+  } = props
+  const checkRef = useRef(null)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -69,12 +68,11 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
     else
     return (
     <input
-        {...props}
         defaultChecked={checked}
         disabled={disabled}
         name={name}
         onChange={onChange}
-        ref={ref || checkRef}
+        ref={checkRef}
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
@@ -114,18 +112,13 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
       <Body
           className="pb_checkbox_label"
           dark={dark}
-          status={typeof error === 'string' ? 'negative' : null}
+          status={error ? 'negative' : null}
           variant={null}
       >
         {text}
       </Body>
     </label>
   )
-})
-Checkbox.displayName = 'Checkbox'
-export type CheckboxWithHookFormProps<T extends FieldValues = FieldValues> = CheckboxProps & WithReactHookFormProps<T>
+}
-const CheckboxWithHookForm = withReactHookForm(Checkbox)
-export default CheckboxWithHookForm
+export default Checkbox

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml CHANGED Viewed

@@ -9,13 +9,12 @@ examples:
     - checkbox_disabled: Disabled Checkbox
   react:
-    - checkbox_default: Default
-    - checkbox_checked: Load as checked
-    - checkbox_custom: Custom Checkbox
-    - checkbox_error: Default w/ Error
-    - checkbox_indeterminate: Indeterminate Checkbox
-    - checkbox_disabled: Disabled Checkbox
-    - checkbox_form: Checkbox Form
+  - checkbox_default: Default
+  - checkbox_checked: Load as checked
+  - checkbox_custom: Custom Checkbox
+  - checkbox_error: Default w/ Error
+  - checkbox_indeterminate: Indeterminate Checkbox
+  - checkbox_disabled: Disabled Checkbox
   swift:
     - checkbox_default_swift: Default

data/app/pb_kits/playbook/pb_checkbox/docs/index.js CHANGED Viewed

@@ -4,4 +4,3 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
-export { default as CheckboxForm } from './_checkbox_form.jsx'

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
-import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,7 +32,6 @@ type CollapsibleProps = {
   onClick?: ()=> void,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
 }
 const Collapsible = ({
@@ -48,9 +47,8 @@ const Collapsible = ({
   onIconClick,
   onClick,
   id,
-  tag = 'div',
   ...props
-}: CollapsibleProps & GlobalProps): React.ReactElement => {
+}: CollapsibleProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
   useEffect(()=> {
@@ -78,12 +76,9 @@ const Collapsible = ({
     className
   )
   const dynamicInlineProps = globalInlineProps(props)
-  const Tag: React.ReactElement | any = `${tag}`;
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
-      <Tag
+      <div
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
@@ -101,7 +96,7 @@ const Collapsible = ({
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-      </Tag>
+      </div>
     </CollapsibleContext.Provider>
   )
 }

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useContext, useRef, useEffect } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { globalProps } from '../../utilities/globalProps'
 import { hideElement, showElement } from '../_helper_functions'
 import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps & GlobalProps): React.ReactElement => {
+}: CollapsibleContentProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx CHANGED Viewed

@@ -3,7 +3,7 @@
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { globalProps } from '../../utilities/globalProps'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
   className,
   cursor = 'pointer',
   ...props
-}: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
+}: CollapsibleMainProps): React.ReactElement=> {
   const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })

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

@@ -40,6 +40,8 @@ module Playbook
                         default: {}
       prop :input_data, type: Playbook::Props::HashProp,
                         default: {}
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
       prop :max_date, type: Playbook::Props::String
       prop :min_date, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
@@ -55,6 +57,8 @@ module Playbook
       prop :position, type: Playbook::Props::String,
                       default: "auto"
       prop :position_element, type: Playbook::Props::String
+      prop :reset_to_default, type: Playbook::Props::Boolean,
+                              default: false
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,
                             values: %w[week month quickpick none],
@@ -98,6 +102,7 @@ module Playbook
           plugins: plugins,
           position: position,
           positionElement: position_element,
+          resetToDefault: reset_to_default,
           required: required,
           selectionType: selection_type,
           showTimezone: show_timezone,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts CHANGED Viewed

@@ -24,9 +24,11 @@ type DatePickerConfig = {
   required: boolean,
   hideIcon?: boolean;
   inLine?: boolean,
+  inputValue: string,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
   selectionType?: "month" | "week" | "quickpick" | "",
   onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
+  resetToDefault?: boolean,
   showTimezone?: boolean,
   staticPosition: boolean,
   thisRangesEndToday?: boolean,
@@ -50,6 +52,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     disableWeekdays,
     enableTime,
     format,
+    inputValue,
     maxDate,
     minDate,
     mode,
@@ -59,6 +62,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     plugins,
     position = "auto",
     positionElement,
+    resetToDefault,
     required,
     selectionType,
     showTimezone,
@@ -242,6 +246,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.changeYear(Number(e.target.value))
   })
+  // add data atrribute for reset to default
+  const element = document.querySelector(`#${pickerId}`);
+  if (resetToDefault && defaultDate && element) {
+    element.setAttribute("data-pb-date-picker", defaultDate?.toString());
+  }
   // Reverse month and year dropdown reset on form.reset()
   if (picker.input.form) {
     picker.input.form.addEventListener('reset', () => {

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

@@ -2,6 +2,7 @@ examples:
   rails:
   - date_picker_default: Default
+  - date_picker_reset_to_default: Reset to Default
   - date_picker_hide_icon: Hide Input Icon
   - date_picker_default_date: Default Date
   - date_picker_allow_input: Allow Input

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss CHANGED Viewed

@@ -11,8 +11,3 @@
   }
 }
-.dark [class*='pb_file_upload_kit'] {
-  [class*='pb_card_kit'] {
-    border: 1px $text_dk_lighter dashed;
-  }
-}

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx CHANGED Viewed

@@ -13,7 +13,6 @@ type FileUploadProps = {
   accept?: string[],
   className?: string,
   customMessage?: string,
-  dark?: boolean,
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   acceptedFilesDescription?: string,
@@ -32,7 +31,6 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     acceptedFilesDescription = '',
     className,
     customMessage,
-    dark = false,
     data = {},
     htmlOptions = {},
     maxSize,
@@ -96,12 +94,9 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
         {...htmlProps}
         {...getRootProps()}
     >
-      <Card dark={dark}>
+      <Card>
         <input {...getInputProps()} />
-        <Body
-            color="light"
-            dark={dark}
-        >
+        <Body color="light">
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb CHANGED Viewed

@@ -5,17 +5,11 @@
     id: object.id,
     **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
-        <label
-          for="upload-<%= object.id %>"
-          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
-        >
-          <%= "#{object.label}" %>
-        </label>
+        <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
         <%= pb_rails("text_input", props: {
           type: "file",
-          dark: object.dark,
           input_options: {
-            id: "upload-#{object.id}",
+            id: "upload-#{object.id}",
             classname: "cursor_pointer",
           }.merge(object.input_options)
         }) %>

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

@@ -45,11 +45,12 @@
     class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
+  <%= form.date_picker :example_date_picker_2,  props: { label: true,  reset_to_default: true, default_date: "06/09/1994" } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>
-    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary", onclick: "resetDates()"  } %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_link/_link.scss CHANGED Viewed

@@ -17,7 +17,7 @@
     outline-offset: 2px;
   }
   &:visited {
-    color: darken($primary_action, 10%);
+    color: $data_3;
   }
   &.dark  {
     @include pb_link($active_dark);
@@ -34,7 +34,7 @@
       }
       &:visited {
-        color: darken($primary_action, 10%);
+        color: $data_3;
       }
     }
   }
@@ -48,7 +48,7 @@
       }
       &:visited {
-        color: darken($primary_action, 10%);
+        color: $data_3;
       }
     }
   }

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss CHANGED Viewed

@@ -19,16 +19,6 @@
           font-weight: $bolder;
         }
       }
-    }
-  }
-  .dark & {
-    [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
-      &[class*=_link] {
-        &[class*=_active] {
-          box-shadow: 0 2px 10px 0 $shadow_dark;
-        }
-      }
-    }
+   }
   }
 }

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss CHANGED Viewed

@@ -223,7 +223,6 @@
         }
       }
       [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
-        box-shadow: unset !important;
         .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
@@ -241,17 +240,11 @@
       .pb_collapsible_main_kit:hover {
         background-color: mix($white, $card_dark, 20%);
-        .pb_nav_list_item_text_collapsible {
-          color: $white !important;
-        }
-      }
-      .pb_collapsible_main_kit {
+        .pb_nav_list_item_text_collapsible,
         svg {
-          color: $text_dk_default !important;
+          color: $white !important;
         }
       }
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
@@ -263,13 +256,6 @@
           }
         }
       }
-      &[class*="_active"] {
-        > .pb_collapsible_main_kit {
-          background-color: $primary;
-          box-shadow: 0 2px 10px 0 $shadow_dark;
-        }
-      }
     }
   }
 }

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss CHANGED Viewed

@@ -115,7 +115,7 @@ $selector: ".pb_nav_list";
       }
       [class*="_item_text"],
       [class*="_item_icon"] {
-        color: $text_dk_light !important;
+        color: $text_dk_lighter !important;
       }
       &[class*="_link"] {
         &:hover {

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import classnames from 'classnames'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import Icon from '../pb_icon/_icon';
@@ -14,7 +14,7 @@ type PaginationProps = {
   onChange?: (pageNumber: number) => void;
   range?: number;
   total?: number;
-} & GlobalProps;
+};
 const Pagination = ( props: PaginationProps) => {
   const {

data/app/pb_kits/playbook/pb_select/_select.tsx CHANGED Viewed

@@ -1,12 +1,10 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { FieldValues } from 'react-hook-form'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
 import { getAllIcons } from "../utilities/icons/allicons"
-import { withReactHookForm, WithReactHookFormProps } from '../utilities/withReactHookForm'
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -32,12 +30,11 @@ type SelectProps = {
   includeBlank?: string,
   inline?: boolean,
   label?: string,
-  margin?: string,
-  marginBottom?: string,
-  marginTop?: string,
+  margin: string,
+  marginBottom: string,
   multiple?: boolean,
   name?: string,
-  onChange?: InputCallback<HTMLSelectElement>,
+  onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
   showArrow?: boolean,
@@ -54,7 +51,7 @@ const createOptions = (options: SelectOption[]) => options.map((option, index) =
   </option>
 ))
-const Select = React.forwardRef<HTMLSelectElement, SelectProps>(({
+const Select = ({
   aria = {},
   blankSelection,
   children,
@@ -68,13 +65,13 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(({
   inline = false,
   multiple = false,
   name,
-  onChange,
+  onChange = () => undefined,
   options = [],
   required = false,
   showArrow = false,
   value,
   ...props
-}, ref) => {
+}: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -94,14 +91,14 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(({
     compactClass
   );
-  const icons = getAllIcons()
-  const angleDown = icons?.angleDown?.icon
+  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{
     if (children) return children
     return (
       <select
+          {...htmlOptions}
           {...domSafeProps(props)}
           disabled={disabled}
           id={name}
@@ -138,12 +135,14 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(({
           htmlFor={name}
       >
         {selectBody}
-        { multiple !== true && angleDown &&
+        { multiple !== true ?
           <Icon
               className="pb_select_kit_caret svg-inline--fa"
               customIcon={angleDown}
               fixedWidth
           />
+          :
+          null
         }
         {error &&
           <Body
@@ -154,11 +153,6 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(({
       </label>
     </div>
   )
-})
-Select.displayName = 'Select'
-export type SelectWithHookFormProps<T extends FieldValues = FieldValues> = SelectProps & WithReactHookFormProps<T>
+}
-const SelectWithHookForm = withReactHookForm(Select)
-export default SelectWithHookForm
+export default forwardRef(Select)

data/app/pb_kits/playbook/pb_select/docs/example.yml CHANGED Viewed

@@ -30,7 +30,6 @@ examples:
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
-  - select_form: Form
   swift:
   - select_default_swift: Default

data/app/pb_kits/playbook/pb_select/docs/index.js CHANGED Viewed

@@ -10,4 +10,3 @@ export { default as SelectInline } from './_select_inline.jsx'
 export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
-export { default as SelectForm } from './_select_form.jsx'

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss CHANGED Viewed

@@ -151,7 +151,7 @@ $pb_selectable_paddings: (
       input[type="radio"] {
         &:checked ~ label {
           border-width: $pb_card_border_width;
-          outline: 1px solid $primary_action_dark;
+          outline: 1px solid $primary;
         }
       }
     }
@@ -161,11 +161,11 @@ $pb_selectable_paddings: (
     color: $white;
     > label {
       @include pb_card_dark;
-      background: $bg_dark_card;
+      background: transparent;
       .pb_selectable_card_circle {
         border-color: $bg_dark;
-        background: $primary_action_dark;
+        background: $primary-action;
       }
     }
@@ -173,7 +173,7 @@ $pb_selectable_paddings: (
     input[type="radio"] {
       &:checked ~ label {
         @include pb_card_selected_dark;
-        background: $bg_dark_card;
+        background: transparent;
       }
     }

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb CHANGED Viewed

@@ -35,7 +35,7 @@
         <% end %>
       <% else %>
         <% if content.nil? %>
-          <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
+          <%= pb_rails("body", props: { text: object.text }) %>
         <% else %>
           <%= content %>
         <% end %>