Create flexbox layout helper (#11411)

Author: Germain

res/css/_components.pcss

@@ -52,6 +52,8 @@
 @import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss";
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";
 @import "./components/views/typography/_Caption.pcss";
+@import "./components/views/utils/_Box.pcss";
+@import "./components/views/utils/_Flex.pcss";
 @import "./compound/_Icon.pcss";
 @import "./compound/_SuccessDialog.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";

res/css/components/views/utils/_Box.pcss

@@ -0,0 +1,21 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Box {
+    flex: var(--mx-box-flex, initial);
+    flex-shrink: var(--mx-box-shrink, initial);
+    flex-grow: var(--mx-box-grow, initial);
+}

res/css/components/views/utils/_Flex.pcss

@@ -0,0 +1,23 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Flex {
+    display: var(--mx-flex-display, initial);
+    flex-direction: var(--mx-flex-direction, initial);
+    align-items: var(--mx-flex-align, initial);
+    justify-content: var(--mx-flex-justify, initial);
+    gap: var(--mx-flex-gap, initial);
+}

res/css/views/rooms/_RoomHeader.pcss

@@ -15,10 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomHeader {
-    display: flex;
-    align-items: center;
     height: 64px;
-    gap: var(--cpd-space-3x);
     padding: 0 var(--cpd-space-3x);
     border-bottom: 1px solid $separator;
     background-color: $background;

src/components/utils/Box.tsx

@@ -0,0 +1,91 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classNames from "classnames";
+import React, { useEffect, useRef } from "react";
+
+type FlexProps = {
+    /**
+     * The type of the HTML element
+     * @default div
+     */
+    as?: string;
+    /**
+     * The CSS class name.
+     */
+    className?: string;
+    /**
+     * the on click event callback
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * The flex space to use
+     * @default null
+     */
+    flex?: string | null;
+    /**
+     * The flex shrink factor
+     * @default null
+     */
+    shrink?: string | null;
+    /**
+     * The flex grow factor
+     * @default null
+     */
+    grow?: string | null;
+};
+
+/**
+ * Set or remove a CSS property
+ * @param ref the reference
+ * @param name the CSS property name
+ * @param value the CSS property value
+ */
+function addOrRemoveProperty(
+    ref: React.MutableRefObject<HTMLElement | undefined>,
+    name: string,
+    value?: string | null,
+): void {
+    const style = ref.current!.style;
+    if (value) {
+        style.setProperty(name, value);
+    } else {
+        style.removeProperty(name);
+    }
+}
+
+/**
+ * A flex child helper
+ */
+export function Box({
+    as = "div",
+    flex = null,
+    shrink = null,
+    grow = null,
+    className,
+    children,
+    ...props
+}: React.PropsWithChildren<FlexProps>): JSX.Element {
+    const ref = useRef<HTMLElement>();
+
+    useEffect(() => {
+        addOrRemoveProperty(ref, `--mx-box-flex`, flex);
+        addOrRemoveProperty(ref, `--mx-box-shrink`, shrink);
+        addOrRemoveProperty(ref, `--mx-box-grow`, grow);
+    }, [flex, grow, shrink]);
+
+    return React.createElement(as, { ...props, className: classNames("mx_Box", className), ref }, children);
+}

src/components/utils/Flex.tsx

@@ -0,0 +1,86 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classNames from "classnames";
+import React, { useEffect, useRef } from "react";
+
+type FlexProps = {
+    /**
+     * The type of the HTML element
+     * @default div
+     */
+    as?: string;
+    /**
+     * The CSS class name.
+     */
+    className?: string;
+    /**
+     * The type of flex container
+     * @default flex
+     */
+    display?: "flex" | "inline-flex";
+    /**
+     * The flow direction of the flex children
+     * @default row
+     */
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    /**
+     * The alingment of the flex children
+     * @default start
+     */
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    /**
+     * The justification of the flex children
+     * @default start
+     */
+    justify?: "start" | "center" | "end" | "between";
+    /**
+     * The spacing between the flex children, expressed with the CSS unit
+     * @default 0
+     */
+    gap?: string;
+    /**
+     * the on click event callback
+     */
+    onClick?: (e: React.MouseEvent) => void;
+};
+
+/**
+ * A flexbox container helper
+ */
+export function Flex({
+    as = "div",
+    display = "flex",
+    direction = "row",
+    align = "start",
+    justify = "start",
+    gap = "0",
+    className,
+    children,
+    ...props
+}: React.PropsWithChildren<FlexProps>): JSX.Element {
+    const ref = useRef<HTMLElement>();
+
+    useEffect(() => {
+        ref.current!.style.setProperty(`--mx-flex-display`, display);
+        ref.current!.style.setProperty(`--mx-flex-direction`, direction);
+        ref.current!.style.setProperty(`--mx-flex-align`, align);
+        ref.current!.style.setProperty(`--mx-flex-justify`, justify);
+        ref.current!.style.setProperty(`--mx-flex-gap`, gap);
+    }, [align, direction, display, gap, justify]);
+
+    return React.createElement(as, { ...props, className: classNames("mx_Flex", className), ref }, children);
+}

src/components/views/rooms/RoomHeader.tsx

@@ -23,13 +23,18 @@ import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { useTopic } from "../../../hooks/room/useTopic";
+import { Flex } from "../../utils/Flex";
+import { Box } from "../../utils/Box";
 
 export default function RoomHeader({ room }: { room: Room }): JSX.Element {
     const roomName = useRoomName(room);
     const roomTopic = useTopic(room);
 
     return (
-        <header
+        <Flex
+            as="header"
+            align="center"
+            gap="var(--cpd-space-3x)"
             className="mx_RoomHeader light-panel"
             onClick={() => {
                 const rightPanel = RightPanelStore.instance;
@@ -39,7 +44,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
             }}
         >
             <DecoratedRoomAvatar room={room} avatarSize={40} displayBadge={false} />
-            <div className="mx_RoomHeader_info">
+            <Box flex="1" className="mx_RoomHeader_info">
                 <BodyText
                     as="div"
                     size="lg"
@@ -56,7 +61,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                         {roomTopic.text}
                     </BodyText>
                 )}
-            </div>
-        </header>
+            </Box>
+        </Flex>
     );
 }