playbook_ui 15.1.0 → 15.2.0.pre.alpha.PLAY2428advancedtablerailscellpadding11387

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb

@@ -3,12 +3,12 @@
 <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
 
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-default",
     status: "default",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -18,12 +18,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-caution",
     status: "caution",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "This is the action you will be taking", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -33,16 +33,16 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-delete",
     status: "delete",
-    size: "sm", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "sm",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
   return (
     <div>
     <Flex
-        rowGap="xs" 
+        rowGap="xs"
         wrap
     >
       <Button
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
           <Button
               fullWidth
               onClick={dialog.toggle}
+              variant= {dialog.status == "delete" ? "danger" : "primary"}
           >
             {dialog.buttonOneText}
           </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb

@@ -8,12 +8,12 @@
 <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-default",
     status: "default",
-    size: "status_size", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -23,12 +23,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-info", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-info",
     status: "info",
-    size: "status_size", 
-    title: "Information", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Information",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -37,12 +37,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-caution",
     status: "caution",
-    size: "status_size", 
-    title: "Are you Sure?", 
-    text: "This is the action you will be taking", 
+    size: "status_size",
+    title: "Are you Sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -52,27 +52,27 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-delete",
     status: "delete",
-    size: "status_size", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "status_size",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
+            <%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
         <% end %>
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-error", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-error",
     status: "error",
-    size: "status_size", 
-    title: "Error Message", 
-    text: "Text explaining the error", 
+    size: "status_size",
+    title: "Error Message",
+    text: "Text explaining the error",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -81,12 +81,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-success", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-success",
     status: "success",
-    size: "status_size", 
-    title: "Success!", 
-    text: "Text explaining what is successful", 
+    size: "status_size",
+    title: "Success!",
+    text: "Text explaining what is successful",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -83,8 +83,8 @@ const DialogStatus = () => {
 
   return (
     <div>
-      <Flex 
-          rowGap="xs" 
+      <Flex
+          rowGap="xs"
           wrap
       >
         <Button
@@ -117,7 +117,7 @@ const DialogStatus = () => {
         >
           {"Success Status"}
         </Button>
-        <Button 
+        <Button
             marginRight="md"
             onClick={toggleErrorAlert}
         >
@@ -152,6 +152,7 @@ const DialogStatus = () => {
                   <Button
                       onClick={dialog.toggle}
                       paddingRight="xl"
+                      variant={dialog.status == "delete" ? "danger" : "primary"}
                   >
                   {dialog.buttonOneText}
                   </Button>

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -141,4 +141,12 @@
       }
     }
   }
+
+  .pb_draggable_item:has(.pb_item_kit) {
+      border-bottom: 1px solid $border_light;
+  }
+
+  .pb_draggable_item:has(.pb_item_kit):last-child {
+      border-bottom: none;
+  }
 }

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -10,9 +10,15 @@
 @import "./scss_partials/dropdown_animation";
 @import "dropdown_mixin";
 
-[class*="pb_dropdown"] {
+.pb_dropdown_default,
+.pb_dropdown_subtle,
+.pb_dropdown_default_separators_hidden,
+.pb_dropdown_subtle_separators_hidden {
   .dropdown_wrapper {
-    [class*="dropdown_trigger_wrapper"] {
+    .dropdown_trigger_wrapper,
+    .dropdown_trigger_wrapper_focus,
+    .dropdown_trigger_wrapper_focus_select_only,
+    .dropdown_trigger_wrapper_select_only {
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
@@ -48,11 +54,11 @@
         transition: box-shadow 0.15s ease-in-out;
       }
 
-      &[class*="_select_only"] {
+      &.dropdown_trigger_wrapper_select_only {
         box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
       }
 
-      &[class*="_focus"] {
+      &.dropdown_trigger_wrapper_focus {
         box-shadow: 0px 0px 0 1px $primary !important;
         transition: box-shadow 0.1s ease-in-out;
       }
@@ -69,7 +75,12 @@
       z-index: $z_1;
       width: 100%;
 
-      [class*="pb_dropdown_option"] {
+      .pb_dropdown_option,
+      .pb_dropdown_option_list,
+      .pb_dropdown_option_selected,
+      .pb_dropdown_option_focused,
+      .pb_dropdown_option_list_focused,
+      .pb_dropdown_option_selected_focused {
         padding-left: $space_sm;
         padding-right: $space_sm;
         padding-top: $space_xs;
@@ -79,11 +90,14 @@
           background-color: $bg_light;
         }
 
-        &[class*="_focused"] {
+        &.pb_dropdown_option_focused,
+        &.pb_dropdown_option_list_focused,
+        &.pb_dropdown_option_selected_focused {
           background-color: $bg_light;
         }
 
-        &[class*="_list"] {
+        &.pb_dropdown_option_list,
+        &.pb_dropdown_option_list_focused {
           border-bottom: 1px solid $border_light;
 
           &:hover, &:focus {
@@ -92,7 +106,8 @@
             }
           }
         }
-        &[class*="selected"] {
+        &.pb_dropdown_option_selected,
+        &.pb_dropdown_option_selected_focused {
           background-color: $primary;
           color: $white;
           [class^="pb_body"],
@@ -141,41 +156,66 @@
     }
 
     &.error {
-      [class*=pb_body_kit] {
+      .pb_body_kit_negative {
         margin-top: $space_xs / 2;
       }
 
-      [class*="dropdown_trigger_wrapper"] {
+      .dropdown_trigger_wrapper,
+      .dropdown_trigger_wrapper_focus,
+      .dropdown_trigger_wrapper_focus_select_only,
+      .dropdown_trigger_wrapper_select_only {
         border-color: $error;
         box-shadow: none !important;
       }
     }
   }
 
-  &[class*="separators_hidden"] {
+  &.pb_dropdown_default_separators_hidden,
+  &.pb_dropdown_subtle_separators_hidden {
     .dropdown_wrapper {
       .pb_dropdown_container {
 
-        [class*="pb_dropdown_option"] {
+        .pb_dropdown_option,
+        .pb_dropdown_option_list,
+        .pb_dropdown_option_selected,
+        .pb_dropdown_option_focused,
+        .pb_dropdown_option_list_focused,
+        .pb_dropdown_option_selected_focused {
           border: none;
         }
       }
     }
   }
 
-  &[class*="subtle"] {
+  &.pb_dropdown_subtle,
+  &.pb_dropdown_subtle_separators_hidden {
     .dropdown_wrapper {
       .pb_dropdown_container {
         
-        [class*="pb_dropdown_option"]:first-child {
+        .pb_dropdown_option:first-child,
+        .pb_dropdown_option_list:first-child,
+        .pb_dropdown_option_selected:first-child,
+        .pb_dropdown_option_focused:first-child,
+        .pb_dropdown_option_list_focused:first-child,
+        .pb_dropdown_option_selected_focused:first-child {
           margin-top: $space_xs;
         }
 
-        [class*="pb_dropdown_option"]:last-child {
+        .pb_dropdown_option:last-child,
+        .pb_dropdown_option_list:last-child,
+        .pb_dropdown_option_selected:last-child,
+        .pb_dropdown_option_focused:last-child,
+        .pb_dropdown_option_list_focused:last-child,
+        .pb_dropdown_option_selected_focused:last-child {
           margin-bottom: $space_xs;
         }
 
-        [class*="pb_dropdown_option"] {
+        .pb_dropdown_option,
+        .pb_dropdown_option_list,
+        .pb_dropdown_option_selected,
+        .pb_dropdown_option_focused,
+        .pb_dropdown_option_list_focused,
+        .pb_dropdown_option_selected_focused {
           margin: $space_xs;
           padding: $space_xs;
           border-radius: $border_radius_md;
@@ -193,24 +233,44 @@
           }
         }
         
-        [class*="pb_dropdown_option"]:last-child::after {
+        .pb_dropdown_option:last-child::after,
+        .pb_dropdown_option_list:last-child::after,
+        .pb_dropdown_option_selected:last-child::after,
+        .pb_dropdown_option_focused:last-child::after,
+        .pb_dropdown_option_list_focused:last-child::after,
+        .pb_dropdown_option_selected_focused:last-child::after {
           display: none; 
         }
       }
     }
   
-    &[class*="separators_hidden"] {
+    &.pb_dropdown_subtle_separators_hidden {
       .dropdown_wrapper {
         .pb_dropdown_container {
-          [class*="pb_dropdown_option"]:first-child {
+          .pb_dropdown_option:first-child,
+          .pb_dropdown_option_list:first-child,
+          .pb_dropdown_option_selected:first-child,
+          .pb_dropdown_option_focused:first-child,
+          .pb_dropdown_option_list_focused:first-child,
+          .pb_dropdown_option_selected_focused:first-child {
             margin-top: $space_xs;
           }
   
-          [class*="pb_dropdown_option"]:last-child {
+          .pb_dropdown_option:last-child,
+          .pb_dropdown_option_list:last-child,
+          .pb_dropdown_option_selected:last-child,
+          .pb_dropdown_option_focused:last-child,
+          .pb_dropdown_option_list_focused:last-child,
+          .pb_dropdown_option_selected_focused:last-child {
             margin-bottom: $space_xs;
           }
 
-          [class*="pb_dropdown_option"] {
+          .pb_dropdown_option,
+          .pb_dropdown_option_list,
+          .pb_dropdown_option_selected,
+          .pb_dropdown_option_focused,
+          .pb_dropdown_option_list_focused,
+          .pb_dropdown_option_selected_focused {
             padding: $space_xxs $space_xs;
             margin: $space_xxs $space_xs;
      
@@ -218,7 +278,8 @@
               height: 0px;
             }
 
-            &[class*="selected"] {
+            &.pb_dropdown_option_selected,
+            &.pb_dropdown_option_selected_focused {
               border-bottom: none;
             }
           }
@@ -229,7 +290,10 @@
 
   &.dark {
     .dropdown_wrapper {
-      [class*="dropdown_trigger_wrapper"] {
+      .dropdown_trigger_wrapper,
+      .dropdown_trigger_wrapper_focus,
+      .dropdown_trigger_wrapper_focus_select_only,
+      .dropdown_trigger_wrapper_select_only {
         @include pb_body_light_dark;
         background-color: rgba($white, 0.1) !important;
         background: none;
@@ -244,7 +308,7 @@
         [class^="pb_body"] {
           color: $white;
         }
-        &[class*="_select_only"] {
+        &.dropdown_trigger_wrapper_select_only {
           box-shadow: inset 0 -11px 20px rgba($white, 0.05);
         }
         .dropdown_input {
@@ -254,7 +318,10 @@
       }
 
       &.error {
-        [class*="dropdown_trigger_wrapper"] {
+        .dropdown_trigger_wrapper,
+        .dropdown_trigger_wrapper_focus,
+        .dropdown_trigger_wrapper_focus_select_only,
+        .dropdown_trigger_wrapper_select_only {
           border-color: $error_dark;
         }
       }
@@ -268,19 +335,28 @@
         color: $white !important;
       }
 
-      [class*="pb_dropdown_option"] {
+      .pb_dropdown_option,
+      .pb_dropdown_option_list,
+      .pb_dropdown_option_selected,
+      .pb_dropdown_option_focused,
+      .pb_dropdown_option_list_focused,
+      .pb_dropdown_option_selected_focused {
         &:hover {
           background-color: $hover_dark;
         }
 
-        &[class*="_focused"] {
+        &.pb_dropdown_option_focused,
+        &.pb_dropdown_option_list_focused,
+        &.pb_dropdown_option_selected_focused {
           background-color: $hover_dark;
         }
 
-        &[class*="_list"] {
+        &.pb_dropdown_option_list,
+        &.pb_dropdown_option_list_focused {
           border-color: rgba($white, 0.15);
         }
-        &[class*="selected"] {
+        &.pb_dropdown_option_selected,
+        &.pb_dropdown_option_selected_focused {
           background-color: $primary;
           border-bottom: rgba($white, 0.15);
         }

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,6 +21,15 @@
   ]
 %>
 
+<%
+  example_typeahead_options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
@@ -89,8 +98,10 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
+  <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

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

@@ -3,7 +3,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +26,7 @@ type IconCircleProps = {
     | "orange"
     | "green"
     | "lighter",
-}
+} & GlobalProps
 
 const IconCircle = (props: IconCircleProps) => {
   const {

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -3,51 +3,45 @@
 @import "../tokens/spacing";
 @import "../pb_icon_circle/icon_circle";
 
-[class^=pb_icon_stat_value_kit]{
+.pb_icon_stat_value_kit_horizontal,
+.pb_icon_stat_value_kit_vertical
+ {
   display: flex;
   align-items: baseline;
 
-  &[class*=_vertical]  {
+  &.pb_icon_stat_value_kit_vertical {
     flex-direction: column;
 
-    &[class*=_center]  {
+    &.text_align_center {
       align-items: center;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: center;
       }
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       align-items: flex-end;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: right;
       }
     }
-
-    [class^=pb_icon_circle] {
-      margin-bottom: $space-xs;
-    }
   }
 
-  &[class*=_horizontal]  {
+  &.pb_icon_stat_value_kit_horizontal {
     align-items: center;
 
-    &[class*=_center]  {
+    &.text_align_center {
       justify-content: center;
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       justify-content: flex-end;
     }
-
-    [class^=pb_icon_circle] {
-      margin-right: $space-sm;
-    }
   }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,8 +33,7 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-    | "lighter",
-}
+} & GlobalProps
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -50,13 +49,13 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'lighter',
+    variant = 'default',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
+    buildCss('pb_icon_stat_value_kit', orientation), globalProps(props),
     className
   )
   const titleSize = function(size: "sm" | "md" | "lg") {
@@ -101,6 +100,8 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
       <IconCircle
           dark={dark}
           icon={icon}
+          marginBottom={orientation == 'vertical' ? 'xs' : undefined}
+          marginRight={orientation == 'horizontal' ? 'sm' : undefined}
           size={size}
           variant={variant}
       />

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -3,6 +3,8 @@
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,
         icon: object.icon,
+        margin_right: object.icon_margin_right,
+        margin_bottom: object.icon_margin_bottom,
         size: object.size,
         variant: object.variant }) %>