fix: improve focus/selected style on library authoring (#1918)

Improves the focus and selected styles from the LibraryPage and UnitPage.

Author: rpenido

src/generic/DraggableList/SortableItem.jsx

@@ -18,6 +18,7 @@ const SortableItem = ({
   isClickable,
   onClick,
   disabled,
+  cardClassName = '',
   // injected
   intl,
 }) => {
@@ -52,7 +53,7 @@ const SortableItem = ({
     >
       <Card
         style={style}
-        className="mx-0"
+        className={`mx-0 ${cardClassName}`}
         isClickable={isClickable}
       >
         <ActionRow style={actionStyle}>
@@ -94,6 +95,7 @@ SortableItem.propTypes = {
   isClickable: PropTypes.bool,
   onClick: PropTypes.func,
   disabled: PropTypes.bool,
+  cardClassName: PropTypes.string,
   // injected
   intl: intlShape.isRequired,
 };

src/library-authoring/components/BaseCard.scss

@@ -2,24 +2,56 @@
   .pgn__card {
     height: 100%;
     min-width: 15rem;
-  }
 
-  .library-item-header {
-    border-top-left-radius: .375rem;
-    border-top-right-radius: .375rem;
-    padding: 0 .5rem 0 1.25rem;
+    &::before {
+      border: none !important; // Remove default focus
+    }
+
+    &.selected:not(:focus) {
+      border: 2px $gray-700 solid;
+
+      .library-item-header {
+        border-top-left-radius: calc(.375rem - 2px);
+        border-top-right-radius: calc(.375rem - 2px);
+      }
+    }
+
+    &.selected:focus {
+      border: 3px $gray-700 solid;
 
-    .library-item-header-icon {
-      width: 2.3rem;
-      height: 2.3rem;
+      .library-item-header {
+        border-top-left-radius: calc(.375rem - 3px);
+        border-top-right-radius: calc(.375rem - 3px);
+      }
     }
 
-    .pgn__card-header-content {
-      margin-top: .55rem;
+    &:not(.selected):focus {
+      outline: 1px $gray-200 solid;
+      outline-offset: 2px;
     }
 
-    .pgn__card-header-actions {
-      margin: .25rem 0 .25rem 1rem;
+    &:not(.selected) {
+      .library-item-header {
+        border-top-left-radius: .375rem;
+        border-top-right-radius: .375rem;
+      }
+    }
+
+    .library-item-header {
+      padding: 0 .5rem 0 1.25rem;
+
+      .library-item-header-icon {
+        width: 2.3rem;
+        height: 2.3rem;
+      }
+
+      .pgn__card-header-content {
+        margin-top: .55rem;
+      }
+
+      .pgn__card-header-actions {
+        margin: .25rem 0 .25rem 1rem;
+      }
     }
   }
 

src/library-authoring/components/BaseCard.tsx

@@ -22,7 +22,8 @@ type BaseCardProps = {
   tags: ContentHitTags;
   actions: React.ReactNode;
   hasUnpublishedChanges?: boolean;
-  onSelect: () => void
+  onSelect: () => void;
+  selected?: boolean;
 };
 
 const BaseCard = ({
@@ -33,6 +34,7 @@ const BaseCard = ({
   tags,
   actions,
   onSelect,
+  selected = false,
   ...props
 } : BaseCardProps) => {
   const tagCount = useMemo(() => {
@@ -47,7 +49,7 @@ const BaseCard = ({
   const intl = useIntl();
 
   return (
-    <Container className="library-item-card">
+    <Container className="library-item-card selected">
       <Card
         isClickable
         onClick={onSelect}
@@ -56,6 +58,7 @@ const BaseCard = ({
             onSelect();
           }
         }}
+        className={selected ? 'selected' : undefined}
       >
         <Card.Header
           className={`library-item-header ${getComponentStyleColor(itemType)}`}

src/library-authoring/components/CollectionCard.tsx

@@ -13,7 +13,7 @@ import { Link } from 'react-router-dom';
 import { type CollectionHit } from '../../search-manager';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
-import { useSidebarContext } from '../common/context/SidebarContext';
+import { SidebarBodyComponentId, useSidebarContext } from '../common/context/SidebarContext';
 import { useLibraryRoutes } from '../routes';
 import BaseCard from './BaseCard';
 import { ToastContext } from '../../generic/toast-context';
@@ -115,7 +115,7 @@ type CollectionCardProps = {
 const CollectionCard = ({ hit } : CollectionCardProps) => {
   const { componentPickerMode } = useComponentPickerContext();
   const { showOnlyPublished } = useLibraryContext();
-  const { openCollectionInfoSidebar } = useSidebarContext();
+  const { openCollectionInfoSidebar, sidebarComponentInfo } = useSidebarContext();
 
   const {
     type: itemType,
@@ -132,6 +132,9 @@ const CollectionCard = ({ hit } : CollectionCardProps) => {
 
   const { displayName = '', description = '' } = formatted;
 
+  const selected = sidebarComponentInfo?.type === SidebarBodyComponentId.CollectionInfo
+    && sidebarComponentInfo.id === collectionId;
+
   const { navigateTo } = useLibraryRoutes();
   const openCollection = useCallback(() => {
     openCollectionInfoSidebar(collectionId);
@@ -154,6 +157,7 @@ const CollectionCard = ({ hit } : CollectionCardProps) => {
         </ActionRow>
       )}
       onSelect={openCollection}
+      selected={selected}
     />
   );
 };

src/library-authoring/components/ComponentCard.tsx

@@ -6,7 +6,7 @@ import {
 import { type ContentHit, PublishStatus } from '../../search-manager';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
-import { useSidebarContext } from '../common/context/SidebarContext';
+import { SidebarBodyComponentId, useSidebarContext } from '../common/context/SidebarContext';
 import { useLibraryRoutes } from '../routes';
 import AddComponentWidget from './AddComponentWidget';
 import BaseCard from './BaseCard';
@@ -18,7 +18,7 @@ type ComponentCardProps = {
 
 const ComponentCard = ({ hit }: ComponentCardProps) => {
   const { showOnlyPublished } = useLibraryContext();
-  const { openComponentInfoSidebar } = useSidebarContext();
+  const { openComponentInfoSidebar, sidebarComponentInfo } = useSidebarContext();
   const { componentPickerMode } = useComponentPickerContext();
 
   const {
@@ -44,6 +44,9 @@ const ComponentCard = ({ hit }: ComponentCardProps) => {
     }
   }, [usageKey, navigateTo, openComponentInfoSidebar]);
 
+  const selected = sidebarComponentInfo?.type === SidebarBodyComponentId.ComponentInfo
+    && sidebarComponentInfo.id === usageKey;
+
   return (
     <BaseCard
       itemType={blockType}
@@ -61,6 +64,7 @@ const ComponentCard = ({ hit }: ComponentCardProps) => {
       )}
       hasUnpublishedChanges={publishStatus !== PublishStatus.Published}
       onSelect={openComponent}
+      selected={selected}
     />
   );
 };

src/library-authoring/components/ContainerCard.tsx

@@ -17,7 +17,7 @@ import { ToastContext } from '../../generic/toast-context';
 import { type ContainerHit, PublishStatus } from '../../search-manager';
 import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
-import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
+import { SidebarActions, SidebarBodyComponentId, useSidebarContext } from '../common/context/SidebarContext';
 import { useRemoveItemsFromCollection } from '../data/apiHooks';
 import { useLibraryRoutes } from '../routes';
 import AddComponentWidget from './AddComponentWidget';
@@ -174,7 +174,7 @@ type ContainerCardProps = {
 const ContainerCard = ({ hit } : ContainerCardProps) => {
   const { componentPickerMode } = useComponentPickerContext();
   const { setUnitId, showOnlyPublished } = useLibraryContext();
-  const { openUnitInfoSidebar } = useSidebarContext();
+  const { openUnitInfoSidebar, sidebarComponentInfo } = useSidebarContext();
 
   const {
     blockType: itemType,
@@ -199,6 +199,9 @@ const ContainerCard = ({ hit } : ContainerCardProps) => {
     showOnlyPublished ? published?.content?.childUsageKeys : content?.childUsageKeys
   ) ?? [];
 
+  const selected = sidebarComponentInfo?.type === SidebarBodyComponentId.UnitInfo
+    && sidebarComponentInfo.id === unitId;
+
   const { navigateTo } = useLibraryRoutes();
 
   const openContainer = useCallback(() => {
@@ -227,6 +230,7 @@ const ContainerCard = ({ hit } : ContainerCardProps) => {
       )}
       hasUnpublishedChanges={publishStatus !== PublishStatus.Published}
       onSelect={openContainer}
+      selected={selected}
     />
   );
 };

src/library-authoring/units/LibraryUnitBlocks.tsx

@@ -29,7 +29,7 @@ import {
 import { LibraryBlock } from '../LibraryBlock';
 import { useLibraryRoutes, ContentType } from '../routes';
 import messages from './messages';
-import { SidebarActions, useSidebarContext } from '../common/context/SidebarContext';
+import { SidebarActions, SidebarBodyComponentId, useSidebarContext } from '../common/context/SidebarContext';
 import { ToastContext } from '../../generic/toast-context';
 import { canEditComponent } from '../components/ComponentEditorModal';
 import { useRunOnNextRender } from '../../utils';
@@ -139,7 +139,7 @@ const ComponentBlock = ({ block, preview, isDragging }: ComponentBlockProps) =>
     unitId, collectionId, componentId, openComponentEditor,
   } = useLibraryContext();
 
-  const { openInfoSidebar } = useSidebarContext();
+  const { openInfoSidebar, sidebarComponentInfo } = useSidebarContext();
 
   const handleComponentSelection = useCallback((numberOfClicks: number) => {
     navigateTo({ componentId: block.originalId });
@@ -182,6 +182,9 @@ const ComponentBlock = ({ block, preview, isDragging }: ComponentBlockProps) =>
     return {};
   }, [isDragging, componentId, block]);
 
+  const selected = sidebarComponentInfo?.type === SidebarBodyComponentId.ComponentInfo
+    && sidebarComponentInfo?.id === block.id;
+
   return (
     <IframeProvider>
       <SortableItem
@@ -197,6 +200,7 @@ const ComponentBlock = ({ block, preview, isDragging }: ComponentBlockProps) =>
         isClickable
         onClick={(e: { detail: number; }) => handleComponentSelection(e.detail)}
         disabled={preview}
+        cardClassName={selected ? 'selected' : undefined}
       >
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div

src/library-authoring/units/index.scss

@@ -4,6 +4,23 @@
     padding: 0;
     margin-bottom: 1rem;
     border: solid 1px $light-500;
+
+    &::before {
+      border: none !important; // Remove default focus
+    }
+
+    &.selected:not(:focus) {
+      border: 2px $gray-700 solid;
+    }
+
+    &.selected:focus {
+      border: 3px $gray-700 solid;
+    }
+
+    &:not(.selected):focus {
+      outline: 1px $gray-200 solid;
+      outline-offset: 2px;
+    }
   }
 
   .pgn__card.clickable {