From cf7ada318f7217fde48b0112c69d027655e7608b 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] 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; }>;