Merge branch 'update-component-status-action-bar' into 'main'

Update action bar in status component

See merge request soapbox-pub/soapbox!3271

src/components/status-action-bar.tsx

@@ -146,7 +146,6 @@ const messages = defineMessages({
 
 interface IStatusActionBar {
   status: Status;
-  withLabels?: boolean;
   expandable?: boolean;
   space?: 'sm' | 'md' | 'lg';
   statusActionButtonTheme?: 'default' | 'inverse';
@@ -155,7 +154,6 @@ interface IStatusActionBar {
 
 const StatusActionBar: React.FC<IStatusActionBar> = ({
   status,
-  withLabels = false,
   expandable = true,
   space = 'sm',
   statusActionButtonTheme = 'default',
@@ -740,7 +738,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       active={status.reblogged}
       onClick={handleReblogClick}
       count={reblogCount}
-      text={withLabels ? intl.formatMessage(messages.reblog) : undefined}
       theme={statusActionButtonTheme}
     />
   );
@@ -780,7 +777,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             icon={messageCircleIcon}
             onClick={handleReplyClick}
             count={replyCount}
-            text={withLabels ? intl.formatMessage(messages.reply) : undefined}
             disabled={replyDisabled}
             theme={statusActionButtonTheme}
           />
@@ -808,7 +804,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
               active={Boolean(meEmojiName)}
               count={emojiReactCount}
               emoji={meEmojiReact}
-              text={withLabels ? meEmojiTitle : undefined}
               theme={statusActionButtonTheme}
             />
           </StatusReactionWrapper>
@@ -821,7 +816,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             onClick={handleFavouriteClick}
             active={Boolean(meEmojiName)}
             count={favouriteCount}
-            text={withLabels ? meEmojiTitle : undefined}
             theme={statusActionButtonTheme}
           />
         )}
@@ -835,7 +829,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             onClick={handleDislikeClick}
             active={status.disliked}
             count={status.dislikes_count}
-            text={withLabels ? intl.formatMessage(messages.disfavourite) : undefined}
             theme={statusActionButtonTheme}
           />
         )}
@@ -848,7 +841,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             filled
             onClick={handleZapClick}
             active={status.zapped}
-            text={withLabels ? intl.formatMessage(messages.zap) : undefined}
             theme={statusActionButtonTheme}
             count={status?.zaps_amount ? status.zaps_amount / 1000 : 0}
           />

src/components/status-action-button.tsx

@@ -36,12 +36,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   color?: Color;
   filled?: boolean;
   emoji?: EmojiReaction;
-  text?: React.ReactNode;
   theme?: 'default' | 'inverse';
 }
 
 const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
-  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, theme = 'default', ...filteredProps } = props;
+  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, theme = 'default', ...filteredProps } = props;
 
   const renderIcon = () => {
     if (emoji) {
@@ -70,13 +69,7 @@ const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((p
   };
 
   const renderText = () => {
-    if (text) {
+    if (count) {
-      return (
-        <Text tag='span' theme='inherit' size='sm'>
-          {text}
-        </Text>
-      );
-    } else if (count) {
       return (
         <StatusActionCounter count={count} />
       );
@@ -88,7 +81,7 @@ const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((p
       ref={ref}
       type='button'
       className={clsx(
-        'flex items-center rounded-full p-1 rtl:space-x-reverse',
+        'flex items-center space-x-1 rounded-full p-1 rtl:space-x-reverse',
         'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0',
         {
           'text-gray-600 hover:text-gray-600 dark:hover:text-white bg-white dark:bg-transparent': theme === 'default',
@@ -97,8 +90,6 @@ const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((p
           'hover:text-gray-600 dark:hover:text-white': !filteredProps.disabled,
           'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
           'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
-          'space-x-1': !text,
-          'space-x-2': text,
         },
         className,
       )}