playbook_ui 18.2.0.pre.rc.0 → 18.2.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea7a2cbd41fa905d1b87ea9045bf7b2ba422f28fb0a2b573d236bdc9298ac3ff
-  data.tar.gz: a33468825a7669e840ba73fa1e57c838bba54a00e8900d942de1285e6dd418f2
+  metadata.gz: fbc2a1ba01cca1bd4a5b48488fafecee3697e273fd940d942a9de5de93a76921
+  data.tar.gz: e8cf1cc4ec63bd1957d455ed4766db51865e0f42b9369ae59065f89bb7d78946
 SHA512:
-  metadata.gz: 1d3d5f31785f165d440106d964e9c2e594972664f7f01447bf93ffc3b83b0c3d0c2c7c0d53af0ada8ce2737cd0189b9a9dd39521b291bf7638e7ad398e660f6e
-  data.tar.gz: 037a62fcdd8ecf9417080645b462bf7f3a3ccc2a2f96baf7feed75b10f17aa43c7b5491711bdc947f4ed28a61a247579cb016c11962e4a7f745615fa5417fd93
+  metadata.gz: f5af4f9cf873c44ba0c76176e17130f0cf77fbd9c526ccea6041a70b0e1da2951a16da702259a01d16df03628a30402bcc1fdc47f32675af28aaf16f1fdb8ffb
+  data.tar.gz: 598126c77b37bd8885bfeb8fa1ebcc30d5f30adab8dcd92b46ea71ce8b038314dda4e774d3fea789ba3e7462ff5ea83276bd10229ce43efaa767e33fe5c430c4

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

@@ -1,33 +1,55 @@
 import React from "react";
 import Pagination from "../../pb_pagination/_pagination";
+import SectionSeparator from "../../pb_section_separator/_section_separator";
 
 interface TablePaginationProps {
-  table: any;
   onChange: (page: number) => void;
   position: "top" | "bottom";
   range?: number;
+  sectionSeparator?: boolean;
+  table: any;
 }
 
 const TablePagination: React.FC<TablePaginationProps> = ({
-  table,
   onChange,
   position,
-  range = 5
+  range = 5,
+  sectionSeparator = false,
+  table,
 }) => {
   const current = table.getState().pagination.pageIndex + 1;
   const total = table.getPageCount();
 
-  return (
+  // Pagination returns null when total <= 1; avoid orphan separators.
+  if (total <= 1) {
+    return null;
+  }
+
+  const pagination = (
     <Pagination
         current={current}
         key={`pagination-${position}-${current}`}
-        marginBottom={position === "top" ? "xs" : undefined}
-        marginTop={position === "bottom" ? "xs" : undefined}
+        marginBottom={!sectionSeparator && position === "top" ? "xs" : undefined}
+        marginLeft={sectionSeparator ? "lg" : undefined}
+        marginTop={!sectionSeparator && position === "bottom" ? "xs" : undefined}
         onChange={onChange}
+        paddingY={sectionSeparator ? "xs" : undefined}
         range={range}
         total={total}
     />
   );
+
+  if (!sectionSeparator) {
+    return pagination;
+  }
+
+  return (
+    <>
+      <SectionSeparator />
+      {pagination}
+      {position === "top" && <SectionSeparator />}
+    </>
+  );
 };
 
 export default TablePagination;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -491,12 +491,10 @@
     }
   }
 
-  // First column separator/border
+  // First data column separator/border (Year when no separate checkbox column)
   .table-header-cells:first-child,
-  .table-header-cells-custom:first-child,
-  td:first-child,
-  .pb_table_td:first-child,
-  .checkbox-cell.checkbox-cell-header:first-child {
+  td:first-child:not(.checkbox-cell),
+  .pb_table_td:first-child:not(.checkbox-cell) {
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
@@ -504,6 +502,14 @@
     box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
+  // Separate checkbox column (Rails + React): separator on the first data column
+  .table-header-cells-custom + th[colspan="1"],
+  .table-header-cells-custom + .table-header-cells[colspan="1"],
+  td.checkbox-cell + td,
+  td.checkbox-cell + .pb_table_td {
+    box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+  }
+
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -715,6 +721,12 @@
         box-shadow: 0 0 0 0 !important;
       }
 
+      // Re-apply after the nth-child(2) clear above (checkbox column layouts)
+      td.checkbox-cell + td,
+      td.checkbox-cell + .pb_table_td {
+        box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+      }
+
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,
@@ -816,10 +828,15 @@
     }
 
     .table-header-cells:first-child,
-    .table-header-cells-custom:first-child,
-    td:first-child,
-    .pb_table_td:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child {
+    td:first-child:not(.checkbox-cell),
+    .pb_table_td:first-child:not(.checkbox-cell) {
+      box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+    }
+
+    .table-header-cells-custom + th[colspan="1"],
+    .table-header-cells-custom + .table-header-cells[colspan="1"],
+    td.checkbox-cell + td,
+    td.checkbox-cell + .pb_table_td {
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -293,6 +293,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onChange={onPageChange}
             position="top"
             range={paginationProps?.range}
+            sectionSeparator={paginationProps?.sectionSeparator}
             table={table}
         />
       )}
@@ -375,6 +376,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onChange={onPageChange}
             position="bottom"
             range={paginationProps?.range}
+            sectionSeparator={paginationProps?.sectionSeparator}
             table={table}
         />
       )}

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

@@ -1385,6 +1385,47 @@ test("cascadeCollapse=true with header toggle all: collapse all then expand all
   })
 })
 
+test("pagination does not render section separators by default", () => {
+  const { container } = render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pagination
+        paginationProps={{ pageSize: 1 }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  expect(container.querySelectorAll(".pb_paginate")).toHaveLength(2)
+  expect(container.querySelectorAll(".pb_section_separator_kit")).toHaveLength(0)
+})
+
+test("paginationProps.sectionSeparator renders separators for top and bottom pagination", () => {
+  const { container } = render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        pagination
+        paginationProps={{ pageSize: 1, sectionSeparator: true }}
+        tableData={MOCK_DATA}
+        tableProps={{ container: false }}
+    />
+  )
+
+  const paginations = container.querySelectorAll(".pb_paginate")
+  const separators = container.querySelectorAll(".pb_section_separator_kit")
+
+  expect(paginations).toHaveLength(2)
+  expect(separators).toHaveLength(3)
+  expect(paginations[0]).toHaveClass("ml_lg")
+  expect(paginations[0]).toHaveClass("py_xs")
+  expect(paginations[1]).toHaveClass("ml_lg")
+  expect(paginations[1]).toHaveClass("py_xs")
+  expect(separators[0].nextElementSibling).toBe(paginations[0])
+  expect(paginations[0].nextElementSibling).toBe(separators[1])
+  expect(separators[2].nextElementSibling).toBe(paginations[1])
+})
+
 const groupedColumnDefinitions = [
   {
     accessor: "year",
@@ -1477,4 +1518,5 @@ test("single header row does not mark every column as last-header-cell", () => {
   expect(headers[0]).not.toHaveClass("last-header-cell")
   expect(groupEnds).toHaveLength(1)
   expect(kit.querySelector("tbody td.last-cell")).not.toBeInTheDocument()
-})
+})
+

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_section_separator.jsx

@@ -0,0 +1,90 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Button from '../../pb_button/_button'
+import Card from '../../pb_card/_card'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import TextInput from '../../pb_text_input/_text_input'
+import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
+
+const AdvancedTablePaginationSectionSeparator = (props) => {
+  const columnDefinitions = [
+    {
+      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",
+    },
+  ]
+
+  const paginationProps = {
+    pageSize: 10,
+    sectionSeparator: true,
+  }
+
+  return (
+    <Card padding="none">
+      <Filter
+          background={false}
+          minWidth="xs"
+          results={PAGINATION_MOCK_DATA.length}
+          sortOptions={{
+            year: "Year",
+            newEnrollments: "New Enrollments",
+            scheduledMeetings: "Scheduled Meetings",
+          }}
+          sortValue={[{ name: "year", dir: "asc" }]}
+      >
+        {({ closePopover }) => (
+          <>
+            <TextInput label="Year" />
+            <Flex spacing="between">
+              <Button
+                  onClick={closePopover}
+                  text="Filter"
+              />
+              <Button
+                  text="Defaults"
+                  variant="secondary"
+              />
+            </Flex>
+          </>
+        )}
+      </Filter>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          pagination
+          paginationProps={paginationProps}
+          responsive="none"
+          tableData={PAGINATION_MOCK_DATA}
+          tableProps={{ container: false }}
+          {...props}
+      />
+    </Card>
+  )
+}
+
+export default AdvancedTablePaginationSectionSeparator

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

@@ -0,0 +1,5 @@
+Use `sectionSeparator` on `paginationProps` to add section separators and spacing around pagination, matching the Table pagination/filter pattern.
+
+- Defaults to `false`
+- When `true`, top pagination is sandwiched by separators, bottom pagination gets a leading separator, and both use Table filter spacing (`marginLeft="lg"`, `paddingY="xs"`)
+- Recommended with `tableProps.container` set to `false` inside a Card (often with a Filter above), as shown here

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

@@ -3,4 +3,5 @@
 - `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
 - `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
 - `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
-- `onPageChange`: A callback function that gives to access to the current page index.
+- `onPageChange`: A callback function that gives to access to the current page index.
+- `sectionSeparator`: Adds section separators and Table filter-pattern spacing around pagination. Default is `false`. See the [Section Separator](https://playbook.powerapp.cloud/kits/advanced_table/react#pagination-section-separator) example.

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

@@ -67,6 +67,7 @@ examples:
   - advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
+  - advanced_table_pagination_section_separator: Pagination Section Separator
   - advanced_table_loading: Loading State
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_column_headers: Multi-Header Columns

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

@@ -13,6 +13,7 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTableFullWidthCell } from './_advanced_table_full_width_cell.jsx'
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
+export { default as AdvancedTablePaginationSectionSeparator } from './_advanced_table_pagination_section_separator.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
 export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
 export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'

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

@@ -1,14 +1,19 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
+    <% is_lowest_header_row = row_index == header_rows.size - 1 %>
     <%= pb_rails("table/table_row") do %>
-      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
-        <%= object.render_select_all_header %>
+      <% if object.selectable_rows && object.enable_toggle_expansion == "none" %>
+        <% if is_lowest_header_row %>
+          <%= object.render_select_all_header %>
+        <% else %>
+          <%= object.render_select_all_header_spacer %>
+        <% end %>
       <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_component = object.header_component_info(cell, cell_index, row_index) %>
         <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
           <%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
-            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
+            <% if cell_index.zero? && is_lowest_header_row %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
                   <%= object.render_select_all_checkbox %>

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

@@ -58,13 +58,8 @@ module Playbook
       # 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 << "header-cells-with-actions" if show_actions_bar
-          additional_classes << "checkbox-cell-header"
-          additional_classes << "pinned-left" if responsive == "scroll"
           pb_rails("table/table_header", props: {
-                     classname: additional_classes.join(" "),
+                     classname: select_all_header_classname,
                    }) do
             pb_rails("checkbox", props: {
                        id: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
@@ -76,6 +71,15 @@ module Playbook
         end
       end
 
+      # Empty checkbox-column cell for upper multi-header rows so columns stay aligned
+      def render_select_all_header_spacer
+        if selectable_rows
+          pb_rails("table/table_header", props: {
+                     classname: select_all_header_classname,
+                   })
+        end
+      end
+
       # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
       def render_select_all_checkbox
         if selectable_rows
@@ -212,6 +216,15 @@ module Playbook
 
     private
 
+      def select_all_header_classname
+        additional_classes = []
+        additional_classes << "table-header-cells-custom"
+        additional_classes << "header-cells-with-actions" if show_actions_bar
+        additional_classes << "checkbox-cell-header"
+        additional_classes << "pinned-left" if responsive == "scroll"
+        additional_classes.join(" ")
+      end
+
       def header_layout_styles(cell)
         original_def = find_original_column_def_for_cell(cell)
         return {} unless original_def

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

@@ -189,7 +189,7 @@ module Playbook
 
           pb_rails("checkbox", props: {
                      id: "#{prefix}select-row-#{row_id || row.object_id}",
-                     indeterminate_main: !last_row,
+                     indeterminate_main: row_children.present?,
                      indeterminate_main_labels: ["", ""],
                      indeterminate_parent: indeterminate_parent,
                      name: "#{prefix}select-row-#{row_id || row.object_id}",

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

@@ -16,6 +16,10 @@
       display: block;
     }
 
+    .date_picker_input_container {
+      position: relative;
+    }
+    
     @import "./sass_partials/calendar_input_icon";
   }
 

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

@@ -297,19 +297,57 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         )}
           <>
             <div className="date_picker_input_wrapper">
-              <input
-                  aria-describedby={errorId}
-                  aria-invalid={!!error}
-                  autoComplete="off"
-                  className="date_picker_input"
-                  disabled={disableInput}
-                  id={pickerId}
-                  name={name}
-                  onChange={inputOnChange}
-                  placeholder={placeholder}
-                  style={{ cursor: getCursorStyle(filteredProps.cursor) }}
-                  value={inputValue}
-              />
+              <div className="date_picker_input_container">
+                <input
+                    aria-describedby={errorId}
+                    aria-invalid={!!error}
+                    autoComplete="off"
+                    className="date_picker_input"
+                    disabled={disableInput}
+                    id={pickerId}
+                    name={name}
+                    onChange={inputOnChange}
+                    placeholder={placeholder}
+                    style={{ cursor: getCursorStyle(filteredProps.cursor) }}
+                    value={inputValue}
+                />
+
+                {!hideIcon && !inLine &&
+                  <div
+                      className={iconWrapperClass()}
+                      id={`cal-icon-${pickerId}`}
+                  >
+                    <Icon
+                        className="cal_icon"
+                        icon="calendar-alt"
+                    />
+                  </div>
+                }
+
+                {inLine ?
+                  <div>
+                    <div
+                        className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
+                        id={`${pickerId}-icon-plus`}
+                    >
+                      <Icon
+                          className="date-picker-plus-icon"
+                          icon="plus"
+                      />
+                    </div>
+                    <div
+                        className={`${iconWrapperClass()} date-picker-inline-angle-down`}
+                        id={`${pickerId}-angle-down`}
+                    >
+                      <Icon
+                          className="angle_down_icon svg-inline--fa"
+                          customIcon={angleDown}
+                      />
+                    </div>
+                  </div>
+                  : null
+                }
+              </div>
 
               {error &&
                   <Body
@@ -322,42 +360,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   />
               }
             </div>
-
-            {!hideIcon && !inLine &&
-              <div
-                  className={iconWrapperClass()}
-                  id={`cal-icon-${pickerId}`}
-              >
-                <Icon
-                    className="cal_icon"
-                    icon="calendar-alt"
-                />
-              </div>
-            }
-
-            {inLine ?
-              <div>
-                <div
-                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
-                    id={`${pickerId}-icon-plus`}
-                >
-                  <Icon
-                      className="date-picker-plus-icon"
-                      icon="plus"
-                  />
-                </div>
-                <div
-                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
-                    id={`${pickerId}-angle-down`}
-                >
-                  <Icon
-                      className="angle_down_icon svg-inline--fa"
-                      customIcon={angleDown}
-                  />
-                </div>
-              </div>
-              : null
-            }
           </>
       </div>
     </div>

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

@@ -18,66 +18,66 @@
         <% end %>
       </label>
     <% end %>
-    <% if content.present? %>
-      <%= content %>
-    <% else %>
-    <%= pb_rails("text_input", props: {
-      aria: object.input_aria,
-      autocomplete: false,
-      cursor: object.cursor,
-      dark: object.dark,
-      data: object.input_data,
-      disabled: object.disable_input,
-      error: object.error,
-      id: object.picker_id,
-      margin_bottom: "none",
-      name: object.name,
-      placeholder: object.placeholder,
-      required: object.required,
-      validation: object.validation_message.present? ? { message: object.validation_message } : {},
-    }) %>
-    <% end %>
+    <div class="date_picker_input_container">
+      <% if content.present? %>
+        <%= content %>
+      <% else %>
+        <%= pb_rails("text_input", props: {
+          aria: object.input_aria,
+          autocomplete: false,
+          cursor: object.cursor,
+          dark: object.dark,
+          data: object.input_data,
+          disabled: object.disable_input,
+          error: object.error,
+          id: object.picker_id,
+          margin_bottom: "none",
+          name: object.name,
+          placeholder: object.placeholder,
+          required: object.required,
+          validation: object.validation_message.present? ? { message: object.validation_message } : {},
+        }) %>
+      <% end %>
+      <% if !object.hide_icon && !object.inline %>
+        <div
+          class="<%= object.icon_wrapper_class %>"
+          id="cal-icon-<%= object.picker_id %>"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "cal_icon",
+            icon: "calendar-alt"
+          }) %>
+        </div>
+      <% end %>
+       <!-- Inline -->
+      <% if object.inline %>
+        <!-- Plus Icon -->
+        <div
+            class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
+            id="<%= object.picker_id %>-icon-plus"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "plus-icon",
+            icon: "plus"
+          }) %>
+        </div>
+
+        <!-- Angle Down Icon -->
+        <div
+            class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
+            id="<%= object.picker_id %>-angle-down"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "angle_down_icon",
+            custom_icon: Playbook::Engine::root.join(angle_down_path)
+          }) %>
+        </div>
+      <% end %>
+    </div>
     <% if object.selection_type == "quickpick" %>
       <input type="hidden" id="<%= "#{object.start_date_id}" %>" name="<%= "#{object.start_date_name}" %>">
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
     <% end %>
-
-    <% if !object.hide_icon && !object.inline %>
-      <div
-          class="<%= object.icon_wrapper_class %>"
-          id="cal-icon-<%= object.picker_id %>"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "cal_icon",
-          icon: "calendar-alt"
-        }) %>
-      </div>
-    <% end %>
-
-    <!-- Inline -->
-    <% if object.inline %>
-      <!-- Plus Icon -->
-      <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
-          id="<%= object.picker_id %>-icon-plus"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "plus-icon",
-          icon: "plus"
-        }) %>
-      </div>
-
-      <!-- Angle Down Icon -->
-      <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
-          id="<%= object.picker_id %>-angle-down"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "angle_down_icon",
-          custom_icon: Playbook::Engine::root.join(angle_down_path)
-        }) %>
-      </div>
-    <% end %>
   </div>
 
   <%= javascript_tag do %>