playbook_ui 14.21.2.pre.alpha.PLAY22558410 → 14.21.2

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "14.21.2"
-  VERSION = "14.21.2.pre.alpha.PLAY22558410"
+  PREVIOUS_VERSION = "14.21.1"
+  VERSION = "14.21.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.21.2.pre.alpha.PLAY22558410
+  version: 14.21.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-13 00:00:00.000000000 Z
+date: 2025-06-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -274,7 +274,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts
 - app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnStylingHelper.ts
 - app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts
@@ -286,7 +285,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.rb
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
-- app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb
@@ -308,14 +306,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx
@@ -337,7 +327,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
@@ -357,8 +346,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
@@ -1390,10 +1377,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb
@@ -1401,10 +1384,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
@@ -1483,8 +1462,6 @@ files:
 - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
 - app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
@@ -1516,7 +1493,6 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
-- app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb
@@ -3633,11 +3609,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-B80UsDrG.js
-- dist/chunks/_weekday_stacked-D1bqIne1.js
-- dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-CTkMyvfQ.js
-- dist/chunks/pb_form_validation-BVF3TmcL.js
+- dist/chunks/_typeahead-BlPRej0F.js
+- dist/chunks/_weekday_stacked-CzxoxxCR.js
+- dist/chunks/lazysizes-DHz07jlL.js
+- dist/chunks/lib-D4vXIZF5.js
+- dist/chunks/pb_form_validation-DyvJ8iPe.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnStylingHelper.ts

@@ -1,15 +0,0 @@
-export const findColumnDefByAccessor = (
-  defs: any[],
-  targetAccessor: string
-): any | undefined => {
-  for (const def of defs) {
-    if (def.accessor === targetAccessor) {
-      return def;
-    }
-    if (Array.isArray(def.columns) && def.columns.length) {
-      const found = findColumnDefByAccessor(def.columns, targetAccessor);
-      if (found) return found;
-    }
-  }
-  return undefined;
-};

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

@@ -1,36 +0,0 @@
-function showActionBar(actionBar, selectedCount) {
-  // Show action bar directly
-  actionBar.style.height = "auto";
-  actionBar.style.overflow = "visible";
-  actionBar.style.opacity = "1";
-  actionBar.style.transitionProperty = "all";
-  actionBar.style.transitionTimingFunction = "ease-in-out";
-  actionBar.classList.remove("p_none");
-  actionBar.classList.add("p_xs", "is-visible", "show-action-card");
-
-  // Update the count
-  const countElement = actionBar.querySelector(".selected-count");
-  if (countElement) {
-    countElement.textContent = `${selectedCount} Selected`;
-  }
-}
-
-function hideActionBar(actionBar) {
-  // Hide action bar directly
-  actionBar.style.height = "0px";
-  actionBar.style.overflow = "hidden";
-  actionBar.style.opacity = "0";
-  actionBar.classList.add("p_none");
-  actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-}
-
-export function updateSelectionActionBar(table, selectedCount) {
-  const actionBar = table.querySelector(".row-selection-actions-card");
-  if (!actionBar) return;
-
-  if (selectedCount > 0) {
-    showActionBar(actionBar, selectedCount);
-  } else {
-    hideActionBar(actionBar);
-  }
-}

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

@@ -1,51 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableColumnStyling = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{headerAlignment: "left", cellAlignment: "left"},
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      columnStyling:{headerAlignment: "center", cellAlignment: "center"},
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableColumnStyling

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

@@ -1,7 +0,0 @@
-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`.
-
-2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
-`columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -1,77 +0,0 @@
-import React from "react";
-import AdvancedTable from '../../pb_advanced_table/_advanced_table';
-import MOCK_DATA from "./advanced_table_mock_data.json";
-
-const AdvancedTableColumnStylingColumnHeaders = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-              columnStyling:{headerAlignment: "left", cellAlignment: "left"},
-
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-              columnStyling:{headerAlignment: "center", cellAlignment: "center"},
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-  return (
-    <>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </>
-  );
-};
-
-export default AdvancedTableColumnStylingColumnHeaders

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

@@ -1 +0,0 @@
-`columnStyling` can also be used with the multi column logic. When used in this way, `columnStyling` must be used within the leaf column's columnDefinition as shown.

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

@@ -1,63 +0,0 @@
-<% column_definitions = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    label: "Enrollment Data",
-    columns: [
-      {
-        label: "Enrollment Stats",
-        columns: [
-          {
-            accessor: "newEnrollments",
-            label: "New Enrollments",
-            column_styling:{header_alignment:"left", cell_alignment:"left"}
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Performance Data",
-    columns: [
-      {
-        label: "Completion Metrics",
-        columns: [
-          {
-            accessor: "completedClasses",
-            label: "Completed Classes",
-            column_styling:{header_alignment:"center", cell_alignment:"center"}
-          },
-          {
-            accessor: "classCompletionRate",
-            label: "Class Completion Rate",
-          },
-        ],
-      },
-      {
-        label: "Attendance",
-        columns: [
-          {
-            accessor: "attendanceRate",
-            label: "Attendance Rate",
-          },
-          {
-            accessor: "scheduledMeetings",
-            label: "Scheduled Meetings",
-          },
-        ],
-      },
-    ],
-  },
-] %>
-
-<%= 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: { 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_column_headers_rails.md

@@ -1 +0,0 @@
-`column_styling` can also be used with the multi column logic. When used in this way, `column_styling` must be used within the leaf column's column_definition as shown.

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

@@ -1,38 +0,0 @@
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      column_styling:{header_alignment:"left", cell_alignment:"left"}
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      column_styling:{header_alignment:"center", cell_alignment:"center"}
-    },
-    {
-      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: "column-styling", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= 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,7 +0,0 @@
-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`.
-
-2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
-
-`column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

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

@@ -1,3 +0,0 @@
-The `virtualizedRows` boolean prop enables the rendering of a virtualized table using [Tanstack's Virtualizer Library](https://tanstack.com/virtual/v3/docs/api/virtualizer) with infinite scroll capabilities for large data sets.
-
-**Note:** Not all Advanced Table props work perfectly with the Virtualized Table - for complex table configurations with many added features or controls consider using the [Pagination](https://playbook.powerapp.cloud/kits/advanced_table/react#pagination) version instead. Additionally, it is a known issue that due to the use of absolute positioning for the virtualized header, it does not render in Safari.

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

@@ -1,64 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-import { colors } from "playbook-ui"
-
-const AdvancedTableRowStyling = (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 rowStyling = [
-  {
-    rowId: "1",
-    backgroundColor: colors.warning,
-  },
-  {
-    rowId: "8",
-    backgroundColor: colors.category_1,
-    fontColor: colors.white,
-    expandButtonColor: colors.white,
-  },
-];
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          rowStyling={rowStyling}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableRowStyling

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

@@ -1,7 +0,0 @@
-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.
-- `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
-
-**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_dropdown/docs/_dropdown_with_custom_icon_options.html.erb

@@ -1,52 +0,0 @@
-<%
-  options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" }
-  ]
-%>
-
-<%= pb_rails("dropdown", props: { label: "Multiple Icons", options: options }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-          <%= pb_rails("flex") do %>
-            <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
-            <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-          <% end %>
-          <%= pb_rails("icon", props: { icon: "check" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<%= pb_rails("dropdown", props: { label: "Icon on Left", options: options, padding_y: "md" }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center" }) do %>
-          <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
-          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<%= pb_rails("dropdown", props: { label: "Icon on Right", options: options }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-          <%= pb_rails("icon", props: { icon: "check" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx

@@ -1,99 +0,0 @@
-import React from 'react'
-import Dropdown from '../_dropdown'
-
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import Icon from '../../pb_icon/_icon'
-
-const DropdownCustomIconOptions = (props) => {
-
-  const options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" },
-  ]
-
-
-  return (
-  <div>
-      <Dropdown label="Multiple Icons"
-          options={options}
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          >
-            <Flex align="center" 
-                justify="between"
-            >
-                <Flex align="center">
-                  <Icon icon="calendar" 
-                      paddingRight="xs"
-                      {...props}    
-                  />
-                  <Body color="default" 
-                      text={option.label}
-                      {...props}
-                  />
-                </Flex>
-                <Icon icon="check" 
-                    {...props}    
-                />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-
-      <Dropdown label="Icon on Left"
-          options={options} 
-          paddingY="md"
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id}
-              option={option}
-          >
-            <Flex align="center">
-              <Icon icon="calendar" 
-                  paddingRight="xs"
-                  {...props}
-              />
-              <Body color="default" 
-                  text={option.label}
-                  {...props}
-              />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-
-      <Dropdown label="Icon on Right"
-          options={options}
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id}
-              option={option}
-          >
-            <Flex align="center"
-                justify="between"
-            >
-              <Flex align="center">
-                <Body color="default" 
-                    text={option.label}
-                    {...props}
-                />
-              </Flex>
-              <Icon icon="check"
-                  {...props}
-              />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomIconOptions