playbook_ui 14.16.0.pre.rc.6 → 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7192

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

@@ -0,0 +1,39 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ] 
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= 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: { 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/_advanced_table_selectable_rows_no_subrows.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "selectable_rows_no_subrows", table_data: @table_data_no_subrows, column_definitions: column_definitions, selectable_rows: true, enable_toggle_expansion: "none", }) %>

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

@@ -0,0 +1 @@
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

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

@@ -0,0 +1,6 @@
+`selectable_rows` is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows. 
+
+When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
+
+__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

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

@@ -11,6 +11,8 @@ examples:
   - 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)
+  # - advanced_table_selectable_rows: Selectable Rows
+  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
 
 
   react:
@@ -37,4 +39,5 @@ examples:
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
-  - advanced_table_inline_editing: Inline Cell Editing
+  - advanced_table_inline_editing: Inline Cell Editing
+  - advanced_table_fullscreen: Fullscreen

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

@@ -21,4 +21,5 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
-export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
+export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
+export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'

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

@@ -231,4 +231,4 @@ window.expandAllRows = (element) => {
 
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+};

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

@@ -21,6 +21,8 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -56,7 +58,7 @@ module Playbook
         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, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -81,7 +83,7 @@ module Playbook
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-
+        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
         generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
       end
 

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

@@ -1,19 +1,29 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
     <%= pb_rails("table/table_row") do %>
+      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
+        <%= object.render_select_all_header %>
+      <% end %>
       <% 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>
+            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
+              <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
+                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
+                  <%= object.render_select_all_checkbox %>
+                <% end %>
+              <% end %>
+              <% if object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all" %>
+                <% 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 %>
             <% end %>
             <%= cell[:label] %>

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

@@ -13,17 +13,20 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
 
         generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
       def th_classname(is_first_column: false)
         additional_classes = []
-        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll" && !selectable_rows
 
         generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
@@ -38,6 +41,40 @@ module Playbook
         rows
       end
 
+      # Selectable Rows No Subrows - checkboxes in their own first cell
+      def render_select_all_header
+        if selectable_rows
+          additional_classes = []
+          additional_classes << "table-header-cells-custom"
+          additional_classes << "checkbox-cell-header"
+          additional_classes << "pinned-left" if responsive == "scroll"
+          pb_rails("table/table_header", props: {
+                     classname: additional_classes.join(" "),
+                   }) do
+            pb_rails("checkbox", props: {
+                       id: "select-all-rows",
+                       name: "select-all-rows",
+                       data: {
+                         action: "click->pb-advanced-table#toggleAllRowSelection",
+                       },
+                     })
+          end
+        end
+      end
+
+      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
+      def render_select_all_checkbox
+        if selectable_rows
+          pb_rails("checkbox", props: {
+                     id: "select-all-rows",
+                     name: "select-all-rows",
+                     data: {
+                       action: "click->pb-advanced-table#toggleAllRowSelection",
+                     },
+                   })
+        end
+      end
+
     private
 
       def compute_max_depth(columns)

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

@@ -1,48 +1,60 @@
 <%= 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 %>
-                    <% if collapsible_trail && index.zero? %>
-                        <% (1..depth).each do |i| %>
-                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
-                            <% left_offset = i * 1.0 + additional_offset %>
-                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
-                        <% end %>
+    <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
+    <% if has_separate_checkbox %>
+        <%= object.render_checkbox_cell %>
+    <% end %>
+    <% 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 %>
+                <% if collapsible_trail && index.zero? %>
+                    <% (1..depth).each do |i| %>
+                        <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                        <% left_offset = i * 1.0 + additional_offset %>
+                        <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
                     <% end %>
+                <% end %>
 
-                    <div style="padding-left: <%= depth * 1.25 %>em">
-                        <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
-                            <% if index.zero? && object.row[:children].present? %>
-                              <button
-                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
-                                class="gray-icon expand-toggle-icon"
-                                data-advanced-table="true">
-                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                              </button>
+                <div style="padding-left: <%= depth * 1.25 %>em">
+                    <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
+                        <% if index.zero? %>
+                            <% has_integrated_checkbox = object.selectable_rows && object.enable_toggle_expansion != "none" %>
+                            <% if has_integrated_checkbox %>
+                                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
+                                    <%= object.render_row_checkbox %>
+                                <% end %>
                             <% end %>
-                            <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
-                                <% if column[:custom_renderer].present? %>
-                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
-                                <% elsif index.zero? %>
-                                    <% if object.depth.zero? %>
-                                        <%= object.row[column[:accessor].to_sym] %>
-                                    <% else %>
-                                        <% object.depth_accessors.each_with_index do |item, accessor_index| %>
-                                            <% if object.depth - 1 == accessor_index %>
-                                                <% key = item.to_sym %>
-                                                <%= object.row[key] %>
-                                            <% end %>
+                            <% if object.row[:children].present? %>
+                                <button
+                                    id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                    class="gray-icon expand-toggle-icon"
+                                    data-advanced-table="true">
+                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                </button>
+                            <% end %>
+                        <% end %>
+                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
+                            <% if column[:custom_renderer].present? %>
+                                <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
+                            <% elsif index.zero? %>
+                                <% if object.depth.zero? %>
+                                    <%= object.row[column[:accessor].to_sym] %>
+                                <% else %>
+                                    <% object.depth_accessors.each_with_index do |item, accessor_index| %>
+                                        <% if object.depth - 1 == accessor_index %>
+                                            <% key = item.to_sym %>
+                                            <%= object.row[key] %>
                                         <% end %>
                                     <% end %>
-                                <% else %>
-                                    <%= object.row[column[:accessor].to_sym] %>
                                 <% end %>
+                            <% else %>
+                                <%= object.row[column[:accessor].to_sym] %>
                             <% end %>
                         <% end %>
-                    </div>
-                <% end %>
+                    <% end %>
+                </div>
             <% end %>
         <% end %>
-<% end %>
+    <% end %>
+<% end %>

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

@@ -20,6 +20,13 @@ module Playbook
                         default: "scroll"
       prop :is_pinned_left, type: Playbook::Props::Boolean,
                             default: false
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
+      prop :row_id, type: Playbook::Props::String,
+                    default: ""
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -42,6 +49,38 @@ module Playbook
         end.compact
       end
 
+      # Selectable Rows No Subrows - checkboxes in their own first cell
+      def render_checkbox_cell
+        if selectable_rows
+          pb_rails("table/table_cell", props: {
+                     classname: "checkbox-cell",
+                   }) do
+            pb_rails("checkbox", props: {
+                       id: "select-row-#{row_id || row.object_id}",
+                       name: "select-row-#{row_id || row.object_id}",
+                       data: {
+                         row_id: row_id || row.object_id.to_s,
+                         action: "click->pb-advanced-table#toggleRowSelection",
+                       },
+                     })
+          end
+        end
+      end
+
+      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
+      def render_row_checkbox
+        if selectable_rows
+          pb_rails("checkbox", props: {
+                     id: "select-row-#{row_id || row.object_id}",
+                     name: "select-row-#{row_id || row.object_id}",
+                     data: {
+                       row_id: row_id || row.object_id.to_s,
+                       action: "click->pb-advanced-table#toggleRowSelection",
+                     },
+                   })
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -7,7 +7,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object'
 
 import classnames from "classnames";
 

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -63,11 +63,6 @@ $pb_button_sizes: (
     color: $text_lt_lighter;
   }
 
-  // Disabled =================
-  &[class*=_disabled]  {
-    @include pb_button_disabled;
-  }
-
   // Block ====================
   &[class*=_block]  {
     @include pb_button_block;
@@ -83,6 +78,11 @@ $pb_button_sizes: (
     @include pb_button_danger;
   }
 
+  // Disabled =================
+  &[class*=_disabled]  {
+    @include pb_button_disabled;
+  }
+
   // Dark Variants =============
   &.dark  {
     &[class*=_primary]  {

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -27,13 +27,20 @@ exports[`html structure is correct 1`] = `
               class="icon_wrapper"
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
-              <i
-                class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
-              />
-              <span
-                aria-label="chevron-down icon"
-                hidden=""
-              />
+              <svg
+                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
+                color="currentColor"
+                fill="none"
+                height="auto"
+                viewBox="0 0 30 25"
+                width="auto"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14.203 19.297l-9-9c-.469-.422-.469-1.125 0-1.594.422-.422 1.125-.422 1.594 0L15 16.953l8.203-8.203c.422-.469 1.125-.469 1.594 0a1.103 1.103 0 010 1.547l-9.047 9a1.027 1.027 0 01-1.547 0z"
+                  fill="#242B42"
+                />
+              </svg>
             </div>
           </div>
         </div>

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -75,15 +75,15 @@ test('returns correct icon', () => {
     </>
   )
 
-  expect(screen.getByTestId('test-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-mobile')
-  expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
-  expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
-  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toHaveClass('envelope')
-  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
-  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
-  expect(screen.getByTestId('test-empty').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 
 test("not compliant values return null in phone related contact types", () => {

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

@@ -106,41 +106,41 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
-useEffect(() => {
-  datePickerHelper({
-    allowInput,
-    customQuickPickDates,
-    defaultDate,
-    disableDate,
-    disableRange,
-    disableWeekdays,
-    enableTime,
-    format,
-    hideIcon,
-    inLine,
-    maxDate,
-    minDate,
-    mode,
-    onChange,
-    onClose,
-    pickerId,
-    plugins,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    position,
-    positionElement,
-    selectionType,
-    showTimezone,
-    staticPosition,
-    thisRangesEndToday,
-    yearRange,
-    required: false,
-  }, scrollContainer)
-}, initializeOnce ? [] : undefined)
+  useEffect(() => {
+    datePickerHelper({
+      allowInput,
+      customQuickPickDates,
+      defaultDate,
+      disableDate,
+      disableRange,
+      disableWeekdays,
+      enableTime,
+      format,
+      hideIcon,
+      inLine,
+      maxDate,
+      minDate,
+      mode,
+      onChange,
+      onClose,
+      pickerId,
+      plugins,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      position,
+      positionElement,
+      selectionType,
+      showTimezone,
+      staticPosition,
+      thisRangesEndToday,
+      yearRange,
+      required: false,
+    }, scrollContainer)
+  }, initializeOnce ? [] : undefined)
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
-  } 
+  }
   delete filteredProps?.position
 
   const classes = classnames(
@@ -221,7 +221,7 @@ useEffect(() => {
             {hideIcon && inLine ?
               <div>
                 <div
-                    className={iconWrapperClass()}
+                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
                     id={`${pickerId}-icon-plus`}
                 >
                   <Icon
@@ -230,7 +230,7 @@ useEffect(() => {
                   />
                 </div>
                 <div
-                    className={iconWrapperClass()}
+                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -44,7 +44,7 @@
     <% if object.hide_icon && object.inline %>
       <!-- Plus Icon -->
       <div
-          class="<%= object.icon_wrapper_class %>"
+          class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
           id="<%= object.picker_id %>-icon-plus"
       >
         <%= pb_rails("icon", props: {
@@ -55,7 +55,7 @@
 
       <!-- Angle Down Icon -->
       <div
-          class="<%= object.icon_wrapper_class %>"
+          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
           id="<%= object.picker_id %>-angle-down"
       >
         <%= pb_rails("icon", props: {