search

IgniteUI / igniteui-angular

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.
https://www.infragistics.com/products/ignite-ui-angular
Other
569 stars 159 forks source link

Indigo Themes: Update List, Progress, and Dropdown #14265

Closed simeonoff closed 1 month ago

simeonoff commented 1 month ago

Closes #

Additional information (check all that apply):

Checklist:

sbayreva commented 1 month ago

Linear bar

  1. The font that is used is correct but I am not sure whether it is used as a style - it should be Subtitle 2

Circular Progress

  1. The component size should be 48px
  2. The font that is used is correct but I am not sure whether it is used as a style - it should be Subtitle 2
AnjiManova commented 1 month ago

Dropdown

everything looks fine to me

imincheva commented 1 month ago

List

andiesm813 commented 1 month ago

List

  • Header text color variable is set correctly, but seems to be disabled or something.
image
  • The height of the header text should be 16px (the line-height should be overriden)
  • The background on hover should have 4px border radius
  • 2px gap between title and subtitle is missing
  • The pink ripple on click is very odd IMO, but since there's no design @andiesm813 should confirm whether this is the appropriate behaviour
  • The paddings on the list header and items in large and small should be validated by @andiesm813 as well, since we don't support sizing for the list yet.
  • The correct paddings on the header and list items for medium are 6px 12px
  • --item-text-color-hover should be grays.900 in light mode
  • --item-subtitle-color-hover should be grays.700 in light mode
  • --item-action-color-hover should be grays.700 in light mode
  • --item-text-color should be white 80% in dark mode
  • --item-background-hover should be primary.400 30% opacity in dark mode

One of the issues listed "item text color" in dark mode, was incorrect in the Figma. I just fixed it in this branch. The expected item-text-color in DARK mode would be white 90%

andiesm813 commented 1 month ago

Linear bar

  1. The font that is used is correct but I am not sure whether it is used as a style - it should be Subtitle 2

Circular Progress

  1. The component size should be 48px
  2. The font that is used is correct but I am not sure whether it is used as a style - it should be Subtitle 2

Yes! those are the only 2 issues i saw too. Correct font style would be Subtitle 2 and the issue with the circular progress size.

andiesm813 commented 1 month ago

DROPDOWN All looks good to me too. ✅

andiesm813 commented 1 month ago

List

Besides the comments made by @imincheva , which are all right on, i'm adding more comments:

LIGHT THEME

--header-text-color has the correct value in the CSS, however, in the samples, the header seems way darker than grays600. It looks almost as dark as grays900.

GENERAL (applies to light and dark)

There should no ripple effect on click. No other components (that i noticed) in Indigo theme have it.... There should be no ripple effect for any of the components in the Indigo theme. As an example, navdrawer (which is also a list), doesn't have ripple effect on click.

SIZES The implemented sizes are incorrect. All the sizes that are implemented for COMFORTABLE correspond to COSY. And the ones implemented for COSY correspond to COMPACT. So the sizes for LARGE need to be defined by me. See below. These sizes specified below are consistent with the sizes of the TREE component.

Comfy - Large

Cosy - Medium

Compact - Small

simeonoff commented 1 month ago

List

Besides the comments made by @imincheva , which are all right on, i'm adding more comments:

LIGHT THEME

--header-text-color has the correct value in the CSS, however, in the samples, the header seems way darker than grays600. It looks almost as dark as grays900.

GENERAL (applies to light and dark)

There should no ripple effect on click. No other components (that i noticed) in Indigo theme have it.... There should be no ripple effect for any of the components in the Indigo theme. As an example, navdrawer (which is also a list), doesn't have ripple effect on click.

SIZES The implemented sizes are incorrect. All the sizes that are implemented for COMFORTABLE correspond to COSY. And the ones implemented for COSY correspond to COMPACT. So the sizes for LARGE need to be defined by me. See below. These sizes specified below are consistent with the sizes of the TREE component.

Comfy - Large

  • The height of the header container should be 32px.
  • The height of the single line item should be 32px.
  • List Item inner paddings: 8px 16px.

Cosy - Medium

  • The height of the header container should be 28px.
  • The height of the single line item should be 28px.
  • List Item inner paddings: 6px 12px.

Compact - Small

  • The height of the header container should be 24px.
  • The height of the single line item should be 24px.
  • List Item inner paddings: 4px 8px.

@desig9stein

imincheva commented 1 month ago

List The following comments haven't been fixed:

SisIvanova commented 1 month ago

Linear bar

  1. The font that is used is correct but I am not sure whether it is used as a style - it should be Subtitle 2

Circular Progress

  1. The component size should be 48px
  2. The font that is used is correct but I am not sure whether it is used as a style - it should be Subtitle 2

Yes! those are the only 2 issues i saw too. Correct font style would be Subtitle 2 and the issue with the circular progress size.

We will create typography for the two components in a separate PR since this will introduce changes in all themes. The new issue is already created - https://github.com/IgniteUI/igniteui-angular/issues/14350