Chip Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. Accessibility
5. References

Owned by

Team Name: Design and Web Development (DnD)

Developer: Dilyana Yarabanova

Designer: Stefan Ivanov

Requires approval from

• Simeon Simeonov | Date:
• Stefan Ivanov | Date:

Signed off by

• Radoslav Mirchev | Date:
• Radoslav Karaivanov | Date:

Revision History

Version	Users	Date	Notes
1	Dilyana Yarabanova	15 February 2022	Write Chip Specification
2	Damyan Petev	14 April 2022	Update prefix and suffix slots

1. Overview

Objectives

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.

Acceptance criteria

1. The chip component should help people enter information like selections, filter content, or trigger actions.
2. The chip component should be interactive.
3. The chip component should be able to contain icon, logo or image in a circular crop.
4. Input and filter chips should be able to contain a remove icon.
5. When displaying multiple chips, they should be placed inline.
6. Overflowing chips should break to the next line.
7. There should be 4 different types of chips - assist, filter, input, and suggestion.
8. The chip component should select/deselect on click.

...

2. User Stories

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.

3. Functionality

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

Properties

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

Events

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.

CSS Parts

Name	Description
prefix	The prefix container
base	The base container
suffix	The suffix container

Slots

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.

4. Test Scenarios

Automation

• Scenario 1:
• scenario 2:

5. References

Material Design 3

Material Design 2