feat(sizing): Use the sizable mixins and functions to size components. #12471
Conversation
-- remove unused placeholder selector form badge theme and make it size the same way as in the WC product. -- remove leftovers form removed css prop 'size' in avatar theme. -- banner -- make button use the sizable() function for height. -- remove compact placeholder from the card component since the size is the same as the other sizes. -- make chip use the sizable() function for height. -- make all grid height to use sizable() function. -- make dropdown items to use sizable function().
# Conflicts: # src/app/grid-column-moving/grid-column-moving.sample.html # src/app/grid-column-moving/grid-column-moving.sample.scss # src/app/grid-filtering/grid-filtering.sample.html # src/app/grid-filtering/grid-filtering.sample.scss
# Conflicts: # projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
- remove duplicated density chooser from grid-column-moving sample.
|
All of the previously mentioned issues are fixed. However, I found one other problem related to the dropdown component. |
…s in master. - remove unused placeholder selector from the dropdown.
SisIvanova
added
✅ status: verified
There was a problem hiding this comment.
Not sure what the sizable() mixin entails, however I do see a lot of size CSS vars going around. Does this mean this feature is the global CSS var-based sizing?
If so I don't see any changes to the old density handling. Guessing all the magic is handled through the variant classes (nice one), but was sort of expecting component change as well.
In any case, some changelog notes of what this feature is would be nice.
| comfortable: 0 rem(24px), | ||
| cosy: 0 rem(16px), | ||
| compact: 0 rem(12px) | ||
| igx-paginator { |
There was a problem hiding this comment.
Is it possible to use the same selector/name-fallback logic css-vars is using to avoid hardcoding this selector here directly? Would make life easier for Elements
There was a problem hiding this comment.
The idea is for this to be completely transparent for now. We don't want to expose it to end users before changes are made to the components themselves. This PR handles the CSS part of the problem without regressing the existing functionality. Later, when the display density token is adjusted and thoroughly tested, we will create an entry in the changelog stating the full extent of all changes. |
Closes #12347
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)