feat: align iconOnly API and unread badge styling

examples/vite/src/App.tsx

@@ -200,7 +200,7 @@ const App = () => {
         <ChatView>
           <ChatView.Selector
             itemSet={chatViewSelectorItemSet}
-            showLabels={chatView.showLabels}
+            iconOnly={chatView.iconOnly}
           />
           <ChatView.Channels>
             <ChannelList

examples/vite/src/AppSettings/AppSettings.tsx

@@ -17,16 +17,16 @@ const tabConfig: { Icon: ComponentType; id: TabId; title: string }[] = [
   { Icon: IconEmojiSmile, id: 'reactions', title: 'Reactions' },
 ];
 
-export const AppSettings = ({ showLabels = false }: { showLabels?: boolean }) => {
+export const AppSettings = ({ iconOnly = true }: { iconOnly?: boolean }) => {
   const [activeTab, setActiveTab] = useState<TabId>('sidebar');
   const [open, setOpen] = useState(false);
 
   return (
     <div className='app__settings-group'>
       <ChatViewSelectorButton
+        iconOnly={iconOnly}
         Icon={IconSettingsGear2}
         onClick={() => setOpen(true)}
-        showLabel={showLabels}
         text='Settings'
       />
       <GlobalModal open={open} onClose={() => setOpen(false)}>

examples/vite/src/AppSettings/state.ts

@@ -8,7 +8,7 @@ export type ReactionsSettingsState = {
 };
 
 export type ChatViewSettingsState = {
-  showLabels: boolean;
+  iconOnly: boolean;
 };
 
 export type AppSettingsState = {
@@ -18,7 +18,7 @@ export type AppSettingsState = {
 
 const defaultAppSettingsState: AppSettingsState = {
   chatView: {
-    showLabels: false,
+    iconOnly: true,
   },
   reactions: {
     flipHorizontalPosition: false,

examples/vite/src/AppSettings/tabs/Sidebar/SidebarTab.tsx

@@ -4,7 +4,7 @@ import { appSettingsStore, useAppSettingsState } from '../../state';
 export const SidebarTab = () => {
   const {
     chatView,
-    chatView: { showLabels },
+    chatView: { iconOnly },
   } = useAppSettingsState();
 
   return (
@@ -13,22 +13,22 @@ export const SidebarTab = () => {
         <div className='app__settings-modal__field-label'>Label visibility</div>
         <div className='app__settings-modal__options-row'>
           <Button
-            aria-pressed={!showLabels}
+            aria-pressed={iconOnly}
             className='app__settings-modal__option-button str-chat__button--outline str-chat__button--secondary str-chat__button--size-sm'
             onClick={() =>
               appSettingsStore.partialNext({
-                chatView: { ...chatView, showLabels: false },
+                chatView: { ...chatView, iconOnly: true },
               })
             }
           >
             Icons only
           </Button>
           <Button
-            aria-pressed={showLabels}
+            aria-pressed={!iconOnly}
             className='app__settings-modal__option-button str-chat__button--outline str-chat__button--secondary str-chat__button--size-sm'
             onClick={() =>
               appSettingsStore.partialNext({
-                chatView: { ...chatView, showLabels: true },
+                chatView: { ...chatView, iconOnly: false },
               })
             }
           >

examples/vite/src/stream-imports-layout.scss

@@ -45,5 +45,5 @@
 @use 'stream-chat-react/dist/scss/v2/TypingIndicator/TypingIndicator-layout';
 // @use 'stream-chat-react/dist/scss/v2/ThreadList/ThreadList-layout';
 //@use 'stream-chat-react/dist/scss/v2/ChatView/ChatView-layout';
-@use 'stream-chat-react/dist/scss/v2/UnreadCountBadge/UnreadCountBadge-layout';
+//@use 'stream-chat-react/dist/scss/v2/UnreadCountBadge/UnreadCountBadge-layout';
 @use 'stream-chat-react/dist/scss/v2/AIStateIndicator/AIStateIndicator-layout';

examples/vite/src/stream-imports-theme.scss

@@ -39,5 +39,5 @@
 @use 'stream-chat-react/dist/scss/v2/TypingIndicator/TypingIndicator-theme';
 // @use 'stream-chat-react/dist/scss/v2/ThreadList/ThreadList-theme';
 //@use 'stream-chat-react/dist/scss/v2/ChatView/ChatView-theme';
-@use 'stream-chat-react/dist/scss/v2/UnreadCountBadge/UnreadCountBadge-theme';
+//@use 'stream-chat-react/dist/scss/v2/UnreadCountBadge/UnreadCountBadge-theme';
 @use 'stream-chat-react/dist/scss/v2/AIStateIndicator/AIStateIndicator-theme';

src/components/ChatView/ChatView.tsx

@@ -170,19 +170,19 @@ export const ChatViewSelectorButton = ({
   children,
   className,
   Icon,
+  iconOnly = true,
   isActive,
-  showLabel = false,
   text,
   ...props
 }: ButtonProps & {
   ActiveIcon?: ComponentType;
+  iconOnly?: boolean;
   Icon?: ComponentType;
   isActive?: boolean;
-  showLabel?: boolean;
   text?: string;
 }) => {
   const SelectorIcon = isActive && ActiveIcon ? ActiveIcon : Icon;
-  const shouldShowTooltip = !!text && !showLabel;
+  const shouldShowTooltip = !!text && iconOnly;
 
   return (
     <div className='str-chat__chat-view__selector-button-container'>
@@ -195,7 +195,7 @@ export const ChatViewSelectorButton = ({
         {...props}
       >
         {children ?? (SelectorIcon && <SelectorIcon />)}
-        {showLabel && text && (
+        {!iconOnly && text && (
           <div className='str-chat__chat-view__selector-button-text'>{text}</div>
         )}
       </Button>
@@ -221,11 +221,11 @@ const unreadThreadCountSelector = ({ unreadThreadCount }: ThreadManagerState) =>
 });
 
 export type ChatViewSelectorItemProps = {
-  showLabels?: boolean;
+  iconOnly?: boolean;
 };
 
 export const ChatViewChannelsSelectorButton = ({
-  showLabels = false,
+  iconOnly = true,
 }: ChatViewSelectorItemProps) => {
   const { activeChatView, setActiveChatView } = useChatViewContext();
   const { t } = useTranslationContext();
@@ -235,16 +235,16 @@ export const ChatViewChannelsSelectorButton = ({
       ActiveIcon={IconBubble3Solid}
       aria-selected={activeChatView === 'channels'}
       Icon={IconBubble3ChatMessage}
+      iconOnly={iconOnly}
       isActive={activeChatView === 'channels'}
       onPointerDown={() => setActiveChatView('channels')}
-      showLabel={showLabels}
       text={t('Channels')}
     />
   );
 };
 
 export const ChatViewThreadsSelectorButton = ({
-  showLabels = false,
+  iconOnly = true,
 }: ChatViewSelectorItemProps) => {
   const { client } = useChatContext();
   const { unreadThreadCount } = useStateStore(
@@ -259,8 +259,8 @@ export const ChatViewThreadsSelectorButton = ({
   return (
     <ChatViewSelectorButton
       aria-selected={activeChatView === 'threads'}
+      iconOnly={iconOnly}
       onPointerDown={() => setActiveChatView('threads')}
-      showLabel={showLabels}
       text={t('Threads')}
     >
       <UnreadCountBadge count={unreadThreadCount} position='top-right'>
@@ -278,8 +278,8 @@ export type ChatViewSelectorItem = {
 export type ChatViewSelectorEntry = ChatViewSelectorItem;
 
 export type ChatViewSelectorProps = {
+  iconOnly?: boolean;
   itemSet?: ChatViewSelectorEntry[];
-  showLabels?: boolean;
 };
 
 export const defaultChatViewSelectorItemSet: ChatViewSelectorEntry[] = [
@@ -294,12 +294,12 @@ export const defaultChatViewSelectorItemSet: ChatViewSelectorEntry[] = [
 ];
 
 const ChatViewSelector = ({
+  iconOnly = true,
   itemSet = defaultChatViewSelectorItemSet,
-  showLabels = false,
 }: ChatViewSelectorProps) => (
   <div className='str-chat__chat-view__selector'>
     {itemSet.map(({ Component, type }) => (
-      <Component key={type} showLabels={showLabels} />
+      <Component iconOnly={iconOnly} key={type} />
     ))}
   </div>
 );

src/components/ChatView/__tests__/ChatView.test.js

@@ -182,8 +182,8 @@ describe('ChatView.Selector', () => {
     ]);
   });
 
-  it('renders labels inline when showLabels is enabled', async () => {
-    const { container } = await renderSelector({ showLabels: true });
+  it('renders labels inline when iconOnly is disabled', async () => {
+    const { container } = await renderSelector({ iconOnly: false });
 
     expect(
       container.querySelectorAll('.str-chat__chat-view__selector-button-tooltip'),

src/components/Threads/styling/UnreadCountBadge.scss

@@ -0,0 +1,61 @@
+/* Only available in React SDK. */
+.str-chat {
+  --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color);
+  --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color);
+}
+
+.str-chat__unread-count-badge {
+  background-color: var(--str-chat-unread-count-badge-background-color);
+  color: var(--str-chat-unread-count-badge-color);
+  border-radius: 9999px;
+}
+
+.str-chat {
+  --str-chat-unread-count-badge-absolute-offset-vertical: 50%;
+  --str-chat-unread-count-badge-absolute-offset-horizontal: 50%;
+}
+
+.str-chat__unread-count-badge-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.str-chat__unread-count-badge {
+  font-size: 12px;
+  min-width: 18px;
+  min-height: 18px;
+  line-height: 8px;
+  font-weight: 700;
+  padding: 5px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-variant-numeric: tabular-nums;
+
+  &--top-right {
+    position: absolute;
+    translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal)
+      calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
+  }
+
+  &--bottom-left {
+    position: absolute;
+    translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1)
+      var(--str-chat-unread-count-badge-absolute-offset-vertical);
+  }
+
+  &--bottom-right {
+    position: absolute;
+    translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal)
+      var(--str-chat-unread-count-badge-absolute-offset-vertical);
+  }
+
+  &--top-left {
+    position: absolute;
+    translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1)
+      calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1);
+  }
+}

src/components/Threads/styling/index.scss

@@ -0,0 +1 @@
+@use 'UnreadCountBadge';

src/styling/index.scss

@@ -45,6 +45,7 @@
 @use '../components/Reactions/styling' as Reactions;
 @use '../components/TextareaComposer/styling' as TextareaComposer;
 @use '../components/Thread/styling' as Thread;
+@use '../components/Threads/styling' as Threads;
 @use '../components/Threads/ThreadList/styling' as ThreadList;
 @use '../components/VideoPlayer/styling' as VideoPlayer;
 @use '../components/SummarizedMessagePreview/styling' as SummarizedMessagePreview;