Add MultilineMedium and MultilineLarge Blok elements to the UIKit

RocketChat · Jul 13, 2022 · cf7ada3 · cf7ada3
1 parent 5396ddd
commit cf7ada3
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 1 deletion.
diff --git a/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx b/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx
@@ -16,7 +16,45 @@ const PlainTextInputElement = ({
 }: PlainTextInputElementProps): ReactElement => {
   const [{ loading, value, error }, action] = useUiKitState(block, context);
 
-  if (block.multiline) {
+  if (block.multilineLarge) {
+    return (
+      <TextAreaInput
+        disabled={loading}
+        id={block.actionId}
+        name={block.actionId}
+        rows={30}
+        error={error}
+        value={value}
+        onChange={action}
+        placeholder={
+          block.placeholder
+            ? fromTextObjectToString(surfaceRenderer, block.placeholder, 0)
+            : undefined
+        }
+      />
+    );
+  }
+
+  if (block.multilineMedium) {
+    return (
+      <TextAreaInput
+        disabled={loading}
+        id={block.actionId}
+        name={block.actionId}
+        rows={15}
+        error={error}
+        value={value}
+        onChange={action}
+        placeholder={
+          block.placeholder
+            ? fromTextObjectToString(surfaceRenderer, block.placeholder, 0)
+            : undefined
+        }
+      />
+    );
+  }
+
+  if (block.multiline || block.multilineSmall) {
     return (
       <TextAreaInput
         disabled={loading}

diff --git a/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx b/packages/fuselage-ui-kit/src/stories/Banner.stories.tsx
@@ -121,6 +121,20 @@ export const InputWithMultilinePlainTextInput = createStory(
   }
 );
 
+export const InputWithMediumMultilinePlainTextInput = createStory(
+  payloads.inputWithMediumMultilinePlainTextInput,
+  {
+    'input-0': 'Error',
+  }
+);
+
+export const InputWithLargeMultilinePlainTextInput = createStory(
+  payloads.inputWithLargeMultilinePlainTextInput,
+  {
+    'input-0': 'Error',
+  }
+);
+
 export const InputWithPlainTextInput = createStory(
   payloads.inputWithPlainTextInput,
   {

diff --git a/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx b/packages/fuselage-ui-kit/src/stories/Modal.stories.tsx
@@ -162,6 +162,20 @@ export const InputWithMultilinePlainTextInput = createStory(
   }
 );
 
+export const InputWithMediumMultilinePlainTextInput = createStory(
+  payloads.inputWithMediumMultilinePlainTextInput,
+  {
+    'input-0': 'Error',
+  }
+);
+
+export const InputWithLargeMultilinePlainTextInput = createStory(
+  payloads.inputWithLargeMultilinePlainTextInput,
+  {
+    'input-0': 'Error',
+  }
+);
+
 export const InputWithPlainTextInput = createStory(
   payloads.inputWithPlainTextInput,
   {

diff --git a/packages/fuselage-ui-kit/src/stories/payloads/input.ts b/packages/fuselage-ui-kit/src/stories/payloads/input.ts
@@ -18,6 +18,44 @@ export const inputWithMultilinePlainTextInput: readonly UiKit.LayoutBlock[] = [
   },
 ] as const;
 
+export const inputWithMediumMultilinePlainTextInput: readonly UiKit.LayoutBlock[] =
+  [
+    {
+      type: 'input',
+      element: {
+        appId: 'dummy-app-id',
+        blockId: 'dummy-block-id',
+        type: 'plain_text_input',
+        multilineMedium: true,
+        actionId: 'input-0',
+      },
+      label: {
+        type: 'plain_text',
+        text: 'Label',
+        emoji: true,
+      },
+    },
+  ] as const;
+
+export const inputWithLargeMultilinePlainTextInput: readonly UiKit.LayoutBlock[] =
+  [
+    {
+      type: 'input',
+      element: {
+        appId: 'dummy-app-id',
+        blockId: 'dummy-block-id',
+        type: 'plain_text_input',
+        multilineLarge: true,
+        actionId: 'input-0',
+      },
+      label: {
+        type: 'plain_text',
+        text: 'Label',
+        emoji: true,
+      },
+    },
+  ] as const;
+
 export const inputWithPlainTextInput: readonly UiKit.LayoutBlock[] = [
   {
     type: 'input',

diff --git a/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts b/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts
@@ -8,4 +8,7 @@ export type PlainTextInputElement = Actionable<{
   multiline?: boolean;
   minLength?: number;
   maxLength?: number;
+  multilineLarge?: boolean;
+  multilineMedium?: boolean;
+  multilineSmall?: boolean;
 }>;