fix: issues after latest releases

src/components/Dropdown/Dropdown.scss

@@ -6,4 +6,5 @@
     box-shadow: var(--space-0) var(--space-25) var(--space-125) var(--space-0)
         var(--color-transparent-10020, rgba(0, 0, 0, 0.2));
     z-index: 400;
+    box-sizing: border-box;
 }

src/components/Input/Input.scss

@@ -12,7 +12,7 @@
         align-items: center;
         gap: var(--space-50);
         padding: var(--space-150);
-        width: 200px;
+        width: 100%;
 
         &::placeholder {
             color: var(--color-text-subtlest);

src/components/Pill/PillButtonEnhanced/PillButtonEnhanced.tsx

@@ -12,7 +12,7 @@ import { IconButton } from '../../Buttons';
 
 export interface Props<PriorityItemValue = unknown> extends PillButtonBaseProps {
     /** Label/indicator in case of multiple selection, such as `+2` for instance */
-    additionalContentLabel?: string;
+    additionalContentLabel?: React.ReactNode;
     /** Tooltip content to be shown when multiple selections are shown */
     additionalContentTooltip?: React.ReactNode;
     /** Props needed for rendering optional priority selector */
@@ -99,9 +99,9 @@ export const PillButtonEnhanced = React.forwardRef(
                         {!!content && (
                             <>
                                 <span {...elem('valueSeparator')}>:</span>
-                                <span {...elem('content')} title={content}>
-                                    {content}
-                                </span>
+                                <Tooltip content={content}>
+                                    <span {...elem('content')}>{content}</span>
+                                </Tooltip>
                             </>
                         )}
                         {additionalContentLabel && (

src/components/Pill/PillButtonEnhanced/__tests__/__snapshots__/PillButtonEnhanced.spec.tsx.snap

@@ -29,7 +29,6 @@ exports[`<PillButtonEnhanced> component in active, collapsed state (with content
       </span>
       <span
         class="PillButtonEnhanced__content"
-        title="This pill is in use"
       >
         This pill is in use
       </span>
@@ -92,7 +91,6 @@ exports[`<PillButtonEnhanced> component in active, open state (content and isOpe
       </span>
       <span
         class="PillButtonEnhanced__content"
-        title="This pill is in use"
       >
         This pill is in use
       </span>
@@ -256,7 +254,6 @@ exports[`<PillButtonEnhanced> component with additional props should render corr
       </span>
       <span
         class="PillButtonEnhanced__content"
-        title="This pill is in use"
       >
         This pill is in use
       </span>
@@ -320,7 +317,6 @@ exports[`<PillButtonEnhanced> component with additional props should set style a
       </span>
       <span
         class="PillButtonEnhanced__content"
-        title="This pill is in use"
       >
         This pill is in use
       </span>

src/components/Pill/__tests__/__snapshots__/Pill.spec.tsx.snap

@@ -179,7 +179,6 @@ exports[`<Pill> component with enhanced button variant should open dropdown when
         </span>
         <span
           class="PillButtonEnhanced__content"
-          title="Pill content"
         >
           Pill content
         </span>
@@ -276,7 +275,6 @@ exports[`<Pill> component with enhanced button variant should render correctly 1
         </span>
         <span
           class="PillButtonEnhanced__content"
-          title="Pill content"
         >
           Pill content
         </span>

src/components/PrioritySelector/PrioritySelector.scss

@@ -47,8 +47,8 @@ $icon-status-colors: (
         disabled: var(--color-icon-success-disabled),
     ),
     important: (
-        normal: var(--color-icon-caution-default),
-        disabled: var(--color-icon-caution-disabled),
+        normal: var(--color-icon-cautious-default),
+        disabled: var(--color-icon-cautious-disabled),
     ),
     optional: (
         normal: var(--color-icon-subtle),
@@ -106,13 +106,8 @@ $icon-status-colors: (
         background-color: white;
         z-index: 600;
 
-        &--fixedWidth{
+        &--fixedWidth {
             width: 232px;
         }
     }
-
 }
-
-
-
-

src/components/SelectComponents/Autosuggest/Autosuggest.tsx

@@ -53,6 +53,10 @@ export interface Props<S>
     /** render custom list values */
     customListRender?: (suggestions) => React.ReactNode;
     clearInputAfterSelection?: boolean;
+    /** determines if the suggestion list should be rendered using a React Portal
+     *  to the dropdown needs to bypass parent element clipping, overflow, or z-index issues.
+     */
+    shouldRenderWithPortal?: boolean;
 }
 
 const { elem } = bem('Autosuggest', styles);
@@ -94,6 +98,7 @@ export function Autosuggest<S>({
     iconNode,
     customListRender,
     clearInputAfterSelection = true,
+    shouldRenderWithPortal = false,
     ...rest
 }: Props<S>) {
     const inputRef = inputRefFromProps || React.createRef<HTMLInputElement>();
@@ -258,6 +263,7 @@ export function Autosuggest<S>({
             initInputValue={initInputValue}
             clearInputAfterSelection={clearInputAfterSelection}
             autoFocus={isFocused}
+            shouldRenderWithPortal={shouldRenderWithPortal}
         />
     );
 }

src/components/SelectComponents/Combobox/Combobox.tsx

@@ -32,6 +32,10 @@ export interface Props<S>
     upArrowLabel?: string;
     /** enable ListOptimizer component for decreasing render time */
     useOptimizeListRender?: boolean;
+    /** determines if the suggestion list should be rendered using a React Portal
+     *  to the dropdown needs to bypass parent element clipping, overflow, or z-index issues.
+     */
+    shouldRenderWithPortal?: boolean;
 }
 
 /**
@@ -61,6 +65,7 @@ export function Combobox<S>({
     upArrowLabel,
     downArrowLabel,
     useOptimizeListRender,
+    shouldRenderWithPortal = false,
     ...rest
 }: Props<S>) {
     const inputRef = inputRefFromProps || React.createRef<HTMLInputElement>();
@@ -130,6 +135,7 @@ export function Combobox<S>({
             showArrow
             downArrowLabel={downArrowLabel}
             upArrowLabel={upArrowLabel}
+            shouldRenderWithPortal={shouldRenderWithPortal}
         />
     );
 }

src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx

@@ -24,6 +24,10 @@ export interface Props<S> extends BasicSelectProps<S>, SelectInputFieldProps {
     downArrowLabel?: string;
     /** Up arrow name for ARIA labelling, it is used when the component is focused and options are shown */
     upArrowLabel?: string;
+    /** determines if the suggestion list should be rendered using a React Portal
+     *  to the dropdown needs to bypass parent element clipping, overflow, or z-index issues.
+     */
+    shouldRenderWithPortal?: boolean;
 }
 
 /**
@@ -53,6 +57,7 @@ export function ComboboxMulti<S>({
     downArrowLabel,
     useOptimizeListRender = false,
     inputAttrs = {},
+    shouldRenderWithPortal = false,
     ...rest
 }: Props<S>) {
     const inputRef = inputRefFromProps || React.createRef<HTMLInputElement>();
@@ -141,6 +146,7 @@ export function ComboboxMulti<S>({
             focusedRenderer={renderFocused}
             blurredRenderer={renderBlurred}
             keepExpandedAfterSelection
+            shouldRenderWithPortal={shouldRenderWithPortal}
         />
     );
 }

src/components/SelectComponents/Select/Select.tsx

@@ -42,6 +42,10 @@ export interface Props<S> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
     rootRef?: React.RefObject<HTMLDivElement>;
     /** items list ref */
     listRef?: React.RefObject<HTMLUListElement>;
+    /** determines if the suggestion list should be rendered using a React Portal
+     *  to the dropdown needs to bypass parent element clipping, overflow, or z-index issues.
+     */
+    shouldRenderWithPortal?: boolean;
 }
 
 /**
@@ -67,6 +71,7 @@ export function Select<S>({
     onFocus = undefined,
     onClear = undefined,
     listRef = undefined,
+    shouldRenderWithPortal = false,
     ...rest
 }: Props<S>) {
     const focusElRef = React.useRef();
@@ -124,6 +129,7 @@ export function Select<S>({
             onBlur={onBlur}
             onFocus={onFocus}
             onClearAllSelected={onClear}
+            shouldRenderWithPortal={shouldRenderWithPortal}
             listRenderer={(listProps) => (
                 <SuggestionsList
                     {...listProps}

src/components/SelectComponents/SelectBase/SelectBase.scss

@@ -19,10 +19,6 @@
         }
     }
 
-    &__field {
-        padding: 0;
-    }
-
     &__spacedElem {
         margin: var(--space-50);
     }
@@ -42,4 +38,8 @@
     &__loaderContainer {
         width: 250px;
     }
+
+    .SelectBase__field {
+        padding: 0;
+    }
 }