webiny-js icon indicating copy to clipboard operation
webiny-js copied to clipboard
verified publisher icon webiny

feat: Icon picker component (WIP)

Open neatbyte-vnobis opened this issue 2 years ago • 4 comments

Changes

Implements issue "Icon picker component".

Implementation steps

Most of the implementation is described here.

For custom icon support IconPickerConfig was added under packages/app-admin/src/components/IconPicker/config/index.tsx. For the most part it is similar to what we've done with audit logs here. It allows to add custom icons/emojis inside DefaultIcons. Also there is an example of how it can be used.

UI

Color Picker UI is currently only available on /page-builder/block-categories page for test purposes. image

How Has This Been Tested?

Manual

Documentation

None

neatbyte-vnobis avatar Aug 21 '23 15:08 neatbyte-vnobis

@Pavel910 @SvenAlHamad I have a couple questions about Icon Picker:

  1. Emojis need to be displayed by category? There is a People category on design, but nothing about it in doc. I'am asking, because it may not be that easy to implement with react-virtualized Grid component.

  2. How will we store our custom icons? I see two possible solutions: a) Create a separate api for custom icons. b) Use the existing File Manager api. We can add flag (e.g. isIcon) under file meta property, when a user adds an icon to Icon Picker. And remove it when the user deletes it from Icon Picker.

neatbyte-vnobis avatar Sep 01 '23 13:09 neatbyte-vnobis

@Pavel910 @SvenAlHamad Please take a look at the questions above.

neatbyte-vnobis avatar Sep 07 '23 07:09 neatbyte-vnobis

I was testing the icon component implementation and have a few UX related points that require a bit of polish:

  • improve the search: if I search for "glass" or "magnifying glass" I don't get the icon of a magnifying glass; but if I search for "magnifying-glass" then I get it. We should improve the search so that in both these cases I get the expected result.
  • empty state: when we have an empty icon field, can add the magnify glass as the default placeholder, just lower the opacity on the icon in that case so that we hint to the user this is an empty state for the icon field
  • when I select and icon, automatically close the window; currently I need to click manually outside the window to close it
  • when I have a search query in one tab (say I wrote "boat" in the input field in the icons tab) and if I switch to the emoji tab, keep the same value in the input

SvenAlHamad avatar Oct 16 '23 14:10 SvenAlHamad