feat: Add missing variants to UIKit button (#29654)

Co-authored-by: Tiago Evangelista Pinto <17487063+tiagoevanp@users.noreply.github.com>
RocketChat · Jul 12, 2023 · 1246a21 · 1246a21
1 parent bd231a0
commit 1246a21
Show file tree

Hide file tree

Showing 5 changed files with 209 additions and 17 deletions.
diff --git a/.changeset/cuddly-ties-bake.md b/.changeset/cuddly-ties-bake.md
@@ -0,0 +1,6 @@
+---
+"@rocket.chat/fuselage-ui-kit": minor
+"@rocket.chat/uikit-playground": minor
+---
+
+feat: Add missing variants to UIKit button
diff --git a/packages/fuselage-ui-kit/src/elements/ButtonElement.tsx b/packages/fuselage-ui-kit/src/elements/ButtonElement.tsx
@@ -13,47 +13,50 @@ const ButtonElement = ({
   surfaceRenderer,
 }: ButtonElementProps): ReactElement => {
   const [{ loading }, action] = useUiKitState(block, context);
+  const { style, url, text, value, secondary } = block;
 
-  if (block.url) {
+  if (url) {
     return (
       <Button
         is='a'
         target='_blank'
-        href={block.url}
-        disabled={loading}
-        primary={block.style === 'primary'}
-        danger={block.style === 'danger'}
-        minWidth='4ch'
         small
+        minWidth='4ch'
+        disabled={loading}
+        href={url}
+        primary={style === 'primary'}
+        danger={style === 'danger'}
+        success={style === 'success'}
+        warning={style === 'warning'}
+        secondary={secondary}
         onClick={action}
       >
         {loading ? (
           <Throbber />
         ) : (
-          surfaceRenderer.renderTextObject(
-            block.text,
-            0,
-            UiKit.BlockContext.NONE
-          )
+          surfaceRenderer.renderTextObject(text, 0, UiKit.BlockContext.NONE)
         )}
       </Button>
     );
   }
 
   return (
     <Button
-      disabled={loading}
-      primary={block.style === 'primary'}
-      danger={block.style === 'danger'}
-      minWidth='4ch'
       small
-      value={block.value}
+      minWidth='4ch'
+      disabled={loading}
+      primary={style === 'primary'}
+      danger={style === 'danger'}
+      success={style === 'success'}
+      warning={style === 'warning'}
+      secondary={secondary}
+      value={value}
       onClick={action}
     >
       {loading ? (
         <Throbber />
       ) : (
-        surfaceRenderer.renderTextObject(block.text, 0, UiKit.BlockContext.NONE)
+        surfaceRenderer.renderTextObject(text, 0, UiKit.BlockContext.NONE)
       )}
     </Button>
   );

diff --git a/packages/uikit-playground/src/Payload/BlocksTree.ts b/packages/uikit-playground/src/Payload/BlocksTree.ts
@@ -2,8 +2,12 @@ import type { Item } from '../Components/DropDown/types';
 import {
   actionWithButtonDefault,
   actionWithButtonPrimary,
+  actionWithButtonSecondary,
   actionWithButtonDanger,
   actionWithButtonAsLink,
+  actionWithButtonWarning,
+  actionWithButtonSuccess,
+  actionWithButtonSecondaryWithVariant,
   actionWithMenu,
   // actionWithImage,
   // actionWithSingleLineInput,
@@ -42,6 +46,9 @@ import {
   sectionWithButtonDefault,
   sectionWithButtonPrimary,
   sectionWithButtonDanger,
+  sectionWithButtonWarning,
+  sectionWithButtonSuccess,
+  sectionWithButtonSecondaryWithVariant,
   sectionWithButtonAsLink,
   sectionWithImage,
   sectionWithMenu,
@@ -63,10 +70,26 @@ const BlocksTree: Item = [
             label: 'primary',
             payload: actionWithButtonPrimary,
           },
+          {
+            label: 'secondary',
+            payload: actionWithButtonSecondary,
+          },
           {
             label: 'danger',
             payload: actionWithButtonDanger,
           },
+          {
+            label: 'warning',
+            payload: actionWithButtonWarning,
+          },
+          {
+            label: 'success',
+            payload: actionWithButtonSuccess,
+          },
+          {
+            label: 'secondary with variant',
+            payload: actionWithButtonSecondaryWithVariant,
+          },
           {
             label: 'as Link',
             payload: actionWithButtonAsLink,
@@ -136,6 +159,18 @@ const BlocksTree: Item = [
             label: 'danger',
             payload: sectionWithButtonDanger,
           },
+          {
+            label: 'warning',
+            payload: sectionWithButtonWarning,
+          },
+          {
+            label: 'success',
+            payload: sectionWithButtonSuccess,
+          },
+          {
+            label: 'secondary with variant',
+            payload: sectionWithButtonSecondaryWithVariant,
+          },
           {
             label: 'as Link',
             payload: sectionWithButtonAsLink,

diff --git a/packages/uikit-playground/src/Payload/action/button.ts b/packages/uikit-playground/src/Payload/action/button.ts
@@ -39,6 +39,26 @@ export const actionWithButtonPrimary: readonly LayoutBlock[] = [
   },
 ];
 
+export const actionWithButtonSecondary: readonly LayoutBlock[] = [
+  {
+    type: 'actions',
+    elements: [
+      {
+        type: 'button',
+        appId: 'app-id',
+        blockId: 'block-id',
+        actionId: 'action-id',
+        text: {
+          type: 'plain_text',
+          text: 'Click Me',
+          emoji: true,
+        },
+        secondary: true,
+      },
+    ],
+  },
+];
+
 export const actionWithButtonDanger: readonly LayoutBlock[] = [
   {
     type: 'actions',
@@ -59,6 +79,67 @@ export const actionWithButtonDanger: readonly LayoutBlock[] = [
   },
 ];
 
+export const actionWithButtonSuccess: readonly LayoutBlock[] = [
+  {
+    type: 'actions',
+    elements: [
+      {
+        type: 'button',
+        appId: 'app-id',
+        blockId: 'block-id',
+        actionId: 'action-id',
+        text: {
+          type: 'plain_text',
+          text: 'Click Me',
+          emoji: true,
+        },
+        style: 'success',
+      },
+    ],
+  },
+];
+
+export const actionWithButtonWarning: readonly LayoutBlock[] = [
+  {
+    type: 'actions',
+    elements: [
+      {
+        type: 'button',
+        appId: 'app-id',
+        blockId: 'block-id',
+        actionId: 'action-id',
+        text: {
+          type: 'plain_text',
+          text: 'Click Me',
+          emoji: true,
+        },
+        style: 'warning',
+      },
+    ],
+  },
+];
+
+export const actionWithButtonSecondaryWithVariant: readonly LayoutBlock[] = [
+  {
+    type: 'actions',
+    elements: [
+      {
+        type: 'button',
+        appId: 'app-id',
+        blockId: 'block-id',
+        actionId: 'action-id',
+        text: {
+          type: 'plain_text',
+          text: 'Click Me',
+          emoji: true,
+        },
+        style: 'danger',
+        secondary: true,
+      },
+    ],
+  },
+];
+
 export const actionWithButtonAsLink: readonly LayoutBlock[] = [
   {
     type: 'actions',

diff --git a/packages/uikit-playground/src/Payload/section/button.ts b/packages/uikit-playground/src/Payload/section/button.ts
@@ -65,6 +65,73 @@ export const sectionWithButtonDanger: readonly LayoutBlock[] = [
   },
 ];
 
+export const sectionWithButtonSuccess: readonly LayoutBlock[] = [
+  {
+    type: 'section',
+    text: {
+      type: 'mrkdwn',
+      text: 'This is a section block with a button.',
+    },
+    accessory: {
+      type: 'button',
+      appId: 'app-id',
+      blockId: 'block-id',
+      actionId: 'action-id',
+      text: {
+        type: 'plain_text',
+        text: 'Click Me',
+        emoji: true,
+      },
+      style: 'success',
+    },
+  },
+];
+
+export const sectionWithButtonWarning: readonly LayoutBlock[] = [
+  {
+    type: 'section',
+    text: {
+      type: 'mrkdwn',
+      text: 'This is a section block with a button.',
+    },
+    accessory: {
+      type: 'button',
+      appId: 'app-id',
+      blockId: 'block-id',
+      actionId: 'action-id',
+      text: {
+        type: 'plain_text',
+        text: 'Click Me',
+        emoji: true,
+      },
+      style: 'warning',
+    },
+  },
+];
+
+export const sectionWithButtonSecondaryWithVariant: readonly LayoutBlock[] = [
+  {
+    type: 'section',
+    text: {
+      type: 'mrkdwn',
+      text: 'This is a section block with a button.',
+    },
+    accessory: {
+      type: 'button',
+      appId: 'app-id',
+      blockId: 'block-id',
+      actionId: 'action-id',
+      text: {
+        type: 'plain_text',
+        text: 'Click Me',
+        emoji: true,
+      },
+      style: 'danger',
+      secondary: true,
+    },
+  },
+];
+
 export const sectionWithButtonAsLink: readonly LayoutBlock[] = [
   {
     type: 'section',