Chip Specification DRAFT
Team Name: Design and Web Development (DnD)
Developer: Dilyana Yarabanova
Designer: Stefan Ivanov
- Simeon Simeonov | Date:
- Stefan Ivanov | Date:
- Radoslav Mirchev | Date:
- Radoslav Karaivanov | Date:
| Version | Users | Date | Notes |
|---|---|---|---|
| 1 | Dilyana Yarabanova | 15 February 2022 | Write Chip Specification |
| 2 | Damyan Petev | 14 April 2022 | Update prefix and suffix slots |
Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.
There are four types of chips: assist, filter, input, and suggestion.
- The chip component should help people enter information like selections, filter content, or trigger actions.
- The chip component should be interactive.
- The chip component should be able to contain icon, logo or image in a circular crop.
- Input and filter chips should be able to contain a remove icon.
- When displaying multiple chips, they should be placed inline.
- Overflowing chips should break to the next line.
- There should be 4 different types of chips - assist, filter, input, and suggestion.
- The chip component should select/deselect on click.
...
Developer stories:
- Story 1: As a developer, I want to be able to provide a way for the user to enter information, make selections, filter content, or trigger actions.
- Story 2: As a developer, I want to be able to create different types of chips so that I can use them based for different kinds of purposes.
- Story 3: As a developer, I want to be able to customize the message and the contents of the chip component such as icons and images.
- Story 4: As a developer, I want to be able to provide suggestions through chips.
End-user stories:
- Story 1: As an end-user, I want to be able to select multiple chips to filter out my preferences.
- Story 2: As an end-user, I want to use chips for automated actions. (add to calendar, walk there, save to.., share with..)
- Story 3: As an end-user, I want to verify inputs by converting text into chips.
The chip component appears in a slightly rounded container. Chip containers can be elevated or outlined depending on the background. The component should be selected/deselected on click.
3.1. API
| Name | Description | Type | Default value | Reflected |
|---|---|---|---|---|
| disabled | Sets the disabled state for the chip. | boolean | false | true |
| removable | Defines if the chip is removable or not. | boolean | false | false |
| selectable | Defines if the chip is selectable or not. | boolean | false | false |
| selected | A property that changes when the chip gets selected. | boolean | false | false |
| variant | A property that sets the color variant of the chip component. | none, primary, success, danger, warning, info | none | false |
| Name | Description |
|---|---|
| igcRemoved | Emits an event when the chip component is removed. Returns the removed chip component. |
| igcSelected | Emits event when the chip component is selected/deselected and any related animations and transitions also end. |
| Name | Description |
|---|---|
| prefix | The prefix container |
| base | The base container |
| suffix | The suffix container |
| Name | Description |
|---|---|
| select | Renders the select icon of the chip. |
| prefix | Renders content in front of the chip label. |
| (default) | Renders the label of the chip. |
| suffix | Renders content after the chip label. |
| remove | Renders the remove icon of the chip. |
Automation
- Scenario 1:
- scenario 2: