RubyGems - playbook_ui_docs - Versions diffs - 16.0.0 → 16.1.0.pre.alpha.PLAY2684iconbuttonvariant14251 - Mend

playbook_ui_docs 16.0.0 → 16.1.0.pre.alpha.PLAY2684iconbuttonvariant14251

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 (115) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f6979e6789aa5d34bb598b9fb40404ff29658c2109f118497647503414d0aa57
-  data.tar.gz: fc1f6bfcfac4869de68fdee635d998bba02f6c75f75f05750e527957569cf755
+  metadata.gz: e18f62273ec925c94ff02108912de2c0ecfa5e8b4b76e44b6896cad278150d34
+  data.tar.gz: f5888f9e954ee60ac3046594b4c9e52999522a89a7c6e0b78dbb09b9b748c10a
 SHA512:
-  metadata.gz: 93046e97dbb1c968907098cb73656a55fc7d25e0d43c0f915e37959e57fe745b3cdd2635c4b3403f37ca57060bdf54018c5e1e7fe3babf1fd15caa9bcbdbabac
-  data.tar.gz: 7442bdffb6f159cc45fa7d64da4cd98df25b700fc88d470b243740e7dbc82e504d7c23ac401c475754b2794b0bd5fc2e7dd0309939397106a761158aefc3fd1c
+  metadata.gz: 0a3442931f98c002dc51540b8e1f39b3741670417d806f399c582e9a34011b6b43fdd9565b560503b3f52289f41586593eac4d686bcaa94c3f81583a30cabd0a
+  data.tar.gz: d27b7b8a40f4a07701970e69c517f99dbd296bb0cfc996e6a846d9e92a4842c68f3e5918971133afc385291adb1929bdb777bcf3a2b3171739c0f3be7eb316aa

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_inline_row_loading.md CHANGED Viewed

@@ -6,9 +6,9 @@ In the first Advanced Table in this code example, 2021 has an empty children arr
 This prop is set to `false` by default.
-### persistToggleExpansion
+### persistToggleExpansionButton
 The `persistToggleExpansionButton` 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 preceeding 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 `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`.
-This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
+This prop is set to `false` by default and should only be used in conjunction with `inlineRowLoading`.

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

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

@@ -0,0 +1,18 @@
+### 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_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

@@ -29,6 +29,7 @@ examples:
   - advanced_table_background_control_rails: Column Styling Background Color
   - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
   - advanced_table_column_border_color_rails: Column Group Border Color
+  - advanced_table_inline_row_loading_rails: Inline Row Loading
   react:
@@ -77,6 +78,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_background/docs/_background_responsive.jsx ADDED Viewed

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

	@@ -0,0 +1 @@
1	+ 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_background/docs/example.yml CHANGED Viewed

@@ -20,3 +20,4 @@ examples:
   - background_category: Category
   - background_size: Size
   - background_overlay: Overlay
+  - background_responsive: Responsive

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

@@ -7,3 +7,4 @@ export { default as BackgroundStatusSubtle } from './_background_status_subtle.j
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
 export { default as BackgroundOverlay } from './_background_overlay.jsx'
+export { default as BackgroundResponsive } from './_background_responsive.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_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_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>