Apsara Docs Audit Issues

[shreyagupta-polaris]

Summary

Multiple components contain functional bugs, UX inconsistencies, layout issues, and documentation problems. Some issues are limited to documentation examples, while others affect runtime behavior and user interaction.

Goal

Fix all identified bugs, resolve UX inconsistencies, and correct documentation issues to ensure all components behave reliably and consistently across the library.

Affected Components

Component	Issue	Details
Accordion	Unsmooth toggle animation	Expand/collapse transitions feel abrupt and not fluid
Accordion	Controlled state cannot reopen item	In controlled example, item does not reopen after being closed — likely docs issue
Breadcrumb	Broken product crumb link	Sample breadcrumb links to non-existent page; should use valid doc routes
Calendar	Keyboard input locks to default date	Typing sets value to 01/01/2001 and disables further keyboard interaction
Calendar	Missing quick navigation controls	No year selector or "Jump to Today" button, forcing month-by-month navigation
Calendar	Incorrect validation behavior	Editing date triggers "invalid date" error while display value remains unchanged
Combo Box	No distinction between group labels and options	Group headers visually identical to selectable items
Combo Box	Placeholder not cleared after selection	Placeholder remains visible in multi-select after choosing values
DataTable	Column spacing breaks with virtualization	Status and Email columns misaligned when virtualized list is toggled
DataTable	Action bar spacing inconsistent	Filter and Display buttons are not properly aligned
Indicator	Indicator dots clipped in docs	Dots partially cut off from top — likely CSS overflow/container issue
Input Field	Chips not created on Enter	Pressing Enter does not convert input into chips
Menu	Nested search does not reveal results	Searching for child items shows "no results" instead of expanding parent
Number Input	Invalid characters allowed in input	Accepts + and -mid-value causing incorrect increment/decrement behaviour , should have pattern validation for mid string arithmetic operators
Number Input	Currency field not editable	Input shows blinking cursor but blocks typing, creating confusing UX
Scroll Area	Scroll indicators mismatch axis	Horizontal indicator appears during vertical scroll and vice versa
Search	Search icon does not focus input	Clicking icon does not move focus to input field
Search	Clear button not functional	Clicking clear does not reset input value
Select	Input width shifts with value	Width changes based on selected option text, causing layout shift
Select	Overscroll in multi-select dropdown	Dropdown allows scrolling beyond content bounds
Slider	Label not visible for large thumb	Label renders for small thumb but missing for large size — likely docs CSS issue

Common Patterns

1. Documentation-only issues

Some issues appear only in documentation examples and should be verified in isolation before applying component-level fixes:

• Accordion (controlled example)
• Breadcrumb (sample links)
• Indicator (dot clipping)
• Slider (label visibility)

2. Keyboard handling and input validation gaps

Calendar and Number Input lack proper validation and keyboard interaction handling:

• Missing input constraints (allowed characters)
• Broken or incomplete keyboard flows
• Inconsistent validation feedback

3. UX state management inconsistencies

Several components show inconsistent handling of state and UI feedback:

• Placeholder persistence (Combo Box)
• Width instability (Select)
• Focus issues (Search)
• Cursor without editability (Number Input)

4. Layout and scroll calculation issues

Issues in DataTable and Scroll Area suggest problems with layout recalculation:

• Virtualization affecting spacing
• Incorrect scroll axis detection
• Possible overflow or container dimension mismanagement

Acceptance Criteria

• Accordion: smooth animations; controlled example reopens correctly
• Breadcrumb: all sample links resolve to valid pages
• Calendar: full keyboard support; year selector and "Today" button present; no incorrect validation errors
• Combo Box: clear distinction between labels and options; placeholder hidden after selection
• DataTable: consistent spacing with virtualization on/off; action bar properly aligned
• Indicator: dots fully visible (no clipping)
• Input Field: chips created on Enter key press
• Menu: nested search expands parent and reveals results
• Number Input: restrict invalid characters; currency input accepts typing
• Scroll Area: correct scroll indicators for each axis
• Search: input focuses on icon click; clear button resets query
• Select: stable width; no overscroll in multi-select
• Slider: label renders correctly at all thumb sizes