Icon Services Sync [Draft]

Icon Services Sync Specification [Draft]

Contents

1. Overview
2. User Stories
3. Functionality
4. Test Scenarios
5. Assumptions and Limitations
6. References

Owned by

Team Name

Developer Name

Designer Name

Requires approval from

• Peer Developer Name | Date:
• Design Manager Name | Date:

Signed off by

• Product Owner Name | Date:
• Platform Architect Name | Date:

Revision History

Version	Users	Date	Notes
1	Names of Developers and Designers	Date

1. Overview

Objectives

Provide a way to replace part of (or all) icons used by components with different icons and sync that change with the angular element's based web components (igc-grid, igc-tree-grid etc) as well.

Using the existing IgcIconRegistry's API to register and change icons for the native web components should also allow changing the icons in the angular element's based components.

• registerIconFromText
• registerIcon
• setIconRef

Acceptance criteria

Must-have before we can consider the feature a sprint candidate

1. Sign-off
2. POC - WC Service, Angular-elements service

...

2. User Stories

Elaborate more on the multi-facetted use cases

Developer stories:

• Story 1: As a developer, I want to be able replace icons used by components with different icons so that they better fit my design.
• Story 2: As a developer, when I change an icon via the public API, I expect the change to be reflected in all components, including the grids.

End-user stories: N/A

3. Functionality

The native web components utilize a icon registry that stores icon information and exposes a public API to change said icons.

The angular element's based components have their own internal angular service, that currently does not expose a public API via the wc components.

Communication between the services will be done via a Broadcast Channel.

Any user set icons via the WC icon registry will sync to the angular elements service, allowing to change its icons via the same API as the native wc components.

Message type is BroadcastIconsChangeMessage and has the following format:

export interface BroadcastIconsChangeMessage {
  actionType: ActionType;
  collections?: Map<string, Map<string, SvgIcon>>;
  references?: Map<string, Map<string, IconMeta>>;
}

export enum ActionType {
  SyncState = 0,
  RegisterIcon = 1,
  UpdateIconReference = 2,
}

export interface IconMeta {
  name: string;
  collection: string;
  external?: boolean;
}

export type SvgIcon = {
  svg: string;
  title?: string;
};

3.1. Developer Experience

Users can register icons via the existing public API:

• registerIconFromText
• registerIcon
• setIconRef

3.2. API

Methods

Name	Description	Return type	Parameters
registerIconFromText	Registers icon from svg.	void	name - the name of the icon to assign this to. iconText - svg text if the icon. collection - the name of the collection this icon belongs to.
registerIcon	Register icon from url.	void	name - the name of the icon to assign this to. url - url to the icon to register. collection - the name of the collection this icon belongs to.
setIconRef	Sets an icon reference meta for an icon in a meta family.	void	name - the name of the icon to set a reference for. collection - the name of the collection this icon belongs to. icon - new icon metadata.

4. Test Scenarios

Automation

6. Assumptions and Limitations

Assumptions	Limitation Notes
Currently only SVG icons are supported.	This is a wc components limitation due to shadow-dom.

7. References