playbook_ui 15.2.0.pre.alpha.testingquickpick11606 → 15.2.0.pre.alpha.testingtiptap11313

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 071e859887ee48afce502eac1a48c4f29b0a0fb690ed3b155901e1b49fe61c1f
-  data.tar.gz: cea7576059a91fcde56648fa33efc682bce4b07295a289ae491d85b8259f0913
+  metadata.gz: a3ed177e094ede8f7925c2ecf98c335d7707d509a8fd6a4855644d0a22ef3689
+  data.tar.gz: 7343888c5dbd2e41f5cec7918d2e951a8c53a3d25332aa7508c891dac31d5806
 SHA512:
-  metadata.gz: '08c3fb4475d4bd060d52cf11dc402a73da972e7c0d718ddeed24a645f484d2789db10c69824da15bd33418c1c7fa96e3f545e8b2e247c1860fd0c5040641f78e'
-  data.tar.gz: 4e753ada93e3b1b41ae279c21aeaee58f5f5c8c750135c23156512bda499d4befd2187e91fb7beb62170e71fa4bd92cf33998759bbf421877ac734eae6e06177
+  metadata.gz: 30e6b111d86f26da6ab07967bc189014eec8d6481b8586c311b18699b3a8e08787188a56f0c20088dde4db57cfe928ae0cf74cbbf3e4a7ad0917e44295872c48
+  data.tar.gz: 042e063b12f784f004027e18d61e6b3873b2d07cf8a7566ec46760dc602e301c72c5b4d6d053431af2b06b3b17e975b4dcd8c676d9ce818aa586224e39654ce4

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,6 @@
 
+
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -31,7 +33,6 @@
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_draggable/draggable';
 @import 'pb_dropdown/dropdown';
-@import 'pb_empty_state/empty_state';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
@@ -69,10 +70,6 @@
 @import 'pb_overlay/overlay';
 @import 'pb_pagination/pagination';
 @import 'pb_passphrase/passphrase';
-@import 'pb_pb_bar_graph/pb_bar_graph';
-@import 'pb_pb_circle_chart/pb_circle_chart';
-@import 'pb_pb_gauge_chart/pb_gauge_chart';
-@import 'pb_pb_line_graph/pb_line_graph';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
 @import 'pb_phone_number_input/phone_number_input';
@@ -111,6 +108,9 @@
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import 'pb_empty_state/empty_state';
+@import 'pb_pb_bar_graph/pb_bar_graph';
+@import 'pb_pb_circle_chart/pb_circle_chart';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -11,8 +11,8 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { table_id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
-      <%= pb_rails("advanced_table/table_body", props: { table_id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
+      <%= pb_rails("advanced_table/table_header", props: { id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -2,9 +2,7 @@ The AdvancedTable kit accepts tree data and automatically renders expansion cont
 
 ### id
 
-A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar, expand/collapse caching, or selectable rows will not be able to properly reference the correct table.
-
-You must also set `table_id` when using subcomponents like `table_header` or `table_body`.
+A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar will not be able to properly reference the correct table.
 
 ### table_data
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { id: "sort", table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "sort", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "subrow-headers", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb

@@ -31,6 +31,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "collapsible_trail", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md

@@ -1,4 +1,4 @@
-The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
+The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
 
 1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb

@@ -58,6 +58,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling-multi", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb

@@ -33,6 +33,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md

@@ -1,4 +1,4 @@
-The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below.  It is an object that has several optional key/value pairs, this doc example highlights the following:
+The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
 
 1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md

@@ -1,4 +1,4 @@
-The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
+The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
 
 - `background_color` : use this to control the background color of the row
 - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md

@@ -1,4 +1,4 @@
-The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
+The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `rowStyling` gives you 3 optional controls:
 
 - `backgroundColor` : use this to control the background color of the row
 - `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -21,11 +21,8 @@ examples:
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
-  - advanced_table_padding_control_per_row_rails: Padding Control using Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
-  - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -331,12 +331,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         // Split the dataContent to get all ancestor IDs, check against ExpandedRows
         const ancestorIds = dataContent.split("-").slice(0, -1);
 
-        // Get the table_id from the child row's parent to construct proper prefixed IDs
-        const parentRowId = childRow.dataset.rowParent;
-        const tableId = parentRowId ? parentRowId.split('_').slice(0, -1).join('_') : '';
-
         const prefixedAncestorIds = ancestorIds.map(
-          (id) => `${tableId}_${id}`
+          (id) => `${childRow.id}_${id}`
         );
         const allAncestorsExpanded = prefixedAncestorIds.every((id) =>
           PbAdvancedTable.expandedRows.has(id)

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -3,8 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableBody < Playbook::KitBase
-      prop :table_id, type: Playbook::Props::String,
-                      default: ""
+      prop :id, type: Playbook::Props::String,
+                default: ""
       prop :table_data, type: Playbook::Props::Array,
                         default: []
       prop :column_definitions, type: Playbook::Props::Array,
@@ -53,7 +53,7 @@ module Playbook
         subrow_data_attributes = {
           advanced_table_content: subrow_ancestor_ids.join("-"),
           row_depth: current_depth,
-          row_parent: "#{table_id}_#{ancestor_ids.last}",
+          row_parent: "#{id}_#{ancestor_ids.last}",
         }
         # Subrow header if applicable
         output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
@@ -69,7 +69,7 @@ module Playbook
                                   end
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { table_id: table_id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling, last_row: last_row, immediate_parent_row_id: immediate_parent_row_id })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -78,9 +78,9 @@ module Playbook
             data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
 
             child_data_attributes = {
-              top_parent: "#{table_id}_#{top_parent_id}",
+              top_parent: "#{id}_#{top_parent_id}",
               row_depth: current_depth + 1,
-              row_parent: "#{table_id}_#{immediate_parent_id}",
+              row_parent: "#{id}_#{immediate_parent_id}",
               advanced_table_content: data_content,
             }
 

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -3,8 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableHeader < Playbook::KitBase
-      prop :table_id, type: Playbook::Props::String,
-                      default: ""
+      prop :id, type: Playbook::Props::String,
+                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
@@ -58,10 +58,10 @@ module Playbook
                      classname: additional_classes.join(" "),
                    }) do
             pb_rails("checkbox", props: {
-                       id: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
+                       id: "#{id ? "#{id}-" : ''}select-all-rows",
                        indeterminate_main: true,
                        indeterminate_main_labels: ["", ""],
-                       name: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
+                       name: "#{id ? "#{id}-" : ''}select-all-rows",
                      })
           end
         end
@@ -71,10 +71,10 @@ module Playbook
       def render_select_all_checkbox
         if selectable_rows
           pb_rails("checkbox", props: {
-                     id: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
+                     id: "#{id ? "#{id}-" : ''}select-all-rows",
                      indeterminate_main: true,
                      indeterminate_main_labels: ["", ""],
-                     name: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
+                     name: "#{id ? "#{id}-" : ''}select-all-rows",
                      data: {
                        action: "click->pb-advanced-table#toggleAllRowSelection",
                      },

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -12,8 +12,7 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <% component_info = object.cell_component_info(column, index, bg_color, font_color) %>
-        <%= pb_rails(component_info[:name], props: component_info[:props]) do %>
+        <%= pb_rails("table/table_cell", props: {  html_options: { style: { "background-color": bg_color, color: font_color } }, classname:object.td_classname(column, index)}) do %>
             <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>
@@ -34,7 +33,7 @@
                             <% end %>
                             <% if object.row[:children].present? %>
                                 <button
-                                    id="<%= "#{object.table_id}_#{object.row.object_id}" %>"
+                                    id="<%= "#{object.id}_#{object.row.object_id}" %>"
                                     class="gray-icon expand-toggle-icon"
                                     data-advanced-table="true"
                                     style="color: <%= button_color %>"

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -3,8 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableRow < Playbook::KitBase
-      prop :table_id, type: Playbook::Props::String,
-                      default: ""
+      prop :id, type: Playbook::Props::String,
+                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :row
@@ -46,53 +46,9 @@ module Playbook
         classes = %w[id-cell]
         classes << "last-cell" if column[:is_last_in_group]
         classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
-
-        row_style = row_styling.find { |style| style[:row_id].to_s == row_id.to_s }
-        row_padding = row_style&.[](:cell_padding)
-
-        if column[:accessor].present?
-          orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
-          column_padding = orig_def[:column_styling][:cell_padding] if orig_def && orig_def[:column_styling].is_a?(Hash) && orig_def[:column_styling][:cell_padding].present?
-        end
-
-        classes << "p_#{row_padding}" if row_padding.present?
-        classes << "p_#{column_padding}" if column_padding.present?
-
         classes.join(" ")
       end
 
-      def cell_background_color(column)
-        return nil unless column[:accessor].present?
-
-        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
-        if orig_def && orig_def[:column_styling].is_a?(Hash) && orig_def[:column_styling][:cell_background_color].present?
-          bg_color = orig_def[:column_styling][:cell_background_color]
-          if bg_color.respond_to?(:call)
-            bg_color.call(row)
-          else
-            bg_color
-          end
-        end
-      end
-
-      def has_custom_background_color?(column)
-        cell_background_color(column).present?
-      end
-
-      # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
-      def cell_component_info(column, index, bg_color, font_color)
-        if has_custom_background_color?(column)
-          custom_bg_color = cell_background_color(column)
-          component_name = "background"
-          component_props = { background_color: custom_bg_color, tag: "td", classname: td_classname(column, index) }
-        else
-          component_name = "table/table_cell"
-          component_props = { html_options: { style: { "background-color": bg_color, color: font_color } }, classname: td_classname(column, index) }
-        end
-
-        { name: component_name, props: component_props }
-      end
-
       def depth_accessors
         column_definitions.flat_map do |column|
           column[:cellAccessors] if column.key?(:cellAccessors)
@@ -102,13 +58,13 @@ module Playbook
       # Selectable Rows No Subrows - checkboxes in their own first cell
       def render_checkbox_cell
         if selectable_rows
-          prefix = table_id ? "#{table_id}-" : ""
+          prefix = id ? "#{id}-" : ""
           pb_rails("table/table_cell", props: {
                      classname: "checkbox-cell",
                    }) do
             pb_rails("checkbox", props: {
                        id: "#{prefix}select-row-#{row_id || row.object_id}",
-                       indeterminate_parent: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
+                       indeterminate_parent: "#{id ? "#{id}-" : ''}select-all-rows",
                        name: "#{prefix}select-row-#{row_id || row.object_id}",
                        data: {
                          row_id: row_id || row.object_id.to_s,
@@ -122,7 +78,7 @@ module Playbook
       # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
       def render_row_checkbox
         if selectable_rows
-          prefix = table_id ? "#{table_id}-" : ""
+          prefix = id ? "#{id}-" : ""
           indeterminate_parent =
             if depth.zero?
               "#{prefix}select-all-rows"

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/docs/_date_picker_range_pattern.jsx

@@ -23,7 +23,7 @@ const DatePickerRangePattern = (props) => {
 
       <DatePicker
           pickerId="end-date-picker"
-          placeholder="Select an End Date"
+          placeholder="Select a End Date"
           syncEndWith="quickpick-for-range"
           {...props}
       />

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -9,20 +9,29 @@ $pb_card_border_radius: $border_rad_heavier;
 
 // used to display dropdown on the left of the calender
 .quick-pick-drop-down {
-  width: 100%;
+  width: auto;
+  display: grid;
 }
 
 .quick-pick-ul {
+  padding: $space_xs 0px;
   margin: 0;
   list-style: none;
 }
 
 .nav-item {
   list-style: none;
+  border-radius: 6px;
+  border-bottom: 0;
+  margin: $space_xs $space_sm;
 }
 
 .nav-item-link {
   text-decoration: none;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_light;
+  border-radius: $pb_card_border_radius;
   padding: $space_xs 14px;
   transition-property: color, background-color;
   transition-duration: 0.15s;
@@ -31,21 +40,15 @@ $pb_card_border_radius: $border_rad_heavier;
   color: $charcoal;
   font-size: $font_default;
   font-weight: $regular;
-  text-align: left;
-  border-bottom: 1px solid $border_light;
   &.active {
-    color: $white;
-    background-color: $primary;
-    &:hover {
-      background-color: $product_1_background;
-      color: $white;
-    }
+    border-width: 2px;
+    border-color: $primary;
   }
   @media (hover:hover) {
     &:hover {
       cursor: pointer;
-      background-color: $bg_light;
-      color: $primary;
+      box-shadow: $shadow-deep;
+      border-color: $slate;
     }
   }
 }
@@ -54,3 +57,19 @@ $pb_card_border_radius: $border_rad_heavier;
 .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
   display: none;
 }
+
+@media only screen and (max-width: 767px) {
+  .quick-pick-ul {
+    padding: $space_xs $space_xs;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .nav-item {
+    margin: $space_xxs $space_xs;
+  }
+
+  .nav-item-link {
+    padding: $space_xs $space_xxs;
+  }
+}

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_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.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -60,10 +60,7 @@ module Playbook
       end
 
       def classname
-        default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class + icon_class
       end
     end
   end