-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(locale-modal): only render modal when its called by user click (#…
…10892) ### Related Ticket(s) Closes #10657 ### Description The locale modal is being rendered upon page load, though it is not visible and users cannot interact with it. This unnecessarily increases the DOM node count. This PR updates the functionality so that the modal itself is not rendered until it is called by a user clicking the locale switcher button in the footer. ### Analysis #### Default Footer Story's `<dds-locale-modal-composite>` <!-- | |Nodes|Comments|Inters| |---|---|---|---| |Before|4197|1145|1723| |After|1458|373|566| |Reduction|65%|67%|63%| --> | |Nodes|Comments|Inters| |---|---|---|---| |Before|2734|770|1155| |After (no region selected)|310 (-89%)|62 (-92%)|146 (-87%)| |After (Americas region selected)|1163 (-57%)|309 (-60%)|503 (-56%)| ### Testing In the deploy preview, visit the default Footer story. Verify the locale modal hasn't loaded into the DOM until you click the locale button in the footer. 1. Find the `<div style="display: contents;">` using the browser dev tools. This is the _modal render root_, and it should be empty. 2. Click the locale button in the footer. The locale modal should load into the modal render root and appear in the viewport with a fade-in animation. 3. Close the modal. The modal should close with a fade-out animation and the DOM content should be removed. Next, verify the selectable regions' locale options do not load into the DOM until a region is selected. 1. With your browser tools still open, re-open the locale modal. Note that there aren't any elements slotted into the `<dds-locale-search>`. 2. Select a region. The relevant `<dds-locale-items>` should load into the DOM and appear within the modal. You can confirm the correct items appear by verifying their "region" attribute matches the selected region. 3. Go back to the region selector. The locale items should get pruned from the DOM. It's worth repeating the above steps in the Dotcom Shell default Story, too. ### Changelog **Changed** - Locale modal no longer renders in the DOM unless the locale button in the footer is clicked by user; locales do not render until user selects a region. - Adds support in ModalRenderMixin for rendering modal only when specified properties update. This is optional, and the original behavior is preserved as the default. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
- Loading branch information
Showing
10 changed files
with
182 additions
and
116 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.