Introduce color property to the Modal component (#468)

`Modal` can now be colored via the `color` prop, using a value
from the Feedback Colors collection.

Author: adamkudrna

src/components/Modal/Modal.jsx

@@ -9,6 +9,7 @@ import { createPortal } from 'react-dom';
 import { classNames } from '../../helpers/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { withGlobalProps } from '../../providers/globalProps';
+import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { dialogOnCancelHandler } from './_helpers/dialogOnCancelHandler';
 import { dialogOnClickHandler } from './_helpers/dialogOnClickHandler';
 import { dialogOnCloseHandler } from './_helpers/dialogOnCloseHandler';
@@ -21,6 +22,7 @@ import styles from './Modal.module.scss';
 
 const preRender = (
   children,
+  color,
   dialogRef,
   position,
   size,
@@ -32,6 +34,7 @@ const preRender = (
     {...transferProps(events)}
     className={classNames(
       styles.root,
+      color && getRootColorClassName(color, styles),
       getSizeClassName(size, styles),
       getPositionClassName(position, styles),
     )}
@@ -48,6 +51,7 @@ export const Modal = ({
   autoFocus,
   children,
   closeButtonRef,
+  color,
   dialogRef,
   portalId,
   position,
@@ -107,6 +111,7 @@ export const Modal = ({
   if (portalId === null) {
     return preRender(
       children,
+      color,
       internalDialogRef,
       position,
       size,
@@ -118,6 +123,7 @@ export const Modal = ({
   return createPortal(
     preRender(
       children,
+      color,
       internalDialogRef,
       position,
       size,
@@ -135,6 +141,7 @@ Modal.defaultProps = {
   autoFocus: true,
   children: null,
   closeButtonRef: null,
+  color: undefined,
   dialogRef: null,
   portalId: null,
   position: 'center',
@@ -180,6 +187,11 @@ Modal.propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     current: PropTypes.any,
   }),
+  /**
+   * Color to clarify importance and meaning of the modal. Implements
+   * [Feedback color collection](/docs/foundation/collections#colors).
+   */
+  color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
   /**
    * Reference to dialog element
    */

src/components/Modal/Modal.module.scss

@@ -7,6 +7,7 @@
 @use "../../styles/theme/typography";
 @use "../../styles/tools/accessibility";
 @use "../../styles/tools/breakpoint";
+@use "../../styles/tools/collections";
 @use "../../styles/tools/reset";
 @use "../../styles/tools/spacing";
 @use "animations";
@@ -82,4 +83,14 @@
         top: var(--rui-local-outer-spacing);
         bottom: auto;
     }
+
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Modal",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties,
+        );
+    }
 }

src/components/Modal/ModalBody.module.scss

@@ -1,6 +1,21 @@
+@use "settings";
+
 @layer components.modal {
     .root {
         flex: 1 1 auto;
+        border-inline: settings.$border-width solid var(--rui-local-border-color);
+
+        &:first-child {
+            border-top: settings.$border-width solid var(--rui-local-border-color);
+            border-top-left-radius: settings.$border-radius;
+            border-top-right-radius: settings.$border-radius;
+        }
+
+        &:last-child {
+            border-bottom: settings.$border-width solid var(--rui-local-border-color);
+            border-bottom-right-radius: settings.$border-radius;
+            border-bottom-left-radius: settings.$border-radius;
+        }
     }
 
     .isRootScrollingAuto,

src/components/Modal/ModalFooter.module.scss

@@ -9,10 +9,11 @@
         gap: theme.$footer-gap;
         align-items: center;
         padding: theme.$padding-y theme.$padding-x;
-        border-top: theme.$separator-width solid theme.$separator-color;
+        border: settings.$border-width solid var(--rui-local-border-color);
+        border-top: theme.$separator-width solid var(--rui-local-border-color, #{theme.$separator-color});
         border-bottom-right-radius: settings.$border-radius;
         border-bottom-left-radius: settings.$border-radius;
-        background: theme.$footer-background;
+        background: var(--rui-local-background-color, #{theme.$footer-background});
     }
 
     .isRootJustifiedToStart {

src/components/Modal/ModalHeader.module.scss

@@ -1,3 +1,4 @@
+@use "settings";
 @use "theme";
 
 @layer components.modal {
@@ -7,7 +8,10 @@
         gap: theme.$header-gap;
         align-items: baseline;
         padding: theme.$padding-y theme.$padding-x;
-        border-bottom: theme.$separator-width solid theme.$separator-color;
+        border: settings.$border-width solid var(--rui-local-border-color);
+        border-bottom: theme.$separator-width solid var(--rui-local-border-color, #{theme.$separator-color});
+        border-top-left-radius: settings.$border-radius;
+        border-top-right-radius: settings.$border-radius;
     }
 
     .isRootJustifiedToStart {

src/components/Modal/README.md

@@ -313,6 +313,7 @@ React.createElement(() => {
             <ModalBody>
               <ModalContent>
                 <Radio
+                  id="modal-footer-justify"
                   label="Footer justification"
                   onChange={(e) => setModalJustify(e.target.value)}
                   options={[
@@ -690,6 +691,91 @@ React.createElement(() => {
 });
 ```
 
+## Color Variants
+
+Modal can be colored using the `color` prop. The `color` prop implements the
+[Feedback color collection](/docs/foundation/collections#colors)
+and is applied to the border of the modal and the modal footer.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [modalColor, setModalColor] = React.useState('success');
+  const modalCloseButtonRef = React.useRef();
+  {/*
+    The `preventScrollUnderneath` feature is necessary for Modals to work in
+    React UI docs. You may not need it in your application.
+  */}
+  return (
+    <GlobalPropsProvider globalProps={{
+      Modal: { preventScrollUnderneath: window.document.documentElement }
+    }}>
+      <Button
+        label="Launch modal with color options"
+        onClick={() => setModalOpen(true)}
+      />
+      <div>
+        {modalOpen && (
+          <Modal
+            closeButtonRef={modalCloseButtonRef}
+            color={modalColor}
+          >
+            <ModalHeader>
+              <ModalTitle>Modal color</ModalTitle>
+              <ModalCloseButton onClick={() => setModalOpen(false)} />
+            </ModalHeader>
+            <ModalBody>
+              <ModalContent>
+                <Radio
+                  id="modal-color"
+                  label="Modal color"
+                  onChange={(e) => setModalColor(e.target.value)}
+                  options={[
+                    {
+                      label: 'success',
+                      value: 'success',
+                    },
+                    {
+                      label: 'warning',
+                      value: 'warning',
+                    },
+                    {
+                      label: 'danger',
+                      value: 'danger',
+                    },
+                    {
+                      label: 'info',
+                      value: 'info',
+                    },
+                    {
+                      label: 'help',
+                      value: 'help',
+                    },
+                    {
+                      label: 'note',
+                      value: 'note',
+                    },
+                  ]}
+                  value={modalColor}
+                />
+              </ModalContent>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                color={modalColor}
+                label="Close"
+                onClick={() => setModalOpen(false)}
+                ref={modalCloseButtonRef}
+              />
+            </ModalFooter>
+          </Modal>
+        )}
+      </div>
+    </GlobalPropsProvider>
+  );
+});
+```
+
 ## Mouse and Keyboard Control
 
 Modal can be controlled either by mouse or keyboard. To enhance user

src/components/Modal/__tests__/Modal.test.jsx

@@ -6,6 +6,7 @@ import {
   within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { feedbackColorPropTest } from '../../../../tests/propTests/feedbackColorPropTest';
 import { Button } from '../../..';
 import { Modal } from '../Modal';
 import { ModalBody } from '../ModalBody';
@@ -31,6 +32,7 @@ describe('rendering', () => {
   });
 
   it.each([
+    ...feedbackColorPropTest,
     [
       { children: <div>content text</div> },
       (rootElement) => expect(within(rootElement).getByText('content text')),

src/components/Modal/_settings.scss

@@ -1,6 +1,10 @@
 @use "sass:map";
+@use "../../styles/settings/collections";
 @use "../../styles/theme/borders";
 @use "../../styles/theme/typography";
 
+$border-width: borders.$width;
 $border-radius: borders.$radius-2;
 $title-font-size: map.get(typography.$font-size-values, 2);
+$colors: collections.$feedback-colors;
+$themeable-properties: border-color, background-color;

src/theme.scss

@@ -1014,6 +1014,30 @@
         --rui-Modal--fullscreen__height: 100%;
         --rui-Modal__animation__duration: 0.25s;
 
+        // Modal: success variant
+        --rui-Modal--success__border-color: var(--rui-color-feedback-success);
+        --rui-Modal--success__background-color: var(--rui-color-background-success);
+
+        // Modal: warning variant
+        --rui-Modal--warning__border-color: var(--rui-color-feedback-warning);
+        --rui-Modal--warning__background-color: var(--rui-color-background-warning);
+
+        // Modal: danger variant
+        --rui-Modal--danger__border-color: var(--rui-color-feedback-danger);
+        --rui-Modal--danger__background-color: var(--rui-color-background-danger);
+
+        // Modal: info variant
+        --rui-Modal--info__border-color: var(--rui-color-feedback-info);
+        --rui-Modal--info__background-color: var(--rui-color-background-info);
+
+        // Modal: help variant
+        --rui-Modal--help__border-color: var(--rui-color-feedback-help);
+        --rui-Modal--help__background-color: var(--rui-color-background-help);
+
+        // Modal: note variant
+        --rui-Modal--note__border-color: var(--rui-color-feedback-note);
+        --rui-Modal--note__background-color: var(--rui-color-background-note);
+
         //
         // Paper
         // =====