fix(Icons): sync icon catalog with refreshed Line SVGs#3080
Merged
Conversation
Update IconArrowDown and IconThread to match refreshed Line SVG assets. Rename IconLayoutAlignLeft → IconSidebar and IconThunder → IconBolt to align with new icon naming conventions.
|
Size Change: 0 B Total Size: 614 kB ℹ️ View Unchanged
|
github-actions bot
pushed a commit
that referenced
this pull request
Mar 31, 2026
## [14.0.0-beta.5](v14.0.0-beta.4...v14.0.0-beta.5) (2026-03-31) ### Bug Fixes * assorted UI/UX fixes (Giphy, polls, dialogs, composer, headers) ([#3081](#3081)) ([6c06e04](6c06e04)) * close CSS gaps, fix ChannelList dialog portal, and clean up icons ([#3079](#3079)) ([a47981f](a47981f)) * **Icons:** sync icon catalog with refreshed Line SVGs ([#3080](#3080)) ([9472f7b](9472f7b)) * **MessageList:** set width on message list scroll container ([#3077](#3077)) ([3f09362](3f09362)) * post-review `MessageReactionsDetail` adjustments ([#3082](#3082)) ([a82bdcb](a82bdcb)) * use link icon for link-type attachments ([#3083](#3083)) ([241209e](241209e)) ### Features * **examples:** add RTL direction toggle to vite example app ([#3084](#3084)) ([887a326](887a326)) * **examples:** refresh react tutorial app for v14 ([#3078](#3078)) ([86ada37](86ada37))
|
🎉 This PR is included in version 14.0.0-beta.5 🎉 The release is available on: Your semantic-release bot 📦🚀 |
oliverlaz
added a commit
that referenced
this pull request
Apr 3, 2026
…hread voice recording (#3090) ### 🎯 Goal Sync remaining out-of-date icons with the refreshed Phosphor Line SVG catalog, add automatic RTL mirroring for directional icons, comprehensively fix RTL layout issues across the SDK, fix reaction count dark mode support, and enable voice recording in threads. ### 🛠 Implementation details **Icon catalog sync** (follows up on #3080): - **`IconCrossSmall` → `IconXmarkSmall`**: updated path from `xmark-small.svg` - **`IconExclamationTriangle` → `IconExclamationTriangleFill`**: upgraded from 16×16 to 20×20 filled variant - **`IconEyeOpen` → `IconEyeFill`**: upgraded from 16×16 to 20×20 filled variant - **`IconGiphy`**: synced precision updates - All renames include `// was:` comments; updated all consumer imports **RTL icon mirroring**: - Extended `createIcon`'s `defaultProps` type to accept `data-*` attributes - Flagged 12 directional icons with `{ 'data-rtl-mirror': '' }` via `defaultProps` - Added CSS rule: `[dir='rtl'] .str-chat__icon[data-rtl-mirror] { transform: scaleX(-1) }` - Mirrored icons: `IconArrowLeft`, `IconArrowUpRight`, `IconReply`, `IconChevronLeft`, `IconChevronRight`, `IconSidebar`, `IconSearch`, `IconMute`, `IconSend`, `IconVideo`, `IconVideoFill`, `IconAudio` **RTL layout fixes** (comprehensive audit — physical → logical CSS properties): - **ContextMenu**: `text-align: left` → `start` - **AttachmentPreview**: `right` → `inset-inline-end` (remove button), `padding-right` → `padding-inline-end`, `left` → `inset-inline-start` (video indicator, loading/error icons) - **AudioPlayback**: `left` → `inset-inline-start` on progress indicators (CSS + inline), gradient direction flips in RTL - **AudioRecorder**: `padding-left` → `padding-inline-start`, removed arbitrary `max-width` caps on waveform containers - **Message**: `margin-left`/`margin-right` → logical on edited indicator and reactions host, `text-align: right` → `end` - **Reply connector**: physical `border-*`/`left`/`right` → logical `border-inline-*`/`border-end-*`/`inset-inline-*` on `::after` pseudo-element - **AvatarStack**: `margin-left` → `margin-inline-start` - **Avatar**: `left` → `inset-inline-start` (status badge) - **GroupAvatar**: `left`/`right` → `inset-inline-start`/`end` (grid positions + online badge) - **ChatView**: `border-right` → `border-inline-end`, `left` → `inset-inline-start` (tooltip) - **ChannelListItem**: `right` → `inset-inline-end` (action buttons) - **Gallery**: `left`/`right` → logical (nav buttons) - **Giphy**: `left` → `inset-inline-start` (badge) - **Modal**: `right` → `inset-inline-end` (close button) - **Callout**: `right` → `inset-inline-end` (close button) - **ScrollToLatestMessage**: `right` → `inset-inline-end` (unread badge) - **MessageReactionsDetail**: `left` → `inset-inline-start`, physical border-radius → logical - **QuotedMessagePreview**: `left` → `inset-inline-start` (play indicator) - **TextInput**: `margin-right` → `margin-inline-end` (trailing slot) **Dark mode fix**: - **Reactions**: applied `color: var(--reaction-text)` to reaction button mixin — the variable was defined for light/dark modes but never used, causing invisible count text in dark mode **Example app fixes**: - Panel resize logic: detect `direction` at drag start and flip `clientX` calculations for RTL - Thread composer: enable `audioRecordingEnabled` via `additionalMessageComposerProps` **Tests**: updated 3 assertions (`left` → `inset-inline-start`) and refreshed 4 snapshots. ### 🎨 UI Changes - No visual changes in LTR light mode - In RTL (`dir="rtl"`): icons auto-flip, all layout elements position correctly, waveforms respect reading direction, avatar stacks/group avatars mirror properly, context menus/modals/callouts align to correct side - In dark mode: reaction count text is now visible - Voice recording now available in thread composer (example app)
github-actions bot
pushed a commit
that referenced
this pull request
Apr 3, 2026
## [14.0.0-beta.6](v14.0.0-beta.5...v14.0.0-beta.6) (2026-04-03) ### ⚠ BREAKING CHANGES * for existing code but changes the accepted values. ### `getGroupChannelDisplayInfo` return value changed The utility function `getGroupChannelDisplayInfo` (from `src/components/ChannelListItem/utils.tsx`) no longer returns `overflowCount` in its result object. ### `AvatarProps.size` type widened to accept arbitrary strings The `size` prop on `AvatarProps` changed from the union `'2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | null` to `'2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | (string & {}) | null`. This allows passing custom size strings while preserving autocomplete for the known values. ### `GroupAvatarProps.size` type widened to accept arbitrary strings The `size` prop on `GroupAvatarProps` changed from `'2xl' | 'xl' | 'lg' | null` to `'2xl' | 'xl' | 'lg' | (string & {}) | null`. This allows passing custom size strings while preserving autocomplete for the known values. ### New `capLimit` prop on `AvatarStack` A new optional `capLimit` prop (type `number`, default `3`) controls the maximum number of avatars rendered before overflow. When `displayInfo` has more entries than `capLimit`, only the first `capLimit` items are shown and a "+N" badge displays the remainder. ### `GroupAvatarMember` type gains optional `id` field The `GroupAvatarMember` type now includes an optional `id?: string` field. When present, it is used as the React `key` for rendered avatars instead of the fallback `${userName}-${imageUrl}-${index}` pattern. ## Behavioral Changes ### `ChannelAvatar` always renders via `GroupAvatar` internally Previously, `ChannelAvatar` conditionally chose between `<Avatar>` (for 0–1 members) and `<GroupAvatar>` (for 2+ members). It now always delegates to `<GroupAvatar>`, which itself renders a single `<Avatar>` when fewer than 2 members are present. The visual output is unchanged, but the component tree structure differs. ### `GroupAvatar` auto-caps displayed members at 4 (or 2 with overflow) Previously, callers controlled how many members to display and the overflow count. Now `GroupAvatar` internally slices `displayMembers`: - **4 or fewer members:** all are rendered, no badge. - **More than 4 members:** only the first 2 are rendered, with a "+N" badge showing the count of remaining members. ### `AvatarStack` auto-caps displayed items (default: 3, configurable via `capLimit`) Previously, callers controlled how many items to display and the overflow count. Now `AvatarStack` internally slices `displayInfo` based on the `capLimit` prop (default `3`): - **`capLimit` or fewer items:** all are rendered, no badge. - **More than `capLimit` items:** only the first `capLimit` are rendered, with a "+N" badge showing the count of remaining items. ### `TypingIndicator` no longer manually slices typing users The `TypingIndicator` component previously sliced the list of typing users to a maximum of 3 before passing to `AvatarStack`. It now passes all typing users, relying on `AvatarStack`'s internal capping (also at 3). The net visual result is unchanged. ### chore * adjustmens to Avatar, GroupAvatar and ChannelAvatar ([#3087](#3087)) ([49d576e](49d576e)) ### Bug Fixes * **examples:** clean up tutorial examples for v14 ([#3089](#3089)) ([6239895](6239895)) * **examples:** enable async voice recording preview in thread composer ([#3092](#3092)) ([6c7cd42](6c7cd42)) * **examples:** fix resize handle alignment and thread border gap in RTL ([#3091](#3091)) ([2f060ae](2f060ae)) * **Icons, RTL:** update icon catalog, RTL layout fixes, dark mode & thread voice recording ([#3090](#3090)) ([a4b1c26](a4b1c26)), closes [#3080](#3080)
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
Sync the SDK icon exports with the refreshed Phosphor Line icon catalog and align icon naming with the new conventions.
🛠 Implementation details
IconArrowDown: replaced old 16×16 filled path with the 20×20 Line stroke variant (removedviewBoxoverride)IconThread: replaced bubble-speech shape with the new rectangular thread icon from the refreshed catalogIconLayoutAlignLeft→IconSidebar: matchessidebar.svgin the Line set; updated all usages acrossChannelHeader,ChannelListHeader,ThreadHeader,ThreadListHeaderIconThunder→IconBolt: matchesbolt.svgin the Line set; updated usages inCommandChipand example app// was:comments for debugging