playbook_ui 15.2.0.pre.alpha.toastfixes11417 → 15.2.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0337b2677bd5411161752e4c3769bf2469a4ff1cc2a56368639e8785bfe761e
-  data.tar.gz: 43b7e73766b95756079ca66703e3e19e314a1eadd4b48cb26c55cd5d17952630
+  metadata.gz: 13bfcc5673dfc00619bf8b3fb557c22f4c4609140237fc800757ed584a710a56
+  data.tar.gz: dc055c2848c96f663adddd3e1a3452e63431cf8d26505ca57d17886bcebf2a86
 SHA512:
-  metadata.gz: 8d466e97f01e7202031caeb3d2b8546eb5fab2fa203aa685f20b59a30a33780144b76170ce45e83bc916f4b91f614ea8d3fe92c87d8ba3dc49433a5220ad607d
-  data.tar.gz: aa36b922bcb388af5da9c9ae4dd4ae2d210f09cba2b5d4aa7ab5e97b7a63a2e7f55d26db46a7f5ac70490826e4248940bb3274dafa019f0c38fae2d16666ca62
+  metadata.gz: b51dd269610cb015f62bbdf1199adece46fa8591f488efe8edd2e6b18fdee4b4ac7b3653f136a435ef89d9f848fde895e9d3fb6ac2f3fc5d99ee5d04ceffaccf
+  data.tar.gz: 5d53c3805872480202c03694deea22babe4395cf31b946f26c1ef30c4737b682fa8c9ecae15282caee6c95b7f4ba4c33afaa6b91039290e9188465811233867e

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_button/_button.scss

@@ -81,12 +81,6 @@ $pb_button_sizes: (
   // Loading state
   &.pb_button_loading {
     @include pb_button_loading(true);
-    &.pb_button_size_sm {
-        min-height: 30px;
-    }
-    &.pb_button_size_lg {
-        min-height: 45px;
-    }
   }
 
   // Disabled state

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,7 +1,3 @@
-<%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -1,13 +1,8 @@
 import React from 'react'
 import Button from "../../pb_button/_button"
-import Caption from "../../pb_caption/_caption"
 
 const ButtonLoading = (props) => (
   <div>
-    <Caption 
-        marginY="md" 
-        text="Button variants with loading" 
-    />
     <Button
         aria={{ label: 'Loading' }}
         loading
@@ -36,30 +31,6 @@ const ButtonLoading = (props) => (
         variant="link"
         {...props}
     />
-    <br/>
-    <Caption 
-        marginY="md" 
-        text="Button sizes with loading" 
-    />
-    <Button
-        aria={{ label: 'Loading' }}
-        loading
-        marginRight='lg'
-        size="sm"
-        tabIndex={0}
-        text="Small Button"
-        {...props}
-    />
-    {' '}
-    <Button
-        aria={{ label: 'Loading' }}
-        loading
-        marginRight='lg'
-        size="lg"
-        tabIndex={0}
-        text="Small Button"
-        {...props}
-    />
   </div>
 )
 

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_draggable/_draggable.scss

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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -40,6 +40,7 @@ $confirmation_toast_colors: (
 
   &.positioned_toast {
     position: fixed;
+    z-index: $z_10 !important;
     display: flex;
     justify-content: space-around;
     max-width: max-content;

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import classnames from "classnames";
 
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 import { buildHtmlProps } from "../utilities/props";
 import { VoidCallback } from "../types";
 
@@ -31,8 +31,7 @@ type FixedConfirmationToastProps = {
   status?: "success" | "error" | "neutral" | "tip";
   text?: string;
   vertical?: "top" | "bottom";
-  zIndex?: number | string;
-} & GlobalProps
+};
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
@@ -51,7 +50,6 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     status = "neutral",
     text,
     vertical,
-    zIndex = 'max',
   } = props;
 
   const returnedIcon = icon || iconMap[status]
@@ -61,7 +59,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     `pb_fixed_confirmation_toast_kit_${status}${multiLine ? '_multi_line' : ''}`,
     { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
     `${iconClass}`,
-    globalProps(props, { zIndex }),
+    globalProps(props),
     className
   );
 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md

@@ -1,4 +1,2 @@
 
 Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
-
-**NOTE**: z index for Fixed Confirmation Toast is set to 'max' by default which has the value of `999999`. the z Index global prop can be used to override this if you want to set it to a different value.