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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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 %>