Action Strip Component

Action Strip Component Specification

Revision History

Version	User	Date	Notes
0.1	Konstantin Dinev	March 23, 2020	Initial Draft
0.2	Stefan Ivanov	April 02, 2020	Adding stories and design
0.3	Deyan Kamburov	April 07, 2020	API, ActionStrip as Menu, Grid Action Components

1. Overview

Objectives

The igx-action-strip provide templatable area for one or more actions.

2. User Stories

End-User Stories

As an end-user, I want to:

be able to trigger contextual actions upon hovering and arbitrary element e.g. a list item, a grid row or cell
be able to show a menu/drop-down with actions from a "more" action when the number of actions is too large
have a clear visual indication about the context that actions are shown for

Developer Stories

As a developer, I want to

show contextual actions upon user hovering/selecting and arbitrary element
define a horizontal or vertical layout of the actions and the strip
have my action strip layout respect display densities i.e. for comfortable 24px till action strip border and 12px between actions; for cosy 16px till action strip border and 8px between actions; for compact 12px till action strip border and 4px between actions
show a single action that opens a dropdown with all actions defined for the strip

3. Functionality

3.1. End-User Experience

For the end-user, the action strip should be a container, overlaying its parent container, and displaying action buttons with action applicable to the parent component the strip is instantiated or shown for. Action strip in icons and dropdown mode and display densities

3.2. Developer Experience

Creating an action strip component is as easy as:

<igx-action-strip #actionstrip>
  <igx-icon (click)="doSomeAction()"></igx-icon>
</igx-action-strip>

The action strip should be some predefined actions for the major components we anticipate the strip to be used with. Example would be the grid and editing, or pi. This is how the action strip would be defined for a particular cell. In this case the action strip will be always visible.

<igx-grid *ngFor="let group of groups"
          #grid1
          class="group-grid"
          [cellSelection]="'none'"
          [data]="group.Participants"
          showToolbar="true"
          [toolbarTitle]="group.Name">

  <igx-column #column1 field="Team" header="Отбор" width="20%">
    <ng-template igxCell let-value>
      <igx-avatar igxListThumbnail
                  [src]="value.TeamAvatar"
                  [initials]="value.TeamName"
                  roundShape="true">
      </igx-avatar>
      <span>{{ value.TeamName }}</span>

      <igx-action-strip #actionstrip>
        <igx-icon (click)="doSomeAction(column1)"></igx-icon>
        <igx-grid-pinning-actions [grid]="grid1"></igx-grid-pinning-actions>
      </igx-action-strip>
    </ng-template>
  </igx-column>
</igx-grid>

If we want to instantiate the action strip on a row, then we would have to reference it in the column template. We need to define what events it would be shown and hidden on, and also need to pass the context of the particular column and row the action strip is active for. In this case the action strip will be shown on hovering a cell in the particular row, and hidden on moving the mouse outside the cell.

<igx-grid *ngFor="let group of groups"
          #grid1
          class="group-grid"
          [cellSelection]="'none'"
          [data]="group.Participants"
          showToolbar="true"
          [toolbarTitle]="group.Name">

  <igx-column field="Team" header="Отбор" width="20%">
    <ng-template igxCell let-value let-cell>
      <div (mouseover)="actionstrip.show(cell)"  (mouseout)="actionstrip.hide()">
        <igx-avatar igxListThumbnail
                    [src]="value.TeamAvatar"
                    [initials]="value.TeamName"
                    roundShape="true">
        </igx-avatar>
        <span>{{ value.TeamName }}</span>
      </div>
    </ng-template>
  </igx-column>

  <igx-action-strip #actionstrip>
    <igx-icon (click)="doSomeAction()"></igx-icon>
    <igx-grid-editing-actions [grid]="grid1"></igx-grid-editing-actions>
    <igx-grid-pinning-actions [grid]="grid1"></igx-grid-pinning-actions>
  </igx-action-strip>
</igx-grid>

The Action Strip Component can be appended to specified container using the context parameter show API method. The context should be an instance of a component and should have accessible element property. Action Strip should be used in relative containers. When applying context, the context element should also be with relative position, because the Action Strip uses absolute positioning. The visibility of Action Strip can be controlled with hidden property, but in this case context will not be applied. The hidden property can also be used to make the Action Strip initially hidden.

<igx-action-strip [context]="cell" [hidden]="true"></igx-action-strip>

Action strip provides functionality and UI for IgxGrid. All that can be utilized with grid action components:

IgxGridEditingActionsComponent - allows starting edit mode for cell or row, depending on rowEditable option of the grid and deleting rows
IgxGridPinningActionsComponent - allows pinning rows and navigating from pinned row to the ghost row These components inherit IgxGridActionsBaseDirective and when creating custom grid action component, this component should also inherit IgxGridActionsBaseDirective.

Note - Grid action components are not rendered if the context of the action strip is not grid row or grid cell.

  <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>

The Action Strip has the ability to show its content as menu. This is achieved through isMenu option and if enabled will render three dot button, which toggles the action strip content in menu look and feel. In order to specify each menu item it should be decorated the directive IgxActionStripMenuItemDirective

<igx-action-strip #actionStrip1 [isMenu]="true">
  <igx-grid-pinning-actions *IgxActionStripMenuItem [grid]="grid1"></igx-grid-pinning-actions>
  <igx-grid-editing-actions *IgxActionStripMenuItem [grid]="grid1"></igx-grid-editing-actions>
</igx-action-strip>

3.3. Integration scenarios

Grid context

Grid Cell context

Edit cell
Pin/Unpin row
Edit row
Delete row
Pin/Unpin column
Show/Hide column

Grid Row context

Pin/Unpin row
Edit row
Delete row

List Item context

Edit item
Move item
Delete item

3.4. Keyboard Interaction

3.5. API

Properties

IgxActionStripComponent

Name	Description	Type	Default value
id	An @Input property that sets the value of the `id` attribute.	string	`igx-action-strip-${NEXT_ID++}`
hidden	An @Input property that set the visibility of the Action Strip.	boolean	`false`
isMenu	Specifies if the items into the Action Strip to be shown as menu.	boolean	`false`
context	Sets the context of an action strip. The context should be 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

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