Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Sheet): multiline support for description #896

Merged
merged 4 commits into from
Sep 26, 2023
Merged

feat(Sheet): multiline support for description #896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5905b14
WEB-1559 feat(Sheet): multiline support for description
atabel Sep 22, 2023
921d7de
screenshot test
atabel Sep 22, 2023
5c3e65d
better native support
atabel Sep 22, 2023
abcdb6f
multiline -> multiparagraph
atabel Sep 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added ...-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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