From dc3fc093d30edadd48263c558b5c8bcae24b1557 Mon Sep 17 00:00:00 2001
From: Samad Yar Khan <smdyarkhan123@gmail.com>
Date: Sun, 10 Jul 2022 23:16:03 +0000
Subject: [PATCH 1/2] Add MultilineMedium and MultilineLarge Blok elements to
 the UIKit

---
 .../src/elements/PlainTextInputElement.tsx    | 40 ++++++++++++++++++-
 .../src/stories/Banner.stories.tsx            | 14 +++++++
 .../src/stories/Modal.stories.tsx             | 14 +++++++
 .../src/stories/payloads/input.ts             | 38 ++++++++++++++++++
 .../blocks/elements/PlainTextInputElement.ts  |  3 ++
 5 files changed, 108 insertions(+), 1 deletion(-)

diff --git a/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx b/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx
index 7394b605ed..2388f15492 100644
--- 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
index 956e29238b..d5023f0a5e 100644
--- 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
index ab4f63d95e..b5646b2f3d 100644
--- 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
index b52911d3b1..dd255d1ba9 100644
--- 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
index c7e0e8e252..b58f4547da 100644
--- 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;
 }>;

From 674e67d7bbea485358e0aa78f8e0263e4a66da2d Mon Sep 17 00:00:00 2001
From: Samad Yar Khan <smdyarkhan123@gmail.com>
Date: Sun, 31 Jul 2022 17:28:44 +0000
Subject: [PATCH 2/2] Update PlainTextInputElement parameters

---
 .../fuselage-ui-kit/src/elements/PlainTextInputElement.tsx | 6 +++---
 packages/fuselage-ui-kit/src/stories/payloads/input.ts     | 7 +++++--
 .../ui-kit/src/blocks/elements/PlainTextInputElement.ts    | 4 +---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx b/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx
index 2388f15492..e3e4fbf68c 100644
--- a/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx
@@ -16,7 +16,7 @@ const PlainTextInputElement = ({
 }: PlainTextInputElementProps): ReactElement => {
   const [{ loading, value, error }, action] = useUiKitState(block, context);
 
-  if (block.multilineLarge) {
+  if (block.multiline && block.multilineSize === 'large') {
     return (
       <TextAreaInput
         disabled={loading}
@@ -35,7 +35,7 @@ const PlainTextInputElement = ({
     );
   }
 
-  if (block.multilineMedium) {
+  if (block.multiline && block.multilineSize === 'medium') {
     return (
       <TextAreaInput
         disabled={loading}
@@ -54,7 +54,7 @@ const PlainTextInputElement = ({
     );
   }
 
-  if (block.multiline || block.multilineSmall) {
+  if (block.multiline || (block.multiline && block.multilineSize === 'small')) {
     return (
       <TextAreaInput
         disabled={loading}
diff --git a/packages/fuselage-ui-kit/src/stories/payloads/input.ts b/packages/fuselage-ui-kit/src/stories/payloads/input.ts
index dd255d1ba9..f7e84846e0 100644
--- a/packages/fuselage-ui-kit/src/stories/payloads/input.ts
+++ b/packages/fuselage-ui-kit/src/stories/payloads/input.ts
@@ -8,6 +8,7 @@ export const inputWithMultilinePlainTextInput: readonly UiKit.LayoutBlock[] = [
       blockId: 'dummy-block-id',
       type: 'plain_text_input',
       multiline: true,
+      multilineSize: 'small',
       actionId: 'input-0',
     },
     label: {
@@ -26,7 +27,8 @@ export const inputWithMediumMultilinePlainTextInput: readonly UiKit.LayoutBlock[
         appId: 'dummy-app-id',
         blockId: 'dummy-block-id',
         type: 'plain_text_input',
-        multilineMedium: true,
+        multiline: true,
+        multilineSize: 'medium',
         actionId: 'input-0',
       },
       label: {
@@ -45,7 +47,8 @@ export const inputWithLargeMultilinePlainTextInput: readonly UiKit.LayoutBlock[]
         appId: 'dummy-app-id',
         blockId: 'dummy-block-id',
         type: 'plain_text_input',
-        multilineLarge: true,
+        multiline: true,
+        multilineSize: 'large',
         actionId: 'input-0',
       },
       label: {
diff --git a/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts b/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts
index b58f4547da..ae9962871a 100644
--- a/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts
+++ b/packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts
@@ -8,7 +8,5 @@ export type PlainTextInputElement = Actionable<{
   multiline?: boolean;
   minLength?: number;
   maxLength?: number;
-  multilineLarge?: boolean;
-  multilineMedium?: boolean;
-  multilineSmall?: boolean;
+  multilineSize?: 'large' | 'medium' | 'small';
 }>;