♻️(frontend) minor components update

- change flex property of Box component
- Forward the ref of Text component
- globalize tooltip padding

src/frontend/apps/impress/src/components/Box.tsx

@@ -19,7 +19,7 @@ export interface BoxProps {
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
   $effect?: 'show' | 'hide';
-  $flex?: boolean;
+  $flex?: CSSProperties['flex'];
   $gap?: CSSProperties['gap'];
   $hasTransition?: boolean | 'slow';
   $height?: CSSProperties['height'];
@@ -50,7 +50,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $color }) => $color && `color: ${$color};`}
   ${({ $direction }) => $direction && `flex-direction: ${$direction};`}
   ${({ $display }) => $display && `display: ${$display};`}
-  ${({ $flex }) => $flex === false && `display: block;`}
+  ${({ $flex }) => $flex && `flex: ${$flex};`}
   ${({ $gap }) => $gap && `gap: ${$gap};`}
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $hasTransition }) =>

src/frontend/apps/impress/src/components/Text.tsx

@@ -1,4 +1,9 @@
-import { CSSProperties, ComponentPropsWithRef, ReactHTML } from 'react';
+import {
+  CSSProperties,
+  ComponentPropsWithRef,
+  ReactHTML,
+  forwardRef,
+} from 'react';
 import styled from 'styled-components';
 
 import { tokens } from '@/cunningham';
@@ -55,18 +60,21 @@ export const TextStyled = styled(Box)<TextProps>`
     `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`}
 `;
 
-export const Text = ({
+const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>(
-  className,
+  ({ className, $isMaterialIcon, ...props }, ref) => {
-  $isMaterialIcon,
+    return (
-  ...props
+      <TextStyled
-}: ComponentPropsWithRef<typeof TextStyled>) => {
+        ref={ref}
-  return (
+        as="span"
-    <TextStyled
+        $theme="greyscale"
-      as="span"
+        $variation="text"
-      $theme="greyscale"
+        className={`${className || ''}${$isMaterialIcon ? ' material-icons' : ''}`}
-      $variation="text"
+        {...props}
-      className={`${className || ''}${$isMaterialIcon ? ' material-icons' : ''}`}
+      />
-      {...props}
+    );
-    />
+  },
-  );
+);
-};
+
+Text.displayName = 'Text';
+
+export { Text };

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -532,3 +532,10 @@ input:-webkit-autofill:focus {
 .c__toast__container {
   z-index: 10000;
 }
+
+/**
+ * Tooltip
+*/
+.c__tooltip {
+  padding: 4px 6px;
+}

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -7,7 +7,6 @@ import {
 } from '@openfun/cunningham-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { createGlobalStyle } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -22,12 +21,6 @@ import {
 import { useResponsiveStore } from '@/stores';
 import { isFirefox } from '@/utils/userAgent';
 
-const DocTitleStyle = createGlobalStyle`
-  .c__tooltip {
-    padding: 4px 6px;
-  }
-`;
-
 interface DocTitleProps {
   doc: Doc;
 }
@@ -126,7 +119,6 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
 
   return (
     <>
-      <DocTitleStyle />
       <Tooltip content={t('Rename')} placement="top">
         <Box
           as="h2"