playbook_ui 15.1.0.pre.alpha.textinputlabelfix11151 → 15.1.0.pre.alpha.timelinescss11189

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 518077d46768ebba9a720005fdb684ec2c04222d2b20b98c55b6ec9cef984b10
-  data.tar.gz: 3a0d4d64bf3ebfab0fff14ff43699ea850ac51037fdfe959b11bd61c3293095c
+  metadata.gz: 18b16d003e09f227fdaa17123c1b08e423071f708f49ca524fb7e2e216c714fc
+  data.tar.gz: ac831c8bb1bdd89eae2244be43c19974c19d1f8cc8019b7d01ec3cc18152427a
 SHA512:
-  metadata.gz: e0902796d815574e469cd1dc93a9c899e3f263fb332fc09057e10a4f8e635d2233ac290dd472e47b62ad894f1b37bfb84c2e0441bdb2451695e2bf0331aa9f47
-  data.tar.gz: 0e62bd41646d64ef7ed702121b071ea7433dc87834e637bf27c19673cfba095c55e940912eaf46dd16f6989dd90ad99cdec9d6d4946f7e9883115fdfffce95c9
+  metadata.gz: 120b76c6266f100da5befbcc326f54af6f4db972aad12fb97042abecc17f54d593b87764216a11e23dad84ec853d5976ff713a2c86891395b5a70a980b49cbee
+  data.tar.gz: 3b6a97952ca69f967cf9d445391c6a67de36ae76ec5534590fcaf2643946b6cd530080a5902d2072be73026acd6022407a73a9181353893b6f6bed0b43e416bc

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

@@ -146,6 +146,8 @@ export function useTableState({
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
+    if (!pagination) return {};
+
     return {
       getPaginationRowModel: getPaginationRowModel(),
       paginateExpandedRows: false,
@@ -201,6 +203,13 @@ 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_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_multiple_users_stacked/_multiple_users_stacked.scss

@@ -89,7 +89,18 @@ $positions: (
   }
 }
 
-[class^=pb_multiple_users_stacked_kit] {
+.pb_multiple_users_stacked_kit,
+.pb_multiple_users_stacked_kit_single,
+.pb_multiple_users_stacked_kit_bubble,
+.pb_multiple_users_stacked_kit_single_bubble,
+.pb_multiple_users_stacked_kit_bubble_size_sm,
+.pb_multiple_users_stacked_kit_bubble_size_md,
+.pb_multiple_users_stacked_kit_bubble_size_lg,
+.pb_multiple_users_stacked_kit_bubble_size_xl,
+.pb_multiple_users_stacked_kit_single_bubble_size_sm,
+.pb_multiple_users_stacked_kit_single_bubble_size_md,
+.pb_multiple_users_stacked_kit_single_bubble_size_lg,
+.pb_multiple_users_stacked_kit_single_bubble_size_xl {
   $container_size: map-get($avatar-sizes, "xs");
   $bubble_container_size: map-get($avatar-sizes, "sm");
   $overlap: -15px;
@@ -103,7 +114,8 @@ $positions: (
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
-  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+  .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
+  .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
     @include avatar-size($stacked_size);
     &.dark {
       .avatar_wrapper {
@@ -117,10 +129,17 @@ $positions: (
       }
     }
   }
-  &[class*=_single] .pb_multiple_users_stacked_item {
+  &.pb_multiple_users_stacked_kit_single .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_sm .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_md .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_lg .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_xl .pb_multiple_users_stacked_item {
     @include avatar-size(28px);
   }
-  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
+  .pb_avatar_kit_size_xs.second_item,
+  .pb_avatar_kit_size_md.second_item, 
+  .pb_badge_kit_primary_rounded.second_item {
     @include position((bottom: 0, right: 0));
     z-index: 2;
     background: tint($primary, 90%);
@@ -143,7 +162,8 @@ $positions: (
 
   // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
   @each $size_name, $size_value in $avatar-sizes {
-      &[class*=_bubble_][class*=_size_#{$size_name}] {
+      &.pb_multiple_users_stacked_kit_bubble_size_#{$size_name},
+      &.pb_multiple_users_stacked_kit_single_bubble_size_#{$size_name} {
         // Set bubble container size based on the class
         $bubble_container_size: $size_value;
         $container_size: $size_value;
@@ -161,7 +181,8 @@ $positions: (
           background-color: $card_dark;
         }
   
-        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+        .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
+        .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
           @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
   
           &.dark {
@@ -175,7 +196,8 @@ $positions: (
           }
         }
   
-        [class^=pb_avatar_kit] {
+        .pb_avatar_kit_size_xs,
+        .pb_avatar_kit_size_md {
           // First Item
           &.first_item {
             @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
@@ -235,8 +257,13 @@ $positions: (
           }
         }
         
-        &[class*=_single_bubble] {
-          [class^=pb_avatar_kit].first_item {
+        &.pb_multiple_users_stacked_kit_single_bubble,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_sm,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_md,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_lg,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_xl {
+          .pb_avatar_kit_size_xs.first_item,
+          .pb_avatar_kit_size_md.first_item {
             @include position((top: 0, left: 0));
             @include avatar-size($bubble_container_size);
           }