fix(modal): update hasScrollingContent styles (#14712)

* fix(modal): update hasScrollingContent styles * chore: only have border spacing on scroll content * fix: remove duplicate style * fix: fade width and alignment * chore: add vrt tests * chore: update story content * docs: update story styles
carbon-design-system · Oct 5, 2023 · 435e72d · 435e72d
1 parent 2630758
commit 435e72d
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 8 deletions.
diff --git a/e2e/components/ComposedModal/ComposedModal-test.e2e.js b/e2e/components/ComposedModal/ComposedModal-test.e2e.js
@@ -37,13 +37,22 @@ test.describe('ComposedModal', () => {
           theme,
         });
       });
+
       test('full width modal @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'ComposedModal',
           id: 'components-composedmodal--full-width',
           theme,
         });
       });
+
+      test('with scrolling content @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ComposedModal',
+          id: 'components-composedmodal--with-scrolling-content',
+          theme,
+        });
+      });
     });
   });
 });
diff --git a/e2e/components/Modal/Modal-test.e2e.js b/e2e/components/Modal/Modal-test.e2e.js
@@ -37,6 +37,14 @@ test.describe('Modal', () => {
           theme,
         });
       });
+
+      test('with scrolling content modal @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Modal',
+          id: 'components-modal--with-scrolling-content',
+          theme,
+        });
+      });
     });
   });
 });
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js
@@ -10,6 +10,8 @@ import ReactDOM from 'react-dom';
 import ComposedModal, { ModalBody } from './ComposedModal';
 import { ModalHeader } from './ModalHeader';
 import { ModalFooter } from './ModalFooter';
+import MultiSelect from '../MultiSelect';
+import Dropdown from '../Dropdown';
 import Select from '../Select';
 import SelectItem from '../SelectItem';
 import TextInput from '../TextInput';
@@ -198,6 +200,75 @@ export const WithStateManager = () => {
   );
 };
 
+export const WithScrollingContent = () => {
+  return (
+    <ComposedModal open>
+      <ModalHeader label="Account resources" title="Add a custom domain" />
+      <ModalBody hasScrollingContent>
+        <p style={{ marginBottom: '1rem' }}>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </p>
+        <p style={{ marginBottom: '1rem' }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu
+          nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae leo
+          vitae orci tincidunt auctor eget eget libero. Ut tincidunt ultricies
+          fringilla. Aliquam erat volutpat. Aenean arcu odio, elementum vel
+          vehicula vitae, porttitor ac lorem. Sed viverra elit ac risus
+          tincidunt fermentum. Ut sollicitudin nibh id risus ornare ornare.
+          Etiam gravida orci ut lectus dictum, quis ultricies felis mollis.
+          Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante quis
+          pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at elit.
+          Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales magna.
+          Proin ornare tellus quis hendrerit egestas. Donec pharetra leo nec
+          molestie sollicitudin.{' '}
+        </p>
+        <TextInput
+          data-modal-primary-focus
+          id="text-input-1"
+          labelText="Domain name"
+          placeholder="e.g. github.com"
+          style={{ marginBottom: '1rem' }}
+        />
+        <div style={{ marginBottom: '1rem' }}>
+          <Select id="select-1" defaultValue="us-south" labelText="Region">
+            <SelectItem value="us-south" text="US South" />
+            <SelectItem value="us-east" text="US East" />
+          </Select>
+        </div>
+        <Dropdown
+          id="drop"
+          label="Dropdown"
+          titleText="Dropdown"
+          items={[
+            { id: 'one', label: 'one', name: 'one' },
+            { id: 'two', label: 'two', name: 'two' },
+          ]}
+          style={{ marginBottom: '1rem' }}
+        />
+        <MultiSelect
+          id="test"
+          label="Multiselect"
+          titleText="Multiselect"
+          items={[
+            {
+              id: 'downshift-1-item-0',
+              text: 'Option 1',
+            },
+            {
+              id: 'downshift-1-item-1',
+              text: 'Option 2',
+            },
+          ]}
+          itemToString={(item) => (item ? item.text : '')}
+        />
+      </ModalBody>
+      <ModalFooter primaryButtonText="Add" secondaryButtonText="Cancel" />
+    </ComposedModal>
+  );
+};
+
 export const Playground = (args) => {
   return (
     <ComposedModal open {...args}>

diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
@@ -198,6 +198,76 @@ const modalFooter = (numberOfButtons) => {
   };
 };
 
+export const WithScrollingContent = () => {
+  return (
+    <Modal
+      open
+      hasScrollingContent
+      modalHeading="Add a custom domain"
+      modalLabel="Account resources"
+      primaryButtonText="Add"
+      secondaryButtonText="Cancel">
+      <p style={{ marginBottom: '1rem' }}>
+        Custom domains direct requests for your apps in this Cloud Foundry
+        organization to a URL that you own. A custom domain can be a shared
+        domain, a shared subdomain, or a shared domain and host.
+      </p>
+      <p style={{ marginBottom: '1rem' }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu
+        nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae leo
+        vitae orci tincidunt auctor eget eget libero. Ut tincidunt ultricies
+        fringilla. Aliquam erat volutpat. Aenean arcu odio, elementum vel
+        vehicula vitae, porttitor ac lorem. Sed viverra elit ac risus tincidunt
+        fermentum. Ut sollicitudin nibh id risus ornare ornare. Etiam gravida
+        orci ut lectus dictum, quis ultricies felis mollis. Mauris nec commodo
+        est, nec faucibus nibh. Nunc commodo ante quis pretium consectetur. Ut
+        ac nisl vitae mi mattis vulputate a at elit. Nullam porttitor ex eget mi
+        feugiat mattis. Nunc non sodales magna. Proin ornare tellus quis
+        hendrerit egestas. Donec pharetra leo nec molestie sollicitudin.{' '}
+      </p>
+      <TextInput
+        data-modal-primary-focus
+        id="text-input-1"
+        labelText="Domain name"
+        placeholder="e.g. github.com"
+        style={{ marginBottom: '1rem' }}
+      />
+      <div style={{ marginBottom: '1rem' }}>
+        <Select id="select-1" defaultValue="us-south" labelText="Region">
+          <SelectItem value="us-south" text="US South" />
+          <SelectItem value="us-east" text="US East" />
+        </Select>
+      </div>
+      <Dropdown
+        id="drop"
+        label="Dropdown"
+        titleText="Dropdown"
+        items={[
+          { id: 'one', label: 'one', name: 'one' },
+          { id: 'two', label: 'two', name: 'two' },
+        ]}
+        style={{ marginBottom: '1rem' }}
+      />
+      <MultiSelect
+        id="test"
+        label="Multiselect"
+        titleText="Multiselect"
+        items={[
+          {
+            id: 'downshift-1-item-0',
+            text: 'Option 1',
+          },
+          {
+            id: 'downshift-1-item-1',
+            text: 'Option 2',
+          },
+        ]}
+        itemToString={(item) => (item ? item.text : '')}
+      />
+    </Modal>
+  );
+};
+
 export const Playground = ({ numberOfButtons, ...args }) => {
   return (
     <Modal

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -202,8 +202,8 @@
     font-weight: 400;
     grid-column: 1/-1;
     grid-row: 2/-2;
-    margin-block-end: $spacing-09;
     overflow-y: auto;
+    padding-block-end: $spacing-09;
     // Required to accommodate focus outline's negative offset:
     padding-block-start: $spacing-03;
     // anything besides text/p spans full width, with just 16px padding
@@ -347,22 +347,35 @@
   // -----------------------------
   // Modal overflow
   // -----------------------------
+  .#{$prefix}--modal-scroll-content {
+    // Required to accommodate focus outline's negative offset when scrolling in Chrome
+    border-block-end: 2px solid transparent;
+  }
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
-    padding-block-end: $spacing-07;
+    padding-block-end: $spacing-06;
   }
 
   .#{$prefix}--modal-content--overflow-indicator {
     position: absolute;
-    background-image: linear-gradient(to bottom, transparent, $layer);
-    block-size: convert.to-rem(32px);
-    content: '';
+    background: $layer;
+    block-size: convert.to-rem(48px);
     grid-column: 1/-1;
     grid-row: 2/-2;
-    inline-size: 100%;
-    inset-block-end: $spacing-09;
+    inline-size: calc(100% - $spacing-05);
+    inset-block-end: 0;
     inset-inline-start: 0;
     pointer-events: none;
+
+    &::before {
+      position: absolute;
+      background-image: linear-gradient(to bottom, transparent, $layer);
+      block-size: convert.to-rem(32px);
+      content: '';
+      inline-size: 100%;
+      inset-block-start: -32px;
+      pointer-events: none;
+    }
   }
 
   // Safari-only media query
@@ -379,7 +392,6 @@
   .#{$prefix}--modal-content:focus
     ~ .#{$prefix}--modal-content--overflow-indicator {
     margin: 0 2px 2px;
-    inline-size: calc(100% - 4px);
   }
 
   @media screen and (-ms-high-contrast: active) {