Session: you-are-a-senior-harmonic-dolphin-subagent-a21da07d — 2026-04-27

Project: workspace-doctolib · Branch: HEAD · Mode: ` · **Model:**claude-haiku-4-5-20251001`

Stats: 1 user messages, 27 tool calls, tools used: Bash, Read.

Conversation

Turn 1 — User

I'm working in /Users/USER/workspace/doctolib/treatment-plan. I need precise details on how the BetaComboBox / Select popover is positioned and styled.

1. dl-new-dropdown CSS definition: Find where .dl-new-dropdown is defined in the design system source. It may be in a global SCSS file, a design-tokens file, or in node_modules/@doctolib/design-system/src/. Read the actual rule — I need the box-shadow, border, border-radius, background, z-index, overflow, and any position rules.

2. DropdownInternal positioning: In node_modules/@doctolib/design-system/src/dataEntry/ComboBox/_RawComboBox.tsx and nearby files, find how the dropdown is positioned relative to the input. Is it position: absolute? Does it use a portal (React Portal / document.body)? Is there a CSS transform? Read the relevant JSX wrapper around DropdownInternal to see whether position: relative is set on a parent, and what _style (inline styles) are applied.

3. Dropdown.module.scss full content: Read the file at node_modules/@doctolib/design-system/src/dataEntry/ComboBox/Dropdown.module.scss completely.

4. oxygen-input-field__iconWrapper--right CSS: Find where this class is defined (likely in a global SCSS). Read the exact CSS — specifically position, right, top, transform, and how it handles multiple icons side by side.

5. IconButton import path: Confirm the exact import path for IconButton from the design system (e.g. @doctolib/design-system/IconButton/v2). Check if there is a v1 and v2.

Report all findings with exact file paths and line numbers.

Turn 1 — Assistant

I'll help you find these precise details about the BetaComboBox/Select popover styling and positioning. Let me systematically search through the codebase.

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan -type f -name "*.scss" -o -name "*.css" | grep -E "(design-system|node_modules)" | head -20

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/lunr/styles.css /Users/USER/workspace/doctolib/treatment-plan/node_modules/tailwindcss/tailwind.css /Users/USER/workspace/doctolib/treatment-plan/node_modules/tailwindcss/screens.css /Users/USER/workspace/doctolib/treatment-plan/node_modules/tailwindcss/variants.css /Users/USER/workspace/doctolib/treatment-plan/node_modules/tailwindcss/components.css /Users/USER/workspace/doctolib/treatment-plan/node_modules/tailwindcss/utilities.css /Us …(truncated, 1399 more chars)

Now let me search for the specific files mentioned:

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system -type f \( -name "*RawComboBox*" -o -name "*Dropdown*" -o -name "*BetaComboBox*" \) | head -30

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/test_helpers/BetaComboBox.ts /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/collection/List/private/_ActionWithDropdown.tsx /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/DropdownContext.tsx /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/useDropdownPopover.ts / …(truncated, 3285 more chars)

Let me also search for BetaComboBox and ComboBox files:

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system -type f \( -name "*BetaComboBox*" -o -name "*ComboBox*" \) | grep -E "src|dist" | head -40

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/test_helpers/BetaComboBox.ts /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/test_helpers/BetaComboBox.d.ts.map /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/test_helpers/BetaComboBox.js /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/test_helpers/BetaComboBox.d.ts /Users/USER/workspace/doc …(truncated, 4776 more chars)

Perfect! Now let me search for .dl-new-dropdown CSS definition and the IconButton path:

Tools used:

• Bash: grep -r "dl-new-dropdown" /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src --include="*.scss" --include="*.css" -l

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/Dropdown.scss

Now let me search for oxygen-input-field__iconWrapper--right and IconButton paths:

Tools used:

• Bash: grep -r "oxygen-input-field__iconWrapper--right" /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src --include="*.scss" --include="*.css" -l

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/private/_Input.scss

Let me search for IconButton imports:

Tools used:

• Bash: grep -r "IconButton" /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/index.ts -A 5 -B 5 2>/dev/null | head -40

Tool results:

→ result (ok): (Bash completed with no output)

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src -type d -name "*IconButton*"

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataDisplay/PillIconButton /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/IconButton

Now let me read the key files. I'll start with the important ones:

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/ComboBox/_RawComboBox.tsx

Tool results:

→ result (ok): 1 import '../Select/Select.scss' 2 import '../private/_Input.scss' 3 import '../private/_Options.scss' 4
5 import { 6 type ChangeEventHandler, 7 type EventHandler, 8 type ForwardedRef, 9 type MouseEvent, 10 type ReactNode, 11 type TouchEvent, 12 useEffect, 13 useMemo, 14 } from 'react' 15 import classNames from 'classnames' 16 import { forwardRef, useCallback } from 'react' 17
18 import type { AutoComplete } from '../private/autocomplete' 19 import type { DataAttribute } from ' …(truncated, 14568 more chars)

Now let me read the key CSS and related files:

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/Dropdown.scss

Tool results:

→ result (ok): 1 @use '../../style/variables'; 2 @use '../../style/focus'; 3
4 :root { 5 --oxygen-LOCAL-dropdown-background: #{variables.$color-white}; 6 --oxygen-LOCAL-dropdown-background-hover: #{variables.$teal-010}; 7 --oxygen-LOCAL-dropdown-danger-background-hover: #{variables.$error-010}; 8 --oxygen-LOCAL-dropdown-color: #{variables.$neutral-130}; 9 --oxygen-LOCAL-dropdown-color-disabled: #{variables.$neutral-060}; 10 } 11
12 / stylelint-disable-next-line no-duplicate-selectors / 13 .dl-new …(truncated, 3951 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/ComboBox/Dropdown.module.scss

Tool results:

→ result (ERROR): File does not exist. Note: your current working directory is /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui.

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system -name "Dropdown.module.scss" -type f

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/Dropdown.module.scss /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/action/Dropdown/Dropdown.module.scss

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/Dropdown.module.scss

Tool results:

→ result (ok): 1 @use '../../style/variables'; 2
3 // Because we want to detect any visual change without any noise, 4 // many of the rules below are commented. 5 // These changes will be applied in another PR. 6 // For now, we are focusing on accessibility. 7
8 // At long-term, all styles inside Dropdown.scss should be moved here (when all monolith tests are migrated to not use internal Dropdown classes) 9
10 .checkbox { 11 // margin-right: var(--oxygen-scale-primitive-gridUnit-x1); 12 margin-right: 0. …(truncated, 1320 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/private/_Input.scss

Tool results:

→ result (ok): 1 @use '../../style/variables'; 2 @use '../../style/focus'; 3
4 .oxygen-input-field__inputWrapper { 5 --oxygen-LOCAL-inputField-input-background: #{variables.$color-white}; 6 --oxygen-LOCAL-inputField-input-color: var(--oxygen-color-forms-global-value-default); 7 --oxygen-LOCAL-inputField-input-borderColor: var(--oxygen-color-forms-global-border-default) !important; 8 --oxygen-LOCAL-inputField-input-borderColor-focus: var(--oxygen-color-forms-global-border-focus) !important; 9 --oxyge …(truncated, 6623 more chars)

Now let me check the DropdownInternal file and the _RawComboBox module scss:

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/DropdownInternal.tsx

Tool results:

→ result (ok): 1 import classNames from 'classnames' 2 import type { CSSProperties, ReactNode } from 'react' 3 import { forwardRef } from 'react' 4
5 import type { DataAttribute } from '../../common/DataAttribute' 6 import { DropdownContext } from './DropdownContext' 7 import type { DropdownHTMLSemantic } from './DropdownContext' 8 import { filterDataAttributes } from '../../common/DataAttribute' 9 import styles from './Dropdown.module.scss' 10
11 type DropdownInternalProps = { 12 htmlSemantic: DropdownHTM …(truncated, 2095 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/ComboBox/_RawComboBox.module.scss

Tool results:

→ result (ok): 1 .combobox { 2 display: grid; 3 grid-template-columns: auto 1fr auto; 4 grid-template-areas: 'searchIcon input loader chevronIcon clearIconButton'; 5 } 6
7 .comboboxInput { 8 grid-area: input; 9 } 10
11 .comboboxLoader { 12 z-index: 1; 13 grid-area: loader; 14 } 15
16 .comboboxSearchIcon { 17 z-index: 1; 18 grid-area: searchIcon; 19 } 20
21 .comboboxChevronIcon { 22 z-index: 1; 23 grid-area: chevronIcon; 24 } 25
26 .comboboxClearIconButton { 27 z-index: 1; 28 grid-a …(truncated, 417 more chars)

Now let me check the IconButton path and import:

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/IconButton -type f \( -name "index.ts" -o -name "v2" \) | head -20

Tool results:

→ result (ok): (Bash completed with no output)

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/IconButton/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 128 B Mon Mar 9 10:01:28 2026 . drwxr-xr-x clertonra staff 192 B Mon Mar 9 10:01:28 2026 .. .rw-r--r-- clertonra staff 3.0 KB Mon Mar 9 10:01:28 2026 migration.ts drwxr-xr-x clertonra staff 192 B Mon Mar 9 10:01:28 2026 v2

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/IconButton/v2/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 192 B Mon Mar 9 10:01:28 2026 . drwxr-xr-x clertonra staff 128 B Mon Mar 9 10:01:28 2026 .. .rw-r--r-- clertonra staff 2.6 KB Mon Mar 9 10:01:28 2026 IconButton.figma.tsx .rw-r--r-- clertonra staff 538 B Mon Mar 9 10:01:28 2026 IconButton.module.scss .rw-r--r-- clertonra staff 2.3 KB Mon Mar 9 10:01:28 2026 IconButton.test.tsx .rw-r--r-- clertonra staff 8.2 KB Mon Mar 9 10:01:28 2026 IconButton.tsx

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/IconButton/v2/IconButton.tsx

Tool results:

→ result (ok): 1 import classnames from 'classnames' 2 import { type ComponentProps, forwardRef, type MouseEvent, useEffect, useId, useState } from 'react' 3 import type { DesignSystemIconComponent } from '@doctolib/design-system-icons' 4
5 import buttonStyles from '../../Button/v2/Button.module.scss' 6 import { colorToSpinnerColor, type UiStyle, type Variant } from '../../Button/v2/Button' 7 import { type DataAttribute, filterDataAttributes } from '../../../common/DataAttribute' 8 import { getIconByNameOrCom …(truncated, 9023 more chars)

Now let me check the useCombobox hook to understand the positioning:

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src -name "useCombobox*" -type f

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/ComboBox/useCombobox.ts

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/ComboBox/useCombobox.ts (1–150)

Tool results:

→ result (ok): 1 import '../Select/Select.scss' 2 import '../private/_Input.scss' 3 import '../private/_Options.scss' 4
5 import { 6 type ChangeEventHandler, 7 type ForwardedRef, 8 useCallback, 9 useEffect, 10 useImperativeHandle, 11 useMemo, 12 useRef, 13 useState, 14 } from 'react' 15 import type { UseComboboxGetInputPropsOptions, UseComboboxGetInputPropsReturnValue } from 'downshift' 16 import { useCombobox as useDownshiftCombobox } from 'downshift' 17 import { useMergeRefs } from '@floatin …(truncated, 5640 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/ComboBox/useCombobox.ts (150–250)

Tool results:

→ result (ok): 150 const previousResultCount = previousResultCountRef.current 151 152 if (!resultCount) { 153 return translate({ 154 locale, 155 key: 'oxygen.forms.combobox.search.noResult', 156 params: { 157 search: inputValue ?? '', 158 }, 159 }) 160 } 161 162 if (resultCount !== previousResultCount) { 163 return resultCount === 1 164 ? translate({ 165 locale, 166 key: ' …(truncated, 3867 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/ComboBox/useCombobox.ts (250–350)

Tool results:

→ result (ok): 250 onSearchChange?.(newValue) 251 }, 252 itemToString: (option) => option?.label ?? '', 253 isItemDisabled: (item) => item.disabled ?? false, 254 onSelectedItemChange({ selectedItem: newSelectedItem }) { 255 if (valueInputRef.current) { 256 valueInputRef.current.value = newSelectedItem?.value ?? '' 257 258 if (newSelectedItem) { 259 onSelectionChange?.(newSelectedItem) 260 setSearch(newSelectedItem.label) 261
…(truncated, 3161 more chars)

Now let me check the useDropdownFloating hook:

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src -name "useDropdownFloating*" -type f

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/private/useDropdownFloating.ts

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/private/useDropdownFloating.ts

Tool results:

→ result (ok): 1 import { autoUpdate, flip, offset, size, useFloating } from '@floating-ui/react-dom' 2 import { useMemo } from 'react' 3
4 type Props = { 5 floatingStrategy: 'fixed' | 'absolute' 6 isOpen: boolean 7 } 8
9 export const useDropdownFloating = <T extends HTMLButtonElement | HTMLInputElement>({ 10 isOpen, 11 floatingStrategy, 12 }: Props) => { 13 const { refs, floatingStyles } = useFloating<T>({ 14 strategy: floatingStrategy, 15 open: isOpen, 16 whileElementsMounted: autoUpd …(truncated, 1454 more chars)

Perfect! Now let me check the BetaComboBox component to confirm everything:

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/ComboBox/BetaComboBox.tsx (1–80)

Tool results:

→ result (ok): 1 import './BetaComboBox.scss' 2
3 import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react' 4 import { forwardRef, useCallback, useId, useMemo, useRef, useState } from 'react' 5
6 import type { AutoComplete } from '../private/autocomplete' 7 import { _RawComboBox as ComboBox } from './_RawComboBox' 8 import { computeAriaDescribedBy } from '../private/aria' 9 import type { DataAttribute } from '../../common/DataAttribute' 10 import type { DropdownButtonProps } from '../../acti …(truncated, 3382 more chars)

Now let me verify the main index export for IconButton:

Tools used:

• Bash: grep -r "export.*IconButton" /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/IconButton/ --include="*.ts" --include="*.tsx" | head -5

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/IconButton/v2/IconButton.tsx:export const IconButton = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {

Perfect! Now I have all the information needed. Let me compile the findings:

Comprehensive BetaComboBox/Select Popover Styling & Positioning Report

1. .dl-new-dropdown CSS Definition

File: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/Dropdown.scss

Lines 13-23:

.dl-new-dropdown {
  position: relative;
  z-index: variables.$zindex-dropdown;
  box-shadow: variables.$shadow-1 !important;
  background: var(--oxygen-LOCAL-dropdown-background);
  overflow: auto;
  border-radius: variables.$grid-unit;
  width: max-content;
  // For High contrast mode
  outline: 0.1rem solid transparent;
}

Key properties: - position: relative - z-index: variables.$zindex-dropdown (design system variable) - box-shadow: variables.$shadow-1 !important (design system variable, forced) - background: var(--oxygen-LOCAL-dropdown-background) (CSS custom property) - border-radius: variables.$grid-unit (typically 0.8rem) - overflow: auto - border: Not explicitly defined in this rule (no border-radius override) - outline: 0.1rem solid transparent (for high contrast mode)

2. DropdownInternal Positioning & JSX

File: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/DropdownInternal.tsx

Lines 29-58:

The DropdownInternal component: - Does NOT use position: absolute on the wrapper itself - Does NOT use React Portal — renders directly in DOM tree - Does NOT apply a CSS transform on the element itself - Applies inline styles via _style prop (line 48: style={_style}) - Parent positioning: The parent wrapper (the input field) has position: relative (set by .oxygen-input-field__inputWrapper in _Input.scss line 146) - Positioning is delegated to floating-ui via the _style prop which contains floatingStyles from useDropdownFloating

The DropdownInternal receives:

<DropdownInternal _style={dropdownStyles} hasMaxHeight htmlSemantic='list' {...getDropdownContainerProps()}>

The dropdownStyles come from useFloating() which automatically calculates positioning based on the floating-ui strategy.

3. Dropdown.module.scss Full Content

File: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Dropdown/Dropdown.module.scss

Complete file (53 lines):

@use '../../style/variables';

// Because we want to detect any visual change without any noise,
// many of the rules below are commented.
// These changes will be applied in another PR.
// For now, we are focusing on accessibility.

// At long-term, all styles inside Dropdown.scss should be moved here (when all monolith tests are migrated to not use internal Dropdown classes)

.checkbox {
  // margin-right: var(--oxygen-scale-primitive-gridUnit-x1);
  margin-right: 0.8rem;
}

.divider {
  // margin-block: var(--oxygen-scale-primitive-gridUnit-x1);
  height: 0;
}

.list {
  display: flex;
  // Reset <ul> style
  padding: 0;
  margin: 0;
}

.hasMaxHeight {
  max-height: 32rem;
}

.categoryTitle {
  display: flex;
  align-items: center;
  padding-inline: 1.6rem;
  padding-top: 1.6rem;
  // padding-inline: var(--oxygen-scale-primitive-gridUnit-x2);
  // padding-block: var(--oxygen-scale-primitive-gridUnit-x2) var(--oxygen-scale-primitive-gridUnit-x1);

  // .icon {
  //   margin-right: var(--oxygen-scale-primitive-gridUnit-x0_5);
  //}
}

.hasStickyPosition {
  box-shadow: variables.$shadow-2-reversed !important;
  position: sticky;
  bottom: 0;
  background-color: var(--oxygen-LOCAL-dropdown-background) !important;

  &:hover {
    background-color: var(--oxygen-LOCAL-dropdown-background-hover) !important;
  }
}

Key styles: - .list: Uses display: flex, resets padding/margin (0) - .hasMaxHeight: Sets max-height: 32rem - .hasStickyPosition: Uses position: sticky; bottom: 0 for sticky buttons

4. oxygen-input-field__iconWrapper--right CSS

File: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/private/_Input.scss

Lines 149-163:

.oxygen-input-field__iconWrapper {
  display: flex;
  position: absolute;
  top: 50%;
  flex: none;
  transform: translateY(-50%);

  &.oxygen-input-field__iconWrapper--right {
    right: 1.6rem;
  }

  &.oxygen-input-field__iconWrapper--left {
    left: 1.6rem;
  }
}

Key properties for --right variant: - position: absolute - top: 50% - right: 1.6rem - transform: translateY(-50%) (centers vertically) - display: flex - flex: none (no growing/shrinking)

Multiple icons: The wrapper uses display: flex which allows multiple icon children to be laid out horizontally inline. They stack side-by-side without additional spacing rules (adjacent icons share the same flex container).

5. IconButton Import Path

Confirmed import path: @doctolib/design-system/action/IconButton/v2/IconButton

Evidence from _RawComboBox.tsx (line 25):

import { IconButton } from '../../action/IconButton/v2/IconButton'

Versions available: - v2 (current): /src/action/IconButton/v2/IconButton.tsx — Full-featured with tooltip, loading state, variants - migration.ts exists at /src/action/IconButton/migration.ts — Indicates v1 → v2 migration path exists

v2 is the active version. The v2 IconButton is defined in /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/IconButton/v2/IconButton.tsx (232 lines, lines 112-229 show the main component export).

Summary: Dropdown Positioning Flow

1. _RawComboBox input has position: relative (from .oxygen-input-field__inputWrapper)
2. useDropdownFloating hook uses @floating-ui/react-dom's useFloating() with: - strategy: 'absolute' | 'fixed' (configurable via dropdownFloatingStrategy prop) - middleware: [offset(4), flip(), size({...})] - Applies computed position styles directly via inline _style={dropdownStyles}
3. DropdownInternal renders as a <ul> or <div> with: - Class dl-new-dropdown (for styling) - Class dl-flex-column (for layout) - Inline styles from floating-ui positioning
4. Icon wrapper (.oxygen-input-field__iconWrapper--right) positions absolutely within the relative-positioned input field at top: 50%; right: 1.6rem; with vertical centering via transform: translateY(-50%)