Action Strip Component
- Konstantin Dinev | Date: May 15, 2020
- Radoslav Mirchev | Date: April 14, 2020
- Stefan Ivanov | Date: May 15, 2020
| 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 |
| 0.4 | Radoslav Mirchev | April 14, 2020 | Sign Off |
The igx-action-strip provides a template area for one or more actions.
- 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
- 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; for cosy 16px till action strip border; for compact 12px till action strip border. The spacing between the actions is not affected by the display density and is 4px between actions
- show a single action that opens a dropdown with all actions defined for the strip
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.
It is also possible to use the action strip to open a contextual menu showing the various options in a drop-down.
It should also be possible to configure a combined approach where primary actions will show as an icon for ease of access, while all secondary actions are listed in a drop-down that is shown upon choosing the rightmost icon preset with three dots.
When actions are shown in a dropdown they respect the display density of the dropdown and its items
3.2. Developer Experience
In its simplest form the Action Strip is an overlay of any container and shows additional content over that container. 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 have some predefined actions for the major components we anticipate the strip to be used with. An example would be the grid and editing, or pinning.
When the action strip is defined inside the grid it will automatically show on mouse over and hide on mouse leave for the grid rows and for the grid itself. Hence for the following example:
<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="Team" width="20%">
</igx-column>
<igx-action-strip #actionstrip>
<igx-icon (click)="doSomeAction()"></igx-icon>
<igx-grid-editing-actions></igx-grid-editing-actions>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
</igx-action-strip>
</igx-grid>The action strip will automatically show/hide in the context of the grid rows. Hence you can use the default grid actions and they will work out of the box.
For more custom scenarios, where you may want to show the strip in another context (for example for cells, headers or other parts of the grid) or on another action (for example on click, tap etc.) you can define the strip outside of the grid. For example:
<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="Team" width="20%">
<ng-template igxCell let-value>
<igx-avatar igxListThumbnail
[src]="value.TeamAvatar"
[initials]="value.TeamName"
roundShape="true">
</igx-avatar>
<span>{{ value.TeamName }}</span>
</ng-template>
</igx-column>
</igx-grid>
<igx-action-strip #actionstrip>
<igx-icon (click)="doSomeAction(column1)"></igx-icon>
</igx-action-strip>And manually handle the showing and hiding via the related show/hide API methods.
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.
The Action Strip can change its parent element using the context parameter.
These are some of the scenarios when the Action Strip will require setting the context parameter:
- specific Component that does not allow content
- dynamic components
- single action strip for more than one component(in this case context can be changed)
It is recommended to change the context is using the show(context) API method. It will render the Action Strip inside the element of that context.
The Action Strip Component can be appended to the specified container using the context parameter show API method. The context should be an instance of a component and should have an 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.
These components inherit IgxGridActionsBaseDirective and when creating a 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.
<igx-action-strip #actionstrip>
<igx-grid-editing-actions></igx-grid-editing-actions>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
</igx-action-strip>This component includes functionality and UI related to grid editing. It allows starting edit mode for cell or row, depending on rowEditable option of the grid and deleting rows.
<igx-action-strip #actionstrip>
<igx-grid-editing-actions></igx-grid-editing-actions>
</igx-action-strip>This component includes functionality and UI related to grid pinning. It allows pinning rows and navigating from a pinned row to the disabled row.
<igx-action-strip #actionstrip>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
</igx-action-strip>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. Any item in the content of the Action Strip decorated with the directive igxActionStripMenuItem will be in the drop down. If no items are specified with the igxActionStripMenuItem directive the three-dot button will not be rendered.
For the default grid actions that render multiple items, an additional option is exposed - asMenuItems, which allows each individual action to be rendered as a separate menu item.
<igx-action-strip #actionStrip1>
<igx-icon *igxActionStripMenuItem (click)="doSomeAction()">alarm</igx-icon>
<igx-grid-pinning-actions [asMenuItems]='true'></igx-grid-pinning-actions>
<igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions>
</igx-action-strip>When the action strip is defined inside the grid as a menu, it will automatically show on mouse over and hide on mouse leave for the grid rows and for the grid itself, but the difference is that with an open drop-down menu, the action strip will stay open if the user mouse over the grid element and close if the user mouse leave the grid.
3.3. Integration scenarios
- Pin/Unpin row (use custom icon)
- Jump to row (use custom icon)
- Edit row use this icon
- Delete row use this icon
Here is how these preset actions with the default context for a grid, its row, looks like:
Ideas for further contexts and actions in the foreseeable future Grid Cell context Edit cell Pin/Unpin row Jump to row Edit row Delete row Pin/Unpin column Show/Hide column
3.4. Keyboard Interaction
3.5. API
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 |
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 rowEditable option |
void | |
| deleteRow | Delete a row according to the context | void |
| Name | Description | Cancelable | Parameters |
|---|---|---|---|
| onMenuOpening | Emitted before the menu is opened | true | |
| onMenuOpened | Emitted after the menu is opened | false |
3.6. Samples
- Create a sample
The component gets the corresponding aria attributes
- attribute
igxGrid Row Pinning Feature igxActionStrip Issue
- Should be able to properly get/set hidden
- Should be able to properly show and hide using API
- Should be overlapping its parent container when no context is applied
- Should be overlapping context.element when context is applied
- Should allow interacting with the content elements
- Should not display the action strip when setting it hidden
- Menu:
- Should render tree-dot button which toggles the content as menu
- Should emit onMenuOpen/onMenuOpening when toggling the menu
- Should allow combining content outside and inside the menu
- Should close the menu when hiding action strip
- IgxGridPinningActionsComponent
- Should allow pinning and unpinning rows in a grid
- Should allow navigating to disabled row in unpinned area
- IgxGridEditingActionsComponent
- Should allow editing and deleting row