Replace forceCount prop with hideIfDot (#12344)

This replaces the `forceCount` prop on room badge components with
`hideIfDot` which hopefully gives a better idea of what it does,
since forceCount did not really force a count. Also remove the
prop where it was just passing the default value anyway.

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -35,7 +35,11 @@ interface IProps {
     room: Room;
     size: string;
     displayBadge?: boolean;
-    forceCount?: boolean;
+    /**
+     * If true, show nothing if the notification would only cause a dot to be shown rather than
+     * a badge. That is: only display badges and not dots. Default: false.
+     */
+    hideIfDot?: boolean;
     oobData?: IOOBData;
     viewAvatarOnClick?: boolean;
     tooltipProps?: {
@@ -178,14 +182,14 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
 
     public render(): React.ReactNode {
         // Spread the remaining props to make it work with compound component
-        const { room, size, displayBadge, forceCount, oobData, viewAvatarOnClick, tooltipProps, ...props } = this.props;
+        const { room, size, displayBadge, hideIfDot, oobData, viewAvatarOnClick, tooltipProps, ...props } = this.props;
 
         let badge: React.ReactNode;
         if (this.props.displayBadge && this.state.notificationState) {
             badge = (
                 <NotificationBadge
                     notification={this.state.notificationState}
-                    forceCount={this.props.forceCount}
+                    hideIfDot={this.props.hideIfDot}
                     roomId={this.props.room.roomId}
                 />
             );

src/components/views/rooms/ExtraTile.tsx

@@ -52,7 +52,7 @@ export default function ExtraTile({
 
     let badge: JSX.Element | null = null;
     if (notificationState) {
-        badge = <NotificationBadge notification={notificationState} forceCount={false} />;
+        badge = <NotificationBadge notification={notificationState} />;
     }
 
     let name = displayName;

src/components/views/rooms/NotificationBadge.tsx

@@ -28,10 +28,10 @@ interface IProps {
     notification: NotificationState;
 
     /**
-     * If true, the badge will show a count if at all possible. This is typically
+     * If true, show nothing if the notification would only cause a dot to be shown rather than
-     * used to override the user's preference for things like room sublists.
+     * a badge. That is: only display badges and not dots. Default: false.
      */
-    forceCount?: boolean;
+    hideIfDot?: boolean;
 
     /**
      * The room ID, if any, the badge represents.
@@ -48,7 +48,7 @@ interface IClickableProps extends IProps, React.InputHTMLAttributes<Element> {
 }
 
 interface IState {
-    showCounts: boolean; // whether to show counts. Independent of props.forceCount
+    showCounts: boolean; // whether to show counts.
 }
 
 export default class NotificationBadge extends React.PureComponent<XOR<IProps, IClickableProps>, IState> {
@@ -97,11 +97,12 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
 
     public render(): ReactNode {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { notification, showUnsentTooltip, forceCount, onClick, tabIndex } = this.props;
+        const { notification, showUnsentTooltip, hideIfDot, onClick, tabIndex } = this.props;
 
         if (notification.isIdle && !notification.knocked) return null;
-        if (forceCount) {
+        if (hideIfDot && notification.level < NotificationLevel.Notification) {
-            if (!notification.hasUnreadCount) return null; // Can't render a badge
+            // This would just be a dot and we've been told not to show dots, so don't show it
+            if (!notification.hasUnreadCount) return null;
         }
 
         const commonProps: React.ComponentProps<typeof StatelessNotificationBadge> = {

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -61,7 +61,7 @@ const RoomBreadcrumbTile: React.FC<{ room: Room; onClick: (ev: ButtonEvent) => v
                 room={room}
                 size="32px"
                 displayBadge={true}
-                forceCount={true}
+                hideIfDot={true}
                 tooltipProps={{ tabIndex: isActive ? 0 : -1 }}
             />
         </AccessibleTooltipButton>

src/components/views/rooms/RoomSublist.tsx

@@ -657,7 +657,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
 
                     const badge = (
                         <NotificationBadge
-                            forceCount={true}
+                            hideIfDot={true}
                             notification={this.notificationState}
                             onClick={this.onBadgeClick}
                             tabIndex={tabIndex}

src/components/views/rooms/RoomTile.tsx

@@ -402,11 +402,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
             // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
             badge = (
                 <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
-                    <NotificationBadge
+                    <NotificationBadge notification={this.notificationState} roomId={this.props.room.roomId} />
-                        notification={this.notificationState}
-                        forceCount={false}
-                        roomId={this.props.room.roomId}
-                    />
                 </div>
             );
         }

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -113,7 +113,6 @@ export const SpaceButton = <T extends keyof JSX.IntrinsicElements>({
             <div className="mx_SpacePanel_badgeContainer">
                 <NotificationBadge
                     onClick={jumpToNotification}
-                    forceCount={false}
                     notification={notificationState}
                     aria-label={ariaLabel}
                     tabIndex={tabIndex}