Align NetworkDropdown component with new design

res/css/structures/_RoomDirectory.scss

@@ -48,16 +48,21 @@ limitations under the License.
 .mx_RoomDirectory_listheader {
     display: block;
     margin-top: 13px;
+
+    .mx_DirectorySearchBox {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .mx_NetworkDropdown {
+        float: right;
+    }
 }
 
 .mx_RoomDirectory_searchbox {
     flex: 1 !important;
 }
 
-.mx_RoomDirectory_listheader .mx_NetworkDropdown {
-    flex: 0 0 200px;
-}
-
 .mx_RoomDirectory_tableWrapper {
     overflow-y: auto;
     flex: 1 1 0;
@@ -66,23 +71,23 @@ limitations under the License.
         margin-top: 24px;
         text-align: center;
 
-        > h5 {
+        >h5 {
             margin: 0;
             font-weight: $font-semi-bold;
             font-size: $font-15px;
             line-height: $font-18px;
             color: $primary-content;
         }
 
-        > p {
+        >p {
             margin: 40px auto 60px;
             font-size: $font-14px;
             line-height: $font-20px;
             color: $secondary-content;
             max-width: 464px; // easier reading
         }
 
-        > hr {
+        >hr {
             margin: 0;
             border: none;
             height: 1px;

res/css/views/directory/_NetworkDropdown.scss

@@ -15,16 +15,22 @@ limitations under the License.
 */
 
 .mx_NetworkDropdown {
-    height: 32px;
-    position: relative;
-    width: max-content;
-    padding-right: 32px;
-    margin-left: auto;
-    margin-right: 9px;
-    margin-top: 12px;
-
-    .mx_AccessibleButton {
-        width: max-content;
+    --gutterSize: 8px;
+
+    border-radius: 8px;
+    display: inline-flex;
+    gap: var(--gutterSize);
+    padding: calc(var(--gutterSize) / 2) var(--gutterSize);
+    align-items: center;
+
+    border: 1px solid currentColor;
+    color: $secondary-content;
+    font-size: $font-12px;
+
+    &:hover,
+    &.mx_NetworkDropdown--open {
+        background-color: $system;
+        border-color: $system;
     }
 }
 
@@ -49,7 +55,6 @@ limitations under the License.
 
     .mx_NetworkDropdown_server_title {
         padding: 0 10px;
-        font-size: $font-15px;
         font-weight: 600;
         line-height: $font-20px;
         margin-bottom: 4px;
@@ -139,29 +144,16 @@ limitations under the License.
     }
 }
 
-.mx_NetworkDropdown_handle {
-    position: relative;
-
-    &::after {
-        content: "";
-        position: absolute;
-        width: 26px;
-        height: 26px;
-        right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5)
-        top: -3px;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: contain;
-        mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
-        background-color: $primary-content;
-    }
+.mx_NetworkDropdown_dialog .mx_Dialog {
+    width: 45vw;
+}
 
-    .mx_NetworkDropdown_handle_server {
-        color: $muted-fg-color;
-        font-size: $font-12px;
-    }
+.mx_NetworkDropdown_chevron {
+    width: 1em;
 }
 
-.mx_NetworkDropdown_dialog .mx_Dialog {
-    width: 45vw;
+.mx_NetworkDropdown--open {
+    .mx_NetworkDropdown_chevron {
+        transform: rotate(180deg);
+    }
 }

src/accessibility/context_menu/ContextMenuButton.tsx

@@ -24,17 +24,18 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
     label?: string;
     // whether or not the context menu is currently open
     isExpanded: boolean;
+    ref?: React.Ref<unknown> | React.LegacyRef<unknown> | React.ForwardedRef<unknown>;
 }
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuButton: React.FC<IProps> = ({
+export const ContextMenuButton: React.FC<IProps> = React.forwardRef(({
     label,
     isExpanded,
     children,
     onClick,
     onContextMenu,
     ...props
-}) => {
+}, ref) => {
     return (
         <AccessibleButton
             {...props}
@@ -44,8 +45,9 @@ export const ContextMenuButton: React.FC<IProps> = ({
             aria-label={label}
             aria-haspopup={true}
             aria-expanded={isExpanded}
+            inputRef={ref}
         >
             { children }
         </AccessibleButton>
     );
-};
+});

src/components/structures/RoomDirectory.tsx

@@ -26,7 +26,7 @@ import dis from "../../dispatcher/dispatcher";
 import Modal from "../../Modal";
 import { _t } from '../../languageHandler';
 import SdkConfig from '../../SdkConfig';
-import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/DirectoryUtils';
+import { ALL_ROOMS, instanceForInstanceId, protocolNameForInstanceId, Protocols } from '../../utils/DirectoryUtils';
 import Analytics from '../../Analytics';
 import NetworkDropdown from "../views/directory/NetworkDropdown";
 import SettingsStore from "../../settings/SettingsStore";
@@ -43,7 +43,6 @@ import PosthogTrackers from "../../PosthogTrackers";
 import { PublicRoomTile } from "../views/rooms/PublicRoomTile";
 import { getFieldsForThirdPartyLocation, joinRoomByAlias, showRoom } from "../../utils/rooms";
 import { GenericError } from "../../utils/error";
-import { ALL_ROOMS, Protocols } from "../../utils/DirectoryUtils";
 
 const LAST_SERVER_KEY = "mx_last_room_directory_server";
 const LAST_INSTANCE_KEY = "mx_last_room_directory_instance";

src/components/views/directory/NetworkDropdown.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 
 import React, { useEffect, useState } from "react";
 import { MatrixError } from "matrix-js-sdk/src/http-api";
+import classnames from "classnames";
 
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { instanceForInstanceId } from '../../../utils/DirectoryUtils';
@@ -42,12 +43,13 @@ import { compare } from "../../../utils/strings";
 import { SnakedObject } from "../../../utils/SnakedObject";
 import { IConfigOptions } from "../../../IConfigOptions";
 import { ALL_ROOMS, Protocols } from "../../../utils/DirectoryUtils";
+import { Icon as ChevronDownIcon } from "../../../../res/img/feather-customised/chevron-down.svg";
 
 const SETTING_NAME = "room_directory_servers";
 
-const inPlaceOf = (elementRect: Pick<DOMRect, "right" | "top">) => ({
-    right: UIStore.instance.windowWidth - elementRect.right,
-    top: elementRect.top,
+const inPlaceOf = (elementRect: Pick<DOMRect, "right" | "top" | "width" | "height">) => ({
+    right: UIStore.instance.windowWidth - elementRect.right - 16,
+    top: elementRect.top + elementRect.height,
     chevronOffset: 0,
     chevronFace: ChevronFace.None,
 });
@@ -272,35 +274,35 @@ const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, s
                 </MenuItem>
             </div>
         </ContextMenu>;
+    }
+
+    let currentValue;
+    if (selectedInstanceId === ALL_ROOMS) {
+        currentValue = _t("All rooms");
+    } else if (selectedInstanceId) {
+        const instance = instanceForInstanceId(protocols, selectedInstanceId);
+        currentValue = _t("%(networkName)s rooms", {
+            networkName: instance.desc,
+        });
     } else {
-        let currentValue;
-        if (selectedInstanceId === ALL_ROOMS) {
-            currentValue = _t("All rooms");
-        } else if (selectedInstanceId) {
-            const instance = instanceForInstanceId(protocols, selectedInstanceId);
-            currentValue = _t("%(networkName)s rooms", {
-                networkName: instance.desc,
-            });
-        } else {
-            currentValue = _t("Matrix rooms");
-        }
+        currentValue = _t("Matrix rooms");
+    }
 
-        content = <ContextMenuButton
-            className="mx_NetworkDropdown_handle"
+    return <>
+        <ContextMenuButton
             onClick={openMenu}
             isExpanded={menuDisplayed}
+            className={classnames({
+                "mx_NetworkDropdown": true,
+                "mx_NetworkDropdown--open": menuDisplayed,
+            })}
+            ref={handle}
         >
-            <span>
-                { currentValue }
-            </span> <span className="mx_NetworkDropdown_handle_server">
-                ({ selectedServerName })
-            </span>
-        </ContextMenuButton>;
-    }
-
-    return <div className="mx_NetworkDropdown" ref={handle}>
+            <span>{ currentValue } ({ selectedServerName })</span>
+            <ChevronDownIcon className="mx_NetworkDropdown_chevron" />
+        </ContextMenuButton>
         { content }
-    </div>;
+    </>;
 };
 
 export default NetworkDropdown;

src/components/views/elements/AccessibleButton.tsx

@@ -42,7 +42,7 @@ type AccessibleButtonKind = | 'primary'
  *           implemented exactly like a normal onClick handler.
  */
 interface IProps extends React.InputHTMLAttributes<Element> {
-    inputRef?: React.Ref<Element>;
+    inputRef?: React.RefObject<unknown> | React.ForwardedRef<unknown> | React.LegacyRef<unknown>;
     element?: keyof ReactHTML;
     // The kind of button, similar to how Bootstrap works.
     // See available classes for AccessibleButton for options.
@@ -58,7 +58,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
 }
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
-    ref?: React.Ref<Element>;
+    ref?: React.RefObject<unknown> | React.ForwardedRef<unknown> | React.LegacyRef<unknown>;
 }
 
 /**
@@ -133,9 +133,6 @@ export default function AccessibleButton({
         };
     }
 
-    // Pass through the ref - used for keyboard shortcut access to some buttons
-    newProps.ref = inputRef;
-
     newProps.className = classnames(
         "mx_AccessibleButton",
         className,
@@ -146,6 +143,10 @@ export default function AccessibleButton({
         },
     );
 
+    if (inputRef) {
+        newProps.ref = inputRef;
+    }
+
     // React.createElement expects InputHTMLAttributes
     return React.createElement(element, newProps, children);
 }

test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap

@@ -7,7 +7,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
   <span>
     Threads
   </span>
-  <ContextMenuButton
+  <ForwardRef
     className="mx_ThreadPanel_dropdown"
     inputRef={
       Object {
@@ -18,7 +18,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
     onClick={[Function]}
   >
     Show: All threads
-  </ContextMenuButton>
+  </ForwardRef>
 </div>
 `;
 
@@ -29,7 +29,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
   <span>
     Threads
   </span>
-  <ContextMenuButton
+  <ForwardRef
     className="mx_ThreadPanel_dropdown"
     inputRef={
       Object {
@@ -40,7 +40,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
     onClick={[Function]}
   >
     Show: My threads
-  </ContextMenuButton>
+  </ForwardRef>
 </div>
 `;