Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ChrisChV merged 2 commits into from
May 9, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a6119a
fix: improve focus/selected style on library authoring
rpenido May 7, 2025
693efb6
fix: identation
rpenido May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/generic/DraggableList/SortableItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const SortableItem = ({
isClickable,
onClick,
disabled,
cardClassName = '',
// injected
intl,
}) => {
Expand Down Expand Up @@ -52,7 +53,7 @@ const SortableItem = ({
>
<Card
style={style}
className="mx-0"
className={`mx-0 ${cardClassName}`}
isClickable={isClickable}
>
<ActionRow style={actionStyle}>
Expand Down Expand Up @@ -94,6 +95,7 @@ SortableItem.propTypes = {
isClickable: PropTypes.bool,
onClick: PropTypes.func,
disabled: PropTypes.bool,
cardClassName: PropTypes.string,
// injected
intl: intlShape.isRequired,
};
Expand Down
56 changes: 44 additions & 12 deletions src/library-authoring/components/BaseCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

Expand Down
7 changes: 5 additions & 2 deletions src/library-authoring/components/BaseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ type BaseCardProps = {
tags: ContentHitTags;
actions: React.ReactNode;
hasUnpublishedChanges?: boolean;
onSelect: () => void
onSelect: () => void;
selected?: boolean;
};

const BaseCard = ({
Expand All @@ -33,6 +34,7 @@ const BaseCard = ({
tags,
actions,
onSelect,
selected = false,
...props
} : BaseCardProps) => {
const tagCount = useMemo(() => {
Expand All @@ -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}
Expand All @@ -56,6 +58,7 @@ const BaseCard = ({
onSelect();
}
}}
className={selected ? 'selected' : undefined}
>
<Card.Header
className={`library-item-header ${getComponentStyleColor(itemType)}`}
Expand Down
8 changes: 6 additions & 2 deletions src/library-authoring/components/CollectionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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);
Expand All @@ -154,6 +157,7 @@ const CollectionCard = ({ hit } : CollectionCardProps) => {
</ActionRow>
)}
onSelect={openCollection}
selected={selected}
/>
);
};
Expand Down
8 changes: 6 additions & 2 deletions src/library-authoring/components/ComponentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -18,7 +18,7 @@ type ComponentCardProps = {

const ComponentCard = ({ hit }: ComponentCardProps) => {
const { showOnlyPublished } = useLibraryContext();
const { openComponentInfoSidebar } = useSidebarContext();
const { openComponentInfoSidebar, sidebarComponentInfo } = useSidebarContext();
const { componentPickerMode } = useComponentPickerContext();

const {
Expand All @@ -44,6 +44,9 @@ const ComponentCard = ({ hit }: ComponentCardProps) => {
}
}, [usageKey, navigateTo, openComponentInfoSidebar]);

const selected = sidebarComponentInfo?.type === SidebarBodyComponentId.ComponentInfo
&& sidebarComponentInfo.id === usageKey;

return (
<BaseCard
itemType={blockType}
Expand All @@ -61,6 +64,7 @@ const ComponentCard = ({ hit }: ComponentCardProps) => {
)}
hasUnpublishedChanges={publishStatus !== PublishStatus.Published}
onSelect={openComponent}
selected={selected}
/>
);
};
Expand Down
8 changes: 6 additions & 2 deletions src/library-authoring/components/ContainerCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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(() => {
Expand Down Expand Up @@ -227,6 +230,7 @@ const ContainerCard = ({ hit } : ContainerCardProps) => {
)}
hasUnpublishedChanges={publishStatus !== PublishStatus.Published}
onSelect={openContainer}
selected={selected}
/>
);
};
Expand Down
8 changes: 6 additions & 2 deletions src/library-authoring/units/LibraryUnitBlocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 });
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down
17 changes: 17 additions & 0 deletions src/library-authoring/units/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down