Skip to content

feat: support icon meta in json schema list item #1136

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
embbnux merged 1 commit into from
Mar 13, 2026
Merged

feat: support icon meta in json schema list item #1136

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
34 changes: 32 additions & 2 deletions packages/jsonschema-page/src/Fields/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
RcCardActionArea,
RcCardActions,
RcTypography,
RcTooltip,
styled,
palette2,
css,
Expand Down Expand Up @@ -42,6 +43,7 @@ import {
Read,
Unread,
SettingsBorder,
Warning,
} from '@ringcentral/juno-icon';

import { ActionMenu } from '../components/ActionMenu';
Expand Down Expand Up @@ -108,7 +110,7 @@ const StyledAvatar = styled(RcAvatar)<{ $round?: boolean }>`
`;

const NavigationIcon = styled(RcIcon)`
margin: 8px 0;
margin: 8px 0 8px 8px;
`;

const MetaContainer = styled.div`
Expand Down Expand Up @@ -136,6 +138,18 @@ const SecondaryActionContainer = styled.div`
align-items: center;
`;

const IconMetaContainer = styled.div`
display: flex;
flex-direction: row;
align-items: center;
`;

const StyledMetaIcon = styled(RcIcon)`
& + & {
margin-left: 4px;
}
`;

const StyledActionButton = styled(RcButton)`
margin-left: 8px;
`;
Expand All @@ -159,6 +173,7 @@ const ICONS_MAP = {
'read': Read,
'unread': Unread,
'settings': SettingsBorder,
'warning': Warning,
};

const BUTTON_ACTION_TYPE = 'button';
Expand Down Expand Up @@ -198,7 +213,7 @@ function ListItem({
const actionMenuMaxActions = buttonAction ?
ACTION_MENU_MAX_ACTIONS_WITH_BUTTON :
DEFAULT_ACTION_MENU_MAX_ACTIONS;
const hasSecondaryAction = item.meta || item.authorName || showAsNavigation || buttonAction || iconActions.length > 0;
const hasSecondaryAction = item.meta || item.iconMeta?.length > 0 || item.authorName || showAsNavigation || buttonAction || iconActions.length > 0;
const hideMetaOnActionHover = iconActions.length > 0 && !buttonAction;
return (
<StyledItem
Expand Down Expand Up @@ -241,6 +256,21 @@ function ListItem({
</MetaContainer>
) : null
}
{
item.iconMeta && item.iconMeta.length > 0 && (
<IconMetaContainer className="list-item-meta">
{item.iconMeta.map((iconMetaItem, index) => (
<RcTooltip key={index} title={iconMetaItem.message}>
<StyledMetaIcon
symbol={ICONS_MAP[iconMetaItem.icon] || ICONS_MAP.info}
size={iconMetaItem.size || 'small'}
color={iconMetaItem.color || 'neutral.f04'}
/>
</RcTooltip>
))}
</IconMetaContainer>
)
}
{
showAsNavigation ? (
<NavigationIcon
Expand Down
115 changes: 115 additions & 0 deletions packages/jsonschema-page/src/__stories__/InteractiveComponents.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -581,6 +581,121 @@ export const ListWithMetaField: Story = {
},
};

// List with Icon Meta
export const ListWithIconMeta: Story = {
args: {
schema: {
type: 'object',
properties: {
taskStatus: {
type: 'string',
title: 'Task Status',
description: 'Select task with icon indicators',
oneOf: [
{
const: 'in_progress',
title: 'In Progress',
description: 'Currently being worked on',
iconMeta: [
{ icon: 'refresh', message: 'Active', color: 'interactive.f01' },
{ icon: 'info', message: 'Check details' },
],
},
{
const: 'blocked',
title: 'Blocked',
description: 'Waiting on dependencies',
iconMeta: [
{ icon: 'people', message: 'Needs review', color: 'danger.f02', size: 'medium' },
],
},
{
const: 'done',
title: 'Done',
description: 'Completed and closed',
iconMeta: [
{ icon: 'read', message: 'Verified' },
],
},
],
},
settingsNav: {
type: 'string',
title: 'Settings',
description: 'Navigate to a settings section',
oneOf: [
{
const: 'account',
title: 'Account',
description: 'Manage your account details',
iconMeta: [
{ icon: 'warning', message: 'Incomplete profile', color: 'warning.f02' },
],
},
{
const: 'notifications',
title: 'Notifications',
description: 'Configure notification preferences',
},
{
const: 'security',
title: 'Security',
description: 'Password and 2FA settings',
iconMeta: [
{ icon: 'warning', message: 'Action required', color: 'danger.f02', size: 'medium' },
],
},
{
const: 'integrations',
title: 'Integrations',
description: 'Connected apps and services',
},
],
},
},
},
uiSchema: {
taskStatus: {
'ui:field': 'list',
'ui:showSelected': true,
},
settingsNav: {
'ui:field': 'list',
'ui:navigation': true,
'ui:showSelected': false,
},
},
formData: { taskStatus: 'in_progress' },
},
render: (args) => {
const [formData, setFormData] = useState(args.formData || {});

return (
<StoryLayout
args={args}
resultComponent={
<>
<h4 style={{ margin: '0 0 10px 0', color: '#555' }}>Task Status</h4>
<div style={{ fontSize: '12px', marginBottom: '15px' }}>
<p>Selected Status: {formData.taskStatus || 'None'}</p>
</div>
<h4 style={{ margin: '15px 0 10px 0', color: '#555' }}>Form Data</h4>
<pre style={{ fontSize: '11px', overflow: 'auto', maxHeight: '200px', margin: 0, background: 'white', padding: '10px', borderRadius: '4px', border: '1px solid #ddd' }}>
{JSON.stringify(formData, null, 2)}
</pre>
</>
}
>
<JSONSchemaPage
{...args}
formData={formData}
onFormDataChange={setFormData}
/>
</StoryLayout>
);
},
};

// Card Layout List
export const CardListField: Story = {
args: {
Expand Down
Loading