UISeeds - Menu Component

[emilyjablonski]

Description

Transfer the SideNav component from UIC to UISeeds.

Links

Eng Audit [Zero height Docs]((https://www.notion.so/exygy/Side-Nav-8adbd9e86bc34400aaf526f08245cd9f?pvs=4)

Additional Details

• Size, should support medium and small sized
• Nesting, vertical menus should support nesting, while horizontals menus do not
• Horizontal and Horizontal Tabs variants have only slight visual differences
• Dropdown is now a separate component https://github.com/bloom-housing/ui-seeds/issues/29
• See breakpoint docs for responsiveness

Acceptance Criteria

Figma

QA review/instructions

[slowbot]

@emilyjablonski @jaredcwhite Design spec and breakpoint docs https://www.figma.com/file/SsYt5YsgbmOPbwr5Qk2RKB/bloom-core-library?node-id=3316%3A10885&t=iAKnk6RouT6G9JBC-1

zeroheight docs https://exygy.zeroheight.com/styleguide/s/100882/p/7110b9-menu/b/93a6d7

[emilyjablonski]

• The content on best practices is duplicated as a heads up!
• When not to use: “When you have only a few navigation options that can fit in a header or top navigation.”
  • I think I need more guidance on what a few is, is it 2 / 6 / 12?
• "Active navigation items should be clearly indicated and remain visible even when the navigation is collapsed.”
  • What is the visual state for remaining visible when collapsed?
• I think eventually I would love additional context and guidance in the variants about when to use each variant - that is something I’m clear on and will need to be defined on uptake
• How do we handle the nested levels on the horizontal and dropdown versions?

[slowbot]

• "When you have only 1 or 2 navigation options that can fit in a header or top navigation"
• Revisit if relevant
• Makes sense and adds context
• Document horizontal display of nested items

[slowbot]

@jaredcwhite @emilyjablonski Updated docs to reflect our conversation.

https://exygy.zeroheight.com/styleguide/s/100882/p/7110b9-menu/b/091080 https://www.figma.com/file/SsYt5YsgbmOPbwr5Qk2RKB/bloom-core-library?node-id=3754%3A21315&t=aPETx8GXyyjhWHvz-1

[emilyjablonski]

Thank you!

A remaining question I have about the last row is why the vertical version on smaller screens defaults to menu, vs just letting consumers decide if they want menu. I'm not sure having that breakpoint is the best path.

I'm also not seeing the notes from your 4th bullet point of documenting horizontal display of nested items, lmk if I'm missing that somewhere!

@slowbot

[slowbot]

• Breakout dropdown as its own component and remove as a dependency

https://github.com/bloom-housing/ui-seeds/issues/29

[slowbot]

@emilyjablonski @jaredcwhite added story details and removed blocked tag

[jaredcwhite]

Closed in favor of an updated issue in the Seeds repo: https://github.com/bloom-housing/ui-seeds/issues/77