Fix pageSize compo

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DynamicTable renders and matches the snapshot 1`] = `
-.c24 {
+.c28 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,21 +13,14 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c4 {
+.c23 {
   font-weight: 500;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #32324d;
 }
 
-.c10 {
+.c26 {
-  font-weight: 400;
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #32324d;
-}
-
-.c22 {
   font-weight: 400;
   font-size: 0.75rem;
   line-height: 1.33;
@@ -38,15 +31,6 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   padding-top: 24px;
 }
 
-.c9 {
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
-.c11 {
-  padding-left: 12px;
-}
-
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -65,6 +49,111 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   align-items: flex-end;
 }
 
+.c16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c20 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c17 > * + * {
+  margin-left: 4px;
+}
+
+.c24 {
+  line-height: revert;
+}
+
+.c18 {
+  padding: 12px;
+  border-radius: 4px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c21 {
+  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;
+}
+
+.c22 {
+  color: #271fe0;
+  background: #ffffff;
+}
+
+.c22:hover {
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+}
+
+.c25 {
+  color: #32324d;
+}
+
+.c25:hover {
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+}
+
+.c19 {
+  font-size: 0.7rem;
+  pointer-events: none;
+}
+
+.c19 svg path {
+  fill: #c0c0cf;
+}
+
+.c19:focus svg path,
+.c19:hover svg path {
+  fill: #c0c0cf;
+}
+
+.c27 {
+  font-size: 0.7rem;
+}
+
+.c27 svg path {
+  fill: #666687;
+}
+
+.c27:focus svg path,
+.c27:hover svg path {
+  fill: #4a4a6a;
+}
+
+.c14 {
+  padding-left: 8px;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -79,7 +168,38 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c7 {
+.c5 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  background: transparent;
+  border: none;
+}
+
+.c5:focus {
+  outline: none;
+}
+
+.c10 {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #32324d;
+}
+
+.c9 {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c11 {
+  padding-left: 12px;
+}
+
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -97,16 +217,18 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c17 {
+.c8 {
-  border: 0;
+  display: -webkit-box;
-  -webkit-clip: rect(0 0 0 0);
+  display: -webkit-flex;
-  clip: rect(0 0 0 0);
+  display: -ms-flexbox;
-  height: 1px;
+  display: flex;
-  margin: -1px;
+  -webkit-flex-direction: row;
-  overflow: hidden;
+  -ms-flex-direction: row;
-  padding: 0;
+  flex-direction: row;
-  position: absolute;
+  -webkit-align-items: center;
-  width: 1px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c3 {
@@ -125,10 +247,10 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
 }
 
 .c3 > * + * {
-  margin-top: 4px;
+  margin-top: 0px;
 }
 
-.c5 {
+.c4 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -137,7 +259,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   overflow: hidden;
 }
 
-.c5:focus-within {
+.c4:focus-within {
   border: 1px solid #4945ff;
 }
 
@@ -170,98 +292,15 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
   width: 0.375rem;
 }
 
-.c14 > * + * {
+.c7 {
-  margin-left: 4px;
+  min-height: 2.5rem;
-}
-
-.c20 {
-  line-height: revert;
 }
 
 .c15 {
-  padding: 12px;
+  font-weight: 400;
-  border-radius: 4px;
+  font-size: 0.875rem;
-  -webkit-text-decoration: none;
+  line-height: 1.43;
-  text-decoration: none;
+  color: #666687;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c18 {
-  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;
-}
-
-.c19 {
-  color: #271fe0;
-  background: #ffffff;
-}
-
-.c19:hover {
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-}
-
-.c21 {
-  color: #32324d;
-}
-
-.c21:hover {
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-}
-
-.c16 {
-  font-size: 0.7rem;
-  pointer-events: none;
-}
-
-.c16 svg path {
-  fill: #c0c0cf;
-}
-
-.c16:focus svg path,
-.c16:hover svg path {
-  fill: #c0c0cf;
-}
-
-.c23 {
-  font-size: 0.7rem;
-}
-
-.c23 svg path {
-  fill: #666687;
-}
-
-.c23:focus svg path,
-.c23:hover svg path {
-  fill: #4a4a6a;
-}
-
-.c6 {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  width: 100%;
-  background: transparent;
-  border: none;
-}
-
-.c6:focus {
-  outline: none;
-}
-
-.c8 {
-  min-height: 2.5rem;
 }
 
 <div>
@@ -278,30 +317,24 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
           <div
             class="c3"
           >
-            <span
-              class="c4"
-              for="select-1"
-              id="select-1-label"
-            >
-              Entries per page
-            </span>
             <div
-              class="c5"
+              class="c4"
             >
               <button
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="listbox"
+                aria-label="Entries per page"
                 aria-labelledby="select-1-label select-1-content"
-                class="c6"
+                class="c5"
                 id="select-1"
                 type="button"
               />
               <div
-                class="c7 c8"
+                class="c6 c7"
               >
                 <div
-                  class="c2"
+                  class="c8"
                 >
                   <div
                     class="c9"
@@ -315,7 +348,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c2"
+                  class="c8"
                 >
                   <button
                     aria-hidden="true"
@@ -343,24 +376,34 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="c14"
+        >
+          <label
+            class="c15"
+            for="page-size"
+          >
+            Entries per page
+          </label>
+        </div>
       </div>
       <nav
         aria-label="pagination"
         class=""
       >
         <ul
-          class="c2 c14"
+          class="c16 c17"
         >
           <li>
             <a
               aria-current="page"
               aria-disabled="true"
-              class="c15 c16 active"
+              class="c18 c19 active"
               href="/settings/user"
               tabindex="-1"
             >
               <div
-                class="c17"
+                class="c20"
               >
                 Go to previous page
               </div>
@@ -382,17 +425,17 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
           <li>
             <a
               aria-current="page"
-              class="c18 c19 active"
+              class="c21 c22 active"
               href="/settings/user?pageSize=10&page=1&sort=firstname"
             >
               <div
-                class="c17"
+                class="c20"
               >
                 Go to page 1
               </div>
               <span
                 aria-hidden="true"
-                class="c4 c20"
+                class="c23 c24"
               >
                 1
               </span>
@@ -401,17 +444,17 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
           <li>
             <a
               aria-current="page"
-              class="c15 c21 active"
+              class="c18 c25 active"
               href="/settings/user?pageSize=10&page=2&sort=firstname"
             >
               <div
-                class="c17"
+                class="c20"
               >
                 Go to page 2
               </div>
               <span
                 aria-hidden="true"
-                class="c22 c20"
+                class="c26 c24"
               >
                 2
               </span>
@@ -421,11 +464,11 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
             <a
               aria-current="page"
               aria-disabled="false"
-              class="c15 c23 active"
+              class="c18 c27 active"
               href="/settings/user?pageSize=10&page=2&sort=firstname"
             >
               <div
-                class="c17"
+                class="c20"
               >
                 Go to next page
               </div>
@@ -449,7 +492,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c24"
+    class="c28"
   >
     <p
       aria-live="polite"

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js

@@ -156,15 +156,6 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         padding-top: 24px;
       }
 
-      .c51 {
-        padding-right: 16px;
-        padding-left: 16px;
-      }
-
-      .c52 {
-        padding-left: 12px;
-      }
-
       .c3 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -488,67 +479,6 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         fill: #32324d;
       }
 
-      .c47 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c47 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c47 > * + * {
-        margin-top: 4px;
-      }
-
-      .c48 {
-        position: relative;
-        border: 1px solid #dcdce4;
-        padding-right: 12px;
-        border-radius: 4px;
-        background: #ffffff;
-        overflow: hidden;
-      }
-
-      .c48:focus-within {
-        border: 1px solid #4945ff;
-      }
-
-      .c53 {
-        background: transparent;
-        border: none;
-        position: relative;
-        z-index: 1;
-      }
-
-      .c53 svg {
-        height: 0.6875rem;
-        width: 0.6875rem;
-      }
-
-      .c53 svg path {
-        fill: #666687;
-      }
-
-      .c54 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        background: none;
-        border: none;
-      }
-
-      .c54 svg {
-        width: 0.375rem;
-      }
-
       .c44 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
@@ -603,11 +533,11 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         outline: none;
       }
 
-      .c55 > * + * {
+      .c61 > * + * {
         margin-left: 4px;
       }
 
-      .c56 {
+      .c62 {
         padding: 12px;
         border-radius: 4px;
         -webkit-text-decoration: none;
@@ -618,52 +548,33 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         display: flex;
       }
 
-      .c57 {
+      .c63 {
         font-size: 0.7rem;
         pointer-events: none;
       }
 
-      .c57 svg path {
+      .c63 svg path {
         fill: #c0c0cf;
       }
 
-      .c57:focus svg path,
+      .c63:focus svg path,
-      .c57:hover svg path {
+      .c63:hover svg path {
         fill: #c0c0cf;
       }
 
-      .c58 {
+      .c64 {
         font-size: 0.7rem;
       }
 
-      .c58 svg path {
+      .c64 svg path {
         fill: #666687;
       }
 
-      .c58:focus svg path,
+      .c64:focus svg path,
-      .c58:hover svg path {
+      .c64:hover svg path {
         fill: #4a4a6a;
       }
 
-      .c49 {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        width: 100%;
-        background: transparent;
-        border: none;
-      }
-
-      .c49:focus {
-        outline: none;
-      }
-
-      .c50 {
-        min-height: 2.5rem;
-      }
-
       .c29 {
         width: 100%;
         white-space: nowrap;
@@ -732,6 +643,10 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         height: 0.25rem;
       }
 
+      .c59 {
+        padding-left: 8px;
+      }
+
       .c19 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -798,6 +713,148 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         fill: #666687;
       }
 
+      .c47 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c50 {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        width: 100%;
+        background: transparent;
+        border: none;
+      }
+
+      .c50:focus {
+        outline: none;
+      }
+
+      .c55 {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #32324d;
+      }
+
+      .c54 {
+        padding-right: 16px;
+        padding-left: 16px;
+      }
+
+      .c56 {
+        padding-left: 12px;
+      }
+
+      .c51 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c53 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c48 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c48 > * {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .c48 > * + * {
+        margin-top: 0px;
+      }
+
+      .c49 {
+        position: relative;
+        border: 1px solid #dcdce4;
+        padding-right: 12px;
+        border-radius: 4px;
+        background: #ffffff;
+        overflow: hidden;
+      }
+
+      .c49:focus-within {
+        border: 1px solid #4945ff;
+      }
+
+      .c57 {
+        background: transparent;
+        border: none;
+        position: relative;
+        z-index: 1;
+      }
+
+      .c57 svg {
+        height: 0.6875rem;
+        width: 0.6875rem;
+      }
+
+      .c57 svg path {
+        fill: #666687;
+      }
+
+      .c58 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        background: none;
+        border: none;
+      }
+
+      .c58 svg {
+        width: 0.375rem;
+      }
+
+      .c52 {
+        min-height: 2.5rem;
+      }
+
       .c39 tr:last-of-type {
         border-bottom: none;
       }
@@ -827,6 +884,13 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
         vertical-align: sub;
       }
 
+      .c60 {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #666687;
+      }
+
       .c37 {
         -webkit-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
@@ -1250,54 +1314,48 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
               class="c1 c46"
             >
               <div
-                class="c1 c4"
+                class="c47"
               >
                 <div>
                   <div
-                    class="c1 c47"
+                    class="c48"
                   >
-                    <span
-                      class="c10 c23"
-                      for="select-15"
-                      id="select-15-label"
-                    >
-                      Entries per page
-                    </span>
                     <div
-                      class="c48"
+                      class="c49"
                     >
                       <button
                         aria-disabled="false"
                         aria-expanded="false"
                         aria-haspopup="listbox"
-                        aria-labelledby="select-15-label select-15-content"
+                        aria-label="Entries per page"
-                        class="c49"
+                        aria-labelledby="select-1-label select-1-content"
-                        id="select-15"
+                        class="c50"
+                        id="select-1"
                         type="button"
                       />
                       <div
-                        class="c1 c3 c50"
+                        class="c51 c52"
                       >
                         <div
-                          class="c1 c4"
+                          class="c53"
                         >
                           <div
-                            class="c1 c51"
+                            class="c54"
                           >
                             <span
-                              class="c10 c11"
+                              class="c55"
-                              id="select-15-content"
+                              id="select-1-content"
                             >
                               10
                             </span>
                           </div>
                         </div>
                         <div
-                          class="c1 c4"
+                          class="c53"
                         >
                           <button
                             aria-hidden="true"
-                            class="c1 c52 c53 c54"
+                            class="c56 c57 c58"
                             tabindex="-1"
                             type="button"
                           >
@@ -1321,19 +1379,29 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                     </div>
                   </div>
                 </div>
+                <div
+                  class="c59"
+                >
+                  <label
+                    class="c60"
+                    for="page-size"
+                  >
+                    Entries per page
+                  </label>
+                </div>
               </div>
               <nav
                 aria-label="pagination"
                 class=""
               >
                 <ul
-                  class="c1 c4 c55"
+                  class="c1 c4 c61"
                 >
                   <li>
                     <a
                       aria-current="page"
                       aria-disabled="true"
-                      class="c56 c57 active"
+                      class="c62 c63 active"
                       href="/settings/user"
                       tabindex="-1"
                     >
@@ -1361,7 +1429,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                     <a
                       aria-current="page"
                       aria-disabled="false"
-                      class="c56 c58 active"
+                      class="c62 c64 active"
                       href="/settings/user?pageSize=10&page=1&sort=firstname"
                     >
                       <div

packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/index.js

@@ -126,7 +126,7 @@ const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source }
                   defaultMessage: 'Select field',
                 })}
                 name="name"
-                size="L"
+                size="M"
                 onChange={handleChangeFilterField}
                 value={modifiedData.name}
               >
@@ -146,7 +146,7 @@ const FilterPopoverURLQuery = ({ displayedFilters, isVisible, onToggle, source }
                   defaultMessage: 'Select filter',
                 })}
                 name="filter"
-                size="L"
+                size="M"
                 value={modifiedData.filter}
                 onChange={handleChangeOperator}
               >

packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js

@@ -5,8 +5,11 @@
  */
 
 import React from 'react';
-import { Row, Select, Option } from '@strapi/parts';
 import { useIntl } from 'react-intl';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Select, Option } from '@strapi/parts/Select';
+import { Text } from '@strapi/parts/Text';
 import PropTypes from 'prop-types';
 import useQueryParams from '../../hooks/useQueryParams';
 import useTracking from '../../hooks/useTracking';
@@ -31,7 +34,7 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
   return (
     <Row>
       <Select
-        label={formatMessage({
+        aria-label={formatMessage({
           id: 'components.PageFooter.select',
           defaultMessage: 'Entries per page',
         })}
@@ -43,14 +46,14 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
         <Option value="50">50</Option>
         <Option value="100">100</Option>
       </Select>
-      {/* <Box paddingLeft={2}>
+      <Box paddingLeft={2}>
-         <Text textColor="neutral600" as="label" htmlFor="page-size">
+        <Text textColor="neutral600" as="label" htmlFor="page-size">
-           {formatMessage({
+          {formatMessage({
-             id: 'components.PageFooter.select',
+            id: 'components.PageFooter.select',
-             defaultMessage: 'Entries per page',
+            defaultMessage: 'Entries per page',
-           })}
+          })}
-         </Text>
+        </Text>
-       </Box> */}
+      </Box>
     </Row>
   );
 };

packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js

@@ -39,11 +39,37 @@ describe('<PageSizeURLQuery />', () => {
     } = render(makeApp(history));
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c2 {
+      .c12 {
-        font-weight: 500;
+        padding-left: 8px;
-        font-size: 0.75rem;
+      }
-        line-height: 1.33;
+
-        color: #32324d;
+      .c0 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c3 {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        width: 100%;
+        background: transparent;
+        border: none;
+      }
+
+      .c3:focus {
+        outline: none;
       }
 
       .c8 {
@@ -62,21 +88,7 @@ describe('<PageSizeURLQuery />', () => {
         padding-left: 12px;
       }
 
-      .c0 {
+      .c4 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c5 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -94,6 +106,20 @@ describe('<PageSizeURLQuery />', () => {
         align-items: center;
       }
 
+      .c6 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
       .c1 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -110,10 +136,10 @@ describe('<PageSizeURLQuery />', () => {
       }
 
       .c1 > * + * {
-        margin-top: 4px;
+        margin-top: 0px;
       }
 
-      .c3 {
+      .c2 {
         position: relative;
         border: 1px solid #dcdce4;
         padding-right: 12px;
@@ -122,7 +148,7 @@ describe('<PageSizeURLQuery />', () => {
         overflow: hidden;
       }
 
-      .c3:focus-within {
+      .c2:focus-within {
         border: 1px solid #4945ff;
       }
 
@@ -155,25 +181,17 @@ describe('<PageSizeURLQuery />', () => {
         width: 0.375rem;
       }
 
-      .c4 {
+      .c5 {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        width: 100%;
-        background: transparent;
-        border: none;
-      }
-
-      .c4:focus {
-        outline: none;
-      }
-
-      .c6 {
         min-height: 2.5rem;
       }
 
+      .c13 {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #666687;
+      }
+
       <div
         class="c0"
       >
@@ -181,30 +199,24 @@ describe('<PageSizeURLQuery />', () => {
           <div
             class="c1"
           >
-            <span
-              class="c2"
-              for="select-1"
-              id="select-1-label"
-            >
-              Entries per page
-            </span>
             <div
-              class="c3"
+              class="c2"
             >
               <button
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="listbox"
+                aria-label="Entries per page"
                 aria-labelledby="select-1-label select-1-content"
-                class="c4"
+                class="c3"
                 id="select-1"
                 type="button"
               />
               <div
-                class="c5 c6"
+                class="c4 c5"
               >
                 <div
-                  class="c0"
+                  class="c6"
                 >
                   <div
                     class="c7"
@@ -218,7 +230,7 @@ describe('<PageSizeURLQuery />', () => {
                   </div>
                 </div>
                 <div
-                  class="c0"
+                  class="c6"
                 >
                   <button
                     aria-hidden="true"
@@ -246,6 +258,16 @@ describe('<PageSizeURLQuery />', () => {
             </div>
           </div>
         </div>
+        <div
+          class="c12"
+        >
+          <label
+            class="c13"
+            for="page-size"
+          >
+            Entries per page
+          </label>
+        </div>
       </div>
     `);
 

packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js

@@ -130,26 +130,10 @@ describe('MediaLibrary / ListView', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c36 {
-        font-weight: 400;
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #32324d;
-      }
-
       .c27 {
         padding-top: 24px;
       }
 
-      .c35 {
-        padding-right: 16px;
-        padding-left: 16px;
-      }
-
-      .c37 {
-        padding-left: 12px;
-      }
-
       .c28 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -168,6 +152,84 @@ describe('MediaLibrary / ListView', () => {
         align-items: flex-end;
       }
 
+      .c43 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c47 {
+        border: 0;
+        -webkit-clip: rect(0 0 0 0);
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+      }
+
+      .c44 > * + * {
+        margin-left: 4px;
+      }
+
+      .c45 {
+        padding: 12px;
+        border-radius: 4px;
+        -webkit-text-decoration: none;
+        text-decoration: none;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+      }
+
+      .c46 {
+        font-size: 0.7rem;
+        pointer-events: none;
+      }
+
+      .c46 svg path {
+        fill: #c0c0cf;
+      }
+
+      .c46:focus svg path,
+      .c46:hover svg path {
+        fill: #c0c0cf;
+      }
+
+      .c48 {
+        font-size: 0.7rem;
+      }
+
+      .c48 svg path {
+        fill: #666687;
+      }
+
+      .c48:focus svg path,
+      .c48:hover svg path {
+        fill: #4a4a6a;
+      }
+
+      .c0 {
+        display: grid;
+        grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
+        grid-gap: 16px;
+      }
+
+      .c41 {
+        padding-left: 8px;
+      }
+
       .c29 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -182,6 +244,37 @@ describe('MediaLibrary / ListView', () => {
         align-items: center;
       }
 
+      .c32 {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        width: 100%;
+        background: transparent;
+        border: none;
+      }
+
+      .c32:focus {
+        outline: none;
+      }
+
+      .c37 {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #32324d;
+      }
+
+      .c36 {
+        padding-right: 16px;
+        padding-left: 16px;
+      }
+
+      .c38 {
+        padding-left: 12px;
+      }
+
       .c33 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -200,16 +293,18 @@ describe('MediaLibrary / ListView', () => {
         align-items: center;
       }
 
-      .c43 {
+      .c35 {
-        border: 0;
+        display: -webkit-box;
-        -webkit-clip: rect(0 0 0 0);
+        display: -webkit-flex;
-        clip: rect(0 0 0 0);
+        display: -ms-flexbox;
-        height: 1px;
+        display: flex;
-        margin: -1px;
+        -webkit-flex-direction: row;
-        overflow: hidden;
+        -ms-flex-direction: row;
-        padding: 0;
+        flex-direction: row;
-        position: absolute;
+        -webkit-align-items: center;
-        width: 1px;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
       }
 
       .c30 {
@@ -244,23 +339,23 @@ describe('MediaLibrary / ListView', () => {
         border: 1px solid #4945ff;
       }
 
-      .c38 {
+      .c39 {
         background: transparent;
         border: none;
         position: relative;
         z-index: 1;
       }
 
-      .c38 svg {
+      .c39 svg {
         height: 0.6875rem;
         width: 0.6875rem;
       }
 
-      .c38 svg path {
+      .c39 svg path {
         fill: #666687;
       }
 
-      .c39 {
+      .c40 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -269,75 +364,19 @@ describe('MediaLibrary / ListView', () => {
         border: none;
       }
 
-      .c39 svg {
+      .c40 svg {
         width: 0.375rem;
       }
 
-      .c40 > * + * {
-        margin-left: 4px;
-      }
-
-      .c41 {
-        padding: 12px;
-        border-radius: 4px;
-        -webkit-text-decoration: none;
-        text-decoration: none;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-      }
-
-      .c42 {
-        font-size: 0.7rem;
-        pointer-events: none;
-      }
-
-      .c42 svg path {
-        fill: #c0c0cf;
-      }
-
-      .c42:focus svg path,
-      .c42:hover svg path {
-        fill: #c0c0cf;
-      }
-
-      .c44 {
-        font-size: 0.7rem;
-      }
-
-      .c44 svg path {
-        fill: #666687;
-      }
-
-      .c44:focus svg path,
-      .c44:hover svg path {
-        fill: #4a4a6a;
-      }
-
-      .c32 {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        width: 100%;
-        background: transparent;
-        border: none;
-      }
-
-      .c32:focus {
-        outline: none;
-      }
-
       .c34 {
         min-height: 2.5rem;
       }
 
-      .c0 {
+      .c42 {
-        display: grid;
+        font-weight: 400;
-        grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
+        font-size: 0.875rem;
-        grid-gap: 16px;
+        line-height: 1.43;
+        color: #666687;
       }
 
       .c1 {
@@ -778,13 +817,13 @@ describe('MediaLibrary / ListView', () => {
                       class="c33 c34"
                     >
                       <div
-                        class="c29"
+                        class="c35"
                       >
                         <div
-                          class="c35"
+                          class="c36"
                         >
                           <span
-                            class="c36"
+                            class="c37"
                             id="select-1-content"
                           >
                             10
@@ -792,11 +831,11 @@ describe('MediaLibrary / ListView', () => {
                         </div>
                       </div>
                       <div
-                        class="c29"
+                        class="c35"
                       >
                         <button
                           aria-hidden="true"
-                          class="c37 c38 c39"
+                          class="c38 c39 c40"
                           tabindex="-1"
                           type="button"
                         >
@@ -820,24 +859,32 @@ describe('MediaLibrary / ListView', () => {
                   </div>
                 </div>
               </div>
+              <div
+                class="c41"
+              >
+                <label
+                  class="c42"
+                  for="page-size"
+                />
+              </div>
             </div>
             <nav
               aria-label="pagination"
               class=""
             >
               <ul
-                class="c29 c40"
+                class="c43 c44"
               >
                 <li>
                   <a
                     aria-current="page"
                     aria-disabled="true"
-                    class="c41 c42 active"
+                    class="c45 c46 active"
                     href="/"
                     tabindex="-1"
                   >
                     <div
-                      class="c43"
+                      class="c47"
                     />
                     <svg
                       aria-hidden="true"
@@ -858,11 +905,11 @@ describe('MediaLibrary / ListView', () => {
                   <a
                     aria-current="page"
                     aria-disabled="false"
-                    class="c41 c44 active"
+                    class="c45 c48 active"
                     href="/?page=1"
                   >
                     <div
-                      class="c43"
+                      class="c47"
                     />
                     <svg
                       aria-hidden="true"
@@ -884,7 +931,7 @@ describe('MediaLibrary / ListView', () => {
           </div>
         </div>
         <div
-          class="c43"
+          class="c47"
         >
           <p
             aria-live="polite"