Remove size and color attributes from SDK components #84
Labels
Comments
This was referenced May 10, 2022
Closed
szuperaz
changed the title
13 tasks
szuperaz
added a commit
that referenced
this issue
Apr 25, 2024
…rom CSS (#291) ### 🎯 Goal Allow customizing avatar, icon and loading indicator components from CSS. Corresponding GitHub issues: - #84 - #84 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-size` variable allows customizing the avatar size  #### Icon  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](https://fonts.google.com/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-image`](https://github.com/GetStream/stream-video-js/blob/main/packages/styling/src/Icon/Icon-theme.scss#L16) with encoded SVGs, the downside of that solution is that we have to explicitly provide both `height` and `width`, 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-size` allows setting avatar size from CSS  I 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 `MessageList` and `VirtualizedMessageList` components) SDKs
|
Release in stream-chat-angular@5 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is a breaking change inside SDKs. Affected components:
The text was updated successfully, but these errors were encountered: