From c3d4a20b10c22ff37e1220188d95f08e899ee994 Mon Sep 17 00:00:00 2001 From: gabriellsh Date: Mon, 8 Dec 2025 15:13:05 -0300 Subject: [PATCH 1/4] Add `framed` optional property for IconElement --- .../src/elements/IconElement.tsx | 41 +++++++++++++++---- .../src/stories/Message.stories.tsx | 1 + .../src/stories/payloads/infoCard.ts | 29 ++++++++++++- packages/ui-kit/src/blocks/BlockElement.ts | 4 +- .../ui-kit/src/blocks/elements/IconElement.ts | 8 +++- .../ui-kit/src/blocks/layout/InfoCardBlock.ts | 4 +- packages/ui-kit/src/index.ts | 2 +- 7 files changed, 72 insertions(+), 17 deletions(-) diff --git a/packages/fuselage-ui-kit/src/elements/IconElement.tsx b/packages/fuselage-ui-kit/src/elements/IconElement.tsx index 9519260e5963d..e4aca0f02c3c0 100644 --- a/packages/fuselage-ui-kit/src/elements/IconElement.tsx +++ b/packages/fuselage-ui-kit/src/elements/IconElement.tsx @@ -1,24 +1,47 @@ -import { Icon } from '@rocket.chat/fuselage'; +import { Icon, FramedIcon } from '@rocket.chat/fuselage'; import type * as UiKit from '@rocket.chat/ui-kit'; -import type { ReactElement } from 'react'; +import type { ComponentProps, ReactElement } from 'react'; import type { BlockProps } from '../utils/BlockProps'; -type IconElementProps = BlockProps; +type IconElementProps = BlockProps; -const getVariantColor = (variant: UiKit.IconElement['variant']): string => { +const getVariantColor = (variant: UiKit.FrameableIconElement['variant']): string => { switch (variant) { - case 'default': - return 'default'; case 'danger': return 'danger'; case 'secondary': return 'secondary-info'; + case 'warning': + return 'status-font-on-warning'; + case 'default': + default: + return 'default'; } }; -const IconElement = ({ block }: IconElementProps): ReactElement => ( - -); +const getFramedIconProps = ( + variant: UiKit.FrameableIconElement['variant'], +): Pick, 'warning' | 'danger' | 'neutral'> => { + switch (variant) { + case 'danger': + return { danger: true }; + case 'warning': + return { warning: true }; + case 'default': + case 'secondary': + default: + return { neutral: true }; + } +}; + +const IconElement = ({ block }: IconElementProps): ReactElement => { + const { icon, variant, framed } = block; + console.log('block', block); + if (framed) { + return ; + } + return ; +}; export default IconElement; diff --git a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx index 3a99611e7f0c2..fcd2b315a2a2b 100644 --- a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx +++ b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx @@ -117,3 +117,4 @@ export const PreviewWithExternalUrl = createStory(payloads.previewWithExternalUr export const InfoCard = createStory(payloads.infoCard); export const InfoCardMultiple = createStory(payloads.infoCardMultiple); +export const InfoCardMultipleIcons = createStory(payloads.infoCardMultipleIcons); diff --git a/packages/fuselage-ui-kit/src/stories/payloads/infoCard.ts b/packages/fuselage-ui-kit/src/stories/payloads/infoCard.ts index fa8ecd320d08c..dbcde94a40d92 100644 --- a/packages/fuselage-ui-kit/src/stories/payloads/infoCard.ts +++ b/packages/fuselage-ui-kit/src/stories/payloads/infoCard.ts @@ -32,7 +32,7 @@ export const infoCardMultiple: readonly UiKit.InfoCardBlock[] = [ { background: 'default', elements: [ - { type: 'icon', icon: 'phone-off', variant: 'default' }, + { type: 'icon', icon: 'phone-off', variant: 'warning' }, { type: 'plain_text', text: 'Call ended' }, ], action: getIconButtonPayload({ icon: 'info' }), @@ -44,3 +44,30 @@ export const infoCardMultiple: readonly UiKit.InfoCardBlock[] = [ ], }, ]; + +export const infoCardMultipleIcons: readonly UiKit.InfoCardBlock[] = [ + { + type: 'info_card', + rows: [ + { + background: 'default', + elements: [ + { type: 'plain_text', text: 'Framed icons' }, + { type: 'icon', icon: 'phone-off', variant: 'default', framed: true }, + { type: 'icon', icon: 'clock', variant: 'warning', framed: true }, + { type: 'icon', icon: 'phone-issue', variant: 'danger', framed: true }, + ], + }, + { + background: 'default', + elements: [ + { type: 'plain_text', text: 'Icons' }, + { type: 'icon', icon: 'phone-off', variant: 'default' }, + { type: 'icon', icon: 'clock', variant: 'warning' }, + { type: 'icon', icon: 'phone-issue', variant: 'danger' }, + { type: 'icon', icon: 'info', variant: 'secondary' }, + ], + }, + ], + }, +]; diff --git a/packages/ui-kit/src/blocks/BlockElement.ts b/packages/ui-kit/src/blocks/BlockElement.ts index bac34c89ebc86..afa6400bc7a5f 100644 --- a/packages/ui-kit/src/blocks/BlockElement.ts +++ b/packages/ui-kit/src/blocks/BlockElement.ts @@ -5,7 +5,7 @@ import type { ConversationsSelectElement } from './elements/ConversationsSelectE import type { DatePickerElement } from './elements/DatePickerElement'; import type { ExperimentalTabElement } from './elements/ExperimentalTabElement'; import type { IconButtonElement } from './elements/IconButtonElement'; -import type { IconElement } from './elements/IconElement'; +import type { FrameableIconElement } from './elements/IconElement'; import type { ImageElement } from './elements/ImageElement'; import type { LinearScaleElement } from './elements/LinearScaleElement'; import type { MultiChannelsSelectElement } from './elements/MultiChannelsSelectElement'; @@ -40,5 +40,5 @@ export type BlockElement = | CheckboxElement | TimePickerElement | ExperimentalTabElement - | IconElement + | FrameableIconElement | IconButtonElement; diff --git a/packages/ui-kit/src/blocks/elements/IconElement.ts b/packages/ui-kit/src/blocks/elements/IconElement.ts index 46c48ae04410e..9ec276eb62e71 100644 --- a/packages/ui-kit/src/blocks/elements/IconElement.ts +++ b/packages/ui-kit/src/blocks/elements/IconElement.ts @@ -1,7 +1,11 @@ -type AvailableIcons = 'phone-off' | 'phone-issue' | 'clock' | 'arrow-forward' | 'info'; +type AvailableIcons = 'phone-off' | 'phone-issue' | 'clock' | 'arrow-forward' | 'info' /* | 'phone-question-mark' */; // TODO add new icon when available in fuselage export type IconElement = { type: 'icon'; icon: AvailableIcons; - variant: 'default' | 'danger' | 'secondary'; + variant: 'default' | 'danger' | 'secondary' | 'warning'; +}; + +export type FrameableIconElement = IconElement & { + framed?: boolean; }; diff --git a/packages/ui-kit/src/blocks/layout/InfoCardBlock.ts b/packages/ui-kit/src/blocks/layout/InfoCardBlock.ts index 9d6f05d5dc4e7..3039237238c36 100644 --- a/packages/ui-kit/src/blocks/layout/InfoCardBlock.ts +++ b/packages/ui-kit/src/blocks/layout/InfoCardBlock.ts @@ -1,13 +1,13 @@ import type { LayoutBlockType } from '../LayoutBlockType'; import type { LayoutBlockish } from '../LayoutBlockish'; import type { IconButtonElement } from '../elements/IconButtonElement'; -import type { IconElement } from '../elements/IconElement'; +import type { FrameableIconElement } from '../elements/IconElement'; import type { Markdown } from '../text/Markdown'; import type { PlainText } from '../text/PlainText'; type InfoCardRow = { background: 'default' | 'secondary'; - elements: readonly (IconElement | PlainText | Markdown)[]; + elements: readonly (FrameableIconElement | PlainText | Markdown)[]; action?: IconButtonElement; }; diff --git a/packages/ui-kit/src/index.ts b/packages/ui-kit/src/index.ts index f59b7414d5b32..3231501b59461 100644 --- a/packages/ui-kit/src/index.ts +++ b/packages/ui-kit/src/index.ts @@ -28,7 +28,7 @@ export { RadioButtonElement } from './blocks/elements/RadioButtonElement'; export { TimePickerElement } from './blocks/elements/TimePickerElement'; export { BlockElement } from './blocks/BlockElement'; export { ExperimentalTabElement } from './blocks/elements/ExperimentalTabElement'; -export { IconElement } from './blocks/elements/IconElement'; +export { IconElement, FrameableIconElement } from './blocks/elements/IconElement'; export { IconButtonElement } from './blocks/elements/IconButtonElement'; export { ActionsBlock } from './blocks/layout/ActionsBlock'; From 3ecc79ffae8457601b8de81e557358b757910fc6 Mon Sep 17 00:00:00 2001 From: gabriellsh <40830821+gabriellsh@users.noreply.github.com> Date: Mon, 8 Dec 2025 15:17:58 -0300 Subject: [PATCH 2/4] add cs --- .changeset/many-walls-cheat.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/many-walls-cheat.md diff --git a/.changeset/many-walls-cheat.md b/.changeset/many-walls-cheat.md new file mode 100644 index 0000000000000..d54b096d0bdf8 --- /dev/null +++ b/.changeset/many-walls-cheat.md @@ -0,0 +1,6 @@ +--- +"@rocket.chat/fuselage-ui-kit": patch +"@rocket.chat/ui-kit": patch +--- + +Introduces a new varation of the `Icon` element to `ui-kit` through the new `framed` optional property. From 9c14e4b6ce9587a1b2289081d422197c61eb0372 Mon Sep 17 00:00:00 2001 From: gabriellsh <40830821+gabriellsh@users.noreply.github.com> Date: Tue, 9 Dec 2025 14:12:56 -0300 Subject: [PATCH 3/4] Update many-walls-cheat.md --- .changeset/many-walls-cheat.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/many-walls-cheat.md b/.changeset/many-walls-cheat.md index d54b096d0bdf8..5b31a0478d57a 100644 --- a/.changeset/many-walls-cheat.md +++ b/.changeset/many-walls-cheat.md @@ -1,6 +1,6 @@ --- -"@rocket.chat/fuselage-ui-kit": patch -"@rocket.chat/ui-kit": patch +"@rocket.chat/fuselage-ui-kit": minor +"@rocket.chat/ui-kit": minor --- Introduces a new varation of the `Icon` element to `ui-kit` through the new `framed` optional property. From 069ef981b7fb19aec884ed3db31daaeb04e40fc9 Mon Sep 17 00:00:00 2001 From: Douglas Gubert Date: Tue, 9 Dec 2025 14:45:28 -0300 Subject: [PATCH 4/4] Apply suggestion from @coderabbitai[bot] Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- .changeset/many-walls-cheat.md | 2 +- packages/fuselage-ui-kit/src/elements/IconElement.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/many-walls-cheat.md b/.changeset/many-walls-cheat.md index 5b31a0478d57a..190539f09b1f2 100644 --- a/.changeset/many-walls-cheat.md +++ b/.changeset/many-walls-cheat.md @@ -3,4 +3,4 @@ "@rocket.chat/ui-kit": minor --- -Introduces a new varation of the `Icon` element to `ui-kit` through the new `framed` optional property. +Introduces a new variation of the `Icon` element to `ui-kit` through the new `framed` optional property. diff --git a/packages/fuselage-ui-kit/src/elements/IconElement.tsx b/packages/fuselage-ui-kit/src/elements/IconElement.tsx index e4aca0f02c3c0..b43a4c87adab7 100644 --- a/packages/fuselage-ui-kit/src/elements/IconElement.tsx +++ b/packages/fuselage-ui-kit/src/elements/IconElement.tsx @@ -37,7 +37,6 @@ const getFramedIconProps = ( const IconElement = ({ block }: IconElementProps): ReactElement => { const { icon, variant, framed } = block; - console.log('block', block); if (framed) { return ; }