feat(ui-kit): added accessory to CalloutBlock (#33528)

.changeset/giant-spiders-train.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+Adds `accessory` properties to `CalloutBlock`

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,
+      },
     ],
   },
   {

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',
+    },
+  },
+];

packages/fuselage-ui-kit/src/blocks/CalloutBlock.tsx

@@ -11,7 +11,18 @@ const CalloutBlock = ({
   surfaceRenderer,
 }: CalloutBlockProps): ReactElement => {
   return (
-    <Callout type={block.variant} title={block.title?.text}>
+    <Callout
+      type={block.variant}
+      title={block.title?.text}
+      actions={
+        (block.accessory &&
+          surfaceRenderer.renderSectionAccessoryBlockElement(
+            block.accessory,
+            0
+          )) ||
+        undefined
+      }
+    >
       {surfaceRenderer.renderTextObject(block.text, 0, UiKit.BlockContext.NONE)}
     </Callout>
   );

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);

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',
+      },
+    },
+  },
+];

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';

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;
 }>;