From 687f1efd5f6fa18aff3dea22eb665bc278f9f015 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 18 Oct 2024 16:01:44 -0300 Subject: [PATCH] feat(ui-kit): added accessory to CalloutBlock (#33528) --- .changeset/giant-spiders-train.md | 5 +++ .../src/Payload/actionBlock/BlocksTree.ts | 6 ++- .../src/Payload/callout/index.ts | 24 +++++++++++ .../src/blocks/CalloutBlock.tsx | 13 +++++- .../src/stories/Modal.stories.tsx | 4 ++ .../src/stories/payloads/callout.ts | 41 +++++++++++++++++++ .../src/stories/payloads/index.ts | 1 + .../ui-kit/src/blocks/layout/CalloutBlock.ts | 3 ++ 8 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 .changeset/giant-spiders-train.md create mode 100644 packages/fuselage-ui-kit/src/stories/payloads/callout.ts diff --git a/.changeset/giant-spiders-train.md b/.changeset/giant-spiders-train.md new file mode 100644 index 000000000000..c05bb03779ba --- /dev/null +++ b/.changeset/giant-spiders-train.md @@ -0,0 +1,5 @@ +--- + +--- + +Adds `accessory` properties to `CalloutBlock` diff --git a/apps/uikit-playground/src/Payload/actionBlock/BlocksTree.ts b/apps/uikit-playground/src/Payload/actionBlock/BlocksTree.ts index 700c5505b6fb..e68d9761736c 100644 --- a/apps/uikit-playground/src/Payload/actionBlock/BlocksTree.ts +++ b/apps/uikit-playground/src/Payload/actionBlock/BlocksTree.ts @@ -1,5 +1,5 @@ import type { Item } from '../../Components/DropDown/types'; -import { callout } from '../callout'; +import { callout, calloutWithAction } from '../callout'; import { actionWithButtonDefault, actionWithButtonPrimary, @@ -324,6 +324,10 @@ const BlocksTree: Item = [ label: 'Plain', payload: callout, }, + { + label: 'With Action', + payload: calloutWithAction, + }, ], }, { diff --git a/apps/uikit-playground/src/Payload/callout/index.ts b/apps/uikit-playground/src/Payload/callout/index.ts index 29077031bd3a..3a5ef8fb5b62 100644 --- a/apps/uikit-playground/src/Payload/callout/index.ts +++ b/apps/uikit-playground/src/Payload/callout/index.ts @@ -13,3 +13,27 @@ export const callout: readonly LayoutBlock[] = [ }, }, ]; + +export const calloutWithAction: readonly LayoutBlock[] = [ + { + type: 'callout', + title: { + type: 'plain_text', + text: 'Callout Title', + }, + text: { + type: 'plain_text', + text: 'Callout Text', + }, + accessory: { + type: 'button', + text: { + type: 'plain_text', + text: 'Callout Action', + }, + actionId: 'callout-action', + blockId: 'callout-action', + appId: 'A', + }, + }, +]; diff --git a/packages/fuselage-ui-kit/src/blocks/CalloutBlock.tsx b/packages/fuselage-ui-kit/src/blocks/CalloutBlock.tsx index 91ef7f32da43..a8b634a1739c 100644 --- a/packages/fuselage-ui-kit/src/blocks/CalloutBlock.tsx +++ b/packages/fuselage-ui-kit/src/blocks/CalloutBlock.tsx @@ -11,7 +11,18 @@ const CalloutBlock = ({ surfaceRenderer, }: CalloutBlockProps): ReactElement => { return ( - + {surfaceRenderer.renderTextObject(block.text, 0, UiKit.BlockContext.NONE)} ); diff --git a/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx b/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx index ed1267961781..2be71ef91bd8 100644 --- a/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx +++ b/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx @@ -190,3 +190,7 @@ export const InputWithLinearScale = createStory(payloads.inputWithLinearScale, { }); export const Conditional = createStory(payloads.conditional); + +export const Callout = createStory(payloads.callout); + +export const CalloutWithAction = createStory(payloads.calloutWithAction); diff --git a/packages/fuselage-ui-kit/src/stories/payloads/callout.ts b/packages/fuselage-ui-kit/src/stories/payloads/callout.ts new file mode 100644 index 000000000000..0c0a5036f754 --- /dev/null +++ b/packages/fuselage-ui-kit/src/stories/payloads/callout.ts @@ -0,0 +1,41 @@ +import type * as UiKit from '@rocket.chat/ui-kit'; + +export const callout: readonly UiKit.LayoutBlock[] = [ + { + type: 'callout', + title: { + type: 'plain_text', + text: 'Callout', + }, + text: { + type: 'plain_text', + text: 'This is a callout', + }, + variant: 'info', + }, +] as const; + +export const calloutWithAction: readonly UiKit.LayoutBlock[] = [ + { + type: 'callout', + title: { + type: 'plain_text', + text: 'Callout', + }, + text: { + type: 'plain_text', + text: 'This is a callout', + }, + variant: 'info', + accessory: { + appId: 'dummy-app-id', + blockId: 'dummy-block-id', + actionId: 'dummy-action-id', + type: 'button', + text: { + type: 'plain_text', + text: 'Action', + }, + }, + }, +]; diff --git a/packages/fuselage-ui-kit/src/stories/payloads/index.ts b/packages/fuselage-ui-kit/src/stories/payloads/index.ts index 2de52ceac429..45fe2dbb1a91 100644 --- a/packages/fuselage-ui-kit/src/stories/payloads/index.ts +++ b/packages/fuselage-ui-kit/src/stories/payloads/index.ts @@ -1,5 +1,6 @@ export * from './actions'; export * from './conditional'; +export * from './callout'; export * from './context'; export * from './divider'; export * from './image'; diff --git a/packages/ui-kit/src/blocks/layout/CalloutBlock.ts b/packages/ui-kit/src/blocks/layout/CalloutBlock.ts index fbb3e9279248..4732443a0a91 100644 --- a/packages/ui-kit/src/blocks/layout/CalloutBlock.ts +++ b/packages/ui-kit/src/blocks/layout/CalloutBlock.ts @@ -1,9 +1,12 @@ import type { LayoutBlockish } from '../LayoutBlockish'; import type { TextObject } from '../TextObject'; +import type { ButtonElement } from '../elements/ButtonElement'; +import type { OverflowElement } from '../elements/OverflowElement'; export type CalloutBlock = LayoutBlockish<{ type: 'callout'; title?: TextObject; text: TextObject; variant?: 'info' | 'danger' | 'warning' | 'success'; + accessory?: ButtonElement | OverflowElement; }>;