diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx index f5b50acf..8642ba94 100644 --- a/src/frontend/apps/impress/src/components/Box.tsx +++ b/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')` ${({ $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 }) => diff --git a/src/frontend/apps/impress/src/components/Text.tsx b/src/frontend/apps/impress/src/components/Text.tsx index 230d5668..7982d1b4 100644 --- a/src/frontend/apps/impress/src/components/Text.tsx +++ b/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)` `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`} `; -export const Text = ({ - className, - $isMaterialIcon, - ...props -}: ComponentPropsWithRef) => { - return ( - - ); -}; +const Text = forwardRef>( + ({ className, $isMaterialIcon, ...props }, ref) => { + return ( + + ); + }, +); + +Text.displayName = 'Text'; + +export { Text }; diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 46da3784..68dca6eb 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/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; +} diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx index 41b8447a..5bbc50a5 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx +++ b/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 ( <> -