playbook_ui 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5757 → 14.12.0.pre.alpha.PBNTR720railscarddraggable5649

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3bfceeec2adea47118fa2a3acf7aecbf348904d2a528f4e719c9a22d8f9b8a6
-  data.tar.gz: 37458e396425f1bfa04703d660edce42a72dcd58c437e092523a68fdaecd5f98
+  metadata.gz: bfb340a31e2bb74d3749938720b1a44b2217e841d785f287f45499b70d8f03e5
+  data.tar.gz: 3cc515a9004e7a4558bd62bbda022c354e2fdfd15a9bd2541324a9d50287ae5c
 SHA512:
-  metadata.gz: 32df6a28facf75ad16cf95583c52074264996698be73b9f8c7945dbdbf568698a5ca0ad4d00c824bc3d76f4ddf48ab626c381678ffbdd6369ede46c850fd388e
-  data.tar.gz: 91c257b95405e4cf87af9305db3dc68e535bcf759f3549b67461f3dd0f383a5ee719dfcb7b78772d7e1f02189a26bfc30dee8be12ac4fd3c8e243573e4ba04c5
+  metadata.gz: 93eab8412f7e086ffd7fa534aff415b0f648ec73e247a281cd1e2dc357144dc90bf2d63dc7c36c027769b2ee6e7d1355852cf5f36b159a3559f2a491315dc174
+  data.tar.gz: 4a15e5855591a6a817a683f701958ccae8b6b10d1a9d825c9ebcff15c4e3b276b5eb08c12f7858f82ea6d8604fbdd0aee419dddffe02012b0992891767f46a16

data/app/pb_kits/playbook/_playbook.scss

@@ -15,7 +15,6 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_copy_button/copy_button';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -47,7 +47,7 @@ export const CustomCell = ({
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify={!hasAnySubRows && !inlineRowLoading ? "end" : "start"}
+          justify={!hasAnySubRows ? "end" : "start"}
           orientation="row"
       >
         {

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -39,7 +39,7 @@ export const TableHeaderCell = ({
   sortIcon,
   table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar, inlineRowLoading } =
+  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
     useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -91,7 +91,7 @@ const isToggleExpansionEnabled =
 
   let justifyHeader:justifyTypes;
 
-  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading)) {
+  if (header?.index === 0 && hasAnySubRows) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";

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

@@ -1,10 +1,10 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }.merge(object.table_props)) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>
-            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
-            <%= 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 }) %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions }) %>
           <% end %>
         <% end %>
 <% end %>

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

@@ -10,11 +10,9 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
-      prop :loading, type: Playbook::Props::Boolean,
-                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
-                        default: "scroll"
+                        default: "none"
       prop :table_props, type: Playbook::Props::HashProp,
                          default: {}
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -245,7 +245,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
 })
 
 
-test("loading state + initialLoadingRowsCount prop", () => {
+test("loading state + initialLoadingRowCount prop", () => {
   render(
     <AdvancedTable
         columnDefinitions={columnDefinitions}

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading_react.md → _advanced_table_loading.md}

@@ -1,3 +1,3 @@
-The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
+the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
 
-By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowsCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
+By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.

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

@@ -1,12 +1,10 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
-  - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_beta_sort: Enable Sorting
-  - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)

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

@@ -16,11 +16,6 @@ module Playbook
                             default: []
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
-      prop :loading, type: Playbook::Props::Boolean,
-                     default: false
-      prop :responsive, type: Playbook::Props::Enum,
-                        values: %w[none scroll],
-                        default: "scroll"
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -51,12 +46,12 @@ module Playbook
           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 }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        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", subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        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 })
+        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 })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -79,16 +74,7 @@ module Playbook
       end
 
       def classname
-        additional_classes = []
-        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-
-        generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
-      end
-
-      def pinned_cell_class(index)
-        return "pinned-left" if index.zero? && responsive == "scroll"
-
-        ""
+        generate_classname("pb_advanced_table_body", separator: " ")
       end
 
     private

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

@@ -3,21 +3,17 @@
     <%= pb_rails("table/table_row") do %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
-        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
-            <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
-              <% if loading %>
-                <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
-              <% else %>
-                <button
-                  class="gray-icon toggle-all-icon"
-                  onclick="expandAllRows(this); event.preventDefault();">
-                  <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                </button>
-              <% end %>
-            <% end %>
-            <%= cell[:label] %>
-          <% end %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname, ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
+                    <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
+                        <button
+                            class="gray-icon toggle-all-icon"
+                            onclick="expandAllRows(this); event.preventDefault();">
+                            <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                        </button>
+                    <% end %>
+                    <%= cell[:label] %>
+                <% end %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -8,24 +8,13 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
-      prop :loading, type: Playbook::Props::Boolean,
-                     default: false
-      prop :responsive, type: Playbook::Props::Enum,
-                        values: %w[none scroll],
-                        default: "scroll"
 
       def classname
-        additional_classes = []
-        additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-
-        generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
+        generate_classname("pb_advanced_table_header", "pb_table_thead", separator: " ")
       end
 
-      def th_classname(is_first_column: false)
-        additional_classes = []
-        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
-
-        generate_classname("table-header-cells", *additional_classes, separator: " ")
+      def th_classname
+        generate_classname("table-header-cells", separator: " ")
       end
 
       def header_rows

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

@@ -1,8 +1,8 @@
 <%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
             <% next unless column[:accessor].present? %>
-            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
+            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column)}) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>
                             <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>

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

@@ -13,13 +13,6 @@ module Playbook
                                default: true
       prop :table_data_attributes, type: Playbook::Props::HashProp,
                                    default: {}
-      prop :loading, type: Playbook::Props::Boolean,
-                     default: false
-      prop :responsive, type: Playbook::Props::Enum,
-                        values: %w[none scroll],
-                        default: "scroll"
-      prop :is_pinned_left, type: Playbook::Props::Boolean,
-                            default: false
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -29,10 +22,9 @@ module Playbook
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname(column, index)
+      def td_classname(column)
         classes = %w[id-cell chrome-styles]
         classes << "last-cell" if column[:is_last_in_group]
-        classes << "pinned-left" if index.zero? && is_pinned_left && responsive == "scroll"
         classes.join(" ")
       end
 

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

@@ -1,6 +1,6 @@
 <%= pb_content_tag(:tr) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { classname: object.td_classname(index) }) do %>
+            <%= pb_rails("table/table_cell", props: { classname: "id-cell chrome-styles"}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

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

@@ -16,9 +16,6 @@ module Playbook
                                default: true
       prop :subrow_data_attributes, type: Playbook::Props::HashProp,
                                     default: {}
-      prop :responsive, type: Playbook::Props::Enum,
-                        values: %w[none scroll],
-                        default: "scroll"
 
       def data
         Hash(prop(:data)).merge(subrow_data_attributes)
@@ -28,12 +25,6 @@ module Playbook
         generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
       end
 
-      def td_classname(index)
-        classes = %w[id-cell chrome-styles]
-        classes << "pinned-left" if index.zero? && responsive == "scroll"
-        classes.join(" ")
-      end
-
     private
 
       def subrow_depth_classname

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -78,9 +78,4 @@ $avatar-sizes: (
       }
     }
   }
-  &.dark {
-    [class^=pb_card_kit] {
-      position: absolute;
-    }
-  }
 }

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

@@ -5,7 +5,6 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
-  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
   

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

@@ -2,18 +2,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbFixedConfirmationToast extends PbEnhancedElement {
   static get selector() {
-    return '[class*="pb_fixed_confirmation_toast_kit"]'
+    return '.remove_toast'
   }
 
   connect() {
     this.self = this.element
     this.autoCloseToast(this.self)
 
-    if (this.self.classList.contains('remove_toast')) {
-      this.self.addEventListener('click', () => {
-        this.removeToast(this.self)
-      })
-    }
+    this.self.addEventListener('click', () => {
+      this.removeToast(this.self)
+    })
   }
 
   removeToast(elem) {
@@ -34,4 +32,4 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
       }, autoCloseIntValue)
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx

@@ -8,31 +8,27 @@ const TableWithCollapsibleWithCustomContent = (props) => {
       <Card 
           borderNone
           borderRadius="none"
-          color="light"
+          color="light" 
           paddingX="xl"
           paddingY="md"
           {...props}
       >
-         <Body paddingBottom="sm"
+         <Body paddingBottom="sm" 
              text="Expanded Custom Layout"
              {...props}
          />
          <Flex justify="between">
            <Image
-               size="sm"
-               url="https://unsplash.it/500/400/?image=634"
+               url="https://via.placeholder.com/150"
            />
            <Image
-               size="sm"
-               url="https://unsplash.it/500/400/?image=634"
+               url="https://via.placeholder.com/150"
            />
            <Image
-               size="sm"
-               url="https://unsplash.it/500/400/?image=634"
+               url="https://via.placeholder.com/150"
            />
            <Image
-               size="sm"
-               url="https://unsplash.it/500/400/?image=634"
+               url="https://via.placeholder.com/150"
            />
           </Flex>
       </Card>
@@ -56,7 +52,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
 
       </Table.Head>
       <Table.Body>
-        <Table.Row collapsible
+        <Table.Row collapsible 
             collapsibleContent={<Content/>}
             {...props}
         >
@@ -65,7 +61,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
           <Table.Cell>{'Value 3'}</Table.Cell>
           <Table.Cell>{'Value 4'}</Table.Cell>
           <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{
+          <Table.Cell textAlign="right">{ 
             <Icon
                 color="primary"
                 fixedWidth

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

@@ -31,9 +31,6 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
-    - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
-    - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
 
   react:
     - table_sm: Small

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

@@ -12,7 +12,7 @@ module Playbook
                          default: false
       prop :collapsible_content
       prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
-                                        default: true
+                                        default: false
 
       def classname
         generate_classname("pb_table_row_kit", side_highlight_class) + tag_class

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -32,7 +32,6 @@ type TooltipProps = {
   position?: "absolute" | "fixed";
   text: string,
   showTooltip?: boolean,
-  forceOpenTooltip?: boolean,
 } & GlobalProps
 
 const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
@@ -50,7 +49,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     text,
     showTooltip = true,
     zIndex,
-    forceOpenTooltip = false,
     ...rest
   } = props
 
@@ -137,7 +135,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
       >
         {children}
       </div>
-      {(open || forceOpenTooltip) && (
+      {open && (
         <div
             {...getFloatingProps({
               className: `tooltip_tooltip ${placement} visible`,