playbook_ui 14.9.0.pre.alpha.PLAY1731inputmasking4868 → 14.9.0.pre.alpha.PLAY16264818

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b40a6d80e2e00552963c2986d6ae0e1bad26cd43320b0959b534e37f0e7d71fa
-  data.tar.gz: 52bb830750b5edc87fe3a4c670c944e1fcdf78764649ebcc708db45257694c0d
+  metadata.gz: fd75b9e4b0f7ce117dbd06fd2a726c2c365b6e5bf64cb203f030ba83659ae448
+  data.tar.gz: 4973b4425fac4133d09a37743f38638af91d63ac3a720555846ca286b0358635
 SHA512:
-  metadata.gz: c4f3b88e16a1efe2875d297f45e030854943cc62a8a8ddaf8629c6e6f674e54583e72bfe24d1185ef67de57b3e497597f0c328c427f362f6868b5b136e720541
-  data.tar.gz: 8d309708dbc3912906a4f2b73829fcff692c195b641bd352dee6e313409f74c6ba2c8ea782bbb4c8784a7ca5e5ee3ed5084e4cc147130e37bc9f5203e4cbdee2
+  metadata.gz: cdd757f0e267dede1c878c35a04a53cc26fb39568a802ae979477d938c6fc3e23f4e48150ec4d549717febb1daf69ae8d60285582c1ef58cd539b819ac47ab08
+  data.tar.gz: 9a2776ad808a0e04c2f152e64975d48b02911c3edd4cda0be6d317571fd92553d29cd6e8159444d392d2a48815e4ee1318b4eaabaf5c17bdba9c9c89ff22538b

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -4,10 +4,8 @@
                 <%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
                     <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
                         <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
-                            <button
-                              class="gray-icon toggle-all-icon"
-                              onclick="expandAllRows(this); event.preventDefault();">
-                              <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                            <button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
+                                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
                             </button>
                         <% end %>
                         <%= item[:label] %>
@@ -15,4 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -31,12 +31,14 @@ $avatar-sizes: (
         [class^=pb_card_kit].overlay_top_center {
           left: 50%;
           transform: translateX(-50%);
+          padding: 2px !important;
         }
 
         [class^=pb_card_kit].overlay_left_center,
         [class^=pb_card_kit].overlay_right_center {
           top: 50%;
           transform: translateY(-50%);
+          padding: 2px !important;
         }
       }
 

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,25 +1,24 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-[class^="pb_body_kit"] {
+[class^=pb_body_kit]{
   @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{"" + $color_name}] {
       @include pb_body($color_value);
     }
     @each $status_name, $status_value in $pb_body_status {
-      &[class*="_default_#{$status_name}"] {
+      &[class*=_default_#{$status_name}] {
         @include pb_body($status_value);
       }
     }
   }
-  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
-    &[class*="_#{$dark_color_name}"][class*="dark"] {
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
       @include pb_body($dark_color_value);
     }
   }
-  b,
-  strong {
+  b, strong {
     font-weight: $bold;
   }
 
@@ -30,8 +29,7 @@
     }
   }
 
-  em,
-  i {
+  em, i {
     font-style: italic;
   }
 
@@ -41,25 +39,26 @@
   }
 
   @each $status_name, $status_value in $pb_body_status {
-    &[class*="#{$status_name}"] {
+    &[class*=#{$status_name}] {
       @include pb_body($status_value);
     }
   }
 
-  &[class*="dark"] {
+  &[class*=dark] {
     a {
       color: $active_dark;
     }
     @include pb_body_dark();
-    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
-      &[class*="_#{$dark_color_name}"][class*="dark"] {
+    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+      &[class*=_#{$dark_color_name}][class*=dark]{
         @include pb_body($dark_color_value);
       }
     }
-    @each $status_name, $status_value in $pb_dark_body_status {
-      &[class*="_#{$status_name}"] {
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*=_#{$status_name}] {
         @include pb_body($status_value);
       }
     }
   }
+
 }

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -3,35 +3,29 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default: $text_lt_default,
-  light: $text_lt_light,
-  lighter: $text_lt_lighter,
-  link: $primary,
-  error: $error,
-  success: $text_lt_success_sm,
+  default:        $text_lt_default,
+  light:          $text_lt_light,
+  lighter:        $text_lt_lighter,
+  link:           $primary,
+  error:          $error,
+  success:        $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
-  default: $text_dk_default,
-  light: $text_dk_light,
-  lighter: $text_dk_lighter,
-  link: $active_dark,
-  error: $error,
-  success: $text_dk_success_sm,
+  default:        $text_dk_default,
+  light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
+  link:           $active_dark,
+  error:          $error,
+  success:        $text_dk_success_sm,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default: $text_lt_default,
-  negative: $error,
-  dark_error: $error_dark_body,
-  positive: $text_lt_success_sm,
-);
-
-$pb_dark_body_status: (
-  default: $text_dk_default,
-  negative: $error_dark,
-  positive: $text_dk_success_sm,
+  default:        $text_lt_default,
+  negative:       $error,
+  dark_error:     $error_dark_body,
+  positive:       $text_lt_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -13,7 +13,6 @@ const BreadCrumbsDefault = (props) => {
       <Icon
           icon="home"
           size="1x"
-          {...props}
       />
       <BreadCrumbItem
           {...props}
@@ -23,13 +22,11 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Home"
-            {...props}
         />
       </BreadCrumbItem>
       <Icon
           icon="users"
           size="1x"
-          {...props}
       />
       <Link
           {...props}
@@ -39,20 +36,17 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Users"
-            {...props}
         />
       </Link>
       <Icon
           icon="user"
           size="1x"
-          {...props}
       />
       <Link {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
-            {...props}
         />
       </Link>
     </BreadCrumbs>

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -13,10 +13,9 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
-  lighter:        $text_dk_lighter,
   link:           $active_dark,
   success:        $text_dk_success_sm,
-  error:          $error_dark,
+  error:          $error,
 );
 
 

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -32,7 +32,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 }
 
 @mixin pb_card_selected_dark {
-  @include pb_card_selected($primary_action_dark);
+  @include pb_card_selected($primary_action);
 }
 
 @mixin pb_card($background: $card_light, $border_color: $border_light) {

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

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

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

@@ -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_nav/_bold_mixin.scss

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

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

@@ -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_select/_select.tsx

@@ -1,8 +1,10 @@
 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 { HookFormProps, withHookForm } from '../utilities/hookFormProps'
 import type { InputCallback } from '../types'
 import { getAllIcons } from "../utilities/icons/allicons"
 
@@ -16,7 +18,7 @@ type SelectOption = {
   disabled?: boolean,
 }
 
-type SelectProps = {
+type SelectProps<T extends FieldValues = FieldValues> = {
   aria?: { [key: string]: string },
   blankSelection?: string,
   children?: Node,
@@ -30,16 +32,17 @@ type SelectProps = {
   includeBlank?: string,
   inline?: boolean,
   label?: string,
-  margin: string,
+  margin?: string,
   marginBottom: string,
+  marginTop: string,
   multiple?: boolean,
   name?: string,
-  onChange: InputCallback<HTMLSelectElement>,
+  onChange?: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
   showArrow?: boolean,
   value?: string,
-} & GlobalProps
+} & GlobalProps & Partial<HookFormProps<T>>
 
 const createOptions = (options: SelectOption[]) => options.map((option, index) => (
   <option
@@ -51,7 +54,7 @@ const createOptions = (options: SelectOption[]) => options.map((option, index) =
   </option>
 ))
 
-const Select = ({
+const Select = <T extends FieldValues = FieldValues>({
   aria = {},
   blankSelection,
   children,
@@ -65,17 +68,20 @@ const Select = ({
   inline = false,
   multiple = false,
   name,
-  onChange = () => undefined,
+  onChange,
   options = [],
+  register,
   required = false,
+  rules,
   showArrow = false,
   value,
   ...props
-}: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
+}: SelectProps<T>, ref: React.LegacyRef<HTMLSelectElement>) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const optionsList = createOptions(options)
+  const hookFormProps = name ? withHookForm({ register, name, rules }) : {}
 
   const inlineClass = inline ? 'inline' : null
   const compactClass = compact ? 'compact' : null
@@ -91,21 +97,22 @@ const Select = ({
     compactClass
   );
 
-  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
+  const icons = getAllIcons()
+  const angleDown = icons?.angleDown?.icon 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)}
+          {...hookFormProps}
           disabled={disabled}
           id={name}
           multiple={multiple}
           name={name}
-          onChange={onChange}
-          ref={ref}
+          onChange={onChange || hookFormProps.onChange}
+          ref={ref || hookFormProps.ref}
           required={required}
           value={value}
       >
@@ -135,14 +142,12 @@ const Select = ({
           htmlFor={name}
       >
         {selectBody}
-        { multiple !== true ?
+        { multiple !== true && angleDown &&
           <Icon
               className="pb_select_kit_caret svg-inline--fa"
               customIcon={angleDown}
               fixedWidth
           />
-          :
-          null
         }
         {error &&
           <Body

data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { Select, Card, Body, Button } from 'playbook-ui'
+
+const SelectForm = (props) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm({
+    defaultValues: {
+      favoriteFood: '',
+      mealType: '',
+      dietaryRestrictions: '',
+    }
+  })
+
+  const onSubmit = (data) => {
+    console.log('Form submitted:', data)
+  }
+
+  // Watch form values for real-time display
+  const formValues = watch()
+
+  const foodOptions = [
+    { value: 'pizza', text: 'Pizza' },
+    { value: 'burger', text: 'Burger' },
+    { value: 'sushi', text: 'Sushi' },
+    { value: 'salad', text: 'Salad' },
+  ]
+
+  const mealTypes = [
+    { value: 'breakfast', text: 'Breakfast' },
+    { value: 'lunch', text: 'Lunch' },
+    { value: 'dinner', text: 'Dinner' },
+  ]
+
+  const dietaryOptions = [
+    { value: 'none', text: 'No Restrictions' },
+    { value: 'vegetarian', text: 'Vegetarian' },
+    { value: 'vegan', text: 'Vegan' },
+    { value: 'glutenFree', text: 'Gluten Free' },
+  ]
+
+  return (
+    <div>
+      <Card>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Select
+              error={errors.favoriteFood?.message}
+              label="What's your favorite food?"
+              name="favoriteFood"
+              options={foodOptions}
+              register={register}
+              rules={{
+                required: 'Please select your favorite food',
+              }}
+              {...props}
+          />
+          <Select
+              blankSelection="Choose a meal type..."
+              error={errors.mealType?.message}
+              label="Preferred meal time"
+              marginTop="md"
+              name="mealType"
+              options={mealTypes}
+              register={register}
+              rules={{
+                required: 'Please select a meal type',
+              }}
+              {...props}
+          />
+          <Select
+              label="Dietary Restrictions"
+              marginTop="md"
+              name="dietaryRestrictions"
+              options={dietaryOptions}
+              register={register}
+              {...props}
+          />
+
+          <Button
+              marginTop="lg"
+              text="Submit"
+              type="submit"
+              variant="primary"
+              
+          />
+        </form>
+        <Card marginTop="lg">
+          <Body
+              text="Current Form Values:"
+              variant="bold"
+          />
+          <pre style={{ marginTop: '8px', color: "white" }}>
+            {JSON.stringify(formValues, null, 2)}
+          </pre>
+        </Card>
+      </Card>
+    </div>
+  )
+}
+
+export default SelectForm
+
+
+

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

@@ -30,6 +30,7 @@ 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

@@ -10,3 +10,4 @@ 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

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

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