Merge pull request #2528 from epam/improvement/2469-modal-improve-mob…

…ile-view [Modals]: mobile view improvements
epam · Oct 2, 2024 · 541ff4d · 541ff4d
2 parents 62993b2 + 01ff4d4
commit 541ff4d
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 27 deletions.
diff --git a/app/src/docs/_examples/modals/Basic.example.tsx b/app/src/docs/_examples/modals/Basic.example.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { IModal, useUuiContext } from '@epam/uui-core';
 import { demoData } from '@epam/uui-docs';
 import {
-    ModalBlocker, ModalFooter, ModalHeader, ModalWindow, FlexRow, FlexSpacer, Panel, ScrollBars, Text, Button,
-    SuccessNotification, WarningNotification,
+    ModalBlocker, ModalFooter, ModalHeader, ModalWindow, FlexRow, Panel, ScrollBars, Text, Button, SuccessNotification, WarningNotification,
 } from '@epam/uui';
+import css from './styles.module.scss';
 
 export default function BasicModalExampleToggler() {
     const { uuiModals, uuiNotifications } = useUuiContext();
@@ -55,8 +55,7 @@ export function BasicModalExample(modalProps: IModal<string>) {
                             </Text>
                         </FlexRow>
                     </ScrollBars>
-                    <ModalFooter>
-                        <FlexSpacer />
+                    <ModalFooter cx={ css.footer }>
                         <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => modalProps.abort() } />
                         <Button color="primary" caption="Ok" onClick={ () => modalProps.success('Success action') } />
                     </ModalFooter>

diff --git a/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx b/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { IModal, useUuiContext } from '@epam/uui-core';
 import { demoData } from '@epam/uui-docs';
-import { ModalBlocker, ModalFooter, ModalHeader, ModalWindow, FlexRow, FlexSpacer, Panel, ScrollBars, Text, Button } from '@epam/uui';
+import { ModalBlocker, ModalFooter, ModalHeader, ModalWindow, FlexRow, Panel, ScrollBars, Text, Button } from '@epam/uui';
+import css from './styles.module.scss';
 
 function ModalWithDisabledClickOutsideAndCross(props: IModal<string>) {
     return (
@@ -18,8 +19,7 @@ function ModalWithDisabledClickOutsideAndCross(props: IModal<string>) {
                             </Text>
                         </FlexRow>
                     </ScrollBars>
-                    <ModalFooter>
-                        <FlexSpacer />
+                    <ModalFooter cx={ css.footer }>
                         <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => props.abort() } />
                         <Button color="primary" caption="Ok" onClick={ () => props.success('Success action') } />
                     </ModalFooter>

diff --git a/app/src/docs/_examples/modals/ModalWithForm.example.tsx b/app/src/docs/_examples/modals/ModalWithForm.example.tsx
@@ -3,6 +3,7 @@ import { IModal, useUuiContext, useAsyncDataSource, LazyDataSourceApiResponse }
 import { Country } from '@epam/uui-docs';
 import { ModalBlocker, ModalWindow, FlexSpacer, ModalHeader, FlexRow, LabeledInput, TextInput, Button, ScrollBars, ModalFooter, SuccessNotification, useForm, Text,
     Panel, FlexCell, RadioGroup, PickerInput } from '@epam/uui';
+import css from './styles.module.scss';
 
 interface Person {
     firstName?: string;
@@ -77,8 +78,7 @@ function ModalWithFormExample(modalProps: IModal<Person>) {
                             </FlexCell>
                         </FlexRow>
                     </Panel>
-                    <ModalFooter borderTop>
-                        <FlexSpacer />
+                    <ModalFooter borderTop cx={ css.footer }>
                         <Button color="secondary" fill="outline" onClick={ () => close().then(modalProps.abort) } caption="Cancel" />
                         <Button color="primary" caption="Confirm" onClick={ save } />
                     </ModalFooter>

diff --git a/app/src/docs/_examples/modals/styles.module.scss b/app/src/docs/_examples/modals/styles.module.scss
@@ -0,0 +1,9 @@
+.footer {
+    justify-content: flex-end;
+
+    @media (max-width: 720px) {
+        :global(.uui-button) {
+            flex-basis: 50%;
+        }
+    }
+}
diff --git a/changelog.md b/changelog.md
@@ -3,6 +3,7 @@
 **What's New**
 * Sass updated to the last version, warnings 'Mixed Declarations' fixed https://sass-lang.com/documentation/breaking-changes/mixed-decls/
 * [DataTable]: - `ColumnsConfigurationModal` - updated modal width from 420px to 560px according design, 'disabled' state for locked columns is changed to 'readonly', added vertical paddings to multiline column names.
+* [Modals]: for mobile view (width is up to 720px) by default the modal position is fixed at the bottom edge of the screen
 
 **What's Fixed**
 *[VirtualList]: fixed offsets counting if rows have different height

diff --git a/uui-editor/src/plugins/linkPlugin/AddLinkModal.tsx b/uui-editor/src/plugins/linkPlugin/AddLinkModal.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { ELEMENT_LINK, TLinkElement, unwrapLink, upsertLink } from '@udecode/plate-link';
 import { PlateEditor, getPluginType, findNode, getAboveNode } from '@udecode/plate-common';
 import { IModal } from '@epam/uui-core';
-import { FlexRow, FlexSpacer, ModalWindow, ModalBlocker, ModalFooter, ModalHeader, Button, LabeledInput, TextInput } from '@epam/uui';
+import { FlexRow, ModalWindow, ModalBlocker, ModalFooter, ModalHeader, Button, LabeledInput, TextInput } from '@epam/uui';
 
 import css from './link.module.scss';
 
@@ -51,8 +51,7 @@ export function AddLinkModal({ editor, ...modalProps }: AddLinkModalProps) {
                         />
                     </LabeledInput>
                 </FlexRow>
-                <ModalFooter borderTop>
-                    <FlexSpacer />
+                <ModalFooter borderTop cx={ css.footer }>
                     <Button
                         color="secondary"
                         fill="outline"

diff --git a/uui-editor/src/plugins/linkPlugin/link.module.scss b/uui-editor/src/plugins/linkPlugin/link.module.scss
@@ -7,3 +7,13 @@
 .input-wrapper {
     padding: 9px 24px;
 }
+
+.footer {
+    justify-content: flex-end;
+
+    @media (max-width: 720px) {
+        :global(.uui-button) {
+            flex-basis: 50%;
+        }
+    }
+}
diff --git a/uui-editor/src/plugins/videoPlugin/AddVideoModal.module.scss b/uui-editor/src/plugins/videoPlugin/AddVideoModal.module.scss
@@ -1,3 +1,13 @@
 .input-wrapper {
     padding: 9px 24px;
 }
+
+.footer {
+    justify-content: flex-end;
+
+    @media (max-width: 720px) {
+        :global(.uui-button) {
+            flex-basis: 50%;
+        }
+    }
+}
diff --git a/uui-editor/src/plugins/videoPlugin/AddVideoModal.tsx b/uui-editor/src/plugins/videoPlugin/AddVideoModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IModal, prependHttp } from '@epam/uui-core';
-import { FlexSpacer, FlexRow, ModalBlocker, ModalHeader, ModalWindow, ModalFooter, LabeledInput, Button, TextInput } from '@epam/uui';
+import { FlexRow, ModalBlocker, ModalHeader, ModalWindow, ModalFooter, LabeledInput, Button, TextInput } from '@epam/uui';
 import css from './AddVideoModal.module.scss';
 import getVideoId from 'get-video-id';
 import { useState } from 'react';
@@ -75,8 +75,7 @@ export function AddVideoModal({ editor, success, abort, ...props }: AddVideoModa
                         />
                     </LabeledInput>
                 </FlexRow>
-                <ModalFooter borderTop>
-                    <FlexSpacer />
+                <ModalFooter borderTop cx={ css.footer }>
                     <Button color="secondary" fill="outline" caption="Cancel" onClick={ () => abort() } />
                     <Button
                         color="primary"

diff --git a/uui/components/overlays/ConfirmationModal.module.scss b/uui/components/overlays/ConfirmationModal.module.scss
@@ -0,0 +1,9 @@
+.footer {
+    justify-content: flex-end;
+
+    @media (max-width: 720px) {
+        :global(.uui-button) {
+            flex-basis: 50%;
+        }
+    }
+}
diff --git a/uui/components/overlays/ConfirmationModal.tsx b/uui/components/overlays/ConfirmationModal.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { IModal } from '@epam/uui-core';
 import { Button } from '../buttons';
-import { FlexSpacer, Panel, ScrollBars } from '../layout';
+import { Panel, ScrollBars } from '../layout';
 import { ModalBlocker, ModalWindow, ModalHeader, ModalFooter } from './Modals';
 import { i18n } from '../../i18n';
 
+import css from './ConfirmationModal.module.scss';
+
 export interface ConfirmationModalWindowProps extends IModal<any> {
     /** Confirmation modal title */
     caption: any;
@@ -27,8 +29,7 @@ export class ConfirmationModal extends React.Component<ConfirmationModalWindowPr
                 <ModalWindow width={ 420 }>
                     <ModalHeader borderBottom title={ this.props.caption } onClose={ () => this.props.abort() } />
                     <ScrollBars>{bodyContent}</ScrollBars>
-                    <ModalFooter>
-                        <FlexSpacer />
+                    <ModalFooter cx={ css.footer }>
                         {this.props.hideCancelButton || (
                             <Button caption={ i18n.form.modals.discardButton } onClick={ () => this.props.success(false) } fill="outline" color="secondary" />
                         )}

diff --git a/uui/components/overlays/Modals.module.scss b/uui/components/overlays/Modals.module.scss
@@ -29,8 +29,12 @@
         box-shadow: var(--uui-modals-shadow);
 
         @media (max-width: 720px) {
+            position: fixed;
+            inset-inline-start: 0;
+            inset-block-end: 0;
             min-width: 100vw;
-            border-radius: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
         }
 
         :global(.uui-shadow-top)::before {
@@ -48,6 +52,12 @@
 .modal-footer {
     border-bottom-left-radius: var(--uui-modals-border-radius);
     border-bottom-right-radius: var(--uui-modals-border-radius);
+
+    @media (max-width: 720px) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+
+    }
 }
 
 .modal-header {

diff --git a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
@@ -145,17 +145,14 @@ exports[`ConfirmationModal should be rendered correctly 1`] = `
       </div>
     </div>
     <div
-      className="uui-flex-row root uui-size-36 padding-24 vPadding-24 root modalFooter container align-items-center"
+      className="uui-flex-row root uui-size-36 padding-24 vPadding-24 root modalFooter footer container align-items-center"
       style={
         Object {
           "columnGap": "12px",
           "rowGap": undefined,
         }
       }
     >
-      <div
-        className="flexSpacer"
-      />
       <button
         className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-outline uui-color-secondary uui-size-36"
         onClick={[Function]}
@@ -322,17 +319,14 @@ exports[`ConfirmationModal should be rendered correctly without body 1`] = `
       </div>
     </div>
     <div
-      className="uui-flex-row root uui-size-36 padding-24 vPadding-24 root modalFooter container align-items-center"
+      className="uui-flex-row root uui-size-36 padding-24 vPadding-24 root modalFooter footer container align-items-center"
       style={
         Object {
           "columnGap": "12px",
           "rowGap": undefined,
         }
       }
     >
-      <div
-        className="flexSpacer"
-      />
       <button
         className="uui-button-box uui-enabled -clickable container root uui-button uui-fill-outline uui-color-secondary uui-size-36"
         onClick={[Function]}