Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement OnyxFlyoutMenu #883

Closed
16 tasks done
MajaZarkova opened this issue Apr 11, 2024 · 1 comment
Closed
16 tasks done

Implement OnyxFlyoutMenu #883

MajaZarkova opened this issue Apr 11, 2024 · 1 comment
Assignees
@MajaZarkova
Labels
dev Requires technical expertise
Milestone
Navigation bars

Comments

@MajaZarkova
Copy link
Contributor

MajaZarkova commented Apr 11, 2024 •
edited by larsrickert
Loading

Open Questions/To-dos

  • How to interpret the blank context area? → Not relevant to this ticket and is also only intended for designers
  • Should we separate the icon button and label button from the flyout? → Not relevant to this ticket

Why?

This component is needed and will be used inside the NavMenuItem. This is just a support component.
It's responsible for handling keyboard navigation, rendering and opening of the flyout.

Image

Design

Figma Link (Context Area section)

Acceptance criteria

  • Has default slot for select items
  • has keyboard support
  • make sure keyboard navigation works correctly in OnyxNavItem
  • make sure aria-selected styles are correctly applied on the OnyxNavItem nested options
  • considers the relevant aria roles and patterns
  • Used in the OnyxNavItem and the OnyxUserMenu

Definition of Done

  • covered by component tests
  • screenshot tests are updated
  • follow-up tickets were created if necessary -> Implement OnyxMenuItem #1415
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Set task to In Approval

Approval

Reference implementations

CoreUI Reference

Image

ARIA

https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
@MajaZarkova MajaZarkova added this to onyx Apr 11, 2024
@MajaZarkova MajaZarkova converted this from a draft issue Apr 11, 2024
@MajaZarkova MajaZarkova added the dev Requires technical expertise label Apr 11, 2024
@MajaZarkova MajaZarkova self-assigned this Apr 11, 2024
@MajaZarkova MajaZarkova moved this from New to Backlog in onyx Apr 11, 2024
@MajaZarkova MajaZarkova added this to the Navigation bars milestone Apr 11, 2024
@MajaZarkova MajaZarkova mentioned this issue Apr 11, 2024
Closed
18 tasks
@mj-hof mj-hof changed the title Implement OnyxContextMenu Implement OnyxNavMenu Apr 26, 2024
@mj-hof mj-hof moved this from Backlog to Ready in onyx Apr 26, 2024
@JoCa96 JoCa96 changed the title Implement OnyxNavMenu Implement OnyxFlyoutMenu May 8, 2024
@larsrickert larsrickert mentioned this issue May 8, 2024
Closed
17 tasks
@JoCa96 JoCa96 mentioned this issue May 8, 2024
Merged
JoCa96 added a commit that referenced this issue May 10, 2024
@JoCa96
chore(OnyxFlyoutMenu): Split list design (#1037)
a53ebd4 
Relates to #706, #883

Split Listbox and FlyoutMenu, so that they can develop independently of
each other.
It is necessary for #816 and preparation for #883.
@MajaZarkova MajaZarkova self-assigned this May 13, 2024
@MajaZarkova MajaZarkova moved this from Ready to In Progress in onyx May 13, 2024
@larsrickert
Copy link
Collaborator

As discussed, this would be our prefered API for the nav bar:

<template>
  <OnyxNavBar>
    <OnyxNavButton>
      Item 1
      <OnyxBadge dot />
    </OnyxNavButton>

    <OnyxNavButton>
      Item 2

      <template #children>
        <OnyxNavItem> I am child 1 </OnyxNavItem>
        <OnyxNavItem> I am child 2 </OnyxNavItem>
        <OnyxNavItem> I am child 3 </OnyxNavItem>
      </template>
    </OnyxNavButton>

    <OnyxUserMenu>
      <OnyxListItem @click="handleLogout">
        <OnyxIcon />
        Logout
      </OnyxListItem>

      <OnyxListItem @click="router.push('/settings')"> Settings </OnyxListItem>
    </OnyxUserMenu>
  </OnyxNavBar>
</template>

@MajaZarkova MajaZarkova assigned JoCa96 and unassigned MajaZarkova May 17, 2024
@JoCa96 JoCa96 removed their assignment May 24, 2024
This was referenced Jun 3, 2024
Closed
Closed
@MajaZarkova MajaZarkova mentioned this issue Jun 12, 2024
Merged
2 tasks
This was referenced Jun 11, 2024
Closed
Merged
MajaZarkova added a commit that referenced this issue Jun 19, 2024
@MajaZarkova @github-actions
feat(OnyxNavButton): Implement onyx nav button (#1281)
d3e9321 
<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

Relates to #883 

Implement onyx nav button

## Checklist

- [x] If a new component is added, at least one [Playwright screenshot
test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml)
is added
- [x] A changeset is added with `npx changeset add` if your changes
should be released as npm package (because they affect the library
usage)

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@MajaZarkova MajaZarkova mentioned this issue Jun 20, 2024
Merged
2 tasks
MajaZarkova added a commit that referenced this issue Jun 27, 2024
@MajaZarkova @BoppLi @JoCa96
feat(OnyxNavItem): Implement OnyxNavItem (#1367)
3c8cf6d 
<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

Relates to #883 

<!-- Briefly describe the changes of this PR. -->

Implemented new OnyxNavItem component which is similar to OnyxListItem,
but will be used in OnyxNavButton only.

## Checklist

- [x] If a new component is added, at least one [Playwright screenshot
test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml)
is added
- [x] A changeset is added with `npx changeset add` if your changes
should be released as npm package (because they affect the library
usage)

---------

Co-authored-by: Linda Bopp <[email protected]>
Co-authored-by: Jonathan Carle <[email protected]>
@MajaZarkova MajaZarkova moved this from In Progress to In Approval in onyx Jun 27, 2024
@JoCa96 JoCa96 mentioned this issue Jul 1, 2024
Merged
@mj-hof mj-hof closed this as completed Jul 2, 2024
@github-project-automation github-project-automation bot moved this from In Approval to Done in onyx Jul 2, 2024
larsrickert pushed a commit that referenced this issue Jul 16, 2024
@JoCa96
feat(headless): implement headless Menu (#1460)
c2a6447 
Relates to #1415, #883
Closes #1518 

- implemented headless feature: `createNavigationMenu`
- headless MenuButton:
  -  now takes an `isExpandedRef` and `onToggle` via it's options
  - `flyout` element is removed as it is not needed
- removed hover and focus toggle features and moved them to the onyx
component directly as these are non spec features
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MajaZarkova MajaZarkova

Labels
dev Requires technical expertise
Projects
onyx
Status: Done
Milestone
Navigation bars
Development

No branches or pull requests
4 participants
@JoCa96 @MajaZarkova @larsrickert @mj-hof