igniteui-angular icon indicating copy to clipboard operation
igniteui-angular copied to clipboard
verified publisher icon IgniteUI

refactor(*): utilize custom indigo icons when indigo theme is used

Open simeonoff opened this issue 1 year ago • 2 comments

Closes #14007

Additional information (check all that apply):

  • [ ] Bug fix
  • [x] New functionality
  • [ ] Documentation
  • [ ] Demos
  • [ ] CI/CD

Checklist:

  • [x] All relevant tags have been applied to this PR
  • [x] This PR includes unit tests covering all the new code (test guidelines)
  • [ ] This PR includes API docs for newly added methods/properties (api docs guidelines)
  • [ ] This PR includes feature/README.MD updates for the feature docs
  • [ ] This PR includes general feature table updates in the root README.MD
  • [ ] This PR includes CHANGELOG.MD updates for newly added functionality
  • [ ] This PR contains breaking changes
  • [ ] This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • [ ] This PR includes behavioral changes and the feature specification has been updated with them

simeonoff avatar Jul 15 '24 08:07 simeonoff

Hey, i'm not sure if you are done replacing the icons in all components.... here's some feedback of what i saw :)

TABS The navigation icons are supposed to be smaller, like on Figma.

image

DROPDOWN BUTTON The components that have dropdown button like Combo & Select should not have background on the dropdown button. Here's the comparison.

image

GRID FILTERING DIALOG

  1. Some of the icons are bigger than the other icons. This happens in all sizes. See the Figma image for reference.
  2. I'm not sure if this branch includes styling of the grid, because i guess that's why icons appear blue and not gray, like in the design.

image

PIVOTGRID I suppose this component has not been fully styled as well. There is a problem with the chevrons sizing there as well in some places.

image

PAGINATOR Since i didn't work on the paginator component styling, i failed to provide those 2 icons to be used in the paginator. I can add them to Figma in a new branch so you guys can update them too. Sounds good @simeonoff @sdimchevski ?

image

andiesm813 avatar Jul 16 '24 18:07 andiesm813

Hey, i'm not sure if you are done replacing the icons in all components.... here's some feedback of what i saw :)

TABS The navigation icons are supposed to be smaller, like on Figma.

image

This should be fixed.

DROPDOWN BUTTON The components that have dropdown button like Combo & Select should not have background on the dropdown button. Here's the comparison.

image

This is resolved in another PR

GRID FILTERING DIALOG

  1. Some of the icons are bigger than the other icons. This happens in all sizes. See the Figma image for reference.
  2. I'm not sure if this branch includes styling of the grid, because i guess that's why icons appear blue and not gray, like in the design.

image

  1. Some of the icons are bigger than the other icons. This happens in all sizes. See the Figma image for reference. - Should be fixed now.

  2. I'm not sure if this branch includes styling of the grid, because i guess that's why icons appear blue and not gray, like in the design. - Yes, this needs to be resolved in the theme update PR.

PIVOTGRID I suppose this component has not been fully styled as well. There is a problem with the chevrons sizing there as well in some places.

image

Yes, again, it should be styled in another PR.

PAGINATOR Since i didn't work on the paginator component styling, i failed to provide those 2 icons to be used in the paginator. I can add them to Figma in a new branch so you guys can update them too. Sounds good @simeonoff @sdimchevski ?

image

For now I haven't updated the icons in the paginator. If you feel like creating two more icons I can update them as well.

simeonoff avatar Aug 16 '24 11:08 simeonoff

  1. Accordion and Expansion panel - icon size should be Medium 16x16px Accordion DISABLE SECOND
    Expansion panel Pasted Graphic 83

  2. Grid GroupBy Expand/collapse icons should be Medium 16x16px igx-icon igx-icon internal_indi
    Expand/Collapse All icons should be M 16x16px ContactTitle T

  3. Grid Row API For some reason the group icon here is large 24x24px, should be M 16x16px. In the GroupBy example it is the correct size. Not sure if this is for this PR, but the "drag row" icon should be M 16x16px as well. Screenshot 2024-09-04 at 9 40 12

  4. Grid - Quick filter Back/forward icons of the chip area should be indigo-chevron-left / indigo-chevron-right Screenshot 2024-09-10 at 13 10 16

  5. Grid - Cell editing example - status column - mix of Material & Indigo icons - should be only Indigo custom icons Icon size should be 16x16px in L, M and S grid Discontinued

  6. Grid - Advanced filtering / Query Builder Both the OK and Cancel icons in the buttons next to the inputs should be indigo custom icons Advanced Filtering . Screenshot 2024-09-04 at 10 05 21

  7. Grid Filtering - Excel Style Filter The check icon for “Select column” should be indigo-check L size Company Name
    M size (applicable for S as well)
    Contact Name

8. Pivot Grid Sort icon in the header should be small 14x14px Expand/collapse icons should be small 14x14px Pivot Grid

  1. Tabs Prev/next icons should be indigo-chevron-left & indigo-chevron-right Clear icon should be indigo-clear Screenshot 2024-09-04 at 10 09 18

  2. Tree Expand/collapse icons should be M 16x16px in L, M and S tree IgxTree 2 The Branching

yradoeva avatar Sep 10 '24 10:09 yradoeva

Can we fix here (although it's not a custom indigo icon) the pin/unpin icon size? It should be 16x16px in L, M and S grid. image

yradoeva avatar Sep 13 '24 14:09 yradoeva

Update

The sorting icons should be M 16x16px in L, M and S grid, including in the Pivot Grid. Any other icons that appear in the header cells, should be M 16x16px as well in L, M and S grid (like "filter" icon, "more" icon for ESF). Same is valid for the expand/collapse icons (already implemented).

That makes point 8. from my comment above obsolete.

image

yradoeva avatar Sep 13 '24 15:09 yradoeva

First and Last page icons are already available as Indigo custom icons (indigo-first-page and indigo-last-page) and should be implemented in the Paginator. Icons can be found on the Icons page here: https://www.figma.com/design/dkGpSYipbp68uZ1VpRfmsJ/branch/RAqPNeAJLmRN8LP3nWmweJ/Indigo.Design-UI-Kit-for-Indigo-1.5-Workfile?m=auto&node-id=0-1&t=dYWc5ABcfhTDehEh-1

yradoeva avatar Sep 16 '24 10:09 yradoeva