playbook_ui 16.1.0.pre.alpha.PLAY2800textinputtextareaaccessiblebordercontrast14296 → 16.1.0.pre.alpha.PLAY272013809

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cf8cbd4a4177e5b7442c49775e108490c4b045a1cdd65e22dd39d5549ad66ba8
-  data.tar.gz: 6a56475a3d12c28c115dd2d6c9dbbdc6b6572ecd2e06402c6aa04c55c6d8697a
+  metadata.gz: ac6a39ac1cb6ec18fcba139cebeb541aaf10f24f4488643bc91d227db570a1f4
+  data.tar.gz: 1b968b6f5f6513392b8ed7013ea5397fdf42fb0e7f426564ba50aa331296dfc8
 SHA512:
-  metadata.gz: 6c1810f2b509a1a96cd0acf3fcceb11bff59cc9702fb5bd0dbcdedfabc0df9c69f9b7876efab807e5aeb16be6659e6faced0d7f69379f62989c548fa434fa820
-  data.tar.gz: e4bfd50947c8c643440a59c6a2ddb160a304f9ec431c2cb37a2b00ba1f9371cdf161623be3e933427bfed1bfa815061ed38f675afdaff8706d1068803b727b79
+  metadata.gz: a38266fabaceae1bf080f2802ede800f0db99d1991cb82b6773b6ef63c094a2b6df462547edf359a06917b689fdd278a8c7882edcff5afd0ac76f948ded9f45b
+  data.tar.gz: d21b8d9a27b38812cd09ce8aea5c42a2c2976db366251c7333a7bfccdc68459775044ec86bf81108eb796820abedab92edc40550e769cd50cbe2ffa5e2a426c4

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,
@@ -41,10 +40,9 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId: string,
+  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,
@@ -199,8 +196,6 @@ 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}
@@ -216,23 +211,14 @@ 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}
-              />
-            )}
-          </label>
+          <Caption
+              className="pb_date_picker_kit_label"
+              text={label}
+          />
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
-                  aria-describedby={errorId}
-                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -246,9 +232,6 @@ 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/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.scss

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

@@ -6,14 +6,13 @@ import { GenericObject } from "../types";
 
 import Body from '../pb_body/_body';
 import Caption from "../pb_caption/_caption";
-import colors from "../tokens/exports/_colors.module.scss";
 
 import DropdownContainer from "./subcomponents/DropdownContainer";
 import DropdownContext from "./context";
 import DropdownOption from "./subcomponents/DropdownOption";
 import DropdownTrigger from "./subcomponents/DropdownTrigger";
 import useDropdown from "./hooks/useDropdown";
-import getQuickPickOptions from "./quickpick";
+import  getQuickPickOptions from "./quickpick";
 
 import {
     separateChildComponents,
@@ -37,8 +36,6 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    clearable?: boolean;
-    constrainHeight?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
@@ -52,7 +49,6 @@ type DropdownProps = {
     multiSelect?: boolean;
     onSelect?: (arg: GenericObject) => null;
     options?: GenericObject;
-    placeholder?: string;
     separators?: boolean;
     variant?: "default" | "subtle" | "quickpick";
     rangeEndsToday?: boolean;
@@ -62,7 +58,6 @@ type DropdownProps = {
       backgroundColor?: string;
       fontColor?: string;
     };
-    requiredIndicator?: boolean;
 };
 
 interface DropdownComponent
@@ -79,8 +74,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
-        clearable = true,
-        constrainHeight = false,
         customQuickPickDates,
         dark = false,
         data = {},
@@ -94,14 +87,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         formPillProps,
         onSelect,
         options,
-        placeholder,
         rangeEndsToday = false,
         controlsStartId,
         controlsEndId,
         separators = true,
         variant = "default",
         activeStyle,
-        requiredIndicator = false
     } = props;
 
     const ariaProps = buildAriaProps(aria);
@@ -122,16 +113,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")
@@ -164,19 +145,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
@@ -240,34 +211,6 @@ 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);
@@ -432,14 +375,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                 value={{
                     activeStyle,
                     autocomplete,
-                    clearable,
                     dropdownContainerRef,
-                    error,
-                    errorId,
-                    filterItem,
                     filteredOptions,
+                    filterItem,
                     focusedOptionIndex,
-                    label,
                     formPillProps,
                     handleBackspace,
                     handleChange,
@@ -449,7 +388,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    selectId,
                     multiSelect,
                     onSelect,
                     optionsWithBlankSelection,
@@ -461,30 +399,13 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     toggleDropdown
                 }}
             >
-                {label && (
-                  <label
-                      data-dropdown="pb-dropdown-label"
-                      htmlFor={selectId}
-                      onClick={handleLabelClick}
-                  >
-                    {requiredIndicator ? (
-                      <Caption
-                          className="pb_dropdown_kit_label"
-                          dark={dark}
-                          marginBottom="xs"
-                      >
-                        {label} <span style={{ color: `${colors.error}` }}>*</span>
-                      </Caption>
-                    ) : (
-                      <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
@@ -505,8 +426,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     ) : (
                         <>
-                            <DropdownTrigger placeholder={placeholder} />
-                            <DropdownContainer constrainHeight={constrainHeight}>
+                            <DropdownTrigger />
+                            <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
                                         <DropdownOption key={option.id}
@@ -517,16 +438,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>