playbook_ui 15.1.0.pre.alpha.PLAY2535fixAT20rowcutoff11153 → 15.1.0.pre.alpha.PLAY251810942

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 605a9508e2806d87216eba2cf0123146880c438180f54bee16ef200cc916f979
-  data.tar.gz: ff2c37eb16858a44080b2f50d08939dbcdf3f22137aef654305e9a562b03d191
+  metadata.gz: ea9f5c8acfb10e8fb3d40fea187b82854b1fb068361853c9b032f91fca4685ad
+  data.tar.gz: ff8472f9f4055f5b24cb17583c02c37fa5cc022f37bf7d36869cb4d2dc06feaf
 SHA512:
-  metadata.gz: 2a313217c937b9e667ab7ddf69d20efa047e55ce5dcfaa2bfe196e519b3092ab76e0ef1ea70c32e398981b4e5c54ec1607ce5693f4b37688d24a9963fdd1b20f
-  data.tar.gz: 5b8edc81ec2a44a353afdd604485c818e2d1b5cb2a73e8d6a6f229b168dd6d83b6e9fe047ff54c0995669e553a98c67a2639769a80801f902e916e465b6e07a4
+  metadata.gz: a7a3df82c8d6bb097dc840c452b3658a4751f3ecb1efde791db7043328cca7a1450adb4d56b0b1d52e13ebd7e75163573105a2910bd01faeca49c05937086f83
+  data.tar.gz: 869e0b7510f081c28a277b0f77f1c96e2f63dccfc5955913140a00952741545f79e728370a234ded1cedba4fde080bbd396650e357a37b24ede37ac55428bfff

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -203,13 +203,6 @@ export function useTableState({
     onRowPinningChange({ top: allPinned });
   }, [table, pinnedRows?.value?.top?.join(',')]);
 
-  // Set pagination state when pagination is enabled
-  useEffect(() => {
-    if (pagination && paginationProps?.pageSize) {
-      table.setPageSize(paginationProps.pageSize);
-    }
-  }, [pagination, paginationProps?.pageSize, table]);
-
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

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

@@ -19,10 +19,6 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
-  label {
-    display: block !important;
-  }
-
   &:focus,
   :focus-within {
     div.cal_icon_wrapper,

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", variant: "danger", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "Yes, Action", 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,7 +93,6 @@ 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", variant: "danger" }) %>
+            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
             <%= 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,7 +152,6 @@ const DialogStatus = () => {
                   <Button
                       onClick={dialog.toggle}
                       paddingRight="xl"
-                      variant={dialog.status == "delete" ? "danger" : "primary"}
                   >
                   {dialog.buttonOneText}
                   </Button>

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,15 +21,6 @@
   ]
 %>
 
-<%
-  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",
@@ -98,8 +89,6 @@
 
 <%= 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.email_field :example_email_field_validation, props: { label: true, required: true } %>

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