eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiCollapsibleNavBeta] Add additional nav item action type

Open mgadewoll opened this issue 9 months ago • 1 comments

Description

There is a use case in Kibana (code) where additionalEuiButton are being rendered as items in the navigation. With the introduction of Borealis, these base buttons don't fit the expected design anymore.

Image Image

Instead of overriding the button styles on consumer side we should introduce an additional EuiCollapsibleNavItemDisplay output type (code).

🎨 design specs

Requirements for the component:

  • provides button or link behavior
  • has same hover/focus states as existing nav item types (e.g. accordion)
  • has additional "selected" state
    • ensure accessible usage is supported (expected usage of aria-expanded and aria-haspopup for items used for collapsible/flyout navigation menus)
  • icon size should always be 16px independent of size
  • icon color is updated accordingly based on state (hover, focus, selected)

Additional task

  • review design notes here for EuiCollapsibleNavBeta if changes are needed (they might have been implemented by this PR #8332) - either implement leftover changes (if limited) or add an additional task for it

Desired timeline

This is not an urgent request as there is a workaround on Kibana side.

âš  There is a chance that this request is obsolete considering that there are plans to rework the EuiCollapsibleNavBeta component (https://github.com/elastic/eui-private/issues/293)

Acceptance criteria

  • added a new nav item sub component
  • implemented design changes for EuiCollapsibleNavBeta OR add separate task for the changes (if they would bloat this update)
  • updated Storybook and EUI docs to document and showcase the additional nav item type

mgadewoll avatar Mar 03 '25 08:03 mgadewoll