Refine UI components and enhance documentation for contents management

Author: nilspzr

docs/_static/icons/contents.svg

@@ -14,7 +14,7 @@ Each action works on one or several items at once.
 
 ## Open the folder contents view
 
-Navigate to a folder, then select the {guilabel}`Contents` button — the folder icon — in the toolbar.
+Navigate to a folder, then select the {guilabel}`Contents` button <img alt="Contents" src="../_static/icons/contents.svg" class="inline"> in the toolbar.
 The view lists the items in the folder together with a toolbar of actions.
 
 ## Select the items to act on
@@ -34,10 +34,14 @@ Each action applies to the current selection.
 
 The {guilabel}`Short name` is the last segment of the item's URL.
 
-```{warning}
+````{warning}
 Changing the {guilabel}`Short name` changes the item's URL.
-Links and bookmarks that point to the old URL stop working.
+Existing links to the old URL no longer resolve unless a redirect is in place.
+
+```{todo}
+Replace the above sentence with a reference to the to-be-documented and to-be-created redirect feature in Aurora.
 ```
+````
 
 ## Change the workflow state
 

docs/how-to-guides/manage-folder-contents-in-bulk.md

@@ -4,6 +4,7 @@ import { Heading } from 'react-aria-components';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
+  Checkbox,
   DateTimePicker,
   Dialog,
   Input,
@@ -170,6 +171,11 @@ export default function PropertiesModal() {
               value={values.rights ?? ''}
               placeholder={mixedPlaceholder('rights')}
               onChange={(e) => setField('rights', e.target.value)}
+              className={`
+                rounded-lg border border-quanta-silver bg-quanta-air px-3 py-2
+                hover:bg-quanta-air
+                focus:border-quanta-sapphire
+              `}
             />
           </Field>
           <Field label={t('contents.modal_properties.creators')}>
@@ -181,21 +187,28 @@ export default function PropertiesModal() {
                 t('contents.modal_properties.creators_hint')
               }
               onChange={(e) => setField('creators', e.target.value)}
+              className={`
+                rounded-lg border border-quanta-silver bg-quanta-air px-3 py-2
+                hover:bg-quanta-air
+                focus:border-quanta-sapphire
+              `}
             />
           </Field>
-          <label className="flex items-center gap-2 text-sm">
-            <input
-              type="checkbox"
-              checked={!!values.exclude_from_nav}
-              onChange={(e) => setField('exclude_from_nav', e.target.checked)}
-            />
-            {t('contents.modal_properties.exclude_from_nav')}
-            {initial.exclude_from_nav.mixed && (
-              <span className="text-quanta-graphite">
-                ({t('contents.modal_properties.mixed')})
-              </span>
-            )}
-          </label>
+          <Checkbox
+            className="text-sm"
+            isSelected={!!values.exclude_from_nav}
+            onChange={(checked) => setField('exclude_from_nav', checked)}
+          >
+            <span className="relative top-px leading-5">
+              {t('contents.modal_properties.exclude_from_nav')}
+              {initial.exclude_from_nav.mixed && (
+                <span className="text-quanta-graphite">
+                  {' '}
+                  ({t('contents.modal_properties.mixed')})
+                </span>
+              )}
+            </span>
+          </Checkbox>
 
           <div className="mt-4 flex justify-center gap-3">
             <Button

packages/contents/components/PropertiesModal/PropertiesModal.tsx

@@ -101,7 +101,7 @@ export default function RenameModal() {
         <div className="mx-auto max-w-2xl">
           <table className="mb-6 w-full border-collapse text-sm">
             <thead>
-              <tr className="text-quanta-graphite border-b border-quanta-silver text-left">
+              <tr className="text-quanta-graphite text-left">
                 <th className="pb-2 font-normal">
                   {t('contents.modal_rename.columns.name')}
                 </th>
@@ -112,13 +112,18 @@ export default function RenameModal() {
             </thead>
             <tbody>
               {rows.map((row, index) => (
-                <tr key={row['@id']} className="border-b border-quanta-silver">
+                <tr key={row['@id']}>
                   <td className="py-3 pe-3">
                     <Input
                       type="text"
                       value={row.id}
                       onChange={(e) => updateRow(index, 'id', e.target.value)}
                       aria-label={`${t('contents.modal_rename.columns.name')}: ${row.originalId}`}
+                      className={`
+                        w-full rounded-lg border border-quanta-silver bg-quanta-air px-3 py-2
+                        hover:bg-quanta-air
+                        focus:border-quanta-sapphire
+                      `}
                     />
                   </td>
                   <td className="py-3">
@@ -129,6 +134,11 @@ export default function RenameModal() {
                         updateRow(index, 'title', e.target.value)
                       }
                       aria-label={`${t('contents.modal_rename.columns.title')}: ${row.originalTitle}`}
+                      className={`
+                        w-full rounded-lg border border-quanta-silver bg-quanta-air px-3 py-2
+                        hover:bg-quanta-air
+                        focus:border-quanta-sapphire
+                      `}
                     />
                   </td>
                 </tr>

packages/contents/components/RenameModal/RenameModal.tsx

@@ -2,8 +2,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { useFetcher, useRevalidator, type SubmitTarget } from 'react-router';
 import { Heading } from 'react-aria-components';
 import { useTranslation } from 'react-i18next';
-import { Button, Dialog, Input, Modal } from '@plone/components/quanta';
-import { CloseIcon, TagIcon } from '@plone/components/Icons';
+import { Button, Dialog, Modal } from '@plone/components/quanta';
+import { CloseIcon, TagIcon, ChevrondownIcon } from '@plone/components/Icons';
 import { type ToastItem } from '@plone/layout/config/toast';
 import { useContentsContext } from '../../providers/contents';
 import { buildTagsPayload, unionSubjects } from '../../helpers/tags';
@@ -114,12 +114,7 @@ export default function TagsModal() {
           <span className="mb-2 block text-sm font-bold">
             {t('contents.modal_tags.current_label')}
           </span>
-          <div
-            className={`
-              mb-5 flex min-h-12 flex-wrap items-center gap-2 rounded-lg border border-quanta-silver
-              bg-quanta-snow p-2
-            `}
-          >
+          <div className="mb-5 flex min-h-8 flex-wrap items-center gap-2">
             {visibleExisting.map((tag) => (
               <TagChip
                 key={`e-${tag}`}
@@ -145,21 +140,40 @@ export default function TagsModal() {
           <label className="mb-1 block text-sm font-bold" htmlFor="tags-add">
             {t('contents.modal_tags.add_label')}
           </label>
-          <Input
-            id="tags-add"
-            type="text"
-            list="tags-vocabulary"
-            value={input}
-            placeholder={t('contents.modal_tags.add_placeholder')}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                addTag(input);
-              }
-            }}
-            aria-label={t('contents.modal_tags.add_label')}
-          />
+          <div
+            className={`
+              flex items-center gap-2 rounded-lg border border-quanta-silver bg-quanta-air pe-3
+              transition-colors
+              focus-within:border-quanta-sapphire
+            `}
+          >
+            <input
+              id="tags-add"
+              type="text"
+              list="tags-vocabulary"
+              value={input}
+              placeholder={t('contents.modal_tags.add_placeholder')}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  addTag(input);
+                }
+              }}
+              aria-label={t('contents.modal_tags.add_label')}
+              className={`
+                min-w-0 flex-1 appearance-none bg-transparent py-2 ps-3 text-sm outline-0
+                placeholder:text-quanta-pigeon
+                [&::-webkit-calendar-picker-indicator]:hidden!
+                [&::-webkit-calendar-picker-indicator]:appearance-none
+              `}
+            />
+            <ChevrondownIcon
+              aria-hidden
+              size="base"
+              className="pointer-events-none shrink-0 text-quanta-pigeon"
+            />
+          </div>
           <p className="text-quanta-graphite mt-1 text-xs">
             {t('contents.modal_tags.add_hint')}
           </p>
@@ -209,7 +223,8 @@ function TagChip({
     <span
       className={`
         inline-flex items-center gap-1 rounded-full py-1 ps-3 pe-1 text-sm font-medium
-        ${added ? 'bg-quanta-tiffany text-quanta-puya' : 'bg-quanta-azure text-quanta-puya'}
+        text-quanta-space
+        ${added ? 'bg-quanta-tiffany' : 'bg-quanta-azure'}
       `}
     >
       {label}
@@ -218,13 +233,12 @@ function TagChip({
         onClick={onRemove}
         aria-label={t('contents.modal_tags.remove', { tag: label })}
         className={`
-          flex h-5 w-5 items-center justify-center rounded-full text-lg leading-none opacity-60
-          transition-colors
-          hover:bg-black/10 hover:opacity-100
+          flex h-5 w-5 items-center justify-center rounded-full transition-colors
+          hover:bg-black/10
           focus-visible:outline-2 focus-visible:outline-quanta-sapphire
         `}
       >
-        <span aria-hidden="true">×</span>
+        <CloseIcon aria-hidden className="h-3 w-3" />
       </button>
     </span>
   );

packages/contents/components/TagsModal/TagsModal.tsx

@@ -2,7 +2,14 @@ import { useEffect, useMemo, useState } from 'react';
 import { useFetcher, useRevalidator } from 'react-router';
 import { Heading } from 'react-aria-components';
 import { useTranslation } from 'react-i18next';
-import { Button, Dialog, Input, Modal } from '@plone/components/quanta';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  Input,
+  Modal,
+  Select,
+} from '@plone/components/quanta';
 import { CloseIcon, StateIcon } from '@plone/components/Icons';
 import { type ToastItem } from '@plone/layout/config/toast';
 import { useContentsContext } from '../../providers/contents';
@@ -114,32 +121,26 @@ export default function WorkflowModal() {
             </p>
           )}
 
-          <label className="grid gap-1 text-sm">
-            <span className="font-bold">
-              {t('contents.modal_workflow.transition')}
-            </span>
-            <select
-              className="rounded border border-quanta-silver p-2"
-              value={transition}
-              onChange={(e) => setTransition(e.target.value)}
+          <div className="grid gap-1 text-sm">
+            <Select
+              label={t('contents.modal_workflow.transition')}
+              labelClassnames="font-bold"
               aria-label={t('contents.modal_workflow.transition')}
-              disabled={loadingTransitions}
-            >
-              <option value="">
-                {t('contents.modal_workflow.select_transition')}
-              </option>
-              {transitions.map((tr) => (
-                <option key={tr.id} value={tr.id}>
-                  {tr.title}
-                </option>
-              ))}
-            </select>
+              items={transitions.map((tr) => ({
+                label: tr.title,
+                value: tr.id,
+              }))}
+              selectedKey={transition || null}
+              onSelectionChange={(key) => setTransition(String(key))}
+              placeholder={t('contents.modal_workflow.select_transition')}
+              isDisabled={loadingTransitions}
+            />
             {!loadingTransitions && transitions.length === 0 && (
               <span className="text-quanta-candy">
                 {t('contents.modal_workflow.no_common_transitions')}
               </span>
             )}
-          </label>
+          </div>
 
           <label className="grid gap-1 text-sm">
             <span className="font-bold">
@@ -150,17 +151,23 @@ export default function WorkflowModal() {
               value={comment}
               onChange={(e) => setComment(e.target.value)}
               aria-label={t('contents.modal_workflow.comment')}
+              className={`
+                rounded-lg border border-quanta-silver bg-quanta-air px-3 py-2
+                hover:bg-quanta-air
+                focus:border-quanta-sapphire
+              `}
             />
           </label>
 
-          <label className="flex items-center gap-2 text-sm">
-            <input
-              type="checkbox"
-              checked={includeChildren}
-              onChange={(e) => setIncludeChildren(e.target.checked)}
-            />
-            {t('contents.modal_workflow.include_children')}
-          </label>
+          <Checkbox
+            className="text-sm"
+            isSelected={includeChildren}
+            onChange={setIncludeChildren}
+          >
+            <span className="relative top-px leading-5">
+              {t('contents.modal_workflow.include_children')}
+            </span>
+          </Checkbox>
 
           <div className="mt-4 flex justify-center gap-3">
             <Button