playbook_ui 16.2.0.pre.alpha.play278114406 → 16.2.0.pre.alpha.play280714580

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 22fcf037a76f8e98a9d2492f8c0093f91534ba615ba874c29d83d450c967967c
-  data.tar.gz: aedd938f1080c505157ef5bc88f040659b1f9fe49f529c5892e4024d46f82ae6
+  metadata.gz: 9b2ec7eb374acd4195bd9827df5b3366eb506cee37d30b47f0a494ff22878e52
+  data.tar.gz: dbd183e757ca8c8ea7344917109f23c411715b35affb325d927be4e7d3a5723a
 SHA512:
-  metadata.gz: abf2230a028c5151544466f9bee35f06d196335713c15a31d8e0fefa6b61fe626cbf778bf5139609eee1f60584e71d07b7a215c8688256fef8022ad4f55640b2
-  data.tar.gz: 11c28cb89a3dccfb536741a4ce3fb33e1a5aa58aca7b6dddb3057274193163e222954df4928726a80e463cdd2ea6d86bf7f762637766054ad58227bf606ee42e
+  metadata.gz: d7c56718bdae11326ebcc0eeff926bd4f3da4b242b29ef77c32495b5e9c3a5b1c3fa65e9b5771b490289c827d2c09afa042d9c605e75d16e6d2f564eea55cf58
+  data.tar.gz: 87498891fc1f847cbb40612311be38532b5ff304a3d6907a0c98ac16fa1006f4b6902d2cf9a48f39d6d20602c15be0226038287f75524f1167b8c7883c3cab4e

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_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,11 +11,9 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   connect() {
-    this.clickHandler = () => {
+    this.element.addEventListener('click', () => {
       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()
@@ -23,19 +21,9 @@ export default class PbCollapsible extends PbEnhancedElement {
       this.displayDownArrow()
     }
     // Listen for a custom event to toggle the collapsible
-    this.customEventHandler = () => {
+    document.addEventListener(`${this.target.id}`, () => {
       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
   }
 

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/docs/_date_picker_positions.md

@@ -1,6 +1,7 @@
 Datepicker supports `position` options from [Flatpickr Options Documentation](https://flatpickr.js.org/options/). There are multiple positioning options to choose from.
 
 **Note:** In order for the above prop to work properly, you must also send `staticPosition={false}` to your Datepicker kit instance.
+If you are using the Datepicker within a Dialog, you cannot use the `staticPosition`/`static_position` prop.
 
 #### Affix Datepicker Upon Scrolling
 

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;
-}
+}

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

@@ -1,4 +1,5 @@
 @import "../../pb_textarea/textarea_mixin";
+@import "../../tokens/colors";
 
 .pb_date_picker_kit {
 
@@ -13,6 +14,7 @@
     input::placeholder,
     .date_picker_input .placeholder {
       @include pb_body_light;
+      color: $input_text_default;
     }
 
     input,
@@ -24,17 +26,90 @@
 
     input:hover,
     .date_picker_input:hover {
-      background-color: rgba($focus_input_light, $opacity_5);
+      background-color: $input_background_state;
     }
 
     input:focus,
     .date_picker_input:focus,
     input:-webkit-autofill:focus,
     .date_picker_input:-webkit-autofill:focus {
-      @include pb_textarea_focus;
+      @include pb_textarea_focus_light;
       @include transition_default;
-      border-color: $primary;
-      background-color: rgba($focus_input_light, $opacity_5);
+    }
+
+    input:disabled,
+    .date_picker_input:disabled {
+      border-color: $input_border_disabled;
+      background-color: $input_background_disabled;
+      color: $input_text_disabled;
+    }
+
+    input:disabled::placeholder,
+    .date_picker_input:disabled::placeholder {
+      color: $input_text_disabled;
+    }
+  }
+
+  &.dark {
+    .date_picker_input_wrapper {
+      input::placeholder,
+      .date_picker_input .placeholder {
+        @include pb_body_light_dark;
+        color: $input_text_default_dark;
+      }
+
+      input,
+      .date_picker_input {
+        @include pb_textarea_dark;
+        @include pb_body_dark;
+        overflow: hidden;
+      }
+
+      input:hover,
+      .date_picker_input:hover {
+        background-color: $input_background_state_dark;
+      }
+
+      input:focus,
+      .date_picker_input:focus,
+      input:active,
+      .date_picker_input:active,
+      input:-webkit-autofill:focus,
+      .date_picker_input:-webkit-autofill:focus {
+        @include pb_textarea_focus_dark;
+        @include transition_default;
+      }
+
+      input:-webkit-autofill,
+      input:-webkit-autofill:hover,
+      input:-internal-autofill-selected,
+      .date_picker_input:-webkit-autofill,
+      .date_picker_input:-webkit-autofill:hover,
+      .date_picker_input:-internal-autofill-selected {
+        background-color: $input_background_state_dark;
+        color: $input_text_default_dark;
+      }
+
+      input:disabled,
+      .date_picker_input:disabled {
+        border-color: $input_border_disabled_dark;
+        background-color: $input_background_disabled_dark;
+        color: $input_text_disabled_dark;
+      }
+
+      input:disabled::placeholder,
+      .date_picker_input:disabled::placeholder {
+        color: $input_text_disabled_dark;
+      }
+    }
+
+    &.error {
+      .date_picker_input_wrapper {
+        input,
+        .date_picker_input {
+          border-color: $input_border_error_dark;
+        }
+      }
     }
   }
 
@@ -46,7 +121,7 @@
 
       input,
       .date_picker_input {
-        border-color: $error;
+        border-color: $input_border_error;
       }
     }
   }