Indigo Themes: Update List, Progress, and Dropdown

sbayreva commented 1 month ago

Linear bar

The space between the label and the track seems to be bigger than 4px even though it says it is. The size of the whole component should be 24px as in Angular, here it is 28px:

Circular progress

I am not sure whether Subtitle 2 it is used as a style for the label
The size of the component should be 48px:

imincheva commented 1 month ago

List

Since we don't have list items with buttons as secondary actions in the UI kits, only icons, I assume they should have the same gap. If that's the case, then the gap should be fixed to 8px.
Header text color variable is set correctly, but seems to be disabled or not applied.
Header text should use Overline text style.
The height of the header text should be fixed to 16px.
Paddings on header text should be 6px 12px
There should be 2px gap between title and subtitle. Currently, I don't see any padding in the code, although visually it seems that there is such, maybe I just can't find it
Row-gap on the list item (space between start, content, end) should be 8px, not 16px
The background on hover should have 4px border radius

andiesm813 commented 1 month ago

Linear bar

The space between the label and the track seems to be bigger than 4px even though it says it is. The size of the whole component should be 24px as in Angular, here it is 28px:

Circular progress

I am not sure whether Subtitle 2 it is used as a style for the label

The size of the component should be 48px:

Agree to all comments. Apparently it is Subtitle 2 @sbayreva .... if it wasnt, it would look WAAAY lighter! see below! So this is not an issue. It's good! ✅

andiesm813 commented 1 month ago

List

Agree to all comments made by @imincheva ... and i'm adding the same comments i added for Angular, which apply here as well.

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.

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.

ADDITIONAL COMMENT There is no ripple effect on click here, on click. This is the expected behavior. Angular should match this too.

sbayreva commented 4 weeks ago

Linear bar

The space between the label and the track seems to be bigger than 4px even though it says it is. The size of the whole component should be 24px as in Angular, here it is 28px:

Circular progress

I am not sure whether Subtitle 2 it is used as a style for the label

The size of the component should be 48px:

Agree to all comments. Apparently it is Subtitle 2 @sbayreva .... if it wasnt, it would look WAAAY lighter! see below! So this is not an issue. It's good! ✅

Point 1 is verified
Point 2 is verified
About the font style Subtitle 2, I am not sure whether the font is used as a style, that's why I added the comment. @SisIvanova can you please, confirm whether font style Subtitle 2 is used for the labels of the Linear and Circular Progress Indicators?

AnjiManova commented 4 weeks ago

Dropdown

Currently the default size is Large, I think it should be Medium, but @andiesm813 should confirm.

If this is irrelevant, ignore it: the focused state in Angular is triggered with igx-drop-down__item--focused, while in the WebC is Active and the border uses --focused-item-border-color. I think we talked about this at some point that this is native behaviour and focused and active are the same but ...

separate issue for the borders roundness or whatever the problem is in dark mode because it is related to all kits

andiesm813 commented 4 weeks ago

@AnjiManova yes, the default should be medium. I see that it is medium now... maybe it was updated since your comment....

SisIvanova commented 3 weeks ago

Linear bar

The space between the label and the track seems to be bigger than 4px even though it says it is. The size of the whole component should be 24px as in Angular, here it is 28px:

Circular progress

I am not sure whether Subtitle 2 it is used as a style for the label

The size of the component should be 48px:

Agree to all comments. Apparently it is Subtitle 2 @sbayreva .... if it wasnt, it would look WAAAY lighter! see below! So this is not an issue. It's good! ✅

Point 1 is verified

Point 2 is verified

About the font style Subtitle 2, I am not sure whether the font is used as a style, that's why I added the comment. @SisIvanova can you please, confirm whether font style Subtitle 2 is used for the labels of the Linear and Circular Progress Indicators?

@sbayreva As Andie said it is Subtitle 2. You can also see it in the samples applied on the part label/value.

SisIvanova commented 3 weeks ago

@AnjiManova The dropdown default size should be fixed.

andiesm813 commented 3 weeks ago

Linear bar

The space between the label and the track seems to be bigger than 4px even though it says it is. The size of the whole component should be 24px as in Angular, here it is 28px:

Circular progress

I am not sure whether Subtitle 2 it is used as a style for the label

The size of the component should be 48px:

Agree to all comments. Apparently it is Subtitle 2 @sbayreva .... if it wasnt, it would look WAAAY lighter! see below! So this is not an issue. It's good! ✅

Point 1 is verified

Point 2 is verified

About the font style Subtitle 2, I am not sure whether the font is used as a style, that's why I added the comment. @SisIvanova can you please, confirm whether font style Subtitle 2 is used for the labels of the Linear and Circular Progress Indicators?

@sbayreva As Andie said it is Subtitle 2. You can also see it in the samples applied on the part label/value.

So PROGRESS looks all good then ✅

andiesm813 commented 3 weeks ago

@AnjiManova The dropdown default size should be fixed.

Looks fixed to me! thanks for the update! ✅

andiesm813 commented 3 weeks ago

LIST

Some ofl the fixes requested for this component have not been applied yet, if i'm not mistaken. Maybe it's still in progress?

Pending fixes

The height of the header text is still not fixed to 16px.
The paddings of the list headers are only fixed for large size. The others remain incorrect. In my previous comments were the correct paddings (list item inner paddings) and expected header sizes, if all is correct (header text fixed height affects the total height of the header).
Row-gap on the list item (space between start, content, end) should be 8px, not 16px
List Item small inner padding is still not correct. It should be 4px 8px, and it's currently 2px 4px.
There is a gap between title and subtitle, but i'm not sure if it's 2px or more.
The title should be set to body 2 as well as the subtitle. The only difference between title and subtitle is the foreground color.
Gap between secondary actions should be 0.5rem (currently it's 0.375rem)
Also not sure which List size is the default size. Currently it's a mixture of Large and Medium. Medium should be the default size.

andiesm813 commented 3 weeks ago

LIST

Some ofl the fixes requested for this component have not been applied yet, if i'm not mistaken. Maybe it's still in progress?

Pending fixes

The height of the header text is still not fixed to 16px.

The paddings of the list headers are only fixed for large size. The others remain incorrect. In my previous comments were the correct paddings (list item inner paddings) and expected header sizes, if all is correct (header text fixed height affects the total height of the header).

Row-gap on the list item (space between start, content, end) should be 8px, not 16px

List Item small inner padding is still not correct. It should be 4px 8px, and it's currently 2px 4px.

There is a gap between title and subtitle, but i'm not sure if it's 2px or more.

The title should be set to body 2 as well as the subtitle. The only difference between title and subtitle is the foreground color.

Gap between secondary actions should be 0.5rem (currently it's 0.375rem)

Also not sure which List size is the default size. Currently it's a mixture of Large and Medium. Medium should be the default size.

Points 1-8 have been verified. So i can say LIST is all good ✅

IgniteUI / igniteui-webcomponents