salt-ds icon indicating copy to clipboard operation
salt-ds copied to clipboard

Provide a mechanism to swap out built-in component icons to custom icons

Open origami-z opened this issue 8 months ago • 20 comments

To support adoption, need to a way to swap out built-in icons, e.g. icons in status indicator, chevron in accordion

  • API (e.g. start with a separate Provider implementation, later to decide whether to merge with SaltProvider)
  • Full list of names and default value documented
  • Custom icon requirement (e.g. have to use Salt icon generation script? is it just --icon-color in Icon.css?)

Example (not to be final API), from user point of view

import {CustomErrorIcon} from '@another-library/icon';

const customMapping = {
   error: CustomErrorIcon
  // expand, collapse, submenu, status (error/warning/success/info), overflow, user profile
};

<SemanticIconProvider value={customMapping}>

Icon provider should fill in fallback icon, i.e., all other icons will be default to Salt icons. All components using error icon (e.g. StatusIndicator) will be using CustomErrorIcon.

From Salt internal perspective, it will be something like

before:

// e.g. in dropdown
<ChevronUpIcon aria-hidden />

after:

// useSemanticIcon, the hook will get either a custom icon passed in or default Salt icon
const SemanticExpandIcon = useSemanticIcon("expand"); 

<SemanticExpandIcon aria-hidden />

Questions:

  1. Is it possible to make different component to pick different icons? e.g. Dropdown's expand/collapse icon v.s. Accordion expand/collapse icon, what if a user want to only swap out Accordion expand icon not Dropdown. Possibly related to #3939
    1. Audit differences between DS, same semantic icon used in different components? e.g. Accordion vs Dropdown case
  2. Is it possible to change icon color in a component via custom icons? e.g. Accordion chevron to use a different color than Salt ones.

Design in #3625

https://www.figma.com/design/xET9vAEtgJ7w29lGNGAcrF/Salt-(Next)-Iconography?node-id=41-2264&t=8DBsM4nqta9xP3Vb-1

origami-z avatar Jun 05 '24 12:06 origami-z