feat(styling)!: convert SVG icons to pure CSS #1474
Conversation
- by using regular CSS, we can use regular font-size and even regular CSS color which was not possible with previous implementation, the technique is credited to UnoCSS project https://antfu.me/posts/icons-in-pure-css - this is just a draft since it needs more investigation and it might actually turn out to be a breaking change because at the moment we use CSS `content` with `:before` pseudo to previously add SVG icons but with the new approach this might not be needed and might also mean that the default Font-Awesome (font) may no longer work, need investigation. - It might be a breaking change too for the users who configured different icons via content SASS vars. Unless we keep them for users but we defined them as unset.
|
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #1474 +/- ##
=======================================
+ Coverage 99.8% 99.8% +0.1%
=======================================
Files 199 199
Lines 21714 21763 +49
Branches 7117 6994 -123
=======================================
+ Hits 21650 21699 +49
- Misses 58 64 +6
+ Partials 6 0 -6 ☔ View full report in Codecov by Sentry. |
- found issues in pagination with new SVG icons and saw potential improvements to use BindingEventService instead of using too many querySelector, we can point directly to the HTML element and bind an event without querying anything
- also fix Sort icon hint that was broken (regression) since jQueryUI was removed
- since we use a `::after` pseudo, we cannot convert that SVG to pure CSS and so because the SVG is created once we cannot use the `currentColor` color, so we'll keep using a light gray color so that it works for both light/dark themes. Also note that is the last SVG left to address for migrating to pure CSS
- let's use our own SlickGridIcon (`.sgi`) everywhere instead - increase default base sgi icon font size to 18px - improve colors used in Dark Mode
|
@zewa666 out of curiosity, which slickgrid theme and icons are you using (the default Slickgrid-Bootstrap maybe)? Because I'm doing a major revamp, as seen in TODO list above, and I'm renaming all slickgrid-universal/packages/common/package.json Lines 50 to 54 in 094d760 |
- since SVG can now be colorized the same way as regular text, we can merge previous recolor SASS utils and only keep native CSS text `color` definitions
- when user adds a `className` to SlickCustomTooltip, it was overriding the default class name and by doing so, it was breaking the CSS styling because the CSS Theme still expect the default CSS class name, so we need to append to the default instead of overriding it - also fix a few more Dark Mode styling and provide alternate colors for Tooltip demo in Dark Mode - also add alternate colors to `text-color-primary` and `text-color-secondary` for Dark Mode
|
I'm using both the full material and also bootstrap theme. if its not too much of a hassle I'd personally advocate for keeping them around as is. I'd really like to also push the grid for one of our SFDC use cases, so having that specific theme available would be a plus |
hmm maybe a misunderstanding, I am keeping the Material & Salesforce, however I also have extra I am undecided on the I have already changed everything to @zewa666 So you're not using any of the Basic Migration Guide v5 is also included in this PR |
- the idea was to renamed mdi to `.sgi` for SlickGrid Icons but the change would bring a ton of change on the user side, so let's keep using `.mdi` and table this aside for maybe another future major version (or not)
|
I decided to rollback the I'm going to go ahead and merge this into the |
|
I'll have to check on Tuesday when back in office about the lite/bare use |
|
we're using the full material theme:
|
|
good to know, I wasn't even sure if anyone were using the Material Theme. cool |
TODOs
.mdirequires an update::afterpseudo to display loading spinner within the input and it's only possible viacontentand we'll keep a light gray because we can only set the color onceremove all references to.mdiclasses and replace them by.sgi.mdito make the version migration easier and smootherrecolorSASS code and also color using CSS filter$color-and$text-color-but with new pure CSS, we can probably merge into one.text-color-xxand delete previous SASScolor-xxsince all SVG can now use same color as any texttext-color-primaryandtext-color-secondaryinstyle.scss)$slick-icon-font-familysince we no longer use any Fonts internally.ui-stateand othersBuild Size Comparison
I wasn't expecting much of a difference but I'm pleasantly surprised to see this minimal but nice drop in build size, that is with an improved use of pure CSS and a much better UI/UX :)