removed forwardRef + fixed cardTitle/subtitle style

packages/core/upload/admin/src/components/FolderCard/FolderCard/FolderCard.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
@@ -45,60 +45,67 @@ const Card = styled(Box)`
   }
 `;
 
-export const FolderCard = forwardRef(
-  ({ children, id, startAction, cardActions, ariaLabel, onClick, to, ...props }, ref) => {
-    const generatedId = useId(id);
+export const FolderCard = ({
+  children,
+  id,
+  startAction,
+  cardActions,
+  ariaLabel,
+  onClick,
+  to,
+  ...props
+}) => {
+  const generatedId = useId(id);
 
-    return (
-      <FolderCardContext.Provider value={{ id: generatedId }}>
-        <Card position="relative" tabIndex={0} ref={ref} isCardActions={!!cardActions} {...props}>
-          <FauxClickWrapper
-            to={to || undefined}
-            as={to ? NavLink : 'button'}
-            type={to ? undefined : 'button'}
-            onClick={onClick}
-            tabIndex={-1}
-            aria-label={ariaLabel}
-            aria-hidden
-          />
+  return (
+    <FolderCardContext.Provider value={{ id: generatedId }}>
+      <Card position="relative" tabIndex={0} isCardActions={!!cardActions} {...props}>
+        <FauxClickWrapper
+          to={to || undefined}
+          as={to ? NavLink : 'button'}
+          type={to ? undefined : 'button'}
+          onClick={onClick}
+          tabIndex={-1}
+          aria-label={ariaLabel}
+          aria-hidden
+        />
 
-          <Stack
+        <Stack
+          hasRadius
+          background="neutral0"
+          shadow="tableShadow"
+          paddingBottom={3}
+          paddingLeft={4}
+          paddingRight={4}
+          paddingTop={3}
+          spacing={3}
+          horizontal
+          cursor="pointer"
+        >
+          {startAction}
+
+          <Box
             hasRadius
-            background="neutral0"
-            shadow="tableShadow"
-            paddingBottom={3}
-            paddingLeft={4}
-            paddingRight={4}
-            paddingTop={3}
-            spacing={3}
-            horizontal
-            cursor="pointer"
+            background="secondary100"
+            color="secondary500"
+            paddingBottom={2}
+            paddingLeft={3}
+            paddingRight={3}
+            paddingTop={2}
           >
-            {startAction}
+            <StyledFolder width={pxToRem(20)} height={pxToRem(18)} />
+          </Box>
 
-            <Box
-              hasRadius
-              background="secondary100"
-              color="secondary500"
-              paddingBottom={2}
-              paddingLeft={3}
-              paddingRight={3}
-              paddingTop={2}
-            >
-              <StyledFolder width={pxToRem(20)} height={pxToRem(18)} />
-            </Box>
+          {children}
 
-            {children}
-
-            <CardActionDisplay>
-              <CardAction right={4}>{cardActions}</CardAction>
-            </CardActionDisplay>
-          </Stack>
-        </Card>
-      </FolderCardContext.Provider>
-    );
-  }
-);
+          <CardActionDisplay>
+            <CardAction right={4}>{cardActions}</CardAction>
+          </CardActionDisplay>
+        </Stack>
+      </Card>
+    </FolderCardContext.Provider>
+  );
+};
 
 FolderCard.defaultProps = {
   id: undefined,

packages/core/upload/admin/src/components/FolderList/FolderList.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
@@ -20,106 +20,103 @@ import {
 import { FolderDefinition } from '../../constants';
 import { getTrad } from '../../utils';
 
-const CardTitle = styled(Typography).attrs({
-  ellipsis: true,
-  fontWeight: 'semiBold',
-  textColor: 'neutral800',
-  variant: 'omega',
-})`
+const TypographyMaxWidth = styled(Typography)`
   max-width: 100%;
 `;
 
-export const FolderList = forwardRef(
-  (
-    { title, folders, size, onSelectFolder, onEditFolder, onChangeFolder, selectedFolders },
-    ref
-  ) => {
-    const { formatMessage } = useIntl();
+export const FolderList = ({
+  title,
+  folders,
+  size,
+  onSelectFolder,
+  onEditFolder,
+  onChangeFolder,
+  selectedFolders,
+}) => {
+  const { formatMessage } = useIntl();
 
-    return (
-      <KeyboardNavigable tagName="article">
-        {title && (
-          <Box paddingTop={2} paddingBottom={2}>
-            <Typography as="h2" variant="delta" fontWeight="semiBold">
-              {title}
-            </Typography>
-          </Box>
-        )}
+  return (
+    <KeyboardNavigable tagName="article">
+      {title && (
+        <Box paddingTop={2} paddingBottom={2}>
+          <Typography as="h2" variant="delta" fontWeight="semiBold">
+            {title}
+          </Typography>
+        </Box>
+      )}
 
-        <Grid gap={4}>
-          {folders.map(folder => {
-            const isSelected = !!selectedFolders.find(
-              currentFolder => currentFolder.id === folder.id
-            );
+      <Grid gap={4}>
+        {folders.map(folder => {
+          const isSelected = !!selectedFolders.find(
+            currentFolder => currentFolder.id === folder.id
+          );
 
-            return (
-              <GridItem col={3} key={`folder-${folder.uid}`}>
-                <FolderCard
-                  ref={ref}
-                  ariaLabel={folder.name}
-                  id={`folder-${folder.uid}`}
-                  to="/"
-                  onClick={event => {
-                    event.preventDefault();
+          return (
+            <GridItem col={3} key={`folder-${folder.uid}`}>
+              <FolderCard
+                ariaLabel={folder.name}
+                id={`folder-${folder.uid}`}
+                to="/"
+                onClick={event => {
+                  event.preventDefault();
 
-                    if (onChangeFolder) {
-                      onChangeFolder(folder.id);
-                    }
-                  }}
-                  startAction={
-                    onSelectFolder && (
-                      <FolderCardCheckbox
-                        value={isSelected}
-                        onChange={() => onSelectFolder({ ...folder, type: 'folder' })}
-                      />
-                    )
+                  if (onChangeFolder) {
+                    onChangeFolder(folder.id);
                   }
-                  cardActions={
-                    onEditFolder && (
-                      <IconButton
-                        icon={<Pencil />}
-                        aria-label={formatMessage({
-                          id: getTrad('list.folder.edit'),
-                          defaultMessage: 'Edit folder',
-                        })}
-                        onClick={() => onEditFolder(folder)}
-                      />
-                    )
-                  }
-                  size={size}
-                >
-                  <FolderCardBody>
-                    <FolderCardBodyAction
-                      to="/"
-                      onClick={event => {
-                        event.preventDefault();
+                }}
+                startAction={
+                  onSelectFolder && (
+                    <FolderCardCheckbox
+                      value={isSelected}
+                      onChange={() => onSelectFolder({ ...folder, type: 'folder' })}
+                    />
+                  )
+                }
+                cardActions={
+                  onEditFolder && (
+                    <IconButton
+                      icon={<Pencil />}
+                      aria-label={formatMessage({
+                        id: getTrad('list.folder.edit'),
+                        defaultMessage: 'Edit folder',
+                      })}
+                      onClick={() => onEditFolder(folder)}
+                    />
+                  )
+                }
+                size={size}
+              >
+                <FolderCardBody>
+                  <FolderCardBodyAction
+                    to="/"
+                    onClick={event => {
+                      event.preventDefault();
 
-                        if (onChangeFolder) {
-                          onChangeFolder(folder.id);
-                        }
-                      }}
-                    >
-                      <Flex as="h2" direction="column" alignItems="start">
-                        <CardTitle>
-                          {folder.name}
-                          <VisuallyHidden>:</VisuallyHidden>
-                        </CardTitle>
+                      if (onChangeFolder) {
+                        onChangeFolder(folder.id);
+                      }
+                    }}
+                  >
+                    <Flex as="h2" direction="column" alignItems="start">
+                      <TypographyMaxWidth variant="omega" fontWeight="semiBold" ellipsis>
+                        {folder.name}
+                        <VisuallyHidden>:</VisuallyHidden>
+                      </TypographyMaxWidth>
 
-                        <Typography as="span" textColor="neutral600" variant="pi" ellipsis>
-                          {folder.children.count} folder, {folder.files.count} assets
-                        </Typography>
-                      </Flex>
-                    </FolderCardBodyAction>
-                  </FolderCardBody>
-                </FolderCard>
-              </GridItem>
-            );
-          })}
-        </Grid>
-      </KeyboardNavigable>
-    );
-  }
-);
+                      <TypographyMaxWidth textColor="neutral600" variant="pi" ellipsis>
+                        {folder.children.count} folder, {folder.files.count} assets
+                      </TypographyMaxWidth>
+                    </Flex>
+                  </FolderCardBodyAction>
+                </FolderCardBody>
+              </FolderCard>
+            </GridItem>
+          );
+        })}
+      </Grid>
+    </KeyboardNavigable>
+  );
+};
 
 FolderList.defaultProps = {
   onChangeFolder: null,

packages/core/upload/admin/src/pages/App/MediaLibrary.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'; // useState
+import React, { useState } from 'react'; // useState
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import {
@@ -51,7 +51,6 @@ export const MediaLibrary = () => {
   const { formatMessage } = useIntl();
   const [{ query }, setQuery] = useQueryParams();
   const isFiltering = Boolean(query._q || query.filters);
-  const folderCardRef = useRef();
 
   const { data: assetsData, isLoading: assetsLoading, errors: assetsError } = useAssets({
     skipWhen: !canRead,
@@ -99,7 +98,6 @@ export const MediaLibrary = () => {
   const handleEditFolderClose = payload => {
     setFolderToEdit(null);
     toggleEditFolderDialog(payload);
-    folderCardRef.current.focus();
   };
 
   const handleChangeFolder = folder => {
@@ -184,7 +182,6 @@ export const MediaLibrary = () => {
                     id: getTrad('list.folders.title'),
                     defaultMessage: 'Folders',
                   })}
-                  ref={folderCardRef}
                 />
               )}