RubyGems - playbook_ui_docs - Versions diffs - 16.1.0.pre.alpha.PLAY277014019 → 16.1.0.pre.alpha.ghostcrewfileuploadtext14338 - Mend

playbook_ui_docs 16.1.0.pre.alpha.PLAY277014019 → 16.1.0.pre.alpha.ghostcrewfileuploadtext14338

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

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b815ee376aa05b8997b7c3c79ab833d8b2a4ae11db5422a66673030f4f1b5b4
-  data.tar.gz: 4fa361e23349a16802edb2a0b6e0c2ec7f5e423291bea77ffb665f05a37ae133
+  metadata.gz: d96eabd3e0319a2ff7c2f27e5f51768c025e1092dbe4bbf584a3e7f0f5ff1df4
+  data.tar.gz: 5e639b698fbcf2a21ba99011d07444fcb0973cbd5d31c7feee4b367e15f784de
 SHA512:
-  metadata.gz: 2f157af98492e231927909567321cbac369d776805fa80f5b68c7aa43d6af6643cc731d3bd4ddd21a8dab60b30326bed01f8ae3aa542bccc906ac593541132fa
-  data.tar.gz: 8e43441cd466cc327107a08104936ef76db467ee5ec0839e9bf9f50f616e25b47f3c7991aa1c117863b1665943506bb0b1271f9636322ff1006c0aaba32a6563
+  metadata.gz: 6a3a88183b4de3f1185e25fa4532f6a233ec4bc4cbf89ae0b2306cdd95b3f9c8cb0c618e6f956d2452a4ef86a86cb0c5127ba429ae8adfb7aa529c11b236f64b
+  data.tar.gz: 12e2878e42a568575714e5a69b0f429edef0a4cfc6ad7c3e7c0d3c2d1c126253db11776724763c35ee4babe7dc0392623c8a974a21e5f7650018b28dcfdc0d5a

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_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

@@ -78,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_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_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_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_custom_display_rails.html.erb CHANGED Viewed

@@ -76,7 +76,7 @@
     const option   = e.detail;
     const dropdown = e.target;
-    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
     if (!display) return;
     const nameEl = display.querySelector("#dropdown-avatar-name");

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb CHANGED Viewed

@@ -1,10 +1,13 @@
-<%
+<%
   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, label: "Select a Country"}) %>
+<%= pb_rails("dropdown", props: {
+  id: "select_a_country",
+  label: "Select a Country",
+  options: options
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx CHANGED Viewed

@@ -25,6 +25,7 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
+        id="select_a_country"
         label="Select a Country"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md CHANGED Viewed

@@ -1 +1,3 @@
-The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.
+Add an `id` to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.

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

@@ -31,6 +31,7 @@ examples:
   - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
+  - dropdown_required_indicator: Required Indicator
   react:
   - dropdown_default: Default
@@ -66,5 +67,4 @@ examples:
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
   - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
+  - dropdown_required_indicator: Required Indicator

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

@@ -30,4 +30,5 @@ export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_
 export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
 export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
 export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
-export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
+export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
+export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";