fix(ui): inconsistent pill sizes across admin panel (#12788)

### What?
Fixes inconsistent `pill` sizes across the Admin Panel.

### How?
Pills without a specified size default to **medium**. In the folders
[PR](#10030), additional
padding was to the medium size. As a result, any pills without an
explicit size now appear larger than intended.

This PR fixes that by updating any pills that should be small to
explicitly set `size="small"`.

Fixes #12752

Author: jessrynkar

packages/next/src/views/Version/SelectComparison/index.tsx

@@ -143,7 +143,7 @@ export const SelectComparison: React.FC<Props> = (props) => {
               const formattedLabel = locale?.label?.[i18n?.language] || locale?.label
 
               if (formattedLabel) {
-                publishedLocalePill = <Pill>{formattedLabel}</Pill>
+                publishedLocalePill = <Pill size="small">{formattedLabel}</Pill>
               }
             }
 

packages/next/src/views/Versions/cells/AutosaveCell/index.tsx

@@ -71,13 +71,13 @@ export const AutosaveCell: React.FC<AutosaveCellProps> = ({
     const formattedLabel = locale?.label?.[i18n?.language] || locale?.label
 
     if (formattedLabel) {
-      publishedLocalePill = <Pill>{formattedLabel}</Pill>
+      publishedLocalePill = <Pill size="small">{formattedLabel}</Pill>
     }
   }
 
   return (
     <div className={`${baseClass}__items`}>
-      {rowData?.autosave && <Pill>{t('version:autosave')}</Pill>}
+      {rowData?.autosave && <Pill size="small">{t('version:autosave')}</Pill>}
       {status && renderPill(rowData, latestVersion, currentLabel, previousLabel, pillStyle)}
       {publishedLocalePill}
     </div>

packages/plugin-search/src/Search/ui/ReindexButton/ReindexButtonLabel/index.tsx

@@ -5,7 +5,7 @@ export const ReindexButtonLabel = () => {
     i18n: { t },
   } = useTranslation()
   return (
-    <Pill className="pill--has-action" icon={<ChevronIcon />} pillStyle="light">
+    <Pill className="pill--has-action" icon={<ChevronIcon />} pillStyle="light" size="small">
       {t('general:reindex')}
     </Pill>
   )

packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx

@@ -92,6 +92,7 @@ export function FileSidebar() {
               <Pill
                 className={`${baseClass}__header__addFile`}
                 onClick={() => openModal(addMoreFilesDrawerSlug)}
+                size="small"
               >
                 {t('upload:addFile')}
               </Pill>

packages/ui/src/elements/ListHeader/DrawerTitleActions/ListDrawerCreateNewDocButton.tsx

@@ -25,7 +25,7 @@ export function ListDrawerCreateNewDocButton({
       className={`${baseClass}__create-new-button`}
       key="create-new-button-toggler"
     >
-      <Pill>{t('general:createNew')}</Pill>
+      <Pill size="small">{t('general:createNew')}</Pill>
     </DocumentDrawerToggler>
   )
 }

packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx

@@ -41,7 +41,7 @@ export const buildUpcomingColumns = ({
         const type = doc.input?.type
 
         return (
-          <Pill key={doc.id} pillStyle={type === 'publish' ? 'success' : 'warning'}>
+          <Pill key={doc.id} pillStyle={type === 'publish' ? 'success' : 'warning'} size="small">
             {type === 'publish' && t('version:publish')}
             {type === 'unpublish' && t('version:unpublish')}
           </Pill>

packages/ui/src/elements/QueryPresets/cells/ColumnsCell/index.tsx

@@ -21,7 +21,7 @@ export const QueryPresetsColumnsCell: React.FC<DefaultCellComponentProps> = ({ c
             }
 
             return (
-              <Pill key={i} pillStyle={isColumnActive ? 'always-white' : 'light'}>
+              <Pill key={i} pillStyle={isColumnActive ? 'always-white' : 'light'} size="small">
                 {toWords(column)}
               </Pill>
             )

packages/ui/src/elements/QueryPresets/fields/ColumnsField/index.tsx

@@ -23,7 +23,11 @@ export const QueryPresetsColumnField: JSONFieldClientComponent = ({
               const isColumnActive = !column.startsWith('-')
 
               return (
-                <Pill key={i} pillStyle={isColumnActive ? 'always-white' : 'light-gray'}>
+                <Pill
+                  key={i}
+                  pillStyle={isColumnActive ? 'always-white' : 'light-gray'}
+                  size="small"
+                >
                   {toWords(column)}
                 </Pill>
               )

packages/ui/src/elements/QueryPresets/fields/WhereField/index.tsx

@@ -44,7 +44,7 @@ const transformWhereToNaturalLanguage = (
     }
 
     return (
-      <Pill pillStyle="always-white">
+      <Pill pillStyle="always-white" size="small">
         <b>{toWords(key)}</b> {operator} <b>{toWords(value)}</b>
       </Pill>
     )

packages/ui/src/elements/RelationshipTable/index.tsx

@@ -300,6 +300,7 @@ export const RelationshipTable: React.FC<RelationshipTableComponentProps> = (pro
             icon={<ChevronIcon direction={openColumnSelector ? 'up' : 'down'} />}
             onClick={() => setOpenColumnSelector(!openColumnSelector)}
             pillStyle="light"
+            size="small"
           >
             {t('general:columns')}
           </Pill>