[Tree] Badges and action buttons are visually too distant from item content #2604
Description
Provide a general summary of the issue here
Summary
In the Tree variants "with badges" and "with action buttons" in Storybook, the badges and buttons are visually distant from the associated tree item content.
Problem
The large spacing can cause issues for:
Users of magnification software or with tunnel vision, who may miss the connection between the badge/button and its corresponding item.
Users with cognitive impairments, as spatial separation makes it harder to associate related information.
Visuals
Badges:
Action buttons:
Proposed Fix
👨💻 In the Storybook story, constrain the tree width:
sl-tree {
max-width: 400px;
}
Impact
- Improves accessibility by keeping related content visually grouped.
- Provides a clearer, more predictable reference in Storybook examples.
Acceptance Criteria
- Badges and action buttons remain visually associated with their corresponding tree items.
- No excessive whitespace separates content from badges or buttons.
- Storybook examples reflect the intended layout.
👤 Your name
DR
🧢 Your Product/Team
SLDS