fixup! Feat(web-react): Introduce vertical alignment options for `Mod…

…al` #DS-940
lmc-eu · Jan 22, 2024 · b58adc2 · b58adc2
1 parent c8d8c89
commit b58adc2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 31 deletions.
diff --git a/packages/web-react/src/components/Modal/Modal.tsx b/packages/web-react/src/components/Modal/Modal.tsx
@@ -1,13 +1,14 @@
 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';
 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
@@ -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
@@ -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<AlignmentYDictionaryType>('center');
-  const [footerAlign, setFooterAlign] = useState<AlignmentXDictionaryType>('right');
+  const [modalAlign, setModalAlign] = useState<AlignmentYDictionaryType>(AlignmentY.CENTER);
+  const [footerAlign, setFooterAlign] = useState<AlignmentXDictionaryType>(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<HTMLInputElement>) => {
-    setModalAlign(e.target.value as AlignmentYDictionaryType);
+  const handleModalAlignChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setModalAlign(event.target.value as AlignmentYDictionaryType);
   };
-  const handleFooterAlignChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setFooterAlign(e.target.value as AlignmentXDictionaryType);
+  const handleFooterAlignChange = (event: ChangeEvent<HTMLInputElement>) => {
+    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}
               />{' '}
               <Radio
@@ -57,7 +57,7 @@ const ModalDefault = () => {
                 value="center"
                 name="modal_alignment"
                 autoComplete="off"
-                isChecked={modalAlign === 'center'}
+                isChecked={modalAlign === AlignmentY.CENTER}
                 onChange={handleModalAlignChange}
               />{' '}
               <Radio
@@ -67,7 +67,7 @@ const ModalDefault = () => {
                 value="bottom"
                 name="modal_alignment"
                 autoComplete="off"
-                isChecked={modalAlign === 'bottom'}
+                isChecked={modalAlign === AlignmentY.BOTTOM}
                 onChange={handleModalAlignChange}
               />
             </form>
@@ -80,7 +80,7 @@ const ModalDefault = () => {
                 value="left"
                 name="footer_alignment"
                 autoComplete="off"
-                isChecked={footerAlign === 'left'}
+                isChecked={footerAlign === AlignmentX.LEFT}
                 onChange={handleFooterAlignChange}
               />{' '}
               <Radio
@@ -90,7 +90,7 @@ const ModalDefault = () => {
                 value="center"
                 name="footer_alignment"
                 autoComplete="off"
-                isChecked={footerAlign === 'center'}
+                isChecked={footerAlign === AlignmentX.CENTER}
                 onChange={handleFooterAlignChange}
               />{' '}
               <Radio
@@ -100,7 +100,7 @@ const ModalDefault = () => {
                 value="right"
                 name="footer_alignment"
                 autoComplete="off"
-                isChecked={footerAlign === 'right'}
+                isChecked={footerAlign === AlignmentX.RIGHT}
                 onChange={handleFooterAlignChange}
               />
             </form>

diff --git 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<AlignmentYDictionaryType>('center');
-  const [footerAlign, setFooterAlign] = useState<AlignmentXDictionaryType>('right');
+  const [modalAlign, setModalAlign] = useState<AlignmentYDictionaryType>(AlignmentY.CENTER);
+  const [footerAlign, setFooterAlign] = useState<AlignmentXDictionaryType>(AlignmentX.RIGHT);
 
   const toggleFirstModal = () => setFirstOpen(!isFirstOpen);
   const toggleSecondModal = () => setSecondOpen(!isSecondOpen);
 
   const handleFirstClose = () => setFirstOpen(false);
   const handleSecondClose = () => setSecondOpen(false);
-  const handleModalAlignChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setModalAlign(e.target.value as AlignmentYDictionaryType);
+  const handleModalAlignChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setModalAlign(event.target.value as AlignmentYDictionaryType);
   };
-  const handleFooterAlignChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setFooterAlign(e.target.value as AlignmentXDictionaryType);
+  const handleFooterAlignChange = (event: ChangeEvent<HTMLInputElement>) => {
+    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}
                 />{' '}
                 <Radio
@@ -54,7 +54,7 @@ const ModalDefault = () => {
                   value="center"
                   name="modal_uniform_alignment"
                   autoComplete="off"
-                  isChecked={modalAlign === 'center'}
+                  isChecked={modalAlign === AlignmentY.CENTER}
                   onChange={handleModalAlignChange}
                 />{' '}
                 <Radio
@@ -64,7 +64,7 @@ const ModalDefault = () => {
                   value="bottom"
                   name="modal_uniform_alignment"
                   autoComplete="off"
-                  isChecked={modalAlign === 'bottom'}
+                  isChecked={modalAlign === AlignmentY.BOTTOM}
                   onChange={handleModalAlignChange}
                 />
               </form>
@@ -77,7 +77,7 @@ const ModalDefault = () => {
                   value="left"
                   name="footer_uniform_alignment"
                   autoComplete="off"
-                  isChecked={footerAlign === 'left'}
+                  isChecked={footerAlign === AlignmentX.LEFT}
                   onChange={handleFooterAlignChange}
                 />{' '}
                 <Radio
@@ -87,7 +87,7 @@ const ModalDefault = () => {
                   value="center"
                   name="footer_uniform_alignment"
                   autoComplete="off"
-                  isChecked={footerAlign === 'center'}
+                  isChecked={footerAlign === AlignmentX.CENTER}
                   onChange={handleFooterAlignChange}
                 />{' '}
                 <Radio
@@ -97,7 +97,7 @@ const ModalDefault = () => {
                   value="right"
                   name="footer_uniform_alignment"
                   autoComplete="off"
-                  isChecked={footerAlign === 'right'}
+                  isChecked={footerAlign === AlignmentX.RIGHT}
                   onChange={handleFooterAlignChange}
                 />
               </form>

diff --git 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');