RubyGems - playbook_ui_docs - Versions diffs - 16.1.0 → 16.2.0.pre.alpha.PLAY2719atpinnedrowsrails14398 - Mend

playbook_ui_docs 16.1.0 → 16.2.0.pre.alpha.PLAY2719atpinnedrowsrails14398

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7af41d8f2dfa67c012a526cfe7b59e3041f74c298ddeac8cccdf9f849977ca09
-  data.tar.gz: 4ffe5878b6a627c1f220292ee3a4c4feecb6e8cdf4daddc5eb099f99794e6e46
+  metadata.gz: 642f355d02eb89d3ea626cadbd833cfae6dff9dc4dbed8a0379dc01209c67305
+  data.tar.gz: 57b20527744b34be8e1cb7603baf0cd57e101247b72dc56610c7e1dc47dd7800
 SHA512:
-  metadata.gz: 18720a08be25696565cb91d1f61035900c9370c59bc38a4cb5f639e66cc5b70868d6bc7a73e5c5d70866b52ae5e1447b2b5f13143018fe4179b5f0cf27be1593
-  data.tar.gz: 664be4f7f05e4e00677b5ef68e9d045181bb0a14a656569b2b1f00e56a9ad56857985e8499596dc73c3f84ae5ea32447b4f905ec096dd487edb6774147e2aa34
+  metadata.gz: 3aee40e197d57063a09a16b7f79c951ba8c3a5506bb07b61ef5bcb3a9d0586889a06a8bf8e73dc40ddd8a76f8cff1b96cb1fc79593b77d94f7827f8055f13e60
+  data.tar.gz: 2119609051919165117513faa4b023e0f7a7a60bc45f0b912aea63c7db499fefbdbd319744ec3588e840f8155ccd5d61fe9650b9be921861418fb9cfbdd6b9f6

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

@@ -0,0 +1,71 @@
+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 ADDED Viewed

@@ -0,0 +1,4 @@
+`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_pinned_rows_rails.html.erb ADDED Viewed

@@ -0,0 +1,57 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data_with_id.sort! do |a, b|
+    value_a = a[sort_param] || a[sort_param.to_sym]
+    value_b = b[sort_param] || b[sort_param.to_sym]
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      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",
+    }
+] %>
+<% pinned_rows = { top: ["8"] } %>
+<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md ADDED Viewed

@@ -0,0 +1,7 @@
+Use the `pinned_rows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+**NOTE:**
+- Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
+- Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
+- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
+- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md CHANGED Viewed

@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
 ### sortIcon
-An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.
+An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.

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

@@ -7,6 +7,7 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
+  - advanced_table_pinned_rows_rails: Pinned Rows
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -78,6 +79,7 @@ examples:
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
+  - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color

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

@@ -47,4 +47,5 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant.html.erb ADDED Viewed

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { margin_y: "md", text: "Small Size (sm)" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "danger", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Medium Size (md)" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "danger", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Large Size (lg)" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "danger", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", loading: true, margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant.jsx ADDED Viewed

@@ -0,0 +1,180 @@
+import React from 'react'
+import Button from "../../pb_button/_button"
+import Caption from "../../pb_caption/_caption"
+const ButtonIconVariant = (props) => (
+  <div>
+    <Caption
+        marginY="md"
+        text="Small Size (sm)"
+    />
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        variant="secondary"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        variant="link"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        variant="danger"
+        {...props}
+    />
+    {' '}
+    <Button
+        disabled
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        loading
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        {...props}
+    />
+    <br/>
+    <Caption
+        marginY="md"
+        text="Medium Size (md)"
+    />
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        variant="secondary"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        variant="link"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        variant="danger"
+        {...props}
+    />
+    {' '}
+    <Button
+        disabled
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        loading
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        {...props}
+    />
+    <br/>
+    <Caption
+        marginY="md"
+        text="Large Size (lg)"
+    />
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        variant="secondary"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        variant="link"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        variant="danger"
+        {...props}
+    />
+    {' '}
+    <Button
+        disabled
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        loading
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        {...props}
+    />
+  </div>
+)
+export default ButtonIconVariant

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_rails.md ADDED Viewed

@@ -0,0 +1 @@

+ The icon button variant automatically renders when you provide an `icon` prop without a corresponding `text` prop. The button will only display an icon (no text) and will be wrapped with the icon button styling. This works with all button variants including "link", "primary", "secondary", etc. Simply use `<%= pb_rails("button", props: { icon: "plus", variant: "secondary" }) %>` to get an icon button.

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The icon button variant automatically renders when you provide an `icon` prop without a corresponding `text` prop. The button will only display an icon (no text) and will be wrapped with the icon button styling. This works with all button variants including "link", "primary", "secondary", etc. Simply use `<Button icon="rocket" variant="primary" />` to get an icon button.

data/app/pb_kits/playbook/pb_button/docs/example.yml CHANGED Viewed

@@ -13,6 +13,7 @@ examples:
   - button_form: Button Form Attribute
   - button_managed_disabled: Button Toggle Disabled State
   - button_managed_disabled_helper: Button Toggle Disabled State Helper
+  - button_icon_variant: Icon Button Variant
   react:
   - button_default: Button Variants
@@ -27,6 +28,7 @@ examples:
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover
+  - button_icon_variant: Icon Button Variant
   swift:
   - button_default_swift: Button Variants

data/app/pb_kits/playbook/pb_button/docs/index.js CHANGED Viewed

@@ -4,6 +4,7 @@ export { default as ButtonLink } from './_button_link.jsx'
 export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonIconOptions } from './_button_icon_options.jsx'
+export { default as ButtonIconVariant } from './_button_icon_variant.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<%= pb_rails("checkbox" , props: {
+  required_indicator: true,
+  text: "Checkbox Label",
+  value: "checkbox-value",
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react'
+import Checkbox from '../_checkbox'
+const CheckboxRequiredIndicator = () => {
+  return (
+    <div>
+      <Checkbox
+          name="checkbox-name"
+          requiredIndicator
+          text="Checkbox label"
+          value="check-box value"
+      />
+    </div>
+  )
+}
+export default CheckboxRequiredIndicator

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml CHANGED Viewed

@@ -8,6 +8,7 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
+    # - checkbox_required_indicator: Required Indicator
   react:
   - checkbox_default: Default
@@ -17,6 +18,7 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
+  # - checkbox_required_indicator: Required Indicator
   swift:
     - checkbox_default_swift: Default

data/app/pb_kits/playbook/pb_checkbox/docs/index.js CHANGED Viewed

@@ -5,3 +5,4 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
+export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

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

	@@ -0,0 +1 @@
1	+ `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_date_picker/docs/_date_picker_required_indicator.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  picker_id: "date_picker_required_indicator",
+  label: "Required Date Picker",
+  required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.jsx ADDED Viewed

@@ -0,0 +1,13 @@
+import React from "react"
+import DatePicker from "../_date_picker"
+const DatePickerRequiredIndicator = (props) => (
+  <DatePicker
+      label="Required Date Picker"
+      pickerId="date_picker_required_indicator"
+      requiredIndicator
+      {...props}
+  />
+)
+export default DatePickerRequiredIndicator

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label to visually indicate that the field is required. This is purely visual and does not enforce validation—you can pair it with HTML `required`, client-side validation, or server-side validation as needed.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml CHANGED Viewed

@@ -31,6 +31,7 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
+  - date_picker_required_indicator: Required Indicator
   - date_picker_turbo_frames: Within Turbo Frames
   react:
@@ -64,3 +65,4 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
+  - date_picker_required_indicator: Required Indicator

data/app/pb_kits/playbook/pb_date_picker/docs/index.js CHANGED Viewed

@@ -27,4 +27,5 @@ export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
 export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
-export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
+export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
+export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";

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

@@ -0,0 +1,3 @@
+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 ADDED Viewed

@@ -0,0 +1,3 @@
+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_required_indicator.html.erb ADDED Viewed

@@ -0,0 +1,14 @@
+<%
+  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: "dropdown_required_indicator",
+  label: "Select a Country",
+  options: options,
+  required_indicator: true
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.jsx ADDED Viewed

@@ -0,0 +1,42 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+const DropdownRequiredIndicator = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us",
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca",
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk",
+    },
+  ];
+  return (
+    <div>
+      <Dropdown
+          label="Select a Country"
+          options={options}
+          requiredIndicator
+          {...props}
+      >
+        {options.map((option) => (
+          <Dropdown.Option
+              key={option.id}
+              option={option}
+          />
+        ))}
+      </Dropdown>
+    </div>
+  );
+};
+export default DropdownRequiredIndicator;

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (\*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -0,0 +1,52 @@
+<%
+  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>