Add new Menu Component #2933
Add new Menu Component #2933
Conversation
kodeaben
force-pushed
the
component/2744-action-list
branch
from
1df8948 to
925937a
Compare
…design/designsystem into component/2744-action-list
| This could for example be one of the top elements in the DOM. This is not generalized, since | ||
| each project may have different tags for which they want the content to be placed under. This | ||
| approach is also to prevent the need for adjusting the DOM with an extra base element, when the | ||
| need for portal arises. |
There was a problem hiding this comment.
Her er et bud på en anden formulering:
In some cases, like when using the menu inside an item, you might experience that the menu doesn't show when clicked. This is due to the menu being placed in a "lower" part of the stacking context.
To solve this, we need to move the menu further up, and we do this by using a "portal".
When using a portal, we tell the DOM to attach out menu to a specific element. Which element to attatch the menu to depends on the architecture of your application, but a rule of thumb is to pick an element which only exists once in the DOM
| expected from an item in the list, is up to the user to implement. See examples. | ||
| </p> | ||
| <p> | ||
| By default a simple button with the icon 'more' is used. A custom kirby-button can be provided |
There was a problem hiding this comment.
let's wrap tags in < code ></ code > tags
| which takes in a | ||
| <code>HTMLElement</code> | ||
| . It is your task to provide a reference to the DOM element for which you want to portal the | ||
| menu content into. This can example be achieved by using: |
There was a problem hiding this comment.
"This can for example be achieved by using"
| import { FloatingDirective } from '@kirbydesign/designsystem/shared/floating'; | ||
| import { MenuComponent } from './menu.component'; | ||
|
|
||
| describe('ActionListComponent', () => { |
| }); | ||
| }); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
I really like the tests you have written! They are easy to understand covers the basic!
I'm however missing a few more tests which would cover the usecases such as the user providing its own button.
We can talk this through and find out what we might also like to test.
| <h3>Menu placement</h3> | ||
| <p> | ||
| By default the menu will open, having the content shown to the right. This might not be optimal | ||
| for a menu placed far right on the screen. To ensure enough place on the screen for the content |
There was a problem hiding this comment.
did you means space instead of place?
| <h3>Advanced items</h3> | ||
| <p> | ||
| Kirby-items can be more that just a clickable item. By modifying the menu to not close on select, | ||
| we can interact with the items toggle without the menu closing |
Which issue does this PR close?
This PR closes #2744 and #2807
What is the new behavior?
This PR introduces a the Menu component. Menu component consists of a button, which by default can be clicked to show a floating list of Kirby-items.
Does this PR introduce a breaking change?
Are there any additional context?
A showcase has been added to display the new menu:
Checklist:
The following tasks should be carried out in sequence in order to follow the process of contributing correctly.
Reminders
Review
When the pull request has been approved it will be merged to
developby Team Kirby.