fix: Shellbar Examples and Size added (SAP#3513)

* fix: Add shellbar size, fix examples * add docs style changes for shellbar nav * remove redundant test * fix lint
AntonOlkhovskyi · Nov 16, 2020 · cf86be2 · cf86be2
1 parent 2f6cc5a
commit cf86be2
Show file tree

Hide file tree

Showing 15 changed files with 108 additions and 82 deletions.
diff --git a/...src/app/core/component-docs/shellbar/examples/shellbar-collapsible-example.component.html b/...src/app/core/component-docs/shellbar/examples/shellbar-collapsible-example.component.html
@@ -1,32 +1,44 @@
-<fd-shellbar>
-    <fd-shellbar-logo>
-        <a href="#" class="fd-shellbar__logo fd-shellbar__logo--image-replaced" aria-label="SAP"></a>
-    </fd-shellbar-logo>
-    <fd-product-menu [control]="productMenuControl" [closePopoverOnSelect]="true" [items]="productMenuItems">
-    </fd-product-menu>
-    <fd-shellbar-subtitle>
-        Subtitle
-    </fd-shellbar-subtitle>
-    <fd-shellbar-actions [user]="user" [userMenu]="userMenu">
-        <fd-shellbar-action
-            *ngFor="let action of actions"
-            [glyph]="action.glyph"
-            [callback]="action.callback"
-            [label]="action.label"
-            [notificationCount]="action.notificationCount"
-            [notificationLabel]="action.notificationLabel"
-        >
-        </fd-shellbar-action>
-        <fd-product-switch>
-            <fd-product-switch-body [products]="productSwitcher"> </fd-product-switch-body>
-        </fd-product-switch>
-        <fd-combobox
-            [(ngModel)]="searchTerm"
-            [glyph]="'search'"
-            [dropdownValues]="searchTerms"
-            [placeholder]="'Type some text...'"
-            [maxHeight]="'250px'"
-        >
-        </fd-combobox>
-    </fd-shellbar-actions>
-</fd-shellbar>
+<fd-segmented-button>
+    <button fd-button (click)="changeSize('s')" [class]="isSelected('s')">S</button>
+    <button fd-button (click)="changeSize('m')" [class]="isSelected('m')">M</button>
+    <button fd-button (click)="changeSize('l')" [class]="isSelected('l')">L</button>
+    <button fd-button (click)="changeSize('xl')" [class]="isSelected('xl')">XL</button>
+</fd-segmented-button>
+
+<div style="margin-top: 60px" [style.maxWidth]="sizesWidth[currentSize] + 'px'">
+    <fd-shellbar [size]="currentSize">
+        <fd-shellbar-logo>
+            <a href="#" class="fd-shellbar__logo fd-shellbar__logo--image-replaced" aria-label="SAP"></a>
+        </fd-shellbar-logo>
+        <fd-product-menu [control]="productMenuControl" [closePopoverOnSelect]="true" [items]="productMenuItems">
+        </fd-product-menu>
+        <fd-shellbar-subtitle>
+            Subtitle
+        </fd-shellbar-subtitle>
+        <fd-shellbar-actions [user]="user" [userMenu]="userMenu">
+            <fd-shellbar-action
+                *ngFor="let action of actions"
+                [glyph]="action.glyph"
+                [callback]="action.callback"
+                [label]="action.label"
+                [notificationCount]="action.notificationCount"
+                [notificationLabel]="action.notificationLabel"
+            >
+            </fd-shellbar-action>
+            <fd-product-switch>
+                <fd-product-switch-body
+                    [products]="productSwitcher"
+                    [forceListMode]="currentSize === 's'">
+                </fd-product-switch-body>
+            </fd-product-switch>
+            <fd-combobox
+                [(ngModel)]="searchTerm"
+                [glyph]="'search'"
+                [dropdownValues]="searchTerms"
+                [placeholder]="'Type some text...'"
+                [maxHeight]="'250px'"
+            >
+            </fd-combobox>
+        </fd-shellbar-actions>
+    </fd-shellbar>
+</div>
diff --git a/...s/src/app/core/component-docs/shellbar/examples/shellbar-collapsible-example.component.ts b/...s/src/app/core/component-docs/shellbar/examples/shellbar-collapsible-example.component.ts
@@ -1,11 +1,21 @@
 import { Component } from '@angular/core';
-import { ShellbarMenuItem, ProductSwitchItem, ShellbarUser, ShellbarUserMenu } from '@fundamental-ngx/core';
+import { ShellbarMenuItem, ProductSwitchItem, ShellbarUser, ShellbarUserMenu, ShellbarSizes } from '@fundamental-ngx/core';
 
 @Component({
     selector: 'fd-shellbar-collapsible-example',
     templateUrl: './shellbar-collapsible-example.component.html'
 })
 export class ShellbarCollapsibleExampleComponent {
+
+    currentSize: ShellbarSizes = 'm';
+
+    sizesWidth = {
+        s: 320,
+        m: 720,
+        l: 1024,
+        xl: 1400
+    };
+
     searchTerm: string;
 
     productMenuControl = 'Corporate Portal';
@@ -128,6 +138,14 @@ export class ShellbarCollapsibleExampleComponent {
         }
     ];
 
+    changeSize(size: ShellbarSizes): void {
+        this.currentSize = size;
+    }
+
+    isSelected(size: ShellbarSizes): string {
+        return this.currentSize === size ? 'is-selected' : '';
+    }
+
     settingsCallback($event): void {
         console.log($event);
         alert('Settings Clicked');

diff --git a/...mponent-docs/shellbar/examples/shellbar-side-nav/shellbar-side-nav-example.component.html b/...mponent-docs/shellbar/examples/shellbar-side-nav/shellbar-side-nav-example.component.html
@@ -1,9 +1,10 @@
-<fd-shellbar>
+<fd-shellbar class="fd-shellbar-navigation-custom">
     <button
         fd-shellbar-side-nav
         fd-button
-        [fdType]="'transparent'"
-        glyph="menu2'"
+        glyph="menu2"
+        fdType="transparent"
+        style="width: 2.75rem;"
         (click)="condensed = !condensed"
     ></button>
 

diff --git a/...mponent-docs/shellbar/examples/shellbar-side-nav/shellbar-side-nav-example.component.scss b/...mponent-docs/shellbar/examples/shellbar-side-nav/shellbar-side-nav-example.component.scss
@@ -2,6 +2,12 @@
     display: none;
 }
 
+.fd-shellbar-navigation-custom {
+    .fd-shellbar {
+        padding: 0;
+    }
+}
+
 .shellbar-sidenav-content-example {
     display: flex;
     align-items: flex-start;

diff --git a/...component-docs/shellbar/examples/shellbar-side-nav/shellbar-side-nav-example.component.ts b/...component-docs/shellbar/examples/shellbar-side-nav/shellbar-side-nav-example.component.ts
@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector: 'fd-shellbar-side-nav-example',
     templateUrl: './shellbar-side-nav-example.component.html',
-    styleUrls: ['./shellbar-side-nav-example.component.scss']
+    styleUrls: ['./shellbar-side-nav-example.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class ShellbarSideNavExampleComponent {
     condensed = false;

diff --git a/apps/docs/src/app/core/component-docs/shellbar/shellbar-docs.component.html b/apps/docs/src/app/core/component-docs/shellbar/shellbar-docs.component.html
@@ -16,9 +16,11 @@
     Links with collapsible menu and product switcher.
 </fd-docs-section-title>
 <description>
-    When a product has multiple links, the product links should collapse into an overflow menu on mobile screens. All
-    actions, except for the user menu, should be collapsed. See the placement of the
-    <code>&lt;fd-shellbar-collapse></code> container below. <br>
+    The shellbar can have 4 different sizes <code>'s' | 'm' | 'l' | 'xl'</code>, where <code>"m"</code> is default one.
+    <br>
+    When a product has multiple links, the product links should collapse into an overflow menu on mobile screens
+    (<code>s</code> size). All actions, except for the user menu, should be collapsed.
+    <br>
     <code>ProductSwitchComponent</code> and <code>ProductMenuComponent</code> have properties straight from popover
     component, so some customisation can be added, by passing inputs ex. <code>[position]="'bottom-end'"</code>.
 </description>

diff --git a/apps/docs/src/app/core/component-docs/shellbar/shellbar-docs.component.ts b/apps/docs/src/app/core/component-docs/shellbar/shellbar-docs.component.ts
@@ -6,6 +6,7 @@ import * as shellbarCollapsibleHTMLSrc from '!raw-loader!./examples/shellbar-col
 import * as shellbarCollapsibleTSSrc from '!raw-loader!./examples/shellbar-collapsible-example.component.ts';
 import * as sideNavShellbarHtml from '!raw-loader!./examples/shellbar-side-nav/shellbar-side-nav-example.component.html';
 import * as sideNavShellbarTs from '!raw-loader!./examples/shellbar-side-nav/shellbar-side-nav-example.component.ts';
+import * as sideNavShellbarScss from '!raw-loader!./examples/shellbar-side-nav/shellbar-side-nav-example.component.scss';
 import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
 
 @Component({
@@ -51,7 +52,15 @@ export class ShellbarDocsComponent {
             language: 'typescript',
             component: 'ShellbarSideNavExampleComponent',
             code: sideNavShellbarTs,
-            fileName: 'shellbar-side-nav-example'
+            fileName: 'shellbar-side-nav-example',
+            scssFileCode: sideNavShellbarScss
+        },
+        {
+            language: 'scss',
+            code: sideNavShellbarScss,
+            fileName: 'shellbar-side-nav-example',
+            component: 'ShellbarSideNavExampleComponent',
+            scssFileCode: sideNavShellbarScss
         }
     ];
 }
diff --git a/apps/docs/src/app/core/component-docs/shellbar/shellbar-docs.module.ts b/apps/docs/src/app/core/component-docs/shellbar/shellbar-docs.module.ts
@@ -12,6 +12,7 @@ import {
     ComboboxModule,
     LayoutPanelModule,
     ProductSwitchModule,
+    SegmentedButtonModule,
     ShellbarModule,
     SideNavigationModule,
     TileModule
@@ -37,7 +38,8 @@ const routes: Routes = [
         SideNavigationModule,
         ProductSwitchModule,
         TileModule,
-        LayoutPanelModule
+        LayoutPanelModule,
+        SegmentedButtonModule
     ],
     exports: [RouterModule],
     declarations: [

diff --git a/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions-mobile.component.html b/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions-mobile.component.html
@@ -17,8 +17,8 @@
     <fd-menu #menu [options]="{ placement: 'bottom-end' }" [fillControlMode]="null">
         <li fd-menu-item *ngFor="let action of shellbarActions" (click)="actionClicked(action, $event)">
             <div fd-menu-interactive>
-                <fd-icon fd-menu-addon position="before" [glyph]="action.glyph"></fd-icon>
-                {{ action.label }}
+                <fd-menu-addon position="before" [glyph]="action.glyph"></fd-menu-addon>
+                <span fd-menu-title>{{ action.label }}</span>
             </div>
         </li>
     </fd-menu>

diff --git a/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.html b/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.html
@@ -2,7 +2,7 @@
     <ng-content select="fd-combobox"></ng-content>
 </div>
 
-<div *ngIf="actionsCollapsed && shellbarActions.length" class="fd-shellbar__action fd-shellbar__action--mobile">
+<div class="fd-shellbar__action fd-shellbar__action--mobile">
     <fd-shellbar-actions-mobile
         [shellbarActions]="shellbarActions"
         [collapsedItemMenuLabel]="collapsedItemMenuLabel"

diff --git a/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.spec.ts b/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.spec.ts
@@ -13,15 +13,11 @@ import { ShellbarActionsMobileComponent } from './shellbar-actions-mobile.compon
 describe('ShellbarActionsComponent', () => {
     let component: ShellbarActionsComponent;
     let fixture: ComponentFixture<ShellbarActionsComponent>;
-    const windowMock: Window = <any>{
-        innerWidth: 1024
-    };
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [ShellbarActionsComponent, ShellbarActionsMobileComponent, ShellbarUserMenuComponent],
             imports: [MenuModule, PopoverModule, ButtonModule, IconModule, ProductSwitchModule],
-            providers: [{ provide: 'window', useFactory: () => windowMock }]
         }).compileComponents();
     }));
 
@@ -34,10 +30,4 @@ describe('ShellbarActionsComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
-
-    it('should handle window resize', () => {
-        const resizeSpy = spyOn(component, 'onResize');
-        window.dispatchEvent(new Event('resize'));
-        expect(resizeSpy).toHaveBeenCalled();
-    });
 });
diff --git a/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.ts b/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.ts
@@ -44,9 +44,7 @@ import { ProductSwitchComponent } from '../../product-switch/product-switch/prod
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ShellbarActionsComponent implements OnInit {
-    /** @hidden */
-    actionsCollapsed = false;
+export class ShellbarActionsComponent {
 
     /** The user data. */
     @Input()
@@ -84,12 +82,6 @@ export class ShellbarActionsComponent implements OnInit {
     @ContentChild(ProductSwitchComponent, { static: false })
     productSwitchComponent: ProductSwitchComponent;
 
-    /** @hidden */
-    @HostListener('window:resize', [])
-    onResize(): void {
-        this.actionsCollapsed = window.innerWidth < 1024;
-    }
-
     /** @hidden */
     triggerItems(): void {
         if (this.closePopoverOnSelect) {
@@ -102,11 +94,6 @@ export class ShellbarActionsComponent implements OnInit {
         }
     }
 
-    /** @hidden */
-    ngOnInit(): void {
-        this.onResize();
-    }
-
     public get userItem(): ShellbarUser {
         if (this.userComponent) {
             return this.userComponent.user;

diff --git a/libs/core/src/lib/shellbar/shellbar.component.html b/libs/core/src/lib/shellbar/shellbar.component.html
@@ -1,4 +1,4 @@
-<div class="fd-shellbar">
+<div class="fd-shellbar" [ngClass]="'fd-shellbar--' + size">
     <div class="fd-shellbar__group fd-shellbar__group--product">
         <ng-content select="[fd-shellbar-side-nav]"></ng-content>
         <ng-content select="fd-shellbar-logo"></ng-content>

diff --git a/libs/core/src/lib/shellbar/shellbar.component.scss b/libs/core/src/lib/shellbar/shellbar.component.scss
@@ -2,17 +2,6 @@
 @import '~fundamental-styles/dist/counter';
 
 .fd-shellbar {
-    .fd-button.fd-shellbar__button.fd-shellbar-side-nav-control {
-        margin-right: 4px;
-        margin-left: -12px;
-        @at-root {
-            [dir='rtl'] &,
-            &[dir='rtl'] {
-                margin-left: 4px;
-                margin-right: -10px;
-            }
-        }
-    }
     // TODO: Investigate why this is necessary here but not in styles
     .fd-shellbar__action .fd-shellbar__input-group:hover {
         background-color: transparent;

diff --git a/libs/core/src/lib/shellbar/shellbar.component.ts b/libs/core/src/lib/shellbar/shellbar.component.ts
@@ -5,12 +5,16 @@ import {
     ContentChild,
     ContentChildren,
     forwardRef,
+    Input,
     QueryList,
     ViewEncapsulation
 } from '@angular/core';
 import { ButtonComponent } from '../button/button.component';
 import { ComboboxComponent } from '../combobox/combobox.component';
 
+export type ShellbarSizes = 's' | 'm' | 'l' | 'xl';
+
+
 /**
  * The shellbar offers consistent, responsive navigation across all products and applications.
  * Includes support for branding, product navigation, search, notifications, and user settings.
@@ -24,6 +28,11 @@ import { ComboboxComponent } from '../combobox/combobox.component';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ShellbarComponent implements AfterContentInit {
+
+    /** Size of Shellbar component 's' | 'm' | 'l' | 'xl' */
+    @Input()
+    size: ShellbarSizes = 'm';
+
     /** @hidden */
     @ContentChild(ComboboxComponent, { static: false })
     comboboxComponent: ComboboxComponent;