Description
Problem
Currently, Cloudscape’s split-panel toggle (in SplitPanel or via the splitPanel slot in AppLayout) uses a built-in default icon. There is no public API prop to override this icon. This limitation reduces flexibility for teams who want to:
- Use a domain-specific or custom icon that better reflects their product workflow.
- Align the toggle icon with brand design or metaphor (e.g., a “panel” icon, a “sidebar” icon, or a custom SVG).
- Use different icons in different contexts (e.g., a “collapse” vs “expand” arrow, or a custom icon when panel is closed vs open).
While theming currently supports coloring of the layout toggle buttons (via color[Text|Background]LayoutToggle[State] tokens) :contentReference[oaicite:5]{index=5}, it doesn’t support changing the shape / SVG of those icons.
Proposal
- Introduce a new prop on
SplitPanel (or via the splitPanel slot of AppLayout), such as toggleIcon or toggleIconNode, that accepts a React node.
- Optionally, also support
collapsedIcon and expandedIcon props so that different icons can be provided for different states.
Code of Conduct
Description
Problem
Currently, Cloudscape’s split-panel toggle (in
SplitPanelor via thesplitPanelslot inAppLayout) uses a built-in default icon. There is no public API prop to override this icon. This limitation reduces flexibility for teams who want to:While theming currently supports coloring of the layout toggle buttons (via
color[Text|Background]LayoutToggle[State]tokens) :contentReference[oaicite:5]{index=5}, it doesn’t support changing the shape / SVG of those icons.Proposal
SplitPanel(or via thesplitPanelslot ofAppLayout), such astoggleIconortoggleIconNode, that accepts a React node.collapsedIconandexpandedIconprops so that different icons can be provided for different states.Code of Conduct