Wrap calling button text

stylesheets/_modules.scss

@@ -3909,198 +3909,6 @@ button.module-image__border-overlay:focus {
   }
 }
 
-.module-calling-button__icon {
-  align-items: center;
-  border-radius: 40px;
-  border: none;
-  display: flex;
-  height: 40px;
-  justify-content: center;
-  margin-left: 12px;
-  margin-right: 12px;
-  outline: none;
-  width: 40px;
-}
-
-.module-calling-button {
-  @mixin icon($path) {
-    @include color-svg($path, $color-white, $mask-origin: padding-box);
-    height: 24px;
-    width: 24px;
-  }
-
-  &__participants {
-    @include icon('../images/icons/v2/group-solid-24.svg');
-    display: inline-block;
-
-    &--container {
-      @include button-reset;
-      border: none;
-      color: $color-white;
-    }
-
-    &--shown {
-      background-color: $color-gray-75;
-      border-radius: 16px;
-      padding: 6px 8px;
-      padding-bottom: 2px;
-      margin-top: -6px;
-      margin-right: -8px;
-    }
-
-    &--count {
-      @include font-body-2-bold;
-      margin-left: 5px;
-      vertical-align: top;
-    }
-  }
-
-  &__settings {
-    @include icon('../images/icons/v2/settings-solid-16.svg');
-  }
-
-  &__grid-view {
-    @include icon('../images/icons/v2/grid-view-solid-24.svg');
-  }
-
-  &__speaker-view {
-    @include icon('../images/icons/v2/speaker-view-solid-24.svg');
-  }
-
-  &__pip {
-    @include icon('../images/icons/v2/pip-minimize-24.svg');
-  }
-
-  &__cancel {
-    @include icon('../images/icons/v2/x-24.svg');
-  }
-}
-
-.module-calling-button__container {
-  display: inline-flex;
-  flex-direction: column;
-  margin-left: 0;
-
-  transition: margin-left 0.3s ease-out, opacity 0.3s ease-out;
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-
-  &--hidden {
-    margin-left: -100px;
-    opacity: 0;
-    pointer-events: none;
-
-    // The container could be wider than 100px depending on the label. Hiding the label
-    //  ensures that the above `margin-left` will completely hide the button.
-    .module-calling-button__label {
-      display: none;
-    }
-  }
-}
-
-.module-calling-button__icon {
-  border-radius: 52px;
-  height: 52px;
-  width: 52px;
-
-  @mixin calling-button-icon($icon, $background-color, $icon-color) {
-    background-color: $background-color;
-
-    div {
-      @include color-svg($icon, $icon-color);
-      height: 24px;
-      width: 24px;
-    }
-  }
-
-  @mixin calling-button-icon-on($icon) {
-    @include calling-button-icon($icon, $color-white, $color-gray-75);
-  }
-
-  @mixin calling-button-icon-off($icon) {
-    @include calling-button-icon($icon, $color-white-alpha-40, $color-white);
-    backdrop-filter: blur(10px);
-  }
-
-  @mixin calling-button-icon-disabled($icon) {
-    @include calling-button-icon($icon, $color-gray-45, $color-white);
-    opacity: 0.2;
-  }
-
-  // If the on/off states seem backwards, it's because this button reflects "is audio
-  //   muted?", not "is audio on?".
-  &--audio {
-    $icon: '../images/icons/v2/mic-off-solid-28.svg';
-    &--on {
-      @include calling-button-icon-off($icon);
-    }
-    &--off {
-      @include calling-button-icon-on($icon);
-    }
-    &--disabled {
-      @include calling-button-icon-disabled($icon);
-    }
-  }
-
-  &--video {
-    $icon: '../images/icons/v2/video-solid-28.svg';
-    &--on {
-      @include calling-button-icon-on($icon);
-    }
-    &--off {
-      @include calling-button-icon-off($icon);
-    }
-    &--disabled {
-      @include calling-button-icon-disabled($icon);
-    }
-  }
-
-  &--hangup {
-    @include calling-button-icon(
-      '../images/icons/v2/phone-down-28.svg',
-      $color-accent-red,
-      $color-white
-    );
-  }
-
-  &--ring {
-    $icon: '../images/icons/v2/ring-28.svg';
-    &--on {
-      @include calling-button-icon-on($icon);
-    }
-    &--off {
-      @include calling-button-icon-off($icon);
-    }
-    &--disabled {
-      @include calling-button-icon-disabled($icon);
-    }
-  }
-
-  &--presenting {
-    $icon: '../images/icons/v2/share-screen-26.svg';
-    &--on {
-      @include calling-button-icon-on($icon);
-    }
-    &--off {
-      @include calling-button-icon-off($icon);
-    }
-    &--disabled {
-      @include calling-button-icon-disabled($icon);
-    }
-  }
-}
-
-.module-calling-button__label {
-  @include font-subtitle;
-  margin-top: 8px;
-  text-align: center;
-  text-transform: lowercase;
-  color: $color-white;
-  @include calling-text-shadow;
-  user-select: none;
-}
-
 @keyframes module-ongoing-call__controls--fade-in {
   from {
     opacity: 0;

stylesheets/components/CallingButton.scss

@@ -0,0 +1,188 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.CallingButton {
+  @mixin icon($path) {
+    @include color-svg($path, $color-white, $mask-origin: padding-box);
+    height: 24px;
+    width: 24px;
+  }
+
+  &__icon {
+    align-items: center;
+    border-radius: 52px;
+    border: none;
+    display: flex;
+    height: 52px;
+    justify-content: center;
+    outline: none;
+    width: 52px;
+
+    @mixin calling-button-icon($icon, $background-color, $icon-color) {
+      background-color: $background-color;
+
+      div {
+        @include color-svg($icon, $icon-color);
+        height: 24px;
+        width: 24px;
+      }
+    }
+
+    @mixin calling-button-icon-on($icon) {
+      @include calling-button-icon($icon, $color-white, $color-gray-75);
+    }
+
+    @mixin calling-button-icon-off($icon) {
+      @include calling-button-icon($icon, $color-white-alpha-40, $color-white);
+      backdrop-filter: blur(10px);
+    }
+
+    @mixin calling-button-icon-disabled($icon) {
+      @include calling-button-icon($icon, $color-gray-45, $color-white);
+      opacity: 0.2;
+    }
+
+    // If the on/off states seem backwards, it's because this button reflects "is audio
+    //   muted?", not "is audio on?".
+    &--audio {
+      $icon: '../images/icons/v2/mic-off-solid-28.svg';
+      &--on {
+        @include calling-button-icon-off($icon);
+      }
+      &--off {
+        @include calling-button-icon-on($icon);
+      }
+      &--disabled {
+        @include calling-button-icon-disabled($icon);
+      }
+    }
+
+    &--video {
+      $icon: '../images/icons/v2/video-solid-28.svg';
+      &--on {
+        @include calling-button-icon-on($icon);
+      }
+      &--off {
+        @include calling-button-icon-off($icon);
+      }
+      &--disabled {
+        @include calling-button-icon-disabled($icon);
+      }
+    }
+
+    &--hangup {
+      @include calling-button-icon(
+        '../images/icons/v2/phone-down-28.svg',
+        $color-accent-red,
+        $color-white
+      );
+    }
+
+    &--ring {
+      $icon: '../images/icons/v2/ring-28.svg';
+      &--on {
+        @include calling-button-icon-on($icon);
+      }
+      &--off {
+        @include calling-button-icon-off($icon);
+      }
+      &--disabled {
+        @include calling-button-icon-disabled($icon);
+      }
+    }
+
+    &--presenting {
+      $icon: '../images/icons/v2/share-screen-26.svg';
+      &--on {
+        @include calling-button-icon-on($icon);
+      }
+      &--off {
+        @include calling-button-icon-off($icon);
+      }
+      &--disabled {
+        @include calling-button-icon-disabled($icon);
+      }
+    }
+  }
+
+  &__participants {
+    @include icon('../images/icons/v2/group-solid-24.svg');
+    display: inline-block;
+
+    &--container {
+      @include button-reset;
+      border: none;
+      color: $color-white;
+    }
+
+    &--shown {
+      background-color: $color-gray-75;
+      border-radius: 16px;
+      padding: 6px 8px;
+      padding-bottom: 2px;
+      margin-top: -6px;
+      margin-right: -8px;
+    }
+
+    &--count {
+      @include font-body-2-bold;
+      margin-left: 5px;
+      vertical-align: top;
+    }
+  }
+
+  &__settings {
+    @include icon('../images/icons/v2/settings-solid-16.svg');
+  }
+
+  &__grid-view {
+    @include icon('../images/icons/v2/grid-view-solid-24.svg');
+  }
+
+  &__speaker-view {
+    @include icon('../images/icons/v2/speaker-view-solid-24.svg');
+  }
+
+  &__pip {
+    @include icon('../images/icons/v2/pip-minimize-24.svg');
+  }
+
+  &__cancel {
+    @include icon('../images/icons/v2/x-24.svg');
+  }
+
+  &__container {
+    display: inline-flex;
+    flex-direction: column;
+    margin-left: 12px;
+    margin-right: 12px;
+    max-width: 52px;
+
+    transition: margin-left 0.3s ease-out, opacity 0.3s ease-out;
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+
+    &--hidden {
+      margin-left: -100px;
+      opacity: 0;
+      pointer-events: none;
+
+      // The container could be wider than 100px depending on the label. Hiding the label
+      //  ensures that the above `margin-left` will completely hide the button.
+      .CallingButton__label {
+        display: none;
+      }
+    }
+  }
+
+  &__label {
+    @include font-subtitle;
+    margin-top: 8px;
+    text-align: center;
+    text-transform: lowercase;
+    color: $color-white;
+    @include calling-text-shadow;
+    user-select: none;
+  }
+}

stylesheets/manifest.scss

@@ -37,6 +37,7 @@
 @import './components/BadgeSustainerInstructionsDialog.scss';
 @import './components/BetterAvatarBubble.scss';
 @import './components/Button.scss';
+@import './components/CallingButton.scss';
 @import './components/CallingLobby.scss';
 @import './components/CallingLobbyJoinButton.scss';
 @import './components/CallingPreCallInfo.scss';

ts/components/CallingButton.tsx

@@ -111,8 +111,8 @@ export const CallingButton = ({
   }
 
   const className = classNames(
-    'module-calling-button__icon',
-    `module-calling-button__icon--${classNameSuffix}`
+    'CallingButton__icon',
+    `CallingButton__icon--${classNameSuffix}`
   );
 
   return (
@@ -123,8 +123,8 @@ export const CallingButton = ({
     >
       <div
         className={classNames(
-          'module-calling-button__container',
-          !isVisible && 'module-calling-button__container--hidden'
+          'CallingButton__container',
+          !isVisible && 'CallingButton__container--hidden'
         )}
       >
         <button
@@ -139,10 +139,7 @@ export const CallingButton = ({
         >
           <div />
         </button>
-        <label
-          className="module-calling-button__label"
-          htmlFor={uniqueButtonId}
-        >
+        <label className="CallingButton__label" htmlFor={uniqueButtonId}>
           {label}
         </label>
       </div>

ts/components/CallingHeader.tsx

@@ -55,18 +55,14 @@ export const CallingHeader = ({
               aria-label={i18n('calling__participants', [
                 String(participantCount),
               ])}
-              className={classNames(
-                'module-calling-button__participants--container',
-                {
-                  'module-calling-button__participants--shown':
-                    showParticipantsList,
-                }
-              )}
+              className={classNames('CallingButton__participants--container', {
+                'CallingButton__participants--shown': showParticipantsList,
+              })}
               onClick={toggleParticipants}
               type="button"
             >
-              <i className="module-calling-button__participants" />
-              <span className="module-calling-button__participants--count">
+              <i className="CallingButton__participants" />
+              <span className="CallingButton__participants--count">
                 {participantCount}
               </span>
             </button>
@@ -80,7 +76,7 @@ export const CallingHeader = ({
         >
           <button
             aria-label={i18n('callingDeviceSelection__settings')}
-            className="module-calling-button__settings"
+            className="CallingButton__settings"
             onClick={toggleSettings}
             type="button"
           />
@@ -104,8 +100,8 @@ export const CallingHeader = ({
               )}
               className={
                 isInSpeakerView
-                  ? 'module-calling-button__grid-view'
-                  : 'module-calling-button__speaker-view'
+                  ? 'CallingButton__grid-view'
+                  : 'CallingButton__speaker-view'
               }
               onClick={toggleSpeakerView}
               type="button"
@@ -118,7 +114,7 @@ export const CallingHeader = ({
           <Tooltip content={i18n('calling__pip--on')} theme={Theme.Dark}>
             <button
               aria-label={i18n('calling__pip--on')}
-              className="module-calling-button__pip"
+              className="CallingButton__pip"
               onClick={togglePip}
               type="button"
             />
@@ -130,7 +126,7 @@ export const CallingHeader = ({
           <Tooltip content={i18n('cancel')} theme={Theme.Dark}>
             <button
               aria-label={i18n('cancel')}
-              className="module-calling-button__cancel"
+              className="CallingButton__cancel"
               onClick={onCancel}
               type="button"
             />