playbook_ui_docs 16.1.0.pre.alpha.play277814027 → 16.1.0.pre.rc.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.1.0.pre.alpha.play277814027
+  version: 16.1.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-30 00:00:00.000000000 Z
+date: 2026-01-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -64,8 +64,6 @@ files:
 - 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_background.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
@@ -102,8 +100,6 @@ files:
 - 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
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md
@@ -233,8 +229,6 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_light.md
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.md
-- app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_responsive.md
 - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_size.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_size.md
@@ -578,7 +572,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
@@ -843,8 +836,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/index.js
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
@@ -906,13 +897,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
@@ -943,9 +927,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
@@ -1426,9 +1407,6 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
@@ -1473,7 +1451,6 @@ files:
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
-- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
 - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
@@ -1630,9 +1607,6 @@ files:
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
@@ -1796,9 +1770,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
@@ -1935,8 +1906,6 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
@@ -1954,9 +1923,6 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
@@ -2157,7 +2123,6 @@ files:
 - app/pb_kits/playbook/pb_stat_value/docs/example.yml
 - app/pb_kits/playbook/pb_stat_value/docs/index.js
 - app/pb_kits/playbook/pb_table/docs/_description.md
-- app/pb_kits/playbook/pb_table/docs/_sections.yml
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
@@ -2346,7 +2311,6 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
-- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
@@ -2357,12 +2321,7 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
-- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
-- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
-- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb
-- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx
-- app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
 - app/pb_kits/playbook/pb_textarea/docs/example.yml
@@ -2407,9 +2366,6 @@ files:
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md

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

@@ -1,71 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import colors from '../../tokens/exports/_colors.module.scss'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-import  Flex  from '../../pb_flex/_flex'
-import  Title  from '../../pb_title/_title'
-import  Body  from '../../pb_body/_body'
-
-
-const AdvancedTableColumnStylingBackgroundCustom = (props) => {
-  const columnDefinitions = [
-{
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      customRenderer: (row, value) => (
-        <Flex flexDirection="column">
-          <Title size={4}
-              text={value} 
-          />
-          <Body text="lorem ipsum" />
-          <Body text="lorem ipsum" />
-        </Flex>
-      ), 
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{
-        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
-        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-      columnStyling:{
-        cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
-      },
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
-    },
-    {
-      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 AdvancedTableColumnStylingBackgroundCustom

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

@@ -1,4 +0,0 @@
-`cellBackgroundColor` and `fontColor` can also accept functions for conditional styling based on row data. The function receives the row object and returns a color value.
-
-See the code snippet below for more details.
-

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

@@ -1,64 +0,0 @@
-<% 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("caption", props: { text: "Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" }) %>
-
-<%= pb_rails("advanced_table", props: {
-  id: "inline-loading-table-1",
-  table_data: @table_data_inline_loading,
-  column_definitions: column_definitions,
-  enable_toggle_expansion: "all",
-  inline_row_loading: true,
-  margin_bottom: "md"
-}) %>
-
-<%= pb_rails("caption", props: { text: "Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" }) %>
-
-<%= pb_rails("advanced_table", props: {
-  id: "inline-loading-table-2",
-  table_data: @table_data_inline_loading_empty_children,
-  column_definitions: column_definitions,
-  enable_toggle_expansion: "all",
-  inline_row_loading: true,
-  margin_bottom: "md"
-}) %>
-
-<%= pb_rails("caption", props: { text: "Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" }) %>
-
-<%= pb_rails("advanced_table", props: {
-  id: "inline-loading-table-3",
-  table_data: @table_data_inline_loading_empty_children,
-  column_definitions: column_definitions,
-  enable_toggle_expansion: "all",
-  inline_row_loading: true,
-  persist_toggle_expansion_button: true
-}) %>

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

@@ -1,18 +0,0 @@
-### inline_row_loading
-By default, the kit assumes that the initial dataset is complete, rendering expansion controls only when children are present. If, however, you want to implement lazy-loading patterns where children are fetched only when a parent is expanded, use the `inline_row_loading` prop.
-
-When `inline_row_loading` is set to `true`:
-- Expansion controls are rendered for rows with empty `children` arrays (you must pass `children: []` to any row that will have children loaded later)
-- When such a row is expanded, an inline loading indicator appears until the child data is loaded
-- This enables lazy-loading patterns without one-off hacks
-
-In the first table above, row "2021" has an empty `children` array. Click to expand it and see the inline loading state. Rows 2 and 3 have actual child data.
-
-This prop is set to `false` by default.
-
-### persist_toggle_expansion_button
-The `persist_toggle_expansion_button` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
-
-In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persist_toggle_expansion_button` in place. The third Advanced Table shows the toggle all button due to `persist_toggle_expansion_button`.
-
-This prop is set to `false` by default and should only be used in conjunction with `inline_row_loading`.

data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import Background from '../../pb_background/_background'
-
-const BackgroundResponsive = (props) => (
-  <>
-    <Background
-        alt="colorful background"
-        backgroundColor={{ xs: "primary", sm: "warning", md: "success", lg: "error", xl: "category_1" }}
-        className="background lazyload"
-        padding="xl"
-        {...props}
-    />
-    <br/>
-    <Background
-        alt="colorful background"
-        className="background lazyload"
-        imageUrl={{
-          xs: "https://unsplash.it/500/400/?image=633",
-          sm: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
-          md: "https://unsplash.it/500/400/?image=633",
-          lg: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
-          xl: "https://unsplash.it/500/400/?image=633"
-        }}
-        padding="xl"
-        {...props}
-    />
-  </>
-)
-
-export default BackgroundResponsive

data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md

@@ -1 +0,0 @@
-The `backgroundColor`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`, and `imageUrl` props support responsive sizes. To use them, pass an object to the prop containing your values relative to responsive break points. To test this here, resize your browser window to responsively change these Backgrounds' `backgroundColor` and `imageUrl`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md

@@ -1 +0,0 @@
-`pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md

@@ -1,3 +0,0 @@
-The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
-
-The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md

@@ -1,3 +0,0 @@
-The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
-
-The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb

@@ -1,52 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
-  ]
-%>
-
-<%= pb_rails("dropdown", props: {
-  id: "date-range-quickpick-reset-closeable",
-  label: "Quick Pick",
-  variant: "quickpick",
-  clearable: false
-}) %>
-
-<%= pb_rails("button", props: {
-  margin_y: "md",
-  text: "Reset",
-  html_options: {
-    onclick: "handleReset()"
-  }
-}) %>
-
-<%= pb_rails("dropdown", props: {
-  id: "closeable-default",
-  options: options,
-  clearable: false,
-  default_value: options.last,
-  margin_bottom: "md",
-  label: "Default"
-}) %>
-
-<%= pb_rails("dropdown", props: {
-  id: "closeable-subtle",
-  options: options,
-  clearable: false,
-  default_value: options.second,
-  variant: "subtle",
-  separators: false,
-  label: "Subtle"
-}) %>
-
-<script>
-  function handleReset() {
-    const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
-    const instance = dropdown?._pbDropdownInstance;
-    
-    if (instance) {
-      instance.clearSelection();
-    }
-  }
-</script>

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

@@ -1,72 +0,0 @@
-import React, { useRef } from 'react'
-
-import Button from '../../pb_button/_button'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownWithClearable = (props) => {
-    const dropdownRef = useRef(null)
-
-    const options = [
-        {
-            label: "United States",
-            value: "unitedStates",
-            id: "us"
-        },
-        {
-            label: "Canada",
-            value: "canada",
-            id: "ca"
-        },
-        {
-            label: "Pakistan",
-            value: "pakistan",
-            id: "pk"
-        }
-    ]
-
-    const handleReset = () => {
-        if (dropdownRef.current) {
-            dropdownRef.current.clearSelected()
-        }
-    }
-
-    return (
-        <>
-            <Dropdown
-                clearable={false}
-                label="Quick Pick"
-                onSelect={() => {}}
-                ref={dropdownRef}
-                variant="quickpick"
-                {...props}
-            />
-            <Button
-                marginY="md"
-                onClick={handleReset}
-                text="Reset"
-            />
-
-            <Dropdown
-                clearable={false}
-                defaultValue={options[options.length - 1]}
-                label="Default"
-                marginBottom="md"
-                options={options}
-                variant="default"
-                {...props}
-            />
-
-            <Dropdown
-                clearable={false}
-                defaultValue={options[1]}
-                label="Subtle"
-                options={options}
-                separators={false}
-                variant="subtle"
-                {...props}
-            />
-        </>
-    )
-}
-
-export default DropdownWithClearable

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md

@@ -1,5 +0,0 @@
-The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
-
-This is useful in two scenarios:
-1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
-2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)

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

@@ -1,33 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownWithConstrainHeight = (props) => {
-  // Create a long list of options to demonstrate height constraint
-  const options = Array.from({ length: 30 }, (_, i) => ({
-    label: `Option ${i + 1}`,
-    value: `option_${i + 1}`,
-    id: `opt_${i + 1}`
-  }))
-
-  return (
-    <>
-      <Dropdown
-          data={{ testid: "dropdown-no-constrain" }}
-          label="Without Constrain Height (Default)"
-          marginBottom="md"
-          options={options}
-          {...props}
-      />
-
-      <Dropdown
-          constrainHeight
-          data={{ testid: "dropdown-constrain" }}
-          label="With Constrain Height"
-          options={options}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default DropdownWithConstrainHeight

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb

@@ -1,20 +0,0 @@
-<% 
-  # Create a long list of options to demonstrate height constraint
-  options = (1..30).map do |i|
-    { label: "Option #{i}", value: "option_#{i}", id: "opt_#{i}" }
-  end
-%>
-
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-no-constrain",
-  options: options,
-  label: "Without Constrain Height (Default)",
-  margin_bottom: "md"
-}) %>
-
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-constrain",
-  options: options,
-  constrain_height: true,
-  label: "With Constrain Height"
-}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md

@@ -1,8 +0,0 @@
-The `constrain_height` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
-
-When `constrain_height` is `true`, the dropdown will:
-- Have a maximum height of 18em
-- Show a scrollbar when content exceeds the max height
-- Prevent the dropdown from extending beyond the viewport
-
-This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md

@@ -1,8 +0,0 @@
-The `constrainHeight` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
-
-When `constrainHeight` is `true`, the dropdown will:
-- Have a maximum height of 18em
-- Show a scrollbar when content exceeds the max height
-- Prevent the dropdown from extending beyond the viewport
-
-This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb

@@ -1,9 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
-  ]
-%>
-
-<%= pb_rails("dropdown", props: { options: options, placeholder: "Choose a country" }) %>

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

@@ -1,33 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownWithPlaceholder = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "canada",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ];  
-
-  return (
-    <Dropdown
-        options={options}
-        placeholder="Choose a country"
-        {...props}
-    />
-  )
-}
-
-export default DropdownWithPlaceholder

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md

@@ -1,3 +0,0 @@
-The `placeholder` prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
-
-The placeholder prop works with all dropdown variants (`default`, `subtle`, and `quickpick`). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.