playbook_ui 14.9.0.pre.alpha.PLAY16264818 → 14.9.0.pre.alpha.play1703errorstatealignment4889

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd75b9e4b0f7ce117dbd06fd2a726c2c365b6e5bf64cb203f030ba83659ae448
-  data.tar.gz: 4973b4425fac4133d09a37743f38638af91d63ac3a720555846ca286b0358635
+  metadata.gz: c76303a7544e38deef03a9ac8c3e287b6013cf828a750766ec788f66e706bbc4
+  data.tar.gz: 98da736fc4c77104393be8ab4f11379e52113aecdc16fcb2ccdb954e4aecc97b
 SHA512:
-  metadata.gz: cdd757f0e267dede1c878c35a04a53cc26fb39568a802ae979477d938c6fc3e23f4e48150ec4d549717febb1daf69ae8d60285582c1ef58cd539b819ac47ab08
-  data.tar.gz: 9a2776ad808a0e04c2f152e64975d48b02911c3edd4cda0be6d317571fd92553d29cd6e8159444d392d2a48815e4ee1318b4eaabaf5c17bdba9c9c89ff22538b
+  metadata.gz: bbf0e95a2e97295650df84cdd1c87dfdd713eaaf68a6fb21c540dac59fa8084239c288becf3aa0eecb84f0dd6855e6e5440c37e748d0524560a4699f497c20f1
+  data.tar.gz: 49a7797ec7401bd8e09a81b696cc652c1557dda1a514116cd7263842629fc845ff2f8eb19c30c95566eb8838ca1b64be94182491c8e487cb76034e38459554c7

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

@@ -4,8 +4,10 @@
                 <%= 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)">
-                                <%= 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); event.preventDefault();">
+                              <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
                             </button>
                         <% end %>
                         <%= item[:label] %>
@@ -13,4 +15,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

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

@@ -31,14 +31,12 @@ $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,24 +1,25 @@
 @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;
   }
 
@@ -29,7 +30,8 @@
     }
   }
 
-  em, i {
+  em,
+  i {
     font-style: italic;
   }
 
@@ -39,26 +41,25 @@
   }
 
   @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_body_status {
-      &[class*=_#{$status_name}] {
+    @each $status_name, $status_value in $pb_dark_body_status {
+      &[class*="_#{$status_name}"] {
         @include pb_body($status_value);
       }
     }
   }
-
 }

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

@@ -3,29 +3,35 @@
 @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,
+  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,
 );
 
 @mixin pb_body($color: $text_lt_default) {

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

@@ -13,6 +13,7 @@ const BreadCrumbsDefault = (props) => {
       <Icon
           icon="home"
           size="1x"
+          {...props}
       />
       <BreadCrumbItem
           {...props}
@@ -22,11 +23,13 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Home"
+            {...props}
         />
       </BreadCrumbItem>
       <Icon
           icon="users"
           size="1x"
+          {...props}
       />
       <Link
           {...props}
@@ -36,17 +39,20 @@ 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,9 +13,10 @@ $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,
+  error:          $error_dark,
 );
 
 

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);
+  @include pb_card_selected($primary_action_dark);
 }
 
 @mixin pb_card($background: $card_light, $border_color: $border_light) {

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

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

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

@@ -5,11 +5,17 @@
     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"><%= "#{object.label}" %></label>
+        <label
+          for="upload-<%= object.id %>"
+          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
+        >
+          <%= "#{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_group/_form_group.scss

@@ -1,7 +1,7 @@
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: flex-start;
   justify-content: flex-start;
 
   &[class*=_full] {
@@ -12,6 +12,18 @@
     }
   }
 
+  &:has(.pb_text_input_kit):has(.pb_text_input_kit_label){
+    align-items: flex-end;
+  }
+
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){
+    align-items: center;
+  }
+
+  &:has(.pb_phone_number_input):has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){
+    align-items: center;
+  }
+
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -27,7 +39,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
-    
+
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -150,7 +162,7 @@
   & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
-    } 
+    }
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {

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

@@ -19,6 +19,16 @@
           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,6 +223,7 @@
         }
       }
       [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;
         }
@@ -240,11 +241,17 @@
 
       .pb_collapsible_main_kit:hover {
         background-color: mix($white, $card_dark, 20%);
-        .pb_nav_list_item_text_collapsible,
-        svg {
+        .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
       }
+
+      .pb_collapsible_main_kit {
+        svg {
+          color: $text_dk_default !important;
+        }
+      }
+
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
@@ -256,6 +263,13 @@
           }
         }
       }
+
+      &[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_lighter !important;
+        color: $text_dk_light !important;
       }
       &[class*="_link"] {
         &:hover {

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

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

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

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

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

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

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 }) %>
+          <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
         <% else %>
           <%= content %>
         <% end %>