WWW-1157: iOS modal bug

[colbytcook]

Jira

https://pegadigitalit.atlassian.net/browse/WWW-1157
https://pegadigitalit.atlassian.net/browse/DS-448

Summary

Added a new utility class to help solve a iOS scroll bug with the modal, updated the modal CSS for more consistent behavior

Details

• Added a utility CSS class that will apply a color background directly behind the modal and fix a regression bug with table modals
• Adjusted the modal styling to provide more consistent behavior on iOS Safari

How to test

Pull down the branch and complete the following tasks.

Non-iOS Devices

1. Review the Patternlab modal examples for any regressions.
2. Confirm that on Chrome, Edge, Safari (on mac and not iOS), and Firefox, the "u-bolt-ios-content-fill" is NOT being added to the body (I have confirmed this on Mac but not on Windows though I cannot see that there would be a difference).

iOS Devices (either an iPhone or an iPhone emulator)

1. On a iOS device, review the Patternlab modal examples and confirm that the class "u-bolt-ios-content-fill" is being added to the body after a modal is opened.
2. Navigate to the BoC Gallery Page and confirm that when the iOS URL bar hides (this requires scrolling up), the modal remains the same size and a navy color is filling the space below the modal (this behavior can be found on the Carbon Design System Modal). This is to check the DS-448 regression.
3. Navigate to Next in Tech: 2022 Forecast and click on the "Register Now" button
4. Inspect the modal and update the CSS with the modal.scss changes.
5. Add a ::before element to the body and update this new element with the CSS found in the _utilities-ios-content-fill.scss file.
6. Scroll so the iOS URL bar is hidden and observe that you can no longer see the page content. This is to confirm that this fixes the bug reported in WWW-1157.

Visual changes

On iOS Safari there will now be a navy blue background behind the modal, this can only be seen by having thee URL bar at the bottom of the screen and scrolling up (the URL bar should disappear off the bottom of the screen). If the URL bar hides these will be a navy blue color between the bottom of the modal and the bottom of thee view port.

[mikemai2awesome]

Approving. But feels weird to use a component class on the body, thoughts, @danielamorse?

[colbytcook]

@danielamorse I updated this PR based on our conversation, the color overlay is now scoped to the bolt-modal[open] attribute, removed the breakpoints from themodal.js, the utility class is not removed and refactored the modal docs to remove all examples of a modal nested inside a table since it is not supported anymore.

@mikemai2awesome please take a look at the update modal docs and let me know if you have any suggestions on improving them (I based the UI on the elements page structure).

[danielamorse]

@mikemai2awesome @colbytcook updated the CSS to leverage the existing overlay, see commit.