Remove overflow: hidden from EuiModal styles that caused a red overla…

[breehall]

Summary

Fixes #6328

EuiModal contained a bug that would set a red mask-image inside of .euiModalBody__overflow that appeared on the EuiModalBody and covered portions of the modal. This came from a the overflow: hidden inside of EuiModal that was added to accommodate IE.

Extra details: https://bugs.chromium.org/p/chromium/issues/detail?id=1229700&q=mask%20image&can=2?

Live CodeSandbox Example w/ Error: https://codesandbox.io/s/sharp-meninsky-v7x6pt?file=/demo.js:41-75

Before

C741F726-BC6B-41FD-B8CB-396437CDD56E.mov

Testing

To test this, you can update the example in modal.js with the example below that contains an EuiInMemoryTable. When overflow: hidden exists inside of .euiModal styles (in _modal.scss), you will notice the red block when hovering over and interacting with the table.

Modal Example Code

import React, { useState } from 'react';

import {
  EuiButton,
  EuiModal,
  EuiModalBody,
  EuiModalHeader,
  EuiModalHeaderTitle,
  EuiHealth,
  EuiLink,
  EuiInMemoryTable,
} from '../../../../src/components';

import _times from 'lodash/times';

const firstNames = [
  'Very long first name that will wrap or be truncated',
  'Another very long first name which will wrap or be truncated',
  'Clinton',
  'Igor',
  undefined,
  'Drew',
  null,
  'Rashid',
  undefined,
  'John',
];

const lastNames = [
  'Very long last name that will wrap or be truncated',
  'Another very long last name which will wrap or be truncated',
  'Gormley',
  'Motov',
  'Minarik',
  'Raines',
  'Král',
  'Khan',
  'Sissel',
  'Dorlus',
];

const github = [
  'martijnvg',
  'elissaw',
  'clintongormley',
  'imotov',
  'karmi',
  'drewr',
  'HonzaKral',
  'rashidkpc',
  'jordansissel',
  'silne30',
];

const createUsers = (countries) => {
  return _times(20, (index) => {
    return {
      id: index,
      firstName: index < 10 ? firstNames[index] : firstNames[index - 10],
      lastName: index < 10 ? lastNames[index] : lastNames[index - 10],
      github: index < 10 ? github[index] : github[index - 10],
      dateOfBirth: new Date(
        1980,
        Math.floor(Math.random() * 12),
        Math.floor(Math.random() * 27) + 1
      ),
      nationality: 'nationality',
      online: index % 2 === 0,
    };
  });
};

export const Table = () => {
  const columns = [
    {
      field: 'firstName',
      name: 'First Name',
      sortable: true,
      truncateText: true,
    },
    {
      field: 'lastName',
      name: 'Last Name',
      truncateText: true,
    },
    {
      field: 'github',
      name: 'Github',
      render: (username) => (
        <EuiLink href={`https://github.com/${username}`} target="_blank">
          {username}
        </EuiLink>
      ),
    },
    {
      field: 'dateOfBirth',
      name: 'Date of Birth',
      dataType: 'string',
      render: (date) => `hello`,
      sortable: true,
    },
    {
      field: 'nationality',
      name: 'Nationality',
    },
    {
      field: 'online',
      name: 'Online',
      dataType: 'boolean',
      render: (online) => {
        const color = online ? 'success' : 'danger';
        const label = online ? 'Online' : 'Offline';
        return <EuiHealth color={color}>{label}</EuiHealth>;
      },
      sortable: true,
    },
  ];

  const sorting = {
    sort: {
      field: 'dateOfBirth',
      direction: 'desc',
    },
  };

  return (
    <EuiInMemoryTable
      tableCaption="Demo of EuiInMemoryTable"
      items={createUsers()}
      columns={columns}
      pagination={true}
      sorting={sorting}
    />
  );
};

export default () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const closeModal = () => setIsModalVisible(false);
  const showModal = () => setIsModalVisible(true);

  let modal;

  if (isModalVisible) {
    modal = (
      <EuiModal onClose={closeModal}>
        <EuiModalHeader>
          <EuiModalHeaderTitle>
            <h1>title</h1>
          </EuiModalHeaderTitle>
        </EuiModalHeader>

        <EuiModalBody>
          <Table />
        </EuiModalBody>
      </EuiModal>
    );
  }

  return (
    <div>
      <EuiButton onClick={showModal}>Show modal</EuiButton>
      {modal}
    </div>
  );
};

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• [ ] Checked in both light and dark modes
• [ ] Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and playground toggles
• [ ] Added documentation
  - [ ] Checked Code Sandbox works for any docs examples
• [ ] Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• [ ] Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6343/

[cee-chen]

Recording my debugging/findings here for transparency:

1. Bizarrely enough, what triggers this bug is not actually the table within EuiBasicTable/EuiInMemoryTable at all - it's the EuiScreenReaderOnly component inside our EuiTablePagination component. Screenshot of Chrome with no red when the live region is set to display: none:
   

2. Overriding the CSS of the live region to position: relative instead of position: absolute also fixes the mask bug, but I'm honestly not a huge fan of this workaround and I think the EuiModal-targeted workaround is better

3. I got a little worried that every component using our euiOverflowShadow mixin was going to have this issue anytime an EuiScreenReaderOnly was used within it, but after investigating it appears that only the following components are using scroll shadows/mask-image:

   • EuiModal / .euiModalBody__overflow
     • The above linked chromium bug really does only affect EuiModal primarily because of EuiModal's use of both overflow and border-radius, hence why I think this workaround is sufficient until Chromium fixes the bug
   • EuiFlyout / .euiFlyoutBody__overflow
     • No border-radius, uses clip-path instead of overflow - should be fine
   • EuiDataGrid / toolbar column/sort popovers
     • No wildcard content / EUI controls the content of these popovers, so should be fine
   • EuiSelectable / .euiSelectableList__list
     • Might be dicey if consumers do weird things with the option renders - something to keep an eye on

4. A fun digression - I did a little bit of extra testing around what happens if someone uses EuiModal without EuiModalBody with tall/scrolling content. In effect it really isn't significantly worse without overflow: hidden than with, content still gets cut off fairly inaccessibly either way so consumers really should be using EuiModalBody.
   

[cee-chen]

Thanks for your patience on this, I now feel very confident in this PR/fix! 🎉

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6343/