playbook_ui 16.2.0.pre.alpha.play2762formkithandlenil14473 → 16.2.0.pre.alpha.play2780dropdownkitremoveXonblank14671

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c5f6df00c7fbbe0d994273f875c321e3de663c6a40daa60754105cd03f168c5b
-  data.tar.gz: cc44077f496db858c5a91531424bc04e876d52abd3c4612ff71e9c3e46192fa0
+  metadata.gz: 771ea81bc54ab1c2aa95a9a2826a2e1b9540696e459bf3cd7359a38301a55d65
+  data.tar.gz: ed7691669402cf6e68601077ef489a8f52dd5806111bb7bf2dd75ab6abaee7ac
 SHA512:
-  metadata.gz: 34732b12a53da0db5a370bcbc0a27e92e5b9c103eca20d0d371b14085b050d48ece407c1188de3bd625477851c2e3a8b0a8e2ea5a80ea2c460f33016d9238d80
-  data.tar.gz: 322abf9435568192f7fcb7038866a5272457f4775ccca990aef929ca1c4085055823804307f1b57f37d36e507005d97eb8ae50ae8a934d06d7ee34edcb54dbaf
+  metadata.gz: 3105eeabc1ccc1f8b769d821a0515e09fecca2b1254ee228b4ff82a430eb9319426182bbf8fb642d1e17c8026d02d2060de48717838b1845f3d65b80a103e2ec
+  data.tar.gz: 4b1703d5b905a4564a76fc2d2810ea9e425f60ff11ff4d398ba66cde7fe4d8f3e989516ed2a55c7ddb9b7a15afe6d4f5fb5a10c985ae1f0f584ecc1f50e17422

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

@@ -30,7 +30,7 @@
 .pb_body_kit_error_neutral,
 .pb_body_kit_error_positive,
 .pb_body_kit_error_negative {
-  @include pb_body($text_lt_default);
+  @include pb_body($text_default_color);
   
   b,
   strong {
@@ -38,9 +38,9 @@
   }
 
   a {
-    color: $primary;
+    color: $text_link;
     &:hover {
-      color: $text_lt_default;
+      color: $text_default_color;
     }
   }
 
@@ -110,7 +110,7 @@
   @include pb_body_dark();
   
   a {
-    color: $active_dark;
+    color: $text_link_dark;
   }
 }
 

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

@@ -3,38 +3,38 @@
 @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_default_color,
+  light: $text_light,
+  lighter: $text_lighter,
+  link: $text_link,
+  error: $text_error,
+  success: $text_success,
 );
 
 $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_default_dark,
+  light: $text_light_dark,
+  lighter: $text_lighter_dark,
+  link: $text_link_dark,
+  error: $text_error_dark,
+  success: $text_success_dark,
 );
 
 // 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_default_color,
+  negative: $text_error,
+  dark_error: $text_error_dark,
+  positive: $text_success,
 );
 
 $pb_dark_body_status: (
-  default: $text_dk_default,
-  negative: $error_dark,
-  positive: $text_dk_success_sm,
+  default: $text_default_dark,
+  negative: $text_error_dark,
+  positive: $text_success_dark,
 );
 
-@mixin pb_body($color: $text_lt_default) {
+@mixin pb_body($color: $text_default_color) {
   line-height: $lh_tight;
   color: $color;
   font-size: $text_default;
@@ -44,34 +44,34 @@ $pb_dark_body_status: (
 
 // Colors ======================
 @mixin pb_body_light {
-  @include pb_body($text_lt_light);
+  @include pb_body($text_light);
 }
 
 @mixin pb_body_lighter {
-  @include pb_body($text_lt_lighter);
+  @include pb_body($text_lighter);
 }
 
 @mixin pb_body_dark {
-  @include pb_body($text_dk_default);
+  @include pb_body($text_default_dark);
 }
 
 @mixin pb_body_light_dark {
-  @include pb_body($text_dk_light);
+  @include pb_body($text_light_dark);
 }
 
 @mixin pb_body_lighter_dark {
-  @include pb_body($text_dk_lighter);
+  @include pb_body($text_lighter_dark);
 }
 
 // Statuses =====================
 @mixin pb_body_negative {
-  @include pb_body($error);
+  @include pb_body($text_error);
 }
 
 @mixin pb_body_dark_error {
-  @include pb_body($error_dark_body);
+  @include pb_body($text_error_dark);
 }
 
 @mixin pb_body_positive {
-  @include pb_body($success);
+  @include pb_body($text_success);
 }

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -115,9 +115,10 @@ $pb_button_sizes: (
 
   // Icon-only button (icon prop set, no text) - square with equal padding
   // Rails: uses .pb_button_icon_only class
-  // React: detects when pb_button_content has an empty text span
+  // React: when pb_button_content is empty (no text). Do not match when content has
+  // text + icon (e.g. "Exit Fullscreen" + FA icon) which can include empty spans.
   &.pb_button_icon_only,
-  &:has(.pb_button_content > span:empty) {
+  &:has(.pb_button_content:empty) {
     aspect-ratio: 1;
     min-width: auto;
     width: auto;

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

@@ -88,7 +88,7 @@
 .pb_caption_kit_base_link,
 .pb_caption_kit_lg_link,
 .pb_caption_kit_xl_link {
-  color: $primary;
+  color: $text_link;
 }
 
 // Dark theme variants

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

@@ -2,33 +2,33 @@
 @import "../tokens/typography";
 
 $pb_caption_colors: (
-  default:        $text_lt_default,
-  light:          $text_lt_light,
-  link:           $primary,
-  lighter:        $text_lt_lighter,
-  success:        $text_lt_success_sm,
-  error:          $error,
+  default:        $text_default_color,
+  light:          $text_light,
+  link:           $text_link,
+  lighter:        $text_lighter,
+  success:        $text_success,
+  error:          $text_error,
 );
 
 $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,
+  default:        $text_default_dark,
+  light:          $text_light_dark,
+  lighter:        $text_lighter_dark,
+  link:           $text_link_dark,
+  success:        $text_success_dark,
+  error:          $text_error_dark,
 );
 
 
 @mixin caption($font_size: $font_smaller, $font_weight: $bold) {
   font-weight: $font_weight;
-  color: $text_lt_light;
+  color: $text_light;
   text-transform: uppercase;
   font-size: $font_size;
   letter-spacing: $lspace_loosest;
 }
 
-@mixin caption_color($color: $text_lt_light) {
+@mixin caption_color($color: $text_light) {
   color: $color;
 }
 
@@ -43,5 +43,5 @@ $pb_dark_caption_colors: (
 }
 
 @mixin caption_dark {
-  color: $text_dk_light;
+  color: $text_light_dark;
 }

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb

@@ -1,4 +1,6 @@
-<%= pb_rails("caption", props: { text: "Test colors" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "error" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>
+<%= pb_rails("caption", props: { text: "Caption light" }) %>
+<%= pb_rails("caption", props: { text: "Caption default", color: "default" }) %>
+<%= pb_rails("caption", props: { text: "Caption lighter", color: "lighter" }) %>
+<%= pb_rails("caption", props: { text: "Caption success", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Caption error", color: "error" }) %>
+<%= pb_rails("caption", props: { text: "Caption link", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -4,23 +4,33 @@ import Caption from "../../pb_caption/_caption"
 const CaptionColors = (props) => {
   return (
     <div>
+      <Caption 
+          text="Caption light"
+          {...props}
+      />
+      <Caption
+          color="default"
+          text="Caption default"
+          {...props}
+      />
       <Caption
-          text="Test colors"
+          color="lighter"
+          text="Caption lighter"
           {...props}
       />
       <Caption
           color="success"
-          text="Test colors"
+          text="Caption success"
           {...props}
       />
       <Caption
           color="error"
-          text="Test colors"
+          text="Caption error"
           {...props}
       />
       <Caption
           color="link"
-          text="Test colors"
+          text="Caption link"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -26,7 +26,7 @@ $transition: $transition_cubic;
   .pb_checkbox_checkmark,
   .pb_checkbox_indeterminate {
     align-items: center;
-    border: solid $border_light 2px;
+    border: solid $input_border_default 2px;
     border-radius: $border_rad_light;
     height: 22px;
     transition: background $transition_default ease, box-shadow $transition_default ease;
@@ -62,16 +62,16 @@ $transition: $transition_cubic;
     left: $offscreen;
 
     &:focus ~ .pb_checkbox_checkmark {
-        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
+        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $input_border_state;
     }
     &:checked ~ .pb_checkbox_checkmark,
     & ~ .pb_checkbox_indeterminate {
       background-color: $primary_action;
-      border-color: $primary_action;
+      border-color: $input_border_state;
 
       &:hover {
         background-color: $primary_action;
-        border-color: $primary_action;
+        border-color: $input_border_state;
       }
     }
     &:checked ~ .pb_checkbox_checkmark,
@@ -86,47 +86,47 @@ $transition: $transition_cubic;
     &:disabled ~ .pb_checkbox_checkmark {
       cursor: not-allowed;
       background-color: mix($charcoal, $white, 5%);
-      border-color: $border_light;
+      border-color: $input_border_disabled;
 
       & ~ .pb_checkbox_label {
         cursor: not-allowed;
-        color: $text_lt_light;
+        color: $text_light;
       }
       & ~ .pb_checkbox_label .pb_body_kit {
         cursor: not-allowed;
-        color: $text_lt_light;
+        color: $text_light;
       }
     }
 
     &:disabled:checked ~ .pb_checkbox_checkmark {
       background-color: $neutral;
-      border-color: $neutral;
+      border-color: $input_border_disabled;
     }
 
     &:disabled:checked:hover ~ .pb_checkbox_checkmark {
       background-color: $neutral;
-      border-color: $neutral;
+      border-color: $input_border_disabled;
     }
   }
 
   &.dark {
     input {
       &:focus ~ .pb_checkbox_checkmark {
-        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
+        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $input_border_state_dark;      
       }
 
       &:disabled ~ .pb_checkbox_checkmark {
         cursor: not-allowed;
         background-color: mix($charcoal, $white, 80%);
-        border: 2px solid $border_dark;
+        border: 2px solid $input_border_disabled_dark;
 
         & ~ .pb_checkbox_label {
           cursor: not-allowed;
-          color: $text_dk_light;
+          color: $text_light_dark;
         }
         & ~ .pb_checkbox_label .pb_body_kit {
           cursor: not-allowed;
-          color: $text_dk_light;
+          color: $text_light_dark;
         }
       }
 
@@ -136,7 +136,7 @@ $transition: $transition_cubic;
 
       &:disabled:checked:hover ~ .pb_checkbox_checkmark {
         background-color: $border_dark;
-        border-color: $border_dark;
+        border-color: $input_border_disabled_dark;
       }
     }
     
@@ -148,15 +148,15 @@ $transition: $transition_cubic;
 
     &.pb_checkbox_kit_error {
       > .pb_checkbox_checkmark {
-        border-color: $error_dark;
+        border-color: $input_border_error_dark;
        }
 
        input {
         &:checked ~ .pb_checkbox_checkmark,
         & ~ .pb_checkbox_indeterminate {
-          border-color: $primary;
+          border-color: $input_border_state_dark;
           &:hover {
-            border-color: $primary;
+            border-color: $input_border_state_dark;
           }
         }
       }
@@ -165,7 +165,7 @@ $transition: $transition_cubic;
 
   &.pb_checkbox_kit_error {
     > .pb_checkbox_checkmark {
-      border-color: $error;
+      border-color: $input_border_error;
     }
   }
 }

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -11,9 +11,11 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   connect() {
-    this.element.addEventListener('click', () => {
+    this.clickHandler = () => {
       this.toggleElement(this.target)
-    })
+    }
+    this.element.addEventListener('click', this.clickHandler)
+    
      // Check the initial state of the collapsible content and set the arrow accordingly
      if (this.target.classList.contains('is-visible')) {
       this.displayUpArrow()
@@ -21,9 +23,19 @@ export default class PbCollapsible extends PbEnhancedElement {
       this.displayDownArrow()
     }
     // Listen for a custom event to toggle the collapsible
-    document.addEventListener(`${this.target.id}`, () => {
+    this.customEventHandler = () => {
       this.toggleElement(this.target)
-    })
+    }
+    document.addEventListener(`${this.target.id}`, this.customEventHandler)
+  }
+
+  disconnect() {
+    if (this.clickHandler) {
+      this.element.removeEventListener('click', this.clickHandler)
+    }
+    if (this.customEventHandler && this.target) {
+      document.removeEventListener(`${this.target.id}`, this.customEventHandler)
+    }
   }
 
   get target() {

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

@@ -24,14 +24,14 @@
   }
 
   &:focus,
-  :focus-within {
+  &:focus-within {
     div.cal_icon_wrapper,
     input.date_picker_input {
       @include transition_default;
-      border-color: $primary;
+      border-color: $status_border_primary;
     }
     .add-on-card {
-      border-color: $primary;
+      border-color: $status_border_primary;
     }
   }
 
@@ -39,18 +39,18 @@
     &:hover {
       .add-on-card {
         cursor: pointer;
-        background-color: rgba($focus_input_light,$opacity_5);
+        background-color: rgba($input_background_state, $opacity_5);
       }
     }
   }
   .text_input_wrapper_add_on .add-on-icon {
-    color: $text_lt_light
+    color: $status_border_primary
   }
 
   .text_input_wrapper_add_on .add-on-right .text_input{
     cursor: pointer;
   }
-  
+
 }
 
 
@@ -71,7 +71,7 @@
   // Calendar Shadow and Border
   .flatpickr-calendar {
     box-shadow: $shadow_deeper;
-    border: 1px solid $border_light;
+    border: 1px solid $input_border_default;
   }
 
   // Hide Caret

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

@@ -194,6 +194,9 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     if (error) {
       base += ' error'
     }
+    if (disableInput) {
+      base += ' disabled'
+    }
     return base
   }
 
@@ -218,11 +221,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         {!hideLabel && (
            <label htmlFor={pickerId}>
             {requiredIndicator ? (
-              <Caption className="pb_date_picker_kit_label">
+              <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
+              >
                 {label} <span style={{ color: `${colors.error}` }}>*</span>
               </Caption>
             ) : (
               <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
                   text={label}
               />
             )}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -7,11 +7,11 @@
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">
         <% if object.required_indicator %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label" }) do %>
+          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) do %>
             <%= object.label %><span style="color: #DA0014;"> *</span>
           <% end %>
         <% else %>
-          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label" }) %>
+          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) %>
         <% end %>
       </label>
     <% end %>

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

@@ -136,6 +136,7 @@ module Playbook
         class_string = "cal_icon_wrapper"
         class_string += " dark" if dark
         class_string += " no_label_shift" if hide_label
+        class_string += " disabled" if disable_input
         class_string += error_class
         class_string
       end

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -5,30 +5,38 @@
   position: absolute;
   top: $space_md + 2;
   right: 0;
-  border-left: 1px solid $border_light;
+  border-left: 1px solid $input_border_default;
   width: $space_xl + $space_xs;
   height: $space_xl + 5;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-left: $space_sm - 1;
-  color: $text_lt_light;
+  color: $input_text_default;
   @media (hover: hover) {
     &:hover{
       background-color: rgba($focus_input_light,$opacity_5);
     }
   }
   &.dark {
-    color: $white;
-    border-color: $border_dark;
+    color: $input_text_default_dark;
+    border-left: 1px solid $input_border_default_dark;
   }
   &.no_label_shift {
     top: 0;
   }
   &.error {
-    border-left-color: $error;
+    border-left: 1px solid $input_border_error;
+  }
+  &.disabled {
+    border-left: 1px solid $input_border_disabled;
+    color: $input_text_disabled;
+  }
+  &.dark.disabled {
+    border-left: 1px solid $input_border_disabled_dark;
+    color: $input_text_disabled_dark;
   }
 }
 .cal_icon {
   width: $space_sm;
-}
+}