playbook_ui 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.alpha.play274314102

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a5780d8a980b27fef50be2bd9f824684732373c72b707d5af5f8071c627b878a
-  data.tar.gz: b304d2a4a3bd2a77b73ba7e95b70f5aff9bd6b1f4b78ed99a494712666ce6a1a
+  metadata.gz: 55c0e17fe1c9ebc070555123e048fad21174f1103ff7c924a70ef6fcbaf10f67
+  data.tar.gz: 7e49dfd207ef248a867883cbd4d2dc3c39f93dbb872578493a6732d2906097bf
 SHA512:
-  metadata.gz: c8133ed39e3328aa2e76508e31c51e7ff0c81103c99f8c2324367333e2168ea08610f59fdff5d1bef97d3372637ee29150ee3d6541d83c3cea7417414bed5481
-  data.tar.gz: f5488d8e0b060a56590d3c390d832a1760d9bd7e1b97a02afc0958c9252ae67f9667f2856d2ff70d3cdfc8fe71658aa2135bccef62f154e68a1db7f2a20fa807
+  metadata.gz: df84055b7fa9e7ba93d1e94fe8c4944033897e8841c05ef21c52191a91083856c072cb1d67a53c184d6cb39e28276eb862eb37818d12b200936b4e6e252d7c2e
+  data.tar.gz: 3ad38213a67a4a3c9440db8558c75728d4a6df072070420d1ef93a14efd5f13416addd58c165e5dc92e300ac1c3613870f0812f5bd6896fd10e8323d4eaed27d

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -66,8 +66,18 @@ const TableCellRenderer = ({
         // Find the "owning" colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-        const cellFontColor = colDef?.columnStyling?.fontColor
-        const cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
+        
+        // Support function-based styling for conditional rendering
+        const cellFontColorValue = colDef?.columnStyling?.fontColor
+        const cellFontColor = typeof cellFontColorValue === 'function' 
+          ? cellFontColorValue(row) 
+          : cellFontColorValue
+        
+        const cellBackgroundColorValue = colDef?.columnStyling?.cellBackgroundColor
+        const cellBackgroundColor = typeof cellBackgroundColorValue === 'function' 
+          ? cellBackgroundColorValue(row) 
+          : cellBackgroundColorValue
+        
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -920,6 +920,39 @@ test("columnStyling.backgroundColor works as excpected", () => {
   expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.error_subtle });
 });
 
+test("columnStyling.cellBackgroundColor works as expected with function", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      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",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
+  expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.success_subtle, color: colors.success });
+}); 
+
 test("columnStyling.headerBackgroundColor works as excpected", () => {
   const styledColumnDefs = [
     {

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

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

@@ -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/example.yml

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

@@ -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_card/docs/_card_light.html.erb

@@ -1,36 +1,4 @@
-<%= pb_rails("flex", props: {
-  gap: "md",
-  orientation: "column"
-}) do %>
-
-  <%= pb_rails("caption", props: { text: "flex direction responsive: row on md + xl, column as default" }) %>
-  <%= pb_rails("card", props: {
-    flex_direction: { default: "column", md: "row", xl:"row" }
-  })  do %>
-      <%= pb_rails("body", props: { text: "Item 1", color: "default" }) %>
-    <%= pb_rails("body", props: { text: "Item 2", color: "default" }) %>
-    <%= pb_rails("body", props: { text: "Item 3", color: "default" }) %>
-  <% end %>
-
-  <%= pb_rails("caption", props: { text: "align items responsive: start on default, center on md, end on lg" }) %>
-  <%= pb_rails("card", props: {
-    display: "flex",
-    flex_direction: "row",
-    align_items: { default: "start", md: "center", lg: "end" },
-  })  do %>
-    <%= pb_rails("card", props: {height:"xs" }) do %> Card 1 <% end %>
-    <%= pb_rails("card", props: { height:"sm" }) do %> Card 2 <% end %>
-    <%= pb_rails("card", props: { height:"xs" }) do %> Card 3 <% end %>
-  <% end %>
-
-<%= pb_rails("caption", props: { text: "Text Align responsive: left on default, center on md, right on lg" }) %>
-  <%= pb_rails("card", props: {
-    text_align: { default: "left", md: "center", lg: "right" },
-    width: "100%"
-  })  do %>
-    <%= pb_rails("body", props: { }) do %> text 1 <% end %>
-    <%= pb_rails("body", props: { }) do %> text 2 <% end %>
-    <%= pb_rails("body", props: { }) do %> text 3 <% end %>
-  <% end %>
+<%= pb_rails("card", props: {
+})  do %>
+  Card content
 <% end %>
-

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -168,4 +168,4 @@ $transition: $transition_cubic;
       border-color: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -4,6 +4,8 @@ import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import colors from '../tokens/exports/_colors.module.scss'
+import spacing from '../tokens/exports/_spacing.module.scss'
 
 type CheckboxProps = {
   aria?: {[key: string]: string},
@@ -19,6 +21,7 @@ type CheckboxProps = {
   indeterminate?: boolean,
   name?: string,
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
+  requiredIndicator?: boolean,
   tabIndex?: number,
   text?: string,
   value?: string,
@@ -39,6 +42,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     indeterminate = false,
     name = '',
     onChange = () => { void 0 },
+    requiredIndicator = false,
     tabIndex,
     text = '',
     value = '',
@@ -124,7 +128,20 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           variant={null}
       >
         {text}
+        {requiredIndicator && (
+          <span
+              aria-hidden="true"
+              className="pb_required_indicator"
+              style={{
+                color: colors.error,
+                marginLeft: spacing.space_xs,
+              }}
+          >
+           {'*'}
+          </span>
+        )}
       </Body>
+
     </label>
   )
 })

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -5,6 +5,15 @@
     <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
   </span>
   <span class="pb_checkbox_label">
-    <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
+    <%= pb_rails("body", props: { status: object.checkbox_label_status, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) do %>
+      <%= object.text%>
+      <% if object.required_indicator %>
+        <span
+          class="pb_checkbox_required_indicator"
+          aria-hidden="true"
+          style="color: #DA0014;"
+        >*</span>
+      <% end %>
+    <% end %>
   </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -23,6 +23,8 @@ module Playbook
       prop :hidden_input, type: Playbook::Props::Boolean,
                           default: false
       prop :hidden_value
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + error_class

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

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

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

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

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

@@ -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/_date_picker.tsx

@@ -40,7 +40,7 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: string,
+  pickerId: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -196,6 +196,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
+  const errorId = error ? `${pickerId}-error` : undefined
+
   return (
     <div
         {...ariaProps}
@@ -211,14 +213,18 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       >
 
         {!hideLabel && (
-          <Caption
-              className="pb_date_picker_kit_label"
-              text={label}
-          />
+           <label htmlFor={pickerId}>
+            <Caption
+                className="pb_date_picker_kit_label"
+                text={label}
+            />
+          </label>
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
+                  aria-describedby={errorId}
+                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -232,6 +238,9 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
               {error &&
                   <Body
+                      aria={{ atomic: "true", live: "polite" }}
+                      htmlOptions={{ role: "alert" }}
+                      id={errorId}
                       status="negative"
                       text={error}
                       variant={null}

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

@@ -0,0 +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_dialog/_dialog.scss

@@ -135,6 +135,8 @@
     position: sticky;
     top: 0;
     background-color: $white;
+    border-top-left-radius: $border_radius_md;
+    border-top-right-radius: $border_radius_md;
     z-index: $z_8;
   }
 
@@ -256,7 +258,7 @@
   }
   &.full_height_left {
     justify-content: flex-start;
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100%;
@@ -302,7 +304,7 @@
 
   &.full_height_center {
     justify-content: center;
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100%;
@@ -346,7 +348,7 @@
 
   &.full_height_right {
     justify-content: flex-end;
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100%;
@@ -417,7 +419,7 @@
       margin: unset !important;
       margin-right: auto !important;
     }
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;
@@ -463,7 +465,7 @@
 
   &.full_height_center {
     justify-content: center;
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;
@@ -510,7 +512,7 @@
       margin: unset !important;
       margin-left: auto !important;
     }
-    
+
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -76,6 +76,12 @@
       z-index: $z_1;
       width: 100%;
 
+      &.constrain_height {
+        overflow-y: auto;
+        overflow-x: hidden;
+        max-height: 18em;
+      }
+
       .pb_dropdown_option,
       .pb_dropdown_option_list,
       .pb_dropdown_option_selected,

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -36,6 +36,8 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    clearable?: boolean;
+    constrainHeight?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
@@ -49,6 +51,7 @@ type DropdownProps = {
     multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options?: GenericObject;
+    placeholder?: string;
     separators?: boolean;
     variant?: "default" | "subtle" | "quickpick";
     rangeEndsToday?: boolean;
@@ -74,6 +77,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        clearable = true,
+        constrainHeight = false,
         customQuickPickDates,
         dark = false,
         data = {},
@@ -87,6 +92,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         formPillProps,
         onSelect,
         options,
+        placeholder,
         rangeEndsToday = false,
         controlsStartId,
         controlsEndId,
@@ -113,6 +119,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
+    // Use a suffix for the trigger ID to avoid conflict with the outer div's id
+    const sanitizeForId = (str: string) =>
+      str.toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "");
+    const selectId = id
+      ? `${id}_trigger`
+      : label
+        ? sanitizeForId(label)
+        : undefined;
+    const errorId = error ? `${selectId}-error` : undefined;
+
     const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
       // Handle quickpick variant with string defaultValue (e.g., "This Month")
@@ -145,9 +161,19 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const dropdownRef = useRef(null);
     const inputRef = useRef<HTMLInputElement>(null);
-    const inputWrapperRef = useRef(null);
+    const inputWrapperRef = useRef<HTMLDivElement | null>(null);
     const dropdownContainerRef = useRef(null);
 
+    const handleLabelClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (selectId) {
+        const trigger = document.getElementById(selectId);
+        if (trigger) trigger.focus();
+      }
+      setIsInputFocused(true);
+      toggleDropdown();
+    };
+
     const selectedArray = Array.isArray(selected)
     ? selected
     : selected && Object.keys(selected).length
@@ -211,6 +237,34 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         }
     }, [isDropDownClosed]);
 
+    // Auto-position dropdown above/below based on available space
+    useEffect(() => {
+        if (!isDropDownClosed && dropdownContainerRef.current) {
+            const container = dropdownContainerRef.current;
+            const wrapper = container.closest('.dropdown_wrapper') as HTMLElement;
+            if (!wrapper) return;
+
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const h = container.getBoundingClientRect().height || container.scrollHeight;
+            const spaceBelow = window.innerHeight - wrapperRect.bottom;
+            const spaceAbove = wrapperRect.top;
+
+            // If not enough space below but enough space above, position above
+            if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
+                container.style.top = "auto";
+                container.style.bottom = "calc(100% + 5px)";
+                container.style.marginTop = "0";
+                container.style.marginBottom = "0";
+            } else {
+                // Default: position below
+                container.style.top = "";
+                container.style.bottom = "";
+                container.style.marginTop = "";
+                container.style.marginBottom = "";
+            }
+        }
+    }, [isDropDownClosed, dropdownContainerRef]);
+
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setFilterItem(e.target.value);
@@ -375,10 +429,14 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                 value={{
                     activeStyle,
                     autocomplete,
+                    clearable,
                     dropdownContainerRef,
-                    filteredOptions,
+                    error,
+                    errorId,
                     filterItem,
+                    filteredOptions,
                     focusedOptionIndex,
+                    label,
                     formPillProps,
                     handleBackspace,
                     handleChange,
@@ -388,6 +446,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
+                    selectId,
                     multiSelect,
                     onSelect,
                     optionsWithBlankSelection,
@@ -399,13 +458,20 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     toggleDropdown
                 }}
             >
-                {label &&
-                    <Caption
-                        dark={dark}
-                        marginBottom="xs"
-                        text={label}
-                    />
-                }
+                {label && (
+                    <label
+                        data-dropdown="pb-dropdown-label"
+                        htmlFor={selectId}
+                        onClick={handleLabelClick}
+                    >
+                        <Caption
+                            className="pb_dropdown_kit_label"
+                            dark={dark}
+                            marginBottom="xs"
+                            text={label}
+                        />
+                    </label>
+                )}
                 <div className={`dropdown_wrapper ${error ? 'error' : ''}`}
                     onBlur={() => {
                         // Debounce to delay the execution to prevent jumpiness in Focus state
@@ -426,8 +492,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     ) : (
                         <>
-                            <DropdownTrigger />
-                            <DropdownContainer>
+                            <DropdownTrigger placeholder={placeholder} />
+                            <DropdownContainer constrainHeight={constrainHeight}>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
                                         <DropdownOption key={option.id}
@@ -438,12 +504,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     )}
 
-                    {error &&
+                    {error && (
                         <Body
+                            aria={{ atomic: "true", live: "polite" }}
+                            dark={dark}
+                            htmlOptions={{ role: "alert" }}
+                            id={errorId}
                             status="negative"
                             text={error}
                         />
-                    }
+                    )}
                 </div>
             </DropdownContext.Provider>
         </div>

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

@@ -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.