Skip to content

Commit

Permalink
feat(Sheet): multiline support for description (#896)
Browse files Browse the repository at this point in the history 
* WEB-1559 feat(Sheet): multiline support for description

* screenshot test

* better native support

* multiline -> multiparagraph
  • Loading branch information
@atabel
atabel authored Sep 26, 2023
1 parent fcbb4a5 commit 0c328bf
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 27 deletions.
Binary file added ...-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions src/__screenshot_tests__/sheet-screenshot-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,26 @@ test.each(TESTABLE_DEVICES)('InfoSheet in %s', async (device) => {
expect(image).toMatchImageSnapshot();
});

test('InfoSheet with multiple description paragraphs', async () => {
const page = await openStoryPage({
id: 'components-modals-sheet--info',
device: 'MOBILE_IOS',
args: {
description: 'Description paragraph',
multiparagraphDescription: true,
},
});

const button = await screen.findByRole('button', {name: 'Open'});
await button.click();

await screen.findByRole('dialog');

const image = await page.screenshot();

expect(image).toMatchImageSnapshot();
});

test.each(TESTABLE_DEVICES)('ActionsSheet in %s', async (device) => {
const page = await openStoryPage({
id: 'components-modals-sheet--actions',
Expand Down
89 changes: 77 additions & 12 deletions src/__stories__/sheet-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,20 @@ type SheetArgs = {
title: string;
subtitle: string;
description: string;
multiparagraphDescription: boolean;
};

type RadioListSheetArgs = SheetArgs & {
selectedId: string;
};

export const RadioList: StoryComponent<RadioListSheetArgs> = ({title, subtitle, description, selectedId}) => {
export const RadioList: StoryComponent<RadioListSheetArgs> = ({
title,
subtitle,
description,
multiparagraphDescription,
selectedId,
}) => {
const [open, setOpen] = React.useState(false);
const [selected, setSelected] = React.useState<string | null>(null);

Expand Down Expand Up @@ -121,7 +128,9 @@ export const RadioList: StoryComponent<RadioListSheetArgs> = ({title, subtitle,
}}
title={title}
subtitle={subtitle}
description={description}
description={
description && multiparagraphDescription ? [description, description] : description
}
selectedId={selectedId === 'none' ? undefined : selectedId}
items={[
'Apple',
Expand Down Expand Up @@ -158,16 +167,25 @@ RadioList.args = {
title: 'Select a fruit',
subtitle: 'Subtitle',
description: 'Description',
multiparagraphDescription: false,
selectedId: 'none',
};
RadioList.argTypes = {
selectedId: {
control: {type: 'select'},
options: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', 'none'],
},
multiparagraphDescription: {
if: {arg: 'description'},
},
};

export const ActionsList: StoryComponent<SheetArgs> = ({title, subtitle, description}) => {
export const ActionsList: StoryComponent<SheetArgs> = ({
title,
subtitle,
description,
multiparagraphDescription,
}) => {
const [open, setOpen] = React.useState(false);
const [selected, setSelected] = React.useState<string | null>(null);

Expand Down Expand Up @@ -200,7 +218,9 @@ export const ActionsList: StoryComponent<SheetArgs> = ({title, subtitle, descrip
}}
title={title}
subtitle={subtitle}
description={description}
description={
description && multiparagraphDescription ? [description, description] : description
}
items={[
{
id: '1',
Expand Down Expand Up @@ -233,14 +253,27 @@ ActionsList.args = {
title: 'Title',
subtitle: 'Subtitle',
description: 'Description',
multiparagraphDescription: false,
};
ActionsList.argTypes = {
multiparagraphDescription: {
if: {arg: 'description'},
},
};

type InfoSheetArgs = SheetArgs & {
numItems: number;
iconType: 'bullet' | 'regular' | 'small';
};

export const Info: StoryComponent<InfoSheetArgs> = ({title, subtitle, description, numItems, iconType}) => {
export const Info: StoryComponent<InfoSheetArgs> = ({
title,
subtitle,
description,
multiparagraphDescription,
numItems,
iconType,
}) => {
const [open, setOpen] = React.useState(false);

return (
Expand All @@ -261,7 +294,9 @@ export const Info: StoryComponent<InfoSheetArgs> = ({title, subtitle, descriptio
}}
title={title}
subtitle={subtitle}
description={description}
description={
description && multiparagraphDescription ? [description, description] : description
}
items={Array.from({length: numItems}, (_, idx) => ({
id: String(idx),
title: 'Item ' + idx,
Expand Down Expand Up @@ -290,12 +325,16 @@ Info.args = {
description: 'Description',
numItems: 5,
iconType: 'bullet',
multiparagraphDescription: false,
};
Info.argTypes = {
iconType: {
control: {type: 'select'},
options: ['bullet', 'regular', 'small'],
},
multiparagraphDescription: {
if: {arg: 'description'},
},
};

type ActionsSheetArgs = SheetArgs & {
Expand All @@ -309,6 +348,7 @@ export const Actions: StoryComponent<ActionsSheetArgs> = ({
title,
subtitle,
description,
multiparagraphDescription,
buttonText,
secondaryButtonText,
buttonLinkText,
Expand Down Expand Up @@ -344,7 +384,9 @@ export const Actions: StoryComponent<ActionsSheetArgs> = ({
onPressButton={setPressedButton}
title={title}
subtitle={subtitle}
description={description}
description={
description && multiparagraphDescription ? [description, description] : description
}
button={{
text: buttonText,
}}
Expand Down Expand Up @@ -374,6 +416,7 @@ Actions.args = {
title: 'Title',
subtitle: 'Subtitle',
description: 'Description',
multiparagraphDescription: false,
buttonText: 'Button',
secondaryButtonText: 'Secondary button',
buttonLinkText: 'Link',
Expand All @@ -384,15 +427,19 @@ Actions.argTypes = {
control: {type: 'boolean'},
if: {arg: 'buttonLinkText'},
},
multiparagraphDescription: {
if: {arg: 'description'},
},
};

type RootArgs = {
title: string;
subtitle: string;
description: string;
multiparagraphDescription: boolean;
};

export const Root: StoryComponent<RootArgs> = ({title, subtitle, description}) => {
export const Root: StoryComponent<RootArgs> = ({title, subtitle, description, multiparagraphDescription}) => {
const [response, setResponse] = React.useState<unknown>();
return (
<Box paddingY={24} paddingX={16}>
Expand All @@ -407,7 +454,10 @@ export const Root: StoryComponent<RootArgs> = ({title, subtitle, description}) =
props: {
title,
subtitle,
description,
description:
description && multiparagraphDescription
? [description, description]
: description,
items: [
{
id: '1',
Expand Down Expand Up @@ -440,7 +490,10 @@ export const Root: StoryComponent<RootArgs> = ({title, subtitle, description}) =
props: {
title,
subtitle,
description,
description:
description && multiparagraphDescription
? [description, description]
: description,
items: [
{
id: '1',
Expand Down Expand Up @@ -469,7 +522,10 @@ export const Root: StoryComponent<RootArgs> = ({title, subtitle, description}) =
props: {
title,
subtitle,
description,
description:
description && multiparagraphDescription
? [description, description]
: description,
button: {
text: 'Button',
},
Expand All @@ -491,7 +547,10 @@ export const Root: StoryComponent<RootArgs> = ({title, subtitle, description}) =
props: {
title,
subtitle,
description,
description:
description && multiparagraphDescription
? [description, description]
: description,
selectedId: '1',
items: [
{
Expand Down Expand Up @@ -532,4 +591,10 @@ Root.args = {
title: 'Title',
subtitle: 'Subtitle',
description: 'Description',
multiparagraphDescription: false,
};
Root.argTypes = {
multiparagraphDescription: {
if: {arg: 'description'},
},
};
25 changes: 20 additions & 5 deletions src/sheet-root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ type SheetProps<T> = Id<
{
title?: string;
subtitle?: string;
description?: string;
description?: string | Array<string>;
} & T
>;

Expand Down Expand Up @@ -95,6 +95,17 @@ let listener: SheetPropsListener | null = null;
let sheetPromiseResolve: SheetPromiseResolve | null = null;
let nativeSheetImplementation: NativeSheetImplementation | null = null;

const normalizeDescriptionForNative = (description?: string | Array<string>): string | undefined => {
if (Array.isArray(description)) {
if (description.length) {
return description.join('\n\n');
} else {
return undefined;
}
}
return description;
};

const showRadioListNativeSheet = ({
title,
subtitle,
Expand All @@ -105,7 +116,8 @@ const showRadioListNativeSheet = ({
(nativeSheetImplementation as NativeSheetImplementation)({
title,
subtitle,
description,
// TODO: add multiline support to native sheet
description: normalizeDescriptionForNative(description),
content: [
{
type: 'LIST',
Expand Down Expand Up @@ -139,7 +151,8 @@ const showActionsListNativeSheet = ({
(nativeSheetImplementation as NativeSheetImplementation)({
title,
subtitle,
description,
// TODO: add multiline support to native sheet
description: normalizeDescriptionForNative(description),
content: [
{
type: 'LIST',
Expand Down Expand Up @@ -168,7 +181,8 @@ const showInfoNativeSheet = async ({title, subtitle, description, items}: SheetP
await (nativeSheetImplementation as NativeSheetImplementation)({
title,
subtitle,
description,
// TODO: add multiline support to native sheet
description: normalizeDescriptionForNative(description),
content: [
{
type: 'LIST',
Expand All @@ -193,7 +207,8 @@ const showActionsNativeSheet = async ({
return (nativeSheetImplementation as NativeSheetImplementation)({
title,
subtitle,
description,
// TODO: add multiline support to native sheet
description: normalizeDescriptionForNative(description),
content: [
{
type: 'BOTTOM_ACTIONS',
Expand Down
Loading

1 comment on commit 0c328bf

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-a7663x3tx-tuentisre.vercel.app

Built with commit 0c328bf.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.