playbook_ui 14.25.0.pre.alpha.PLAY2361datepickerarrownav9708 → 14.25.0.pre.alpha.testingcss9713

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `rowGap` | `columnGap` | **Type**: String | Object | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `rowGap` and the `columnGap` props to the same size and creates equal space within a flex container.
+
+Setting the `rowGap` prop creates space between rows in a flex container.
+
+Setting the `columnGap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing an object with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -24,17 +24,11 @@ module Playbook
                      default: "none",
                      deprecated: true
 
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[xxs xs sm md lg xl none],
-                 default: "none"
+      prop :gap
 
-      prop :row_gap, type: Playbook::Props::Enum,
-                     values: %w[xxs xs sm md lg xl none],
-                     default: "none"
+      prop :row_gap
 
-      prop :column_gap, type: Playbook::Props::Enum,
-                        values: %w[xxs xs sm md lg xl none],
-                        default: "none"
+      prop :column_gap
 
       prop :reverse, type: Playbook::Props::Boolean,
                      default: false
@@ -56,31 +50,71 @@ module Playbook
                   default: false
 
       def classname
-        generate_classname("pb_flex_kit",
-                           orientation_class,
-                           justify_class,
-                           align_class,
-                           inline_class,
-                           reverse_class,
-                           wrap_class,
-                           spacing_class,
-                           gap_class,
-                           row_gap_class,
-                           column_gap_class,
-                           align_self_class)
+        [
+          "pb_flex_kit",
+          orientation_class,
+          justify_class,
+          align_class,
+          inline_class,
+          reverse_class,
+          wrap_class,
+          spacing_class,
+          gap_class,
+          row_gap_class,
+          column_gap_class,
+          align_self_class,
+          prop(:classname),
+          spacing_props,
+          dark_props,
+          width_props,
+          min_width_props,
+          max_width_props,
+          gap_props,
+          z_index_props,
+          number_spacing_props,
+          shadow_props,
+          line_height_props,
+          display_props,
+          cursor_props,
+          flex_direction_props,
+          flex_wrap_props,
+          justify_content_props,
+          justify_self_props,
+          align_items_props,
+          align_content_props,
+          align_self_props,
+          flex_props,
+          flex_grow_props,
+          flex_shrink_props,
+          order_props,
+          position_props,
+          hover_props,
+          border_radius_props,
+          text_align_props,
+          overflow_props,
+          truncate_props,
+          left_props,
+          top_props,
+          right_props,
+          bottom_props,
+          vertical_align_props,
+          height_props,
+          min_height_props,
+          max_height_props,
+        ].compact.flatten.join(" ")
       end
 
     private
 
       def orientation_class
-        "orientation_#{orientation}"
+        "pb_flex_kit_orientation_#{orientation}"
       end
 
       def horizontal_class
         if orientation == "row"
-          "justify_content_#{horizontal}"
+          "pb_flex_kit_justify_content_#{horizontal}"
         elsif align == "none"
-          "align_items_#{horizontal}"
+          "pb_flex_kit_align_items_#{horizontal}"
         end
       end
 
@@ -88,27 +122,27 @@ module Playbook
         if justify == "none"
           horizontal_class
         else
-          "justify_content_#{justify}"
+          "pb_flex_kit_justify_content_#{justify}"
         end
       end
 
       def inline_class
-        inline ? "inline" : nil
+        inline ? "pb_flex_kit_inline" : nil
       end
 
       def spacing_class
-        "spacing_#{spacing}"
+        spacing != "none" ? "pb_flex_kit_spacing_#{spacing}" : nil
       end
 
       def reverse_class
-        reverse ? "reverse" : nil
+        reverse ? "pb_flex_kit_reverse" : nil
       end
 
       def vertical_class
         if orientation == "row"
-          "align_items_#{vertical}"
+          "pb_flex_kit_align_items_#{vertical}"
         elsif justify == "none"
-          "justify_content_#{vertical}"
+          "pb_flex_kit_justify_content_#{vertical}"
         end
       end
 
@@ -116,7 +150,7 @@ module Playbook
         if align == "none"
           vertical_class
         else
-          "align_items_#{align}"
+          "pb_flex_kit_align_items_#{align}"
         end
       end
 
@@ -124,35 +158,35 @@ module Playbook
         if align_self == "none"
           nil
         else
-          "align_self_#{align_self}"
+          "pb_flex_kit_align_self_#{align_self}"
         end
       end
 
       def wrap_class
-        wrap ? "wrap" : nil
+        wrap ? "pb_flex_kit_wrap" : nil
       end
 
       def gap_class
-        if gap == "none"
+        if gap == "none" || gap.nil? || gap.is_a?(Hash)
           nil
         else
-          "gap_#{gap}"
+          "pb_flex_kit_gap_#{gap}"
         end
       end
 
       def row_gap_class
-        if row_gap == "none"
+        if row_gap == "none" || row_gap.nil? || row_gap.is_a?(Hash)
           nil
         else
-          "rowGap_#{row_gap}"
+          "pb_flex_kit_rowGap_#{row_gap}"
         end
       end
 
       def column_gap_class
-        if column_gap == "none"
+        if column_gap == "none" || column_gap.nil? || column_gap.is_a?(Hash)
           nil
         else
-          "columnGap_#{column_gap}"
+          "pb_flex_kit_columnGap_#{column_gap}"
         end
       end
     end

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -17,7 +17,52 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
+        [
+          "pb_flex_item_kit",
+          fixed_size_class,
+          grow_class,
+          shrink_class,
+          display_flex_class,
+          align_self_class,
+          prop(:classname),
+          spacing_props,
+          dark_props,
+          width_props,
+          min_width_props,
+          max_width_props,
+          gap_props,
+          z_index_props,
+          number_spacing_props,
+          shadow_props,
+          line_height_props,
+          display_props,
+          cursor_props,
+          flex_direction_props,
+          flex_wrap_props,
+          justify_content_props,
+          justify_self_props,
+          align_items_props,
+          align_content_props,
+          align_self_props,
+          flex_props,
+          flex_grow_props,
+          flex_shrink_props,
+          order_props,
+          position_props,
+          hover_props,
+          border_radius_props,
+          text_align_props,
+          overflow_props,
+          truncate_props,
+          left_props,
+          top_props,
+          right_props,
+          bottom_props,
+          vertical_align_props,
+          height_props,
+          min_height_props,
+          max_height_props,
+        ].compact.flatten.join(" ")
       end
 
       def inline_styles
@@ -32,23 +77,23 @@ module Playbook
     private
 
       def align_self_class
-        align_self ? "align_self_#{align_self}" : ""
+        align_self ? "pb_flex_item_kit_align_self_#{align_self}" : nil
       end
 
       def display_flex_class
-        display_flex ? "display_flex" : nil
+        display_flex ? "pb_flex_item_kit_display_flex" : nil
       end
 
       def fixed_size_class
-        fixed_size.present? ? "fixed_size" : nil
+        fixed_size.present? ? "pb_flex_item_kit_fixed_size" : nil
       end
 
       def grow_class
-        grow ? "grow" : nil
+        grow ? "pb_flex_item_kit_grow" : nil
       end
 
       def shrink_class
-        shrink ? "shrink" : nil
+        shrink ? "pb_flex_item_kit_shrink" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -9,7 +9,7 @@
 
 @mixin error-state-center-selectors {
   &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
-  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_button_kit) {
     align-items: center;
   }
 }

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,13 +1,13 @@
 @import "../tokens/spacing";
 @import "./error_state_mixin";
 
-[class^=pb_form_group_kit] {
+.pb_form_group_kit {
   display: inline-flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: flex-start;
 
-  &[class*=_full] {
+  &._full {
     display: flex;
     justify-content: space-between;
     & > div {
@@ -21,18 +21,18 @@
 @include error-state-left-side-select-kit;
 @include error-state-right-side-select-kit;
 
-  & [class^=pb_text_input_kit] .text_input_wrapper,
-  & [class^=pb_date_picker_kit] .input_wrapper,
-  & [class^=pb_select] {
+  & .pb_text_input_kit .text_input_wrapper,
+  & .pb_date_picker_kit .input_wrapper,
+  & .pb_select {
     margin-bottom: 0;
   }
 
-  [class^=pb_text_input_kit].dark .text_input_wrapper {
+  .pb_text_input_kit.dark .text_input_wrapper {
     margin-bottom: 0
   }
 
-  & > [class^=pb_text_input_kit]:not(:last-child) {
-    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+  & > .pb_text_input_kit:not(:last-child) {
+    .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -42,7 +42,7 @@
         outline-offset: -1px;
       }
     }
-    .text_input_wrapper_add_on .add-on-right [class^=pb_card_kit] {
+    .text_input_wrapper_add_on .add-on-right .pb_card_kit {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -55,25 +55,25 @@
     }
   }
 
-  & > [class^=pb_text_input_kit]:not(:first-child) {
-    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+  & > .pb_text_input_kit:not(:first-child) {
+    .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
-    .text_input_wrapper_add_on .add-on-left [class^=pb_card_kit] {
+    .text_input_wrapper_add_on .add-on-left .pb_card_kit {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
   }
 
-  & > [class^=pb_button_kit]:not(:last-child) {
+  & > .pb_button_kit:not(:last-child) {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     min-height: 45px;
     margin-bottom: 16px;
   }
 
-  & > [class^=pb_button_kit]:not(:first-child) {
+  & > .pb_button_kit:not(:first-child) {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     border-left-width: 0;
@@ -81,72 +81,72 @@
     margin-bottom: 16px;
   }
 
-  & > [class^=pb_phone_number_input]:not(:last-child) {
-    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+  & > .pb_phone_number_input:not(:last-child) {
+    .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-color: transparent;
     }
-    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
-    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+    .pb_text_input_kit .text_input_wrapper input:focus,
+    .pb_text_input_kit .text_input_wrapper .text_input:focus {
       border-right-color: $primary;
     } 
-    [class^=pb_text_input_kit].error .text_input_wrapper input,
-    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+    .pb_text_input_kit.error .text_input_wrapper input,
+    .pb_text_input_kit.error .text_input_wrapper .text_input {
       border-right-color: $error;
     }   
   }
 
-  & > [class^=pb_phone_number_input]:not(:first-child), [class^=pb_passphrase]:not(:first-child) {
-    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+  & > .pb_phone_number_input:not(:first-child), .pb_passphrase:not(:first-child) {
+    .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
   }
 
-  & > div:not(:first-child) > [class^=pb_phone_number_input] {
+  & > div:not(:first-child) > .pb_phone_number_input {
     .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
   }
 
-  & > div:not(:last-child) > [class^=pb_phone_number_input] {
+  & > div:not(:last-child) > .pb_phone_number_input {
     .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-color: transparent;
     }
-    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
-    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+    .pb_text_input_kit .text_input_wrapper input:focus,
+    .pb_text_input_kit .text_input_wrapper .text_input:focus {
       border-right-color: $primary;
     } 
-    [class^=pb_text_input_kit].error .text_input_wrapper input,
-    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+    .pb_text_input_kit.error .text_input_wrapper input,
+    .pb_text_input_kit.error .text_input_wrapper .text_input {
       border-right-color: $error;
     }  
   }
 
-  &[class*=rails] > [class^=pb_date_picker_kit] {
+  &.rails > .pb_date_picker_kit {
     margin-bottom: 0px;
   }
 
-  & > [class^=pb_date_picker_kit]:not(:last-child) {
-    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
+  & > .pb_date_picker_kit:not(:last-child) {
+    .input_wrapper input, .pb_text_input_kit .date_picker_input_wrapper .flatpickr-wrapper {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
     }
   }
 
-  & > [class^=pb_date_picker_kit]:not(:first-child) {
-    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
+  & > .pb_date_picker_kit:not(:first-child) {
+    .input_wrapper input, .pb_text_input_kit .date_picker_input_wrapper .flatpickr-wrapper {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
   }
 
-  & > [class^=pb_select]:not(:last-child) {
+  & > .pb_select:not(:last-child) {
     margin-bottom: 0px;
     .pb_select_kit_wrapper select {
       border-bottom-right-radius: 0;
@@ -159,7 +159,7 @@
     }
   }
 
-  & > [class^=pb_select]:not(:first-child) {
+  & > .pb_select:not(:first-child) {
     margin-bottom: 0px;
     .pb_select_kit_wrapper select {
       border-bottom-left-radius: 0;
@@ -167,34 +167,34 @@
     }
   }
 
-  & > [class^=pb_selectable_card_kit]:not(:last-child) label {
+  & > .pb_selectable_card_kit:not(:last-child) label {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     border-right-color: transparent;
   }
-  & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
+  & > .pb_selectable_card_kit input[type="checkbox"]:not(:checked) ~ label, .pb_selectable_card_kit input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
     }
   }
 
-  & > [class^=pb_selectable_card_kit]:not(:first-child) label {
+  & > .pb_selectable_card_kit:not(:first-child) label {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
-  & > [class^=pb_selectable_card_icon_kit]:not(:last-child) [class^=pb_selectable_card_kit] label {
+  & > .pb_selectable_card_icon_kit:not(:last-child) .pb_selectable_card_kit label {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
   }
 
-  & > [class^=pb_selectable_card_icon_kit]:not(:first-child) [class^=pb_selectable_card_kit] label {
+  & > .pb_selectable_card_icon_kit:not(:first-child) .pb_selectable_card_kit label {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
-  & > [class^=pb_selectable_card_icon_kit]:not(:last-child) {
-    [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked)~ label {
+  & > .pb_selectable_card_icon_kit:not(:last-child) {
+    .pb_selectable_card_kit input[type="checkbox"]:not(:checked) ~ label, .pb_selectable_card_kit input[type="radio"]:not(:checked)~ label {
       border-right-color: transparent;
       &:hover {
         border-right-color: $slate;
@@ -202,12 +202,12 @@
     }
   }
 
-  & > [class^=pb_typeahead_kit] {
+  & > .pb_typeahead_kit {
     min-width: 200px;
   }
 
-  & > [class^=pb_typeahead_kit]:not(:last-child) {
-    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+  & > .pb_typeahead_kit:not(:last-child) {
+    .pb_text_input_kit .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -215,8 +215,8 @@
     }
   }
 
-  & > [class^=pb_typeahead_kit]:not(:first-child) {
-    [class^=pb_text_input_kit] .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
+  & > .pb_typeahead_kit:not(:first-child) {
+    .pb_text_input_kit .text_input_wrapper input, .pb_text_input_kit .text_input_wrapper .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -10,7 +10,7 @@ $pb_form_pill_height: 27px;
 $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $product_colors));
 
 
-[class^=pb_form_pill_kit] {
+.pb_form_pill_kit {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -27,7 +27,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     font-size: 17px;
   }
 
-  &[class*=wrapped] {
+  &.wrapped {
     height: max-content;
     padding-top: $space-xxs;
     padding-bottom: $space-xxs;
@@ -175,7 +175,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
       font-size: 15px;
       border-radius: 50%;
     }
-    [class^=pb_avatar_kit] .avatar_wrapper {
+    .pb_avatar_kit .avatar_wrapper {
       flex-basis: 14px;
       height: 14px;
       margin-top: 3px;
@@ -435,11 +435,11 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
   }
 
-  &[class*=lowercase] {
+  &.lowercase {
     text-transform: lowercase;
   }
 
-  &[class*=none] {
+  &.none {
     text-transform: none;
   }
 }

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -1,12 +1,12 @@
 @import "../tokens/colors";
 
-[class^=pb_gauge_kit] {
+.pb_gauge_kit {
 
   .fix {
     fill: $text_lt_default;
     stroke: none;
 
-    &[class*=dark] {
+    &.dark {
       fill: $text_dk_default;
     }
   }
@@ -16,7 +16,7 @@
     stroke: none;
     font: $regular $font_larger $font_family_base;
 
-    &[class*=dark] {
+    &.dark {
       fill: $text_dk_light;
     }
   }
@@ -25,7 +25,7 @@
     stroke: none;
     font: $regular $font_base $font_family_base;
 
-    &[class*=dark] {
+    &.dark {
       fill: $text_dk_light;
     }
   }
@@ -38,7 +38,7 @@
     stroke-linejoin: round;
   }
 
-  &[class*=dark] {
+  &.dark {
     color: $text_dk_default;
 
     .pb_title_kit_size_1,

data/app/pb_kits/playbook/pb_hashtag/_hashtag.scss

@@ -1,3 +1,3 @@
-[class^=pb_hastag_kit] {
+.pb_hastag_kit {
   display: inline-block;
 }

data/app/pb_kits/playbook/pb_highlight/_highlight.scss

@@ -1,4 +1,4 @@
-[class^=pb_highlight_kit] {
+.pb_highlight_kit {
   background-color: rgba($yellow,$opacity_2);
 
   mark {

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -242,4 +242,8 @@ svg {
       animation: fa-spin 1s infinite linear;
     }
   }
+
+  &.dark {
+    color: white;
+  }
 }

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -14,7 +14,7 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
-[class^=pb_icon_circle_kit] {
+.pb_icon_circle_kit {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -29,7 +29,7 @@ $pb_icon_circle_sizes: (
 
   i,
   svg {
-    &[class^=pb_icon_kit] {
+    &.pb_icon_kit {
       width: 100%;
       height: 100%;
       display: block;