Merge pull request #13604 from strapi/ML-folder/folder-card-enh

[Ml Folder] Folder card enhancements

packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BrowseStep renders and match snapshot 1`] = `
-.c73 {
+.c74 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -164,7 +164,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   max-width: 100%;
 }
 
-.c40 {
+.c41 {
   max-width: 100%;
 }
 
@@ -231,7 +231,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c41 {
+.c42 {
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -245,7 +245,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c51 {
+.c52 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -267,6 +267,9 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   background: #ffffff;
   padding: 12px;
   border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #eaeaef;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
   cursor: pointer;
   cursor: pointer;
@@ -342,10 +345,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
 }
 
 .c39 {
+  padding: 4px;
   max-width: 100%;
 }
 
-.c64 {
+.c65 {
   padding-left: 8px;
 }
 
@@ -368,7 +372,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.25;
 }
 
-.c42 {
+.c43 {
   font-weight: 500;
   color: #32324d;
   display: block;
@@ -379,7 +383,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c45 {
+.c46 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -389,20 +393,20 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.33;
 }
 
-.c65 {
+.c66 {
   color: #666687;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c71 {
+.c72 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c44 {
+.c45 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -512,7 +516,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: #666687;
 }
 
-.c56 {
+.c57 {
   position: absolute;
   left: 0;
   right: 0;
@@ -523,24 +527,24 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c56:focus {
+.c57:focus {
   outline: none;
 }
 
-.c56[aria-disabled='true'] {
+.c57[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c59 {
+.c60 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c61 {
+.c62 {
   padding-left: 12px;
 }
 
-.c52 {
+.c53 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -554,7 +558,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c54 {
+.c55 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -568,7 +572,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c57 {
+.c58 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -586,7 +590,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c60 {
+.c61 {
   color: #32324d;
   display: block;
   white-space: nowrap;
@@ -596,12 +600,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c53 > * {
+.c54 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c55 {
+.c56 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -617,28 +621,28 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c55:focus-within {
+.c56:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c62 {
+.c63 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c62 svg {
+.c63 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c62 svg path {
+.c63 svg path {
   fill: #666687;
 }
 
-.c63 {
+.c64 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -647,19 +651,19 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c63 svg {
+.c64 svg {
   width: 0.375rem;
 }
 
-.c58 {
+.c59 {
   width: 100%;
 }
 
-.c47 {
+.c48 {
   right: 16px;
 }
 
-.c48 {
+.c49 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -673,16 +677,16 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c49 > * {
+.c50 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c49 > * + * {
+.c50 > * + * {
   margin-left: 8px;
 }
 
-.c50 {
+.c51 {
   position: absolute;
   top: 12px;
 }
@@ -863,7 +867,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: currentColor;
 }
 
-.c46 {
+.c47 {
   display: none;
 }
 
@@ -874,15 +878,20 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   user-select: none;
 }
 
-.c66 > * + * {
+.c40:focus {
+  outline: 2px solid #4945ff;
+  outline-offset: -2px;
+}
+
+.c67 > * + * {
   margin-left: 4px;
 }
 
-.c72 {
+.c73 {
   line-height: revert;
 }
 
-.c67 {
+.c68 {
   padding: 12px;
   border-radius: 4px;
   -webkit-text-decoration: none;
@@ -895,7 +904,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c67:after {
+.c68:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -910,55 +919,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c67:focus-visible {
+.c68:focus-visible {
   outline: none;
 }
 
-.c67:focus-visible:after {
+.c68:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
-.c69 {
-  padding: 12px;
-  border-radius: 4px;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  outline: none;
-}
-
-.c69:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c69:focus-visible {
-  outline: none;
-}
-
-.c69:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -970,25 +935,69 @@ exports[`BrowseStep renders and match snapshot 1`] = `
 }
 
 .c70 {
+  padding: 12px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  outline: none;
+}
+
+.c70:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c70:focus-visible {
+  outline: none;
+}
+
+.c70:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c71 {
   color: #271fe0;
   background: #ffffff;
 }
 
-.c70:hover {
+.c71:hover {
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c68 {
+.c69 {
   font-size: 0.7rem;
   pointer-events: none;
 }
 
-.c68 svg path {
+.c69 svg path {
   fill: #c0c0cf;
 }
 
-.c68:focus svg path,
+.c69:focus svg path,
-.c68:hover svg path {
+.c69:hover svg path {
   fill: #c0c0cf;
 }
 
@@ -1010,7 +1019,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c43 {
+.c44 {
   max-width: 100%;
 }
 
@@ -1207,24 +1216,24 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   overflow="hidden"
                 >
                   <button
-                    class="c39"
+                    class="c39 c40"
                     type="button"
                   >
                     <h2
-                      class="c40 c41"
+                      class="c41 c42"
                     >
                       <span
-                        class="c42 c43"
+                        class="c43 c44"
                       >
                         Folder 1
                         <div
-                          class="c44"
+                          class="c45"
                         >
                           :
                         </div>
                       </span>
                       <span
-                        class="c45 c43"
+                        class="c46 c44"
                       >
                         1 folder, 1 asset
                       </span>
@@ -1232,10 +1241,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </button>
                 </div>
                 <div
-                  class="c46"
+                  class="c47"
                 >
                   <div
-                    class="c47 c48 c49 c50"
+                    class="c48 c49 c50 c51"
                     spacing="2"
                   />
                 </div>
@@ -1246,17 +1255,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c51"
+      class="c52"
     >
       <div
         class="c20"
       >
         <div>
           <div
-            class="c52 c53"
+            class="c53 c54"
           >
             <div
-              class="c54 c55"
+              class="c55 c56"
             >
               <button
                 aria-disabled="false"
@@ -1264,21 +1273,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Entries per page"
                 aria-labelledby="select-1-label select-1-content"
-                class="c56"
+                class="c57"
                 id="select-1"
                 type="button"
               />
               <div
-                class="c57 c58"
+                class="c58 c59"
               >
                 <div
-                  class="c54"
+                  class="c55"
                 >
                   <div
-                    class="c59"
+                    class="c60"
                   >
                     <span
-                      class="c60"
+                      class="c61"
                       id="select-1-content"
                     >
                       10
@@ -1286,11 +1295,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c54"
+                  class="c55"
                 >
                   <button
                     aria-hidden="true"
-                    class="c61 c62 c63"
+                    class="c62 c63 c64"
                     tabindex="-1"
                     type="button"
                   >
@@ -1315,10 +1324,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c64"
+          class="c65"
         >
           <label
-            class="c65"
+            class="c66"
             for="page-size"
           >
             Entries per page
@@ -1327,20 +1336,20 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-bxYNtK"
+        class="sc-PDIEN"
       >
         <ul
-          class="c20 c66"
+          class="c20 c67"
         >
           <li>
             <button
               aria-disabled="true"
-              class="c67 c68"
+              class="c68 c69"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c44"
+                class="c45"
               >
                 Go to previous page
               </div>
@@ -1361,17 +1370,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </li>
           <li>
             <button
-              class="c69 c70"
+              class="c70 c71"
               type="button"
             >
               <div
-                class="c44"
+                class="c45"
               >
                 Go to page 1
               </div>
               <span
                 aria-hidden="true"
-                class="c71 c72"
+                class="c72 c73"
               >
                 1
               </span>
@@ -1380,12 +1389,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           <li>
             <button
               aria-disabled="true"
-              class="c67 c68"
+              class="c68 c69"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c44"
+                class="c45"
               >
                 Go to next page
               </div>
@@ -1409,7 +1418,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c73"
+    class="c74"
   >
     <p
       aria-live="polite"

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

@@ -64,6 +64,9 @@ export const FolderCard = forwardRef(
 
           <Stack
             hasRadius
+            borderStyle="solid"
+            borderWidth="1px"
+            borderColor="neutral150"
             background="neutral0"
             shadow="tableShadow"
             padding={3}

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

@@ -4,16 +4,33 @@ import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 
-const BoxTextDecoration = styled(Box)`
+const BoxOutline = styled(Box)`
+  &:focus {
+    outline: 2px solid ${({ theme }) => theme.colors.primary600};
+    outline-offset: -2px;
+  }
+`;
+
+const BoxTextDecoration = styled(BoxOutline)`
   text-decoration: none;
 `;
 
 export const FolderCardBodyAction = ({ to, ...props }) => {
   if (to) {
-    return <BoxTextDecoration as={NavLink} maxWidth="100%" to={to} {...props} />;
+    return (
+      <BoxTextDecoration
+        // padding needed to give outline space to appear
+        // since FolderCardBody needs overflow hidden property
+        padding={1}
+        as={NavLink}
+        maxWidth="100%"
+        to={to}
+        {...props}
+      />
+    );
   }
 
-  return <Box as="button" type="button" maxWidth="100%" {...props} />;
+  return <BoxOutline padding={1} as="button" type="button" maxWidth="100%" {...props} />;
 };
 
 FolderCardBodyAction.defaultProps = {

packages/core/upload/admin/src/components/FolderCard/tests/__snapshots__/FolderCard.test.js.snap

@@ -21,7 +21,7 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
   flex-direction: column;
 }
 
-.c19 {
+.c20 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -33,7 +33,7 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
   width: 1px;
 }
 
-.c13 {
+.c14 {
   font-weight: 500;
   color: #32324d;
   font-size: 0.875rem;
@@ -128,6 +128,7 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
 }
 
 .c12 {
+  padding: 4px;
   max-width: 100%;
 }
 
@@ -135,6 +136,9 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
   background: #ffffff;
   padding: 12px;
   border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #eaeaef;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
   cursor: pointer;
   cursor: pointer;
@@ -163,11 +167,11 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
   margin-left: 8px;
 }
 
-.c15 {
+.c16 {
   right: 16px;
 }
 
-.c16 {
+.c17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -181,16 +185,16 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
   flex-direction: row;
 }
 
-.c17 > * {
+.c18 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c17 > * + * {
+.c18 > * + * {
   margin-left: 8px;
 }
 
-.c18 {
+.c19 {
   position: absolute;
   top: 12px;
 }
@@ -214,7 +218,7 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
   fill: currentColor;
 }
 
-.c14 {
+.c15 {
   display: none;
 }
 
@@ -225,6 +229,11 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
   user-select: none;
 }
 
+.c13:focus {
+  outline: 2px solid #4945ff;
+  outline-offset: -2px;
+}
+
 <div>
   <div
     class="c0 "
@@ -274,14 +283,14 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
         overflow="hidden"
       >
         <button
-          class="c12"
+          class="c12 c13"
           type="button"
         >
           <div
             class="c10"
           >
             <span
-              class="c13"
+              class="c14"
             >
               Pictures
             </span>
@@ -289,17 +298,17 @@ exports[`FolderCard has all required ids set when rendering a start action 1`] =
         </button>
       </h2>
       <div
-        class="c14"
+        class="c15"
       >
         <div
-          class="c15 c16 c17 c18"
+          class="c16 c17 c18 c19"
           spacing="2"
         />
       </div>
     </div>
   </div>
   <div
-    class="c19"
+    class="c20"
   >
     <p
       aria-live="polite"
@@ -344,7 +353,7 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c17 {
+.c18 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -356,7 +365,7 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c11 {
+.c12 {
   font-weight: 500;
   color: #32324d;
   font-size: 0.875rem;
@@ -378,6 +387,7 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
 }
 
 .c10 {
+  padding: 4px;
   max-width: 100%;
 }
 
@@ -385,6 +395,9 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
   background: #ffffff;
   padding: 12px;
   border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #eaeaef;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
   cursor: pointer;
   cursor: pointer;
@@ -413,11 +426,11 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
   margin-left: 8px;
 }
 
-.c13 {
+.c14 {
   right: 16px;
 }
 
-.c14 {
+.c15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -431,16 +444,16 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c15 > * {
+.c16 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c15 > * + * {
+.c16 > * + * {
   margin-left: 8px;
 }
 
-.c16 {
+.c17 {
   position: absolute;
   top: 12px;
 }
@@ -464,7 +477,7 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
   fill: currentColor;
 }
 
-.c12 {
+.c13 {
   display: none;
 }
 
@@ -475,6 +488,11 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
   user-select: none;
 }
 
+.c11:focus {
+  outline: 2px solid #4945ff;
+  outline-offset: -2px;
+}
+
 <div>
   <div
     class="c0 "
@@ -515,14 +533,14 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
         overflow="hidden"
       >
         <button
-          class="c10"
+          class="c10 c11"
           type="button"
         >
           <div
             class="c8"
           >
             <span
-              class="c11"
+              class="c12"
             >
               Pictures
             </span>
@@ -530,17 +548,17 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
         </button>
       </h2>
       <div
-        class="c12"
+        class="c13"
       >
         <div
-          class="c13 c14 c15 c16"
+          class="c14 c15 c16 c17"
           spacing="2"
         />
       </div>
     </div>
   </div>
   <div
-    class="c17"
+    class="c18"
   >
     <p
       aria-live="polite"