From b58adc2c421da648a533448216287d037f101b30 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Mon, 22 Jan 2024 12:10:04 +0100 Subject: [PATCH] fixup! Feat(web-react): Introduce vertical alignment options for `Modal` #DS-940 --- .../web-react/src/components/Modal/Modal.tsx | 3 ++- .../src/components/Modal/ModalFooter.tsx | 3 ++- .../components/Modal/demo/ModalDefault.tsx | 26 +++++++++---------- .../Modal/demo/ModalUniformModalOnMobile.tsx | 26 +++++++++---------- .../components/Modal/useModalStyleProps.ts | 12 ++++++--- 5 files changed, 39 insertions(+), 31 deletions(-) diff --git a/packages/web-react/src/components/Modal/Modal.tsx b/packages/web-react/src/components/Modal/Modal.tsx index a937eee48c..56b54c51c0 100644 --- a/packages/web-react/src/components/Modal/Modal.tsx +++ b/packages/web-react/src/components/Modal/Modal.tsx @@ -1,5 +1,6 @@ import React from 'react'; import classNames from 'classnames'; +import { AlignmentY } from '../../constants'; import { useStyleProps, useLastActiveFocus } from '../../hooks'; import { SpiritModalProps } from '../../types'; import { useModalStyleProps } from './useModalStyleProps'; @@ -7,7 +8,7 @@ import { ModalProvider } from './ModalContext'; import Dialog from '../Dialog/Dialog'; const Modal = (props: SpiritModalProps) => { - const { children, alignmentY = 'center', isOpen, onClose, id, ...restProps } = props; + const { children, alignmentY = AlignmentY.CENTER, isOpen, onClose, id, ...restProps } = props; const { classProps } = useModalStyleProps({ modalAlignment: alignmentY }); const { styleProps, props: otherProps } = useStyleProps(restProps); diff --git a/packages/web-react/src/components/Modal/ModalFooter.tsx b/packages/web-react/src/components/Modal/ModalFooter.tsx index 628e9dda5c..e789c802ec 100644 --- a/packages/web-react/src/components/Modal/ModalFooter.tsx +++ b/packages/web-react/src/components/Modal/ModalFooter.tsx @@ -1,11 +1,12 @@ import React from 'react'; import classNames from 'classnames'; +import { AlignmentX } from '../../constants'; import { useStyleProps } from '../../hooks'; import { ModalFooterProps } from '../../types'; import { useModalStyleProps } from './useModalStyleProps'; const ModalFooter = (props: ModalFooterProps) => { - const { children, alignmentX = 'right', description, ...restProps } = props; + const { children, alignmentX = AlignmentX.RIGHT, description, ...restProps } = props; const { classProps } = useModalStyleProps({ footerAlignment: alignmentX }); const { styleProps, props: otherProps } = useStyleProps(restProps); diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx index 62c622fbe1..3e8575949e 100644 --- a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx +++ b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx @@ -1,13 +1,13 @@ import React, { ChangeEvent, useState } from 'react'; -import { AlignmentXDictionaryType, AlignmentYDictionaryType } from '../../..'; +import { AlignmentX, AlignmentXDictionaryType, AlignmentY, AlignmentYDictionaryType } from '../../..'; import { Button, Checkbox, Modal, ModalBody, ModalDialog, ModalFooter, ModalHeader, Radio, TextField } from '../..'; const ModalDefault = () => { const [isFirstOpen, setFirstOpen] = useState(false); const [isSecondOpen, setSecondOpen] = useState(false); const [isThirdOpen, setThirdOpen] = useState(false); - const [modalAlign, setModalAlign] = useState('center'); - const [footerAlign, setFooterAlign] = useState('right'); + const [modalAlign, setModalAlign] = useState(AlignmentY.CENTER); + const [footerAlign, setFooterAlign] = useState(AlignmentX.RIGHT); const [isExpanded, setIsExpanded] = useState(true); const toggleFirstModal = () => setFirstOpen(!isFirstOpen); @@ -18,11 +18,11 @@ const ModalDefault = () => { const handleFirstClose = () => setFirstOpen(false); const handleSecondClose = () => setSecondOpen(false); const handleThirdClose = () => setThirdOpen(false); - const handleModalAlignChange = (e: ChangeEvent) => { - setModalAlign(e.target.value as AlignmentYDictionaryType); + const handleModalAlignChange = (event: ChangeEvent) => { + setModalAlign(event.target.value as AlignmentYDictionaryType); }; - const handleFooterAlignChange = (e: ChangeEvent) => { - setFooterAlign(e.target.value as AlignmentXDictionaryType); + const handleFooterAlignChange = (event: ChangeEvent) => { + setFooterAlign(event.target.value as AlignmentXDictionaryType); }; return ( @@ -47,7 +47,7 @@ const ModalDefault = () => { value="top" name="modal_alignment" autoComplete="off" - isChecked={modalAlign === 'top'} + isChecked={modalAlign === AlignmentY.TOP} onChange={handleModalAlignChange} />{' '} { value="center" name="modal_alignment" autoComplete="off" - isChecked={modalAlign === 'center'} + isChecked={modalAlign === AlignmentY.CENTER} onChange={handleModalAlignChange} />{' '} { value="bottom" name="modal_alignment" autoComplete="off" - isChecked={modalAlign === 'bottom'} + isChecked={modalAlign === AlignmentY.BOTTOM} onChange={handleModalAlignChange} /> @@ -80,7 +80,7 @@ const ModalDefault = () => { value="left" name="footer_alignment" autoComplete="off" - isChecked={footerAlign === 'left'} + isChecked={footerAlign === AlignmentX.LEFT} onChange={handleFooterAlignChange} />{' '} { value="center" name="footer_alignment" autoComplete="off" - isChecked={footerAlign === 'center'} + isChecked={footerAlign === AlignmentX.CENTER} onChange={handleFooterAlignChange} />{' '} { value="right" name="footer_alignment" autoComplete="off" - isChecked={footerAlign === 'right'} + isChecked={footerAlign === AlignmentX.RIGHT} onChange={handleFooterAlignChange} /> diff --git a/packages/web-react/src/components/Modal/demo/ModalUniformModalOnMobile.tsx b/packages/web-react/src/components/Modal/demo/ModalUniformModalOnMobile.tsx index e5e89861ee..bc963545b8 100644 --- a/packages/web-react/src/components/Modal/demo/ModalUniformModalOnMobile.tsx +++ b/packages/web-react/src/components/Modal/demo/ModalUniformModalOnMobile.tsx @@ -1,23 +1,23 @@ import React, { ChangeEvent, useState } from 'react'; -import { AlignmentXDictionaryType, AlignmentYDictionaryType } from '../../..'; +import { AlignmentX, AlignmentXDictionaryType, AlignmentY, AlignmentYDictionaryType } from '../../..'; import { Button, Modal, ModalBody, ModalDialog, ModalFooter, ModalHeader, Radio } from '../..'; const ModalDefault = () => { const [isFirstOpen, setFirstOpen] = useState(false); const [isSecondOpen, setSecondOpen] = useState(false); - const [modalAlign, setModalAlign] = useState('center'); - const [footerAlign, setFooterAlign] = useState('right'); + const [modalAlign, setModalAlign] = useState(AlignmentY.CENTER); + const [footerAlign, setFooterAlign] = useState(AlignmentX.RIGHT); const toggleFirstModal = () => setFirstOpen(!isFirstOpen); const toggleSecondModal = () => setSecondOpen(!isSecondOpen); const handleFirstClose = () => setFirstOpen(false); const handleSecondClose = () => setSecondOpen(false); - const handleModalAlignChange = (e: ChangeEvent) => { - setModalAlign(e.target.value as AlignmentYDictionaryType); + const handleModalAlignChange = (event: ChangeEvent) => { + setModalAlign(event.target.value as AlignmentYDictionaryType); }; - const handleFooterAlignChange = (e: ChangeEvent) => { - setFooterAlign(e.target.value as AlignmentXDictionaryType); + const handleFooterAlignChange = (event: ChangeEvent) => { + setFooterAlign(event.target.value as AlignmentXDictionaryType); }; return ( @@ -44,7 +44,7 @@ const ModalDefault = () => { value="top" name="modal_uniform_alignment" autoComplete="off" - isChecked={modalAlign === 'top'} + isChecked={modalAlign === AlignmentY.TOP} onChange={handleModalAlignChange} />{' '} { value="center" name="modal_uniform_alignment" autoComplete="off" - isChecked={modalAlign === 'center'} + isChecked={modalAlign === AlignmentY.CENTER} onChange={handleModalAlignChange} />{' '} { value="bottom" name="modal_uniform_alignment" autoComplete="off" - isChecked={modalAlign === 'bottom'} + isChecked={modalAlign === AlignmentY.BOTTOM} onChange={handleModalAlignChange} /> @@ -77,7 +77,7 @@ const ModalDefault = () => { value="left" name="footer_uniform_alignment" autoComplete="off" - isChecked={footerAlign === 'left'} + isChecked={footerAlign === AlignmentX.LEFT} onChange={handleFooterAlignChange} />{' '} { value="center" name="footer_uniform_alignment" autoComplete="off" - isChecked={footerAlign === 'center'} + isChecked={footerAlign === AlignmentX.CENTER} onChange={handleFooterAlignChange} />{' '} { value="right" name="footer_uniform_alignment" autoComplete="off" - isChecked={footerAlign === 'right'} + isChecked={footerAlign === AlignmentX.RIGHT} onChange={handleFooterAlignChange} /> diff --git a/packages/web-react/src/components/Modal/useModalStyleProps.ts b/packages/web-react/src/components/Modal/useModalStyleProps.ts index 58b263e318..fed73f364b 100644 --- a/packages/web-react/src/components/Modal/useModalStyleProps.ts +++ b/packages/web-react/src/components/Modal/useModalStyleProps.ts @@ -1,4 +1,5 @@ import classNames from 'classnames'; +import { AlignmentX, AlignmentY } from '../../constants'; import { AlignmentXDictionaryType, AlignmentYDictionaryType } from '../../types'; import { useClassNamePrefix } from '../../hooks'; @@ -26,11 +27,16 @@ export interface ModalStylesReturn { } export function useModalStyleProps( - { footerAlignment = 'right', isDockedOnMobile, isExpandedOnMobile, modalAlignment = 'center' }: ModalStylesProps = { - footerAlignment: 'right', + { + footerAlignment = AlignmentX.RIGHT, + isDockedOnMobile, + isExpandedOnMobile, + modalAlignment = AlignmentY.CENTER, + }: ModalStylesProps = { + footerAlignment: AlignmentX.RIGHT, isDockedOnMobile: false, isExpandedOnMobile: false, - modalAlignment: 'center', + modalAlignment: AlignmentX.CENTER, }, ): ModalStylesReturn { const modalClass = useClassNamePrefix('Modal');