💄(frontend) add classname to components

To be easily customized, we added a classname
to most of the components.

Author: AntoLC

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

@@ -44,6 +44,7 @@ const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
           ${$css || ''}
         `}
         {...props}
+        className={`--docs--box-button ${props.className || ''}`}
         onClick={(event: React.MouseEvent<HTMLDivElement>) => {
           if (props.disabled) {
             return;

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

@@ -14,6 +14,7 @@ export const Card = ({
 
   return (
     <Box
+      className={`--docs--card ${props.className || ''}`}
       $background="white"
       $radius="4px"
       $css={css`

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

@@ -71,6 +71,7 @@ export const DropButton = ({
         onPress={() => onOpenChangeHandler(true)}
         aria-label={label}
         $css={buttonCss}
+        className="--docs--drop-button"
       >
         {button}
       </StyledButton>
@@ -79,6 +80,7 @@ export const DropButton = ({
         triggerRef={triggerRef}
         isOpen={isLocalOpen}
         onOpenChange={onOpenChangeHandler}
+        className="--docs--drop-button-popover"
       >
         {children}
       </StyledPopover>

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

@@ -36,6 +36,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
       $padding="4px"
       $margin="auto"
       {...textProps}
+      className={`--docs--icon-bg ${textProps.className || ''}`}
     >
       {iconName}
     </Text>

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

@@ -30,7 +30,10 @@ export const InfiniteScroll = ({
   };
 
   return (
-    <Box {...boxProps}>
+    <Box
+      {...boxProps}
+      className={`--docs--infinite-scroll ${boxProps.className || ''}`}
+    >
       {children}
       <InView onChange={loadMore}>
         {!isLoading && hasMore && (

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

@@ -20,6 +20,7 @@ export const LoadMoreText = ({
       $align="center"
       $gap="0.4rem"
       $padding={{ horizontal: '2xs', vertical: 'sm' }}
+      className="--docs--load-more"
     >
       <Icon
         $theme="primary"

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

@@ -28,7 +28,12 @@ export const TextErrors = ({
   const { t } = useTranslation();
 
   return (
-    <AlertStyled canClose={canClose} type={VariantType.ERROR} icon={icon}>
+    <AlertStyled
+      canClose={canClose}
+      type={VariantType.ERROR}
+      icon={icon}
+      className="--docs--text-errors"
+    >
       <Box $direction="column" $gap="0.2rem">
         {causes &&
           causes.map((cause, i) => (

src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx

@@ -119,8 +119,6 @@ export const QuickSearchStyle = createGlobalStyle`
   }
 }
 
-
-
 .c__modal__scroller:has(.quick-search-container),
 .c__modal__scroller:has(.noPadding) {
   padding: 0 !important;
@@ -138,6 +136,4 @@ export const QuickSearchStyle = createGlobalStyle`
     margin-bottom: 0;
   }
 }
-
-
 `;

src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx

@@ -18,14 +18,20 @@ export const ButtonLogin = () => {
         onClick={() => gotoLogin()}
         color="primary-text"
         aria-label={t('Login')}
+        className="--docs--button-login"
       >
         {t('Login')}
       </Button>
     );
   }
 
   return (
-    <Button onClick={gotoLogout} color="primary-text" aria-label={t('Logout')}>
+    <Button
+      onClick={gotoLogout}
+      color="primary-text"
+      aria-label={t('Logout')}
+      className="--docs--button-logout"
+    >
       {t('Logout')}
     </Button>
   );
@@ -45,6 +51,7 @@ export const ProConnectButton = () => {
         }
       `}
       $radius="4px"
+      className="--docs--proconnect-button"
     >
       <ProConnectImg />
     </BoxButton>

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -133,6 +133,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       $padding={{ top: 'md' }}
       $background="white"
       $css={cssEditor(readOnly)}
+      className="--docs--editor-container"
     >
       {errorAttachment && (
         <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
@@ -192,7 +193,7 @@ export const BlockNoteEditorVersion = ({
   }, [setEditor, editor]);
 
   return (
-    <Box $css={cssEditor(readOnly)}>
+    <Box $css={cssEditor(readOnly)} className="--docs--editor-container">
       <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
     </Box>
   );

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/AIButton.tsx

@@ -104,7 +104,7 @@ export function AIGroupButton() {
     <Components.Generic.Menu.Root>
       <Components.Generic.Menu.Trigger>
         <Components.FormattingToolbar.Button
-          className="bn-button bn-menu-item"
+          className="bn-button bn-menu-item --docs--ai-actions-menu-trigger"
           data-test="ai-actions"
           label="AI"
           mainTooltip={t('AI Actions')}
@@ -116,7 +116,7 @@ export function AIGroupButton() {
         />
       </Components.Generic.Menu.Trigger>
       <Components.Generic.Menu.Dropdown
-        className="bn-menu-dropdown bn-drag-handle-menu"
+        className="bn-menu-dropdown bn-drag-handle-menu --docs--ai-actions-menu"
         sub={true}
       >
         {canAITransform && (
@@ -193,7 +193,7 @@ export function AIGroupButton() {
           <Components.Generic.Menu.Root position="right" sub={true}>
             <Components.Generic.Menu.Trigger sub={false}>
               <Components.Generic.Menu.Item
-                className="bn-menu-item"
+                className="bn-menu-item --docs--ai-translate-menu-trigger"
                 subTrigger={true}
               >
                 <Box $direction="row" $gap="0.6rem">
@@ -206,7 +206,7 @@ export function AIGroupButton() {
             </Components.Generic.Menu.Trigger>
             <Components.Generic.Menu.Dropdown
               sub={true}
-              className="bn-menu-dropdown"
+              className="bn-menu-dropdown --docs--ai-translate-menu"
             >
               {languages.map((language) => (
                 <AIMenuItemTranslate

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/FileDownloadButton.tsx

@@ -94,7 +94,7 @@ export const FileDownloadButton = ({
   return (
     <>
       <Components.FormattingToolbar.Button
-        className="bn-button"
+        className="bn-button --docs--editor-file-download-button"
         label={
           dict.formatting_toolbar.file_download.tooltip[fileBlock.type] ||
           dict.formatting_toolbar.file_download.tooltip['file']

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx

@@ -82,6 +82,7 @@ export function MarkdownButton() {
     <Components.FormattingToolbar.Button
       mainTooltip={t('Convert Markdown')}
       onClick={handleConvertMarkdown}
+      className="--docs--editor-markdown-button"
     >
       M
     </Components.FormattingToolbar.Button>

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx

@@ -59,7 +59,10 @@ export const ModalConfirmDownloadUnsafe = ({
         </Text>
       }
     >
-      <Box aria-label={t('Modal confirmation to download the attachment')}>
+      <Box
+        aria-label={t('Modal confirmation to download the attachment')}
+        className="--docs--modal-confirm-download-unsafe"
+      >
         <Box>
           <Box $direction="column" $gap="0.35rem" $margin={{ top: 'sm' }}>
             <Text $variation="700">{t('This file is flagged as unsafe.')}</Text>

src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx

@@ -49,8 +49,16 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           <TableContent />
         </Box>
       )}
-      <Box $maxWidth="868px" $width="100%" $height="100%">
-        <Box $padding={{ horizontal: isDesktop ? '54px' : 'base' }}>
+      <Box
+        $maxWidth="868px"
+        $width="100%"
+        $height="100%"
+        className="--docs--doc-editor"
+      >
+        <Box
+          $padding={{ horizontal: isDesktop ? '54px' : 'base' }}
+          className="--docs--doc-editor-header"
+        >
           {isVersion ? (
             <DocVersionHeader title={doc.title} />
           ) : (
@@ -64,6 +72,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           $width="100%"
           $css="overflow-x: clip; flex: 1;"
           $position="relative"
+          className="--docs--doc-editor-content"
         >
           <Box $css="flex:1;" $position="relative" $width="100%">
             {isVersion ? (
@@ -115,7 +124,7 @@ export const DocVersionEditor = ({
     }
 
     return (
-      <Box $margin="large">
+      <Box $margin="large" className="--docs--doc-version-editor-error">
         <TextErrors
           causes={error.cause}
           icon={

src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx

@@ -155,6 +155,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         $margin={{ bottom: 'xl' }}
         aria-label={t('Content modal to export the document')}
         $gap="1rem"
+        className="--docs--modal-export-content"
       >
         <Text $variation="600" $size="sm">
           {t('Download your document in a .docx or .pdf format.')}

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

@@ -38,6 +38,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
         $padding={{ top: isDesktop ? '4xl' : 'md' }}
         $gap={spacings['base']}
         aria-label={t('It is the card information about the document.')}
+        className="--docs--doc-header"
       >
         {(docIsPublic || docIsAuth) && (
           <Box

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

@@ -107,6 +107,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
       <Box
         as="span"
         role="textbox"
+        className="--docs--doc-title-input"
         contentEditable
         defaultValue={titleDisplay || undefined}
         onKeyDownCapture={handleKeyDown}

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

@@ -176,6 +176,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       $align="center"
       $gap="0.5rem 1.5rem"
       $wrap={isSmallMobile ? 'wrap' : 'nowrap'}
+      className="--docs--doc-toolbox"
     >
       <Box
         $direction="row"

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

@@ -22,6 +22,7 @@ export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
         $padding={{ vertical: 'base' }}
         $gap={spacings['base']}
         aria-label={t('It is the document title')}
+        className="--docs--doc-version-header"
       >
         <DocTitleText title={title} />
         <HorizontalSeparator />

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -84,7 +84,10 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
         </Text>
       }
     >
-      <Box aria-label={t('Content modal to delete document')}>
+      <Box
+        aria-label={t('Content modal to delete document')}
+        className="--docs--modal-remove-doc"
+      >
         {!isError && (
           <Text $size="sm" $variation="600">
             {t('Are you sure you want to delete this document ?')}

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx

@@ -11,7 +11,11 @@ type DocSearchItemProps = {
 export const DocSearchItem = ({ doc }: DocSearchItemProps) => {
   const { isDesktop } = useResponsiveStore();
   return (
-    <Box data-testid={`doc-search-item-${doc.id}`} $width="100%">
+    <Box
+      data-testid={`doc-search-item-${doc.id}`}
+      $width="100%"
+      className="--docs--doc-search-item"
+    >
       <QuickSearchItemContent
         left={
           <Box $direction="row" $align="center" $gap="10px" $width="100%">

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx

@@ -68,6 +68,7 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
         aria-label={t('Search modal')}
         $direction="column"
         $justify="space-between"
+        className="--docs--doc-search-modal"
       >
         <QuickSearch
           placeholder={t('Type the name of a document')}

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx

@@ -122,6 +122,7 @@ export const DocShareAddMemberList = ({
       $css={css`
         border: 1px solid ${color['greyscale-200']};
       `}
+      className="--docs--doc-share-add-member-list"
     >
       <Box
         $direction="row"

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx

@@ -34,6 +34,7 @@ export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
         color: ${color['greyscale-1000']};
         font-size: ${fontSize['xs']};
       `}
+      className="--docs--doc-share-add-member-list-item"
     >
       <Text $variation="1000" $size="xs">
         {user.full_name || user.email}

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitationItem.tsx

@@ -84,6 +84,7 @@ export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
     <Box
       $width="100%"
       data-testid={`doc-share-invitation-row-${invitation.email}`}
+      className="--docs--doc-share-invitation-item"
     >
       <SearchUserRow
         isInvitation={true}

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareMemberItem.tsx

@@ -72,6 +72,7 @@ export const DocShareMemberItem = ({ doc, access }: Props) => {
     <Box
       $width="100%"
       data-testid={`doc-share-member-row-${access.user.email}`}
+      className="--docs--doc-share-member-item"
     >
       <SearchUserRow
         alwaysShowRight={true}

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -195,7 +195,7 @@ export const DocShareModal = ({ doc, onClose }: Props) => {
           aria-label={t('Share modal')}
           $height={canViewAccesses ? modalContentHeight : 'auto'}
           $overflow="hidden"
-          className="noPadding"
+          className="--docs--doc-share-modal noPadding "
           $justify="space-between"
         >
           <Box

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx

@@ -20,6 +20,7 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => {
       $css={css`
         flex-shrink: 0;
       `}
+      className="--docs--doc-share-modal-footer"
     >
       <HorizontalSeparator $withPadding={true} />
 

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalInviteUserByEmail.tsx

@@ -12,7 +12,11 @@ type Props = {
 export const DocShareModalInviteUserRow = ({ user }: Props) => {
   const { t } = useTranslation();
   return (
-    <Box $width="100%" data-testid={`search-user-row-${user.email}`}>
+    <Box
+      $width="100%"
+      data-testid={`search-user-row-${user.email}`}
+      className="--docs--doc-share-modal-invite-user-row"
+    >
       <SearchUserRow
         user={user}
         right={

src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx

@@ -91,6 +91,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
       $padding={{ horizontal: 'base' }}
       aria-label={t('Doc visibility card')}
       $gap={spacing['base']}
+      className="--docs--doc-visibility"
     >
       <Text $weight="700" $size="sm" $variation="700">
         {t('Link parameters')}

src/frontend/apps/impress/src/features/docs/doc-share/components/SearchUserRow.tsx

@@ -31,7 +31,12 @@ export const SearchUserRow = ({
       right={right}
       alwaysShowRight={alwaysShowRight}
       left={
-        <Box $direction="row" $align="center" $gap={spacings['xs']}>
+        <Box
+          $direction="row"
+          $align="center"
+          $gap={spacings['xs']}
+          className="--docs--search-user-row"
+        >
           <UserAvatar
             user={user}
             background={isInvitation ? colors['greyscale-400'] : undefined}