Skip to content

Commit

Permalink
feat: Update Menu styling to match Fiori3 requirements (#2572)
Browse files Browse the repository at this point in the history 
* Create initial Menu elements composition and interactivity support

* feat(core) Create mobile and desktop version for menu

* feat(core) Change menu-item-component to directive like usage

* feat(core) Partial documentation update

* feat(core) Try to improve performance

* feat(core) fix styling

* feat(core) Create Menu documentation

* Update menu-docs.component.html

* feat(core) Add documentation fixes

* feat(core) fix indirect import

* feat(core) Add submenu indicator class

* feat(core) Add RTL support to examples

* feat(core) Rework mobile menu composition

* feat(core) focusable menu items

* feat(core) Move menu logic to Service | Create Submenu wrapper

* fix(core) Add keyboard support

* feat(core) working on mobile mode

* feat(core) problems with popover

* feat(core) Add external trigger upport | Needs fixes on programmatic selection side

* feat(core) Add device specific behaviors based on menu mode

* feat(core) Add standalone menu option

* feat(core) Add disabled state for menu items

* feat(core) Rename menu-link to menu-iteractive

* feat(core) Revert themes and MenuKeyboard changes

* feat(core) Move triggers to Menu

* feat(core) remove standalone mode

* feat(core) Rename subMenu to submenu | Update docs examples and description

* feat(core) Improve A11y

* feat(core) resolve import paths

* feat(core) Move submenu to MenuItem file

* feat(core) Refactor SplitButton to Fiori3

* feat(core) Add MenuComponent tests

* feat(core) Add Menu trigger tests

* feat(core) add tests to directives, menu item and menu service

* feat(core) Finish writing tests

* feat(core) Address review comments

* feat(core) cleanup in shellbar | fix menu placement problem

* feat(core) Add menu story

* feat(core) Remove fdMenu and fdSubmenu aliases exports and usage

* feat(core) address PR comments

Co-authored-by: Vanessa-Cusmich <54723167+Vanessa-Cusmich@users.noreply.github.com>
  • Loading branch information
@salarenko @Vanessa-Cusmich
salarenko and Vanessa-Cusmich committed Jun 17, 2020
1 parent bcf2e44 commit 4d9b64b
Show file tree
Hide file tree
Showing 123 changed files with 4,129 additions and 2,004 deletions.
71 changes: 38 additions & 33 deletions ...core/component-docs/action-bar/examples/action-bar-contextual-menu-example.component.html
View file
Expand Up @@ -2,39 +2,44 @@
<div fd-action-bar-header>
<h3 fd-action-bar-title>Page Title</h3>
<div fd-action-bar-actions>
<fd-popover placement="bottom-end" [noArrow]="false">
<fd-popover-control>
<button
fd-button
aria-label="More"
aria-haspopup="true"
[compact]="true"
[fdType]="'transparent'"
[glyph]="'overflow'"
></button>
</fd-popover-control>
<fd-popover-body>
<fd-menu>
<ul fd-menu-list>
<li fd-menu-item class="is-disabled">
Edit
</li>
<li fd-menu-item>
Delete
</li>
<li fd-menu-item>
Assign
</li>
<li fd-menu-item>
Expire
</li>
<li fd-menu-item>
Archive
</li>
</ul>
</fd-menu>
</fd-popover-body>
</fd-popover>

<button
fd-button
aria-label="More"
aria-haspopup="true"
[glyph]="'overflow'"
[fdType]="'transparent'"
[fdMenuTrigger]="menu"
[compact]="true"
></button>

<fd-menu #menu [placement]="'bottom-end'" [compact]="true">
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Edit</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Delete</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Assign</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Expire</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Archive</span>
</div>
</li>
</fd-menu>
</div>
</div>
</div>
110 changes: 77 additions & 33 deletions .../src/app/core/component-docs/action-bar/examples/action-bar-mobile-example.component.html
View file
Expand Up @@ -11,39 +11,83 @@
</div>
<h3 fd-action-bar-title>Page Title</h3>
<div fd-action-bar-actions>
<fd-popover placement="bottom-end">
<fd-popover-control>
<button
aria-label="More"
aria-haspopup="true"
fd-button
[compact]="true"
[fdType]="'transparent'"
[glyph]="'overflow'"
></button>
</fd-popover-control>
<fd-popover-body>
<fd-menu>
<ul fd-menu-list>
<li fd-menu-item>
Edit
</li>
<li fd-menu-item>
Delete
</li>
<li fd-menu-item>
Assign
</li>
<li fd-menu-item>
Expire
</li>
<li fd-menu-item>
Archive
</li>
</ul>
</fd-menu>
</fd-popover-body>
</fd-popover>

<button
fd-button
aria-label="More"
aria-haspopup="true"
[glyph]="'overflow'"
[fdType]="'transparent'"
[fdMenuTrigger]="menu"
[compact]="true"
></button>

<fd-menu #menu placement="bottom-end" [compact]="true">
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Edit</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Delete</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Assign</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Expire</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Archive</span>
</div>
</li>
</fd-menu>

<button
fd-button
aria-label="More"
aria-haspopup="true"
[glyph]="'overflow'"
[fdType]="'transparent'"
[fdMenuTrigger]="menu2"
[compact]="true"
></button>

<fd-menu #menu2 [placement]="'bottom-end'" [compact]="true">
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Edit</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Delete</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Assign</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Expire</span>
</div>
</li>
<li fd-menu-item>
<div fd-menu-interactive>
<span fd-menu-title>Archive</span>
</div>
</li>
</fd-menu>

</div>
</div>
<p fd-action-bar-description [withBackBtn]="true">Action bar Description</p>
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/src/app/core/component-docs/dropdown/dropdown-docs.module.ts
View file
Expand Up @@ -10,7 +10,7 @@ import { DropdownIconsExampleComponent } from './examples/dropdown-icons-example
import { DropdownStateExampleComponent } from './examples/dropdown-state-example.component';
import { DropdownInfiniteScrollExampleComponent } from './examples/dropdown-infinite-scroll-example.component';
import { DropdownToolbarExampleComponent } from './examples/dropdown-toolbar-example.component';
import { InfiniteScrollModule, MenuModule, MessageStripModule, PopoverModule } from '@fundamental-ngx/core';
import { InfiniteScrollModule, ListModule, MessageStripModule, PopoverModule } from '@fundamental-ngx/core';

const routes: Routes = [
{
Expand All @@ -27,10 +27,10 @@ const routes: Routes = [
imports: [
RouterModule.forChild(routes),
SharedDocumentationModule,
PopoverModule,
InfiniteScrollModule,
MessageStripModule,
MenuModule
PopoverModule,
ListModule
],
exports: [RouterModule],
declarations: [
Expand Down
40 changes: 17 additions & 23 deletions ...app/core/component-docs/dropdown/examples/dropdown-contextual-menu-example.component.html
View file
@@ -1,30 +1,26 @@
<fd-popover style="margin-right: 12px;">
<fd-popover style="margin-right: 12px">
<fd-popover-control>
<button fd-button [fdType]="'transparent'" [glyph]="'vertical-grip'"></button>
</fd-popover-control>
<fd-popover-body *ngIf="menu1 && menu1.length">
<fd-menu>
<ul fd-menu-list>
<li *ngFor="let option of menu1">
<a fd-menu-item [attr.href]="option.url">{{ option.text }}</a>
</li>
</ul>
</fd-menu>
<ul fd-list>
<li fd-list-item *ngFor="let option of menu1">
<a [attr.href]="option.url" fd-list-title>{{option.text}}</a>
</li>
</ul>
</fd-popover-body>
</fd-popover>

<fd-popover style="margin-right: 12px;">
<fd-popover style="margin-right: 12px">
<fd-popover-control>
<button fd-button>More</button>
</fd-popover-control>
<fd-popover-body *ngIf="menu1 && menu1.length">
<fd-menu>
<ul fd-menu-list>
<li *ngFor="let option of menu1">
<a fd-menu-item [attr.href]="option.url">{{ option.text }}</a>
</li>
</ul>
</fd-menu>
<ul fd-list>
<li fd-list-item *ngFor="let option of menu1">
<a [attr.href]="option.url" fd-list-title>{{option.text}}</a>
</li>
</ul>
</fd-popover-body>
</fd-popover>

Expand All @@ -33,12 +29,10 @@
<button fd-button [fdType]="'transparent'">More</button>
</fd-popover-control>
<fd-popover-body *ngIf="menu1 && menu1.length">
<fd-menu>
<ul fd-menu-list>
<li *ngFor="let option of menu1">
<a fd-menu-item [attr.href]="option.url">{{ option.text }}</a>
</li>
</ul>
</fd-menu>
<ul fd-list>
<li fd-list-item *ngFor="let option of menu1">
<a [attr.href]="option.url" fd-list-title>{{option.text}}</a>
</li>
</ul>
</fd-popover-body>
</fd-popover>
36 changes: 11 additions & 25 deletions ...ocs/src/app/core/component-docs/dropdown/examples/dropdown-default-example.component.html
View file
@@ -1,35 +1,21 @@
<fd-popover style="margin-right: 12px;">
<fd-dropdown-control>Cozy Dropdown</fd-dropdown-control>
<fd-popover-body *ngIf="(menu1 && menu1.length) || (menu2 && menu2.length)">
<fd-menu>
<ul fd-menu-list>
<li *ngFor="let option of menu1">
<a fd-menu-item [attr.href]="option.url">{{ option.text }}</a>
</li>
</ul>
<fd-menu-group>
<h1 fd-menu-title>
Group header
</h1>
<ul fd-menu-list>
<li *ngFor="let option of menu2">
<a fd-menu-item [attr.href]="option.url">{{ option.text }}</a>
</li>
</ul>
</fd-menu-group>
</fd-menu>
<fd-popover-body *ngIf="menu1 && menu1.length">
<ul fd-list>
<li fd-list-item *ngFor="let option of menu1">
<a [attr.href]="option.url" fd-list-title>{{option.text}}</a>
</li>
</ul>
</fd-popover-body>
</fd-popover>

<fd-popover>
<fd-dropdown-control [compact]="true">Compact Dropdown</fd-dropdown-control>
<fd-popover-body *ngIf="menu1 && menu1.length">
<fd-menu>
<ul fd-menu-list>
<li *ngFor="let option of menu1">
<a fd-menu-item [attr.href]="option.url">{{ option.text }}</a>
</li>
</ul>
</fd-menu>
<ul fd-list [compact]="true">
<li fd-list-item *ngFor="let option of menu1">
<a [attr.href]="option.url" fd-list-title>{{option.text}}</a>
</li>
</ul>
</fd-popover-body>
</fd-popover>
6 changes: 0 additions & 6 deletions .../docs/src/app/core/component-docs/dropdown/examples/dropdown-default-example.component.ts
View file
Expand Up @@ -10,10 +10,4 @@ export class DropdownDefaultExampleComponent {
{ text: 'Option 2', url: '#' },
{ text: 'Option 3', url: '#' }
];

menu2 = [
{ text: 'Option 3', url: '#' },
{ text: 'Option 4', url: '#' },
{ text: 'Option 5', url: '#' }
];
}
16 changes: 6 additions & 10 deletions .../docs/src/app/core/component-docs/dropdown/examples/dropdown-icons-example.component.html
View file
@@ -1,15 +1,11 @@
<fd-popover>
<fd-dropdown-control [glyph]="'filter'">Dropdown</fd-dropdown-control>
<fd-popover-body *ngIf="values && values.length">
<fd-menu fd-menu-addon>
<ul fd-menu-list>
<li *ngFor="let option of values">
<a href="" fd-menu-item>
<fd-icon fd-menu-item-addon size="m" [glyph]="option.icon" class="fd-template-icon"></fd-icon>
{{ option.name }}
</a>
</li>
</ul>
</fd-menu>
<ul fd-list>
<li fd-list-item *ngFor="let option of values">
<fd-icon fd-list-icon [glyph]="option.icon"></fd-icon>
<a [attr.href]="option.url" fd-list-title>{{option.name}}</a>
</li>
</ul>
</fd-popover-body>
</fd-popover>
18 changes: 5 additions & 13 deletions ...app/core/component-docs/dropdown/examples/dropdown-infinite-scroll-example.component.html
View file
@@ -1,18 +1,10 @@
<fd-popover>
<fd-dropdown-control>Dropdown</fd-dropdown-control>
<fd-popover-body>
<fd-menu>
<ul
fd-menu-list
fdInfiniteScroll
(onScrollAction)="loadMoreElements()"
[scrollPercent]="scrollPercent"
style="overflow-y: scroll; display: block; max-height: 120px;"
>
<li fd-menu-item *ngFor="let element of displayedList">
{{ element.label }}
</li>
</ul>
</fd-menu>
<ul fd-list fdInfiniteScroll (onScrollAction)="loadMoreElements()" [scrollPercent]="scrollPercent" style="overflow-y: scroll; display: block; max-height: 120px;">
<li fd-list-item *ngFor="let option of displayedList">
<a [attr.href]="option.url" fd-list-title>{{option.label}}</a>
</li>
</ul>
</fd-popover-body>
</fd-popover>
12 changes: 5 additions & 7 deletions .../docs/src/app/core/component-docs/dropdown/examples/dropdown-state-example.component.html
View file
@@ -1,12 +1,10 @@
<fd-popover [disabled]="true">
<fd-dropdown-control [disabled]="true">Dropdown</fd-dropdown-control>
<fd-popover-body *ngIf="menu1 && menu1.length">
<fd-menu>
<ul fd-menu-list>
<li *ngFor="let option of menu1">
<a fd-menu-item [attr.href]="option.url">{{ option.text }}</a>
</li>
</ul>
</fd-menu>
<ul fd-list>
<li fd-list-item *ngFor="let option of menu1">
<a [attr.href]="option.url" fd-list-title>{{option.text}}</a>
</li>
</ul>
</fd-popover-body>
</fd-popover>

0 comments on commit 4d9b64b

Please sign in to comment.