Skip to content

Commit

Permalink
Add MultilineMedium and MultilineLarge Blok elements to the UIKit
Browse files Browse the repository at this point in the history
  • Loading branch information
samad-yar-khan committed Jul 31, 2022
1 parent 7660993 commit dc3fc09
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 1 deletion.
40 changes: 39 additions & 1 deletion packages/fuselage-ui-kit/src/elements/PlainTextInputElement.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
14 changes: 14 additions & 0 deletions packages/fuselage-ui-kit/src/stories/Banner.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
{
Expand Down
14 changes: 14 additions & 0 deletions packages/fuselage-ui-kit/src/stories/Modal.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
{
Expand Down
38 changes: 38 additions & 0 deletions packages/fuselage-ui-kit/src/stories/payloads/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
3 changes: 3 additions & 0 deletions packages/ui-kit/src/blocks/elements/PlainTextInputElement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,7 @@ export type PlainTextInputElement = Actionable<{
multiline?: boolean;
minLength?: number;
maxLength?: number;
multilineLarge?: boolean;
multilineMedium?: boolean;
multilineSmall?: boolean;
}>;

0 comments on commit dc3fc09

Please sign in to comment.