From be24bd5f1a764ed06862c5487d8b599ce02ed8ab Mon Sep 17 00:00:00 2001 From: ej9x Date: Thu, 13 Jun 2019 16:42:29 +0300 Subject: [PATCH] feat(dialog): add stretch modifier --- ...js-components-dialog-with-stretch-1-snap.png | Bin 0 -> 15634 bytes e2e/__tests__/dialog.test.js | 8 +++++++- src/components/Dialog/Dialog.js | 14 ++++++++------ src/components/Dialog/Dialog.stories.js | 14 ++++++++++++++ src/components/Dialog/Dialog.theme.js | 11 ++++++++++- 5 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-stretch-1-snap.png diff --git a/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-stretch-1-snap.png b/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-stretch-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..253040d3d53705315adfa24adea479055e263ac6 GIT binary patch literal 15634 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 { return await iframe.waitForXPath('//*[@data-e2e-id="default-dialog"]'); - }), + }) + , baisy.suite('Components/Dialog', 'with scroll') + .setRoot(async (iframe) => { + return await iframe.waitForXPath('//*[@data-e2e-id="default-dialog"]'); + }) + , + baisy.suite('Components/Dialog', 'with stretch') .setRoot(async (iframe) => { return await iframe.waitForXPath('//*[@data-e2e-id="default-dialog"]'); }), diff --git a/src/components/Dialog/Dialog.js b/src/components/Dialog/Dialog.js index 198c2ba6..d34dab39 100644 --- a/src/components/Dialog/Dialog.js +++ b/src/components/Dialog/Dialog.js @@ -9,7 +9,7 @@ import { DialogFooter } from './DialogFooter'; import { DialogHeader } from './DialogHeader'; import { DialogTag, DialogInnerTag } from './Dialog.theme'; -type DialogPlateProps = { +type DialogProps = { children?: React$Node, isOpen?: boolean, onClose?: (any) => void, @@ -18,6 +18,7 @@ type DialogPlateProps = { shouldCloseOnEscPress ?: boolean, padding?: PropSizes, tagName?: string, + stretch?: boolean, }; @@ -33,8 +34,9 @@ const Dialog = ({ args, padding, tagName, + stretch, ...rest - }: DialogPlateProps) => { + }: DialogProps) => { return ( { ({ args, onClose }) => ( - - + + { typeof children === 'function' - ? (args) => { children(args) } - : { children } + ? (args) => { children(args) } + : { children } } diff --git a/src/components/Dialog/Dialog.stories.js b/src/components/Dialog/Dialog.stories.js index 00ac46f8..8098d4ee 100644 --- a/src/components/Dialog/Dialog.stories.js +++ b/src/components/Dialog/Dialog.stories.js @@ -17,6 +17,20 @@ export default (asStory) => { )) + .add('with stretch', () => ( + + + + + Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics + + + + + + + + )) .add('with large size', () => ( diff --git a/src/components/Dialog/Dialog.theme.js b/src/components/Dialog/Dialog.theme.js index aa5f7a3a..d19ae512 100644 --- a/src/components/Dialog/Dialog.theme.js +++ b/src/components/Dialog/Dialog.theme.js @@ -8,6 +8,7 @@ const [DialogBodyTag, themeBody] = createThemeTag('dialogBody', { display: 'flex', flexDirection: 'column', flexShrink: 1, + flexGrow: 1, maxHeight: '100%', }, }); @@ -37,6 +38,9 @@ const [DialogTag, themeDialog] = createThemeTag('dialog', { flex: '0 1 90%', }, modifiers: { + stretch: { + height: '100%', + }, size: { xs: { width: '300px', @@ -66,7 +70,12 @@ const [DialogInnerTag, themeDialogInner] = createThemeTag('dialogInner', { '&, & > form': { display: 'flex', flexDirection: 'column', - justifyContent: 'center', + justifyContent: 'flex-start', + }, + }, + modifiers: { + stretch: { + height: '100%', }, }, });