playbook_ui 16.1.0.pre.alpha.play2725datepickermlsrequiredindicator14221 → 16.1.0.pre.alpha.play2771passphraseaccessibility14033

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 694cf7465a53b857cde65a88e8ed0b21f563b1e456aefbf09c5c971f09ee6612
-  data.tar.gz: 412af2afa615e39bc9a705824c8576beb21d729e3d2a5f6e6b89d3ad1529eb8a
+  metadata.gz: db94c53faae46d3ac450cae169b49010d0fea2eef2df809b1b498a803bf97275
+  data.tar.gz: 481cc281f583cd5db425d32dea0bbd0d87cd5fff7093745f3fa674b7900064da
 SHA512:
-  metadata.gz: 8fd99f98d48beca4ed7e6251138c61f151932c3ad8b410963e5e0e7c7bc269d2b6e42350a85d30c2f5921993d26b1dc2ca7ae5d09efa6b845344b5cbc53c6664
-  data.tar.gz: 4dc5224aaff8577af5f9721bd8d3ec7ca89243763c4d654df9b2afb67cd4e5dfcd81d9ec0479458176f804def932856ff12d14be9926864260743a6a47c9fbcd
+  metadata.gz: a9dc190816e2a5b470ee310291cf8144b8ab3a2b26e5a251770dfb9b7b3b310c394b8a1d7dd355e21fbd320267ebb4e573a97cd6cfb1816eec07253ac36e9222
+  data.tar.gz: 325c99459bc7e398c41c7437fd373f559b32634dbca9f7119a684fb0166961c8303563f9f7f30cd51edc90843b36235ac7b67180c112d9688b430dfcf653ce38

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

@@ -66,18 +66,8 @@ 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"
-        
-        // 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 cellFontColor = colDef?.columnStyling?.fontColor
+        const cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
         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,39 +920,6 @@ 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_sort.md

@@ -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-wide-short", "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-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.

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

@@ -78,7 +78,6 @@ 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,5 +47,4 @@ 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 AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

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,8 +4,6 @@ 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},
@@ -21,7 +19,6 @@ type CheckboxProps = {
   indeterminate?: boolean,
   name?: string,
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
-  requiredIndicator?: boolean,
   tabIndex?: number,
   text?: string,
   value?: string,
@@ -42,7 +39,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     indeterminate = false,
     name = '',
     onChange = () => { void 0 },
-    requiredIndicator = false,
     tabIndex,
     text = '',
     value = '',
@@ -128,20 +124,7 @@ 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,15 +5,6 @@
     <%= 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, 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 %>
+    <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>
 <% end %>

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

@@ -23,8 +23,6 @@ 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/example.yml

@@ -8,7 +8,6 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
-    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -18,7 +17,6 @@ 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,4 +5,3 @@ 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

@@ -10,7 +10,6 @@ import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
 import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
-import colors from "../tokens/exports/_colors.module.scss"
 
 type DatePickerProps = {
   allowInput?: boolean,
@@ -44,7 +43,6 @@ type DatePickerProps = {
   pickerId: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
-  requiredIndicator?: boolean
   scrollContainer?: string,
   selectionType?: "month" | "week"| "quickpick",
   showTimezone?: boolean,
@@ -99,7 +97,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     plugins = false,
     position,
     positionElement,
-    requiredIndicator,
     scrollContainer,
     selectionType = '',
     showTimezone = false,
@@ -217,15 +214,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
         {!hideLabel && (
            <label htmlFor={pickerId}>
-            {requiredIndicator ? (
-              <Caption className="pb_date_picker_kit_label">
-                {label} <span style={{ color: `${colors.error}` }}>*</span>
-              </Caption>
-            ) : (
-              <Caption className="pb_date_picker_kit_label"
-                  text={label}
-              />
-            )}
+            <Caption
+                className="pb_date_picker_kit_label"
+                text={label}
+            />
           </label>
         )}
           <>

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -4,35 +4,26 @@
     'data-validation-message' => object.validation_message,
       ) do %>
   <div class="input_wrapper">
-    <% if !object.hide_label && object.label %>
-      <label for="<%= object.picker_id %>">
-        <% if object.required_indicator %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label" }) do %>
-            <%= object.label %><span style="color: #DA0014;"> *</span>
-          <% end %>
-        <% else %>
-          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label" }) %>
-        <% end %>
-      </label>
-    <% end %>
     <% if content.present? %>
       <%= content %>
     <% else %>
-    <%= pb_rails("text_input", props: {
-      aria: object.input_aria,
-      autocomplete: false,
-      cursor: object.cursor,
-      dark: object.dark,
-      data: object.input_data,
-      disabled: object.disable_input,
-      error: object.error,
-      id: object.picker_id,
-      margin_bottom: "none",
-      name: object.name,
-      placeholder: object.placeholder,
-      required: object.required,
-    }) %>
+      <%= pb_rails("text_input", props: {
+        aria: object.input_aria,
+        autocomplete: false,
+        cursor: object.cursor,
+        dark: object.dark,
+        data: object.input_data,
+        disabled: object.disable_input,
+        error: object.error,
+        id: object.picker_id,
+        label: object.hide_label ? nil : object.label,
+        margin_bottom: "none",
+        name: object.name,
+        placeholder: object.placeholder,
+        required: object.required,
+      }) %>
     <% end %>
+
     <% if object.selection_type == "quickpick" %>
       <input type="hidden" id="<%= "#{object.start_date_id}" %>" name="<%= "#{object.start_date_name}" %>">
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -71,8 +71,6 @@ module Playbook
                                    default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
       prop :year_range, type: Playbook::Props::Array,
                         default: [1900, 2100]
       prop :custom_event_type, type: Playbook::Props::String,
@@ -115,7 +113,6 @@ module Playbook
           position: position,
           positionElement: position_element,
           required: required,
-          requiredIndicator: required_indicator,
           selectionType: selection_type,
           showTimezone: show_timezone,
           staticPosition: static_position,

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -257,7 +257,7 @@ describe('DatePicker Kit', () => {
     const testId = 'datepicker-out-of-range-after'
     const futureDateString = '01/15/2020'
     const maxDateString = '01/10/2020'
-
+    
     render(
       <DatePicker
           data={{ testid: testId }}
@@ -275,39 +275,4 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue('01/15/2020')
     }, { timeout: 5000 })
   })
-
-  test("renders required indicator asterisk when requiredIndicator is true", () => {
-    const testId = "datepicker-required-indicator"
-
-    render(
-      <DatePicker
-          data={{ testid: testId }}
-          label="Required Date"
-          pickerId="date-picker-required-indicator"
-          requiredIndicator
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const label = within(kit).getByText(/Required Date/)
-    expect(label).toBeInTheDocument()
-    expect(kit).toHaveTextContent("*")
-  })
-
-  test("does not render required indicator asterisk when requiredIndicator is false", () => {
-    const testId = "datepicker-no-required-indicator"
-
-    render(
-      <DatePicker
-          data={{ testid: testId }}
-          label="Optional Date"
-          pickerId="date-picker-no-required-indicator"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const label = within(kit).getByText(/Optional Date/)
-    expect(label).toBeInTheDocument()
-    expect(kit).not.toHaveTextContent("*")
-  })
 })

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

@@ -31,7 +31,6 @@ 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:
@@ -65,4 +64,3 @@ 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

@@ -27,5 +27,4 @@ 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 DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
+export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'

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

@@ -119,16 +119,6 @@ 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")
@@ -161,19 +151,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const dropdownRef = useRef(null);
     const inputRef = useRef<HTMLInputElement>(null);
-    const inputWrapperRef = useRef<HTMLDivElement | null>(null);
+    const inputWrapperRef = useRef(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
@@ -431,12 +411,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     autocomplete,
                     clearable,
                     dropdownContainerRef,
-                    error,
-                    errorId,
-                    filterItem,
                     filteredOptions,
+                    filterItem,
                     focusedOptionIndex,
-                    label,
                     formPillProps,
                     handleBackspace,
                     handleChange,
@@ -446,7 +423,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    selectId,
                     multiSelect,
                     onSelect,
                     optionsWithBlankSelection,
@@ -458,20 +434,13 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     toggleDropdown
                 }}
             >
-                {label && (
-                    <label
-                        data-dropdown="pb-dropdown-label"
-                        htmlFor={selectId}
-                        onClick={handleLabelClick}
-                    >
-                        <Caption
-                            className="pb_dropdown_kit_label"
-                            dark={dark}
-                            marginBottom="xs"
-                            text={label}
-                        />
-                    </label>
-                )}
+                {label &&
+                    <Caption
+                        dark={dark}
+                        marginBottom="xs"
+                        text={label}
+                    />
+                }
                 <div className={`dropdown_wrapper ${error ? 'error' : ''}`}
                     onBlur={() => {
                         // Debounce to delay the execution to prevent jumpiness in Focus state
@@ -504,16 +473,12 @@ 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_with_custom_display_rails.html.erb

@@ -76,7 +76,7 @@
     const option   = e.detail;
     const dropdown = e.target;
 
-    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
+    const display = dropdown.querySelector("#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

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

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

@@ -25,7 +25,6 @@ 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

@@ -1,3 +1 @@
-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.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,13 +1,11 @@
 <%= pb_content_tag do %>
     <% if object.label.present? %>
-        <label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
-            <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
-        </label>
+        <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
             data-default-value="<%= input_default_value %>"
-            data-dropdown-selected-option
+            id="dropdown-selected-option"
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"
             <%= object.required ? "required" : ""%>
@@ -18,11 +16,9 @@
         <% end %>
         <% if content.present? %>
             <%= content.presence %>
-            <% if object.error.present? %>
-                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
-            <% end %>
+            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
+            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select, placeholder: object.placeholder }) %>
             <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
@@ -31,9 +27,7 @@
                 <% end %>
             <% end %>
 
-            <% if object.error.present? %>
-                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
-            <% end %>
+            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% end %>
     </div>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -10,7 +10,6 @@ module Playbook
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :error, type: Playbook::Props::String
-      prop :id, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :default_value
@@ -69,14 +68,6 @@ module Playbook
         generate_classname("pb_dropdown", variant, separators_class)
       end
 
-      def select_id
-        id.presence || (label.present? ? label.downcase.gsub(/\s+/, "_").gsub(/[^a-z0-9_]/, "") : nil)
-      end
-
-      def error_id
-        error.present? ? "#{select_id || 'dropdown_trigger'}-error" : nil
-      end
-
     private
 
       def error_class