Action Strip Component

CHANGELOG.md

@@ -19,6 +19,16 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 
+- `IgxActionStrip` component added.
+    - Provides a template area for one or more actions. In its simplest form the Action Strip
+        is an overlay of any container and shows additional content over that container.
+
+    ```html
+    <igx-action-strip #actionstrip>
+        <igx-icon (click)="doSomeAction()"></igx-icon>
+    </igx-action-strip>
+    ```
+
 - `igxSplitter` component added.
     - Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
         Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the `type` input.

projects/igniteui-angular/src/lib/action-strip/README.md

@@ -0,0 +1,78 @@
+# igx-action-strip
+
+The **igx-action-strip** provides a template area for one or more actions.
+In its simplest form the Action Strip is an overlay of any container and shows additional content over that container.
+A walk-through of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/action_strip.html)
+
+# Usage
+The Action Strip can be initialized in any HTML element that can contain elements. This parent element should be with a relative position as the action strip is trying to overlay it. Interactions with the parent and its content are available while the action strip is shown.
+```html
+<igx-action-strip #actionstrip>
+    <igx-icon (click)="doSomeAction()"></igx-icon>
+</igx-action-strip>
+```
+
+# Grid Action Components
+Action strip provides functionality and UI for IgxGrid. All that can be utilized with grid action components. These components inherit `IgxGridActionsBaseDirective` and when creating a custom grid action component, this component should also inherit `IgxGridActionsBaseDirective`.
+
+```html
+<igx-action-strip #actionstrip>
+    <igx-grid-editing-actions [grid]="grid1"></igx-grid-editing-actions>
+    <igx-grid-pinning-actions [grid]="grid1"></igx-grid-pinning-actions>
+</igx-action-strip>
+```
+
+# IgxActionStripMenuItem 
+
+The Action Strip can show items as menu. This is achieved with `igxActionStripMenuItem` directive applied to its content. Action strip will render three-dot button that toggles a drop down. And the content will be those items that are marked with `igxActionStripMenuItem` directive.
+
+```html
+<igx-action-strip #actionStrip1>
+    <span *IgxActionStripMenuItem>Copy</span>
+    <span *IgxActionStripMenuItem>Paste</span>
+    <span *IgxActionStripMenuItem>Edit</span>
+</igx-action-strip>
+```
+# API Summary
+
+## Inputs
+`IgxActionStripComponent`
+
+   | Name            | Description                                       | Type                        | Default value |
+   |-----------------|---------------------------------------------------|-----------------------------|---------------|
+   | hidden | An @Input property that sets the visibility of the Action Strip. | boolean | `false` |
+   | context | Sets the context of an action strip. The context should be an instance of a @Component, that has element property. This element will be the placeholder of the action strip. | any | |
+
+`IgxGridActionsBaseDirective` ( `IgxGridPinningActionsComponent`, `IgxGridEditingActionsComponent`)
+
+   | Name            | Description                                       | Type                        | Default value |
+   |-----------------|---------------------------------------------------|-----------------------------|---------------|
+   | grid | Set an instance of the grid for which to display the actions. | any | |
+   | context | Sets the context of an action strip. The context is expected to be grid cell or grid row | any | |
+
+## Outputs
+|Name|Description|Cancelable|Parameters|
+|--|--|--|--|
+| onMenuOpening | Emitted before the menu is opened | true | |
+| onMenuOpened | Emitted after the menu is opened | false | |
+
+## Methods
+
+`IgxActionStripComponent`
+
+   | Name     | Description                | Return type                                       | Parameters           |
+   |----------|----------------------------|---------------------------------------------------|----------------------|
+   | show | Showing the Action Strip and appending it the specified context element. | void | context |
+   | hide | Hiding the Action Strip and removing it from its current context element. | void | |
+
+`IgxGridPinningActionsComponent`
+   | Name     | Description                | Return type                                       | Parameters           |
+   |----------|----------------------------|---------------------------------------------------|----------------------|
+   | pin | Pin the row according to the context. | void | |
+   | unpin | Unpin the row according to the context. | void | |
+
+`IgxGridPinningActionsComponent`
+   | Name     | Description                | Return type                                       | Parameters           |
+   |----------|----------------------------|---------------------------------------------------|----------------------|
+   | startEdit | Enter row or cell edit mode depending the grid `rowEdibable` option | void | |
+   | deleteRow | Delete a row according to the context | void | |

projects/igniteui-angular/src/lib/action-strip/action-strip.component.html

@@ -0,0 +1,17 @@
+<div class="igx-action-strip__actions">
+    <ng-content #content></ng-content>
+    <ng-container *ngIf="menuItems.length > 0">
+        <button igxButton="icon" igxRipple [igxToggleAction]="dropdown"
+            [overlaySettings]="menuOverlaySettings" (click)="$event.stopPropagation()"
+            [igxDropDownItemNavigation]="dropdown">
+            <igx-icon>more_vert</igx-icon>
+        </button>
+        <igx-drop-down #dropdown>
+            <igx-drop-down-item *ngFor="let item of menuItems">
+                <div class="igx-drop-down__item-template">
+                    <ng-container *ngTemplateOutlet="item.templateRef; context: {$implicit: item}"></ng-container>
+                </div>
+            </igx-drop-down-item>
+        </igx-drop-down>
+    </ng-container>
+</div>

projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts

@@ -0,0 +1,251 @@
+import { IgxActionStripComponent } from './action-strip.component';
+import { Component, ViewChild, ElementRef, ViewContainerRef } from '@angular/core';
+import { configureTestSuite } from '../test-utils/configure-suite';
+import { TestBed, async } from '@angular/core/testing';
+import { IgxIconModule } from '../icon';
+import { By } from '@angular/platform-browser';
+import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxToggleModule } from '../directives/toggle/toggle.directive';
+import { IgxActionStripModule } from './action-strip.module';
+
+const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions';
+const DROP_DOWN_LIST = 'igx-drop-down__list';
+
+describe('igxActionStrip', () => {
+    let fixture;
+    let actionStrip: IgxActionStripComponent;
+    let actionStripElement: ElementRef;
+    let parentContainer: ElementRef;
+    let innerContainer: ViewContainerRef;
+
+    describe('Unit tests: ', () => {
+        const mockViewContainerRef = jasmine.createSpyObj('ViewContainerRef', ['element']);
+        const mockRenderer2 = jasmine.createSpyObj('Renderer2', ['appendChild', 'removeChild']);
+        const mockContext = jasmine.createSpyObj('context', ['element']);
+        const mockDisplayDensity = jasmine.createSpyObj('IDisplayDensityOptions', ['displayDensity']);
+
+        it('should properly get/set hidden', () => {
+            actionStrip = new IgxActionStripComponent(mockViewContainerRef, mockRenderer2, mockDisplayDensity);
+            expect(actionStrip.hidden).toBeFalsy();
+            actionStrip.hidden = true;
+            expect(actionStrip.hidden).toBeTruthy();
+        });
+
+        it('should properly show and hide using API', () => {
+            actionStrip = new IgxActionStripComponent(mockViewContainerRef, mockRenderer2, mockDisplayDensity);
+            actionStrip.show(mockContext);
+            expect(actionStrip.hidden).toBeFalsy();
+            expect(actionStrip.context).toBe(mockContext);
+            actionStrip.hide();
+            expect(actionStrip.hidden).toBeTruthy();
+        });
+    });
+
+    describe('Initialization and rendering tests: ', () => {
+        configureTestSuite();
+        beforeAll(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    IgxActionStripTestingComponent
+                ],
+                imports: [
+                    IgxActionStripModule,
+                    IgxIconModule
+                ]
+            }).compileComponents();
+        }));
+        beforeEach(() => {
+            fixture = TestBed.createComponent(IgxActionStripTestingComponent);
+            fixture.detectChanges();
+            actionStrip = fixture.componentInstance.actionStrip;
+            actionStripElement = fixture.componentInstance.actionStripElement;
+            parentContainer = fixture.componentInstance.parentContainer;
+            innerContainer = fixture.componentInstance.innerContainer;
+        });
+        it('should be overlapping its parent container when no context is applied', () => {
+            const parentBoundingRect = parentContainer.nativeElement.getBoundingClientRect();
+            const actionStripBoundingRect = actionStripElement.nativeElement.getBoundingClientRect();
+            expect(parentBoundingRect.top).toBe(actionStripBoundingRect.top);
+            expect(parentBoundingRect.bottom).toBe(actionStripBoundingRect.bottom);
+            expect(parentBoundingRect.left).toBe(actionStripBoundingRect.left);
+            expect(parentBoundingRect.right).toBe(actionStripBoundingRect.right);
+        });
+
+        it('should be overlapping context.element when context is applied', () => {
+            actionStrip.show(innerContainer);
+            fixture.detectChanges();
+            const innerBoundingRect = innerContainer.element.nativeElement.getBoundingClientRect();
+            const actionStripBoundingRect = actionStripElement.nativeElement.getBoundingClientRect();
+            expect(innerBoundingRect.top).toBe(actionStripBoundingRect.top);
+            expect(innerBoundingRect.bottom).toBe(actionStripBoundingRect.bottom);
+            expect(innerBoundingRect.left).toBe(actionStripBoundingRect.left);
+            expect(innerBoundingRect.right).toBe(actionStripBoundingRect.right);
+        });
+
+        it('should allow interacting with the content elements', () => {
+            const asIcon = fixture.debugElement.query(By.css('.asIcon'));
+            asIcon.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+            expect(fixture.componentInstance.flag).toBeTruthy();
+        });
+
+        it('should not display the action strip when setting it hidden', () => {
+            actionStrip.hidden = true;
+            fixture.detectChanges();
+            const asQuery = fixture.debugElement.query(By.css('igx-action-strip'));
+            expect(asQuery.nativeElement.style.display).toBe('none');
+        });
+    });
+
+    describe('render content as menu', () => {
+        configureTestSuite();
+        beforeAll(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    IgxActionStripMenuTestingComponent,
+                    IgxActionStripCombinedMenuTestingComponent
+                ],
+                imports: [
+                    IgxActionStripModule,
+                    IgxIconModule,
+                    NoopAnimationsModule,
+                    IgxToggleModule
+                ]
+            }).compileComponents();
+        }));
+
+        it('should render tree-dot button which toggles the content as menu', () => {
+            fixture = TestBed.createComponent(IgxActionStripMenuTestingComponent);
+            fixture.detectChanges();
+            actionStrip = fixture.componentInstance.actionStrip;
+            const actionStripContainer = fixture.debugElement.query(By.css(`.${ACTION_STRIP_CONTAINER_CSS}`));
+            // there should be one rendered child and one hidden dropdown
+            expect(actionStripContainer.nativeElement.children.length).toBe(2);
+            let dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+            expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('true');
+            const icon = fixture.debugElement.query(By.css(`igx-icon`));
+            icon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+            dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+            expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('false');
+            const dropDownItems = dropDownList.queryAll(By.css('igx-drop-down-item'));
+            expect(dropDownItems.length).toBe(3);
+        });
+
+        it('should emit onMenuOpen/onMenuOpening when toggling the menu', () => {
+            pending('implementation');
+        });
+
+        it('should allow combining content outside and inside the menu', () => {
+            fixture = TestBed.createComponent(IgxActionStripCombinedMenuTestingComponent);
+            fixture.detectChanges();
+            actionStrip = fixture.componentInstance.actionStrip;
+            const actionStripContainer = fixture.debugElement.query(By.css(`.${ACTION_STRIP_CONTAINER_CSS}`));
+            // there should be one rendered child and one hidden dropdown and one additional icon
+            expect(actionStripContainer.nativeElement.children.length).toBe(3);
+            let dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+            expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('true');
+            const icon = fixture.debugElement.query(By.css(`igx-icon`));
+            icon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+            dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+            expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('false');
+            const dropDownItems = dropDownList.queryAll(By.css('igx-drop-down-item'));
+            expect(dropDownItems.length).toBe(2);
+        });
+
+        it('should close the menu when hiding action strip', async() => {
+            fixture = TestBed.createComponent(IgxActionStripCombinedMenuTestingComponent);
+            fixture.detectChanges();
+            actionStrip = fixture.componentInstance.actionStrip;
+            // there should be one rendered child and one hidden dropdown and one additional icon
+            const icon = fixture.debugElement.query(By.css(`igx-icon`));
+            icon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+            let dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+            expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('false');
+            actionStrip.hide();
+            await wait();
+            fixture.detectChanges();
+            dropDownList = fixture.debugElement.query(By.css(`.${DROP_DOWN_LIST}`));
+            expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('true');
+        });
+    });
+});
+
+@Component({
+    template: `
+<div #parent style="position:relative; height: 200px; width: 400px;">
+    <div #inner style="position:relative; height: 100px; width: 200px;">
+        <p>
+            Lorem ipsum dolor sit
+        </p>
+    </div>
+    <igx-action-strip #actionStrip>
+        <igx-icon class="asIcon" (click)="onIconClick()">alarm</igx-icon>
+    </igx-action-strip>
+</div>
+`
+})
+class IgxActionStripTestingComponent {
+    @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
+    public actionStrip: IgxActionStripComponent;
+
+    @ViewChild('actionStrip', { read: ElementRef, static: true })
+    public actionStripElement: ElementRef;
+
+    @ViewChild('parent', { static: true })
+    public parentContainer: ElementRef;
+
+    @ViewChild('inner', { read: ViewContainerRef, static: true })
+    public innerContainer: ViewContainerRef;
+
+    public flag = false;
+
+    onIconClick() {
+        this.flag = true;
+    }
+}
+
+@Component({
+    template: `
+    <div #parent style="position:relative; height: 200px; width: 400px;">
+        <div>
+            <p>
+                Lorem ipsum dolor sit
+            </p>
+        </div>
+        <igx-action-strip #actionStrip>
+            <span *igxActionStripMenuItem>Mark</span>
+            <span *igxActionStripMenuItem>Favorite</span>
+            <span *igxActionStripMenuItem>Download</span>
+        </igx-action-strip>
+    </div>
+    `
+})
+class IgxActionStripMenuTestingComponent {
+    @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
+    public actionStrip: IgxActionStripComponent;
+}
+
+@Component({
+    template: `
+    <div #parent style="position:relative; height: 200px; width: 400px;">
+        <div>
+            <p>
+                Lorem ipsum dolor sit
+            </p>
+        </div>
+        <igx-action-strip #actionStrip>
+            <span>Mark</span>
+            <span *igxActionStripMenuItem>Favorite</span>
+            <span *igxActionStripMenuItem>Download</span>
+        </igx-action-strip>
+    </div>
+    `
+})
+class IgxActionStripCombinedMenuTestingComponent {
+    @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
+    public actionStrip: IgxActionStripComponent;
+}