Add reusable <Modal> component, use with <Alert>

stylesheets/components/Alert.scss

@@ -1,39 +0,0 @@
-// Copyright 2021 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-.module-Alert {
-  @include popper-shadow();
-  border-radius: 8px;
-  margin: 0 auto;
-  max-width: 360px;
-  padding: 16px;
-  width: 95%;
-
-  @include light-theme() {
-    background: $color-white;
-    color: $color-gray-90;
-  }
-
-  @include dark-theme() {
-    background: $color-gray-95;
-    color: $color-gray-05;
-  }
-
-  &__title {
-    @include font-body-1-bold;
-    margin: 0 0 1em 0;
-    padding: 0;
-  }
-
-  &__body {
-    @include font-body-1;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__button-container {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 16px;
-  }
-}

stylesheets/components/Modal.scss

@@ -0,0 +1,92 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.module-Modal {
+  @include popper-shadow();
+  border-radius: 8px;
+  margin: 0 auto;
+  max-width: 360px;
+  width: 95%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+
+  @include light-theme() {
+    background: $color-white;
+    color: $color-gray-90;
+  }
+
+  @include dark-theme() {
+    background: $color-gray-95;
+    color: $color-gray-05;
+  }
+
+  &__header {
+    position: sticky;
+    padding: 16px 16px 0 16px;
+  }
+
+  &__title {
+    @include font-body-1-bold;
+    margin: 0 0 1em 0;
+    padding: 0;
+  }
+
+  &__close-button {
+    @include button-reset;
+
+    float: right;
+    height: 24px;
+    width: 24px;
+
+    @include light-theme {
+      @include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
+    }
+
+    @include dark-theme {
+      @include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
+    }
+
+    &:focus {
+      @include keyboard-mode {
+        background-color: $ultramarine-ui-light;
+      }
+      @include dark-keyboard-mode {
+        background-color: $ultramarine-ui-dark;
+      }
+    }
+  }
+
+  &__body {
+    @include font-body-1;
+    margin: 0;
+    overflow: auto;
+  }
+
+  &--has-header {
+    .module-Modal__body {
+      padding: 0 16px 16px 16px;
+      border-top: 1px solid transparent;
+
+      &--scrolled {
+        @include light-theme {
+          border-top-color: $color-gray-05;
+        }
+
+        @include dark-theme {
+          border-top-color: $color-gray-80;
+        }
+      }
+    }
+  }
+
+  &--no-header {
+    padding: 16px;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+  }
+}

stylesheets/manifest.scss

@@ -28,7 +28,6 @@
 
 // New style: components
 @import './components/AddGroupMembersModal.scss';
-@import './components/Alert.scss';
 @import './components/AvatarInput.scss';
 @import './components/Button.scss';
 @import './components/ContactPill.scss';
@@ -38,5 +37,6 @@
 @import './components/GroupDialog.scss';
 @import './components/GroupTitleInput.scss';
 @import './components/MessageAudio.scss';
+@import './components/Modal.scss';
 @import './components/SearchResultsLoadingFakeHeader.scss';
 @import './components/SearchResultsLoadingFakeRow.scss';

ts/components/Alert.stories.tsx

@@ -19,6 +19,9 @@ const defaultProps = {
   onClose: action('onClose'),
 };
 
+const LOREM_IPSUM =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
+
 story.add('Title and body are strings', () => (
   <Alert
     {...defaultProps}
@@ -39,3 +42,32 @@ story.add('Body is a ReactNode', () => (
     }
   />
 ));
+
+story.add('Long body (without title)', () => (
+  <Alert
+    {...defaultProps}
+    body={
+      <>
+        <p>{LOREM_IPSUM}</p>
+        <p>{LOREM_IPSUM}</p>
+        <p>{LOREM_IPSUM}</p>
+        <p>{LOREM_IPSUM}</p>
+      </>
+    }
+  />
+));
+
+story.add('Long body (with title)', () => (
+  <Alert
+    {...defaultProps}
+    title="Hello world"
+    body={
+      <>
+        <p>{LOREM_IPSUM}</p>
+        <p>{LOREM_IPSUM}</p>
+        <p>{LOREM_IPSUM}</p>
+        <p>{LOREM_IPSUM}</p>
+      </>
+    }
+  />
+));

ts/components/Alert.tsx

@@ -5,7 +5,7 @@ import React, { FunctionComponent, ReactNode } from 'react';
 
 import { LocalizerType } from '../types/Util';
 import { Button } from './Button';
-import { ModalHost } from './ModalHost';
+import { Modal } from './Modal';
 
 type PropsType = {
   title?: string;
@@ -20,13 +20,10 @@ export const Alert: FunctionComponent<PropsType> = ({
   onClose,
   title,
 }) => (
-  <ModalHost onClose={onClose}>
-    <div className="module-Alert">
-      {title && <h1 className="module-Alert__title">{title}</h1>}
-      <p className="module-Alert__body">{body}</p>
-      <div className="module-Alert__button-container">
-        <Button onClick={onClose}>{i18n('Confirmation--confirm')}</Button>
-      </div>
-    </div>
-  </ModalHost>
+  <Modal i18n={i18n} onClose={onClose} title={title}>
+    {body}
+    <Modal.Footer>
+      <Button onClick={onClose}>{i18n('Confirmation--confirm')}</Button>
+    </Modal.Footer>
+  </Modal>
 );

ts/components/ConfirmationDialog.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -28,6 +28,7 @@ function focusRef(el: HTMLElement | null) {
   }
 }
 
+// TODO: This should use <Modal>. See DESKTOP-1038.
 export const ConfirmationDialog = React.memo(
   ({ i18n, onClose, cancelText, children, title, actions }: Props) => {
     React.useEffect(() => {

ts/components/ErrorModal.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -21,6 +21,7 @@ function focusRef(el: HTMLElement | null) {
   }
 }
 
+// TODO: This should use <Modal>. See DESKTOP-1038.
 export const ErrorModal = (props: PropsType): JSX.Element => {
   const { buttonText, description, i18n, onClose, title } = props;
 

ts/components/GroupDialog.tsx

@@ -27,6 +27,7 @@ type PropsType = {
     }
 );
 
+// TODO: This should use <Modal>. See DESKTOP-1038.
 export function GroupDialog(props: Readonly<PropsType>): JSX.Element {
   const {
     children,

ts/components/Modal.stories.tsx

@@ -0,0 +1,61 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { setup as setupI18n } from '../../js/modules/i18n';
+import enMessages from '../../_locales/en/messages.json';
+import { Modal } from './Modal';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/Modal', module);
+
+const onClose = action('onClose');
+
+const LOREM_IPSUM =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
+
+story.add('Bare bones, short', () => <Modal i18n={i18n}>Hello world!</Modal>);
+
+story.add('Bare bones, long', () => (
+  <Modal i18n={i18n}>
+    <p>{LOREM_IPSUM}</p>
+    <p>{LOREM_IPSUM}</p>
+    <p>{LOREM_IPSUM}</p>
+    <p>{LOREM_IPSUM}</p>
+  </Modal>
+));
+
+story.add('Title, X button, body, and footer', () => (
+  <Modal i18n={i18n} title="Hello world" onClose={onClose} hasXButton>
+    {LOREM_IPSUM}
+    <Modal.Footer>Footer</Modal.Footer>
+  </Modal>
+));
+
+story.add('Long body with title', () => (
+  <Modal i18n={i18n} title="Hello world" onClose={onClose}>
+    <p>{LOREM_IPSUM}</p>
+    <p>{LOREM_IPSUM}</p>
+    <p>{LOREM_IPSUM}</p>
+    <p>{LOREM_IPSUM}</p>
+  </Modal>
+));
+
+story.add('Long body with long title and X button', () => (
+  <Modal
+    i18n={i18n}
+    title={LOREM_IPSUM.slice(0, 104)}
+    hasXButton
+    onClose={onClose}
+  >
+    <p>{LOREM_IPSUM}</p>
+    <p>{LOREM_IPSUM}</p>
+    <p>{LOREM_IPSUM}</p>
+    <p>{LOREM_IPSUM}</p>
+  </Modal>
+));

ts/components/Modal.tsx

@@ -0,0 +1,72 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useState, ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
+import { noop } from 'lodash';
+
+import { LocalizerType } from '../types/Util';
+import { ModalHost } from './ModalHost';
+
+type PropsType = {
+  children: ReactNode;
+  hasXButton?: boolean;
+  i18n: LocalizerType;
+  onClose?: () => void;
+  title?: ReactNode;
+};
+
+export function Modal({
+  children,
+  hasXButton,
+  i18n,
+  onClose = noop,
+  title,
+}: Readonly<PropsType>): ReactElement {
+  const [scrolled, setScrolled] = useState(false);
+
+  const hasHeader = Boolean(hasXButton || title);
+
+  return (
+    <ModalHost onClose={onClose}>
+      <div
+        className={classNames(
+          'module-Modal',
+          hasHeader ? 'module-Modal--has-header' : 'module-Modal--no-header'
+        )}
+      >
+        {hasHeader && (
+          <div className="module-Modal__header">
+            {hasXButton && (
+              <button
+                aria-label={i18n('close')}
+                type="button"
+                className="module-Modal__close-button"
+                onClick={() => {
+                  onClose();
+                }}
+              />
+            )}
+            {title && <h1 className="module-Modal__title">{title}</h1>}
+          </div>
+        )}
+        <div
+          className={classNames('module-Modal__body', {
+            'module-Modal__body--scrolled': scrolled,
+          })}
+          onScroll={event => {
+            setScrolled((event.target as HTMLDivElement).scrollTop > 2);
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </ModalHost>
+  );
+}
+
+Modal.Footer = ({
+  children,
+}: Readonly<{ children: ReactNode }>): ReactElement => (
+  <div className="module-Modal__footer">{children}</div>
+);

ts/components/ProgressDialog.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -9,6 +9,7 @@ export type PropsType = {
   readonly i18n: LocalizerType;
 };
 
+// TODO: This should use <Modal>. See DESKTOP-1038.
 export const ProgressDialog = React.memo(({ i18n }: PropsType) => {
   return (
     <div className="module-progress-dialog">

ts/components/conversation/ChatSessionRefreshedDialog.tsx

@@ -12,6 +12,7 @@ export type PropsType = {
   onClose: () => unknown;
 };
 
+// TODO: This should use <Modal>. See DESKTOP-1038.
 export function ChatSessionRefreshedDialog(
   props: PropsType
 ): React.ReactElement {

ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx

@@ -41,6 +41,7 @@ type PropsType = {
   toggleSelectedContact: (conversationId: string) => void;
 };
 
+// TODO: This should use <Modal>. See DESKTOP-1038.
 export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
   candidateContacts,
   confirmAdds,

ts/util/lint/exceptions.json

@@ -16786,7 +16786,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.js",
     "line": "    const inputRef = react_1.useRef(null);",
-    "lineNumber": 41,
+    "lineNumber": 42,
     "reasonCategory": "usageTrusted",
     "updated": "2021-03-11T20:49:17.292Z",
     "reasonDetail": "Used to focus an input."
@@ -17284,4 +17284,4 @@
     "reasonCategory": "falseMatch",
     "updated": "2021-04-06T23:11:04.431Z"
   }
-]
+]