feat(angular): allow customizing avatar, icon and loading indicator from CSS #291
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
szuperaz
force-pushed
the
avatar-and-icon-size
branch
from
e4b1272
to
ce8f7fa
Compare
szuperaz
force-pushed
the
avatar-and-icon-size
branch
from
ce8f7fa
to
4eb1980
Compare
szuperaz
changed the title
szuperaz
commented
Apr 23, 2024
|
|
||
| <SDKSpecific name="react"> | ||
|
|
||
| TODO |
There was a problem hiding this comment.
I want to link the part of the React docs that show how to use custom icons, where can I find that?
szuperaz
requested review from
arnautov-anton,
myandrienko,
MartinCupela and
oliverlaz
szuperaz
commented
Apr 23, 2024
| } | ||
| } | ||
|
|
||
| // File type icons |
There was a problem hiding this comment.
File type icons are different from other icons because they contain more than one color, so we can't use them as font, instead we use the encoded SVG images
szuperaz
force-pushed
the
avatar-and-icon-size
branch
from
41eff7e
to
92ac206
Compare
szuperaz
force-pushed
the
avatar-and-icon-size
branch
from
92ac206
to
25b8e60
Compare
MartinCupela
approved these changes
Apr 25, 2024
github-actions bot
pushed a commit
that referenced
this pull request
Apr 25, 2024
# [4.15.0](v4.14.0...v4.15.0) (2024-04-25) ### Bug Fixes * remove unnecessary selector specificity from font-family setting ([#292](#292)) ([04e110d](04e110d)) ### Features * **angular:** allow customizing avatar, icon and loading indicator from CSS ([#291](#291)) ([b4d1658](b4d1658)), closes [/github.com/GetStream/stream-video-js/blob/main/packages/styling/src/Icon/Icon-theme.scss#L16](https://github.com//github.com/GetStream/stream-video-js/blob/main/packages/styling/src/Icon/Icon-theme.scss/issues/L16)
|
🎉 This PR is included in version 4.15.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎯 Goal
Allow customizing avatar, icon and loading indicator components from CSS.
Corresponding GitHub issues:
It's only implemented for Angular, React can follow at it's own pace
🛠 Implementation details
This is a non-breaking change, the old CSS code remains, and can be used by React and Angular@4.
Avatar
The
--str-chat__avatar-sizevariable allows customizing the avatar sizeIcon
Why use fonts for icons? I generated a custom font from the icons we use in chat UI components, there is one downside that I hate: the font needs to be manually regenerated when we want to add a new icon (which is not that often). However, as far as I know fonts provide the best flexibility for setting size and color properties of icons. It's also used by big libraries such as Google Material Icons so our integrators are probably familiar with the concept.
As a comparison: in video the icons are also customizable from CSS, but we use
mask-imagewith encoded SVGs, the downside of that solution is that we have to explicitly provide bothheightandwidth, which causes problems if an integrator wants to use an icon with a different aspect-ratio than the built-in icon.Loading indicator
The
--str-chat__loading-indicator-sizeallows setting avatar size from CSSI wasn't able to move the loading indicator SVG to CSS, I had troubles applying the color from the CSS variable to the stop color 🤷♀️
For the curious, here is the Angular upgrade guide with the breaking changes:
🎨 UI Changes
No UI changes (hopefully 😅)
Make sure to test with both Angular and React (with both
MessageListandVirtualizedMessageListcomponents) SDKs