Skip to content

Limit emoji support to content area sidebar #41

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
sistrall merged 1 commit into from
Jan 12, 2026
Merged

Limit emoji support to content area sidebar #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 .claude/settings.local.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
{
"permissions": {
"allow": [
"Bash(npm ls:*)"
"Bash(npm ls:*)",
"Bash(npm run build:*)",
"Bash(npm test)"
]
}
}
8 changes: 4 additions & 4 deletions packages/sdk/src/hooks/contentAreaSidebarItems.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
isRecord,
isString,
} from '../guardUtils.js';
import { Icon, isIcon } from '../icon';
import { IconWithEmoji, isIconWithEmoji } from '../icon';

export type ContentAreaSidebarItemsHook = {
/**
Expand All @@ -32,11 +32,11 @@ export type ContentAreaSidebarItem = {
label: string;
/**
* Icon to be shown alongside the label. Can be a FontAwesome icon name (ie.
* `"address-book"`) or a custom SVG definition. To maintain visual
* `"address-book"`), a custom SVG definition, or an emoji. To maintain visual
* consistency with the rest of the interface, try to use FontAwesome icons
* whenever possible.
*/
icon: Icon;
icon: IconWithEmoji;
/** ID of the page linked to the item */
pointsTo: {
pageId: string;
Expand All @@ -63,7 +63,7 @@ export function isContentAreaSidebarItem(
return (
isRecord(value) &&
isString(value.label) &&
isIcon(value.icon) &&
isIconWithEmoji(value.icon) &&
isRecord(value.pointsTo) &&
isString(value.pointsTo.pageId) &&
(isNullish(value.placement) || isPlacement(value.placement)) &&
Expand Down
14 changes: 12 additions & 2 deletions packages/sdk/src/icon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { isEmoji, isRecord, isString } from './guardUtils.js';

export type Icon = AwesomeFontIconIdentifier | SvgDefinition | EmojiDefinition;
export type Icon = AwesomeFontIconIdentifier | SvgDefinition;

export function isIcon(value: unknown): value is Icon {
return isString(value) || isSvgDefinition(value) || isEmojiDefinition(value);
return isString(value) || isSvgDefinition(value);
}

/**
Expand Down Expand Up @@ -78,6 +78,16 @@ export function isEmojiDefinition(value: unknown): value is EmojiDefinition {
return isRecord(value) && value.type === 'emoji' && isEmoji(value.emoji);
}

/**
* Extended icon type that includes emoji support in addition to Font Awesome and SVG icons.
* This type is specifically used for content area sidebar items where emoji icons are supported.
*/
export type IconWithEmoji = Icon | EmojiDefinition;

export function isIconWithEmoji(value: unknown): value is IconWithEmoji {
return isIcon(value) || isEmojiDefinition(value);
}

/**
* Font Awesome icon identifier for use in DatoCMS plugins.
*
Expand Down