chore(masthead-v2-alpha): cherry pick template literal minification #11504
Conversation
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
…em#11471) Closes # [ADCMS-4317](https://jsw.ibm.com/browse/ADCMS-4317) Adding a rollup plugin to the C4IBM build step to minify HTML template literals to reduce the DOM node count in web component shadow DOM subtrees. **New** - Adds `rollup-plugin-minify-html-literals` dependency to `carbon-web-components` and `web-components` packages, and uses the plugin in Rollup build config. **Changed** - Replaces directional property in Table of Contents component with corresponding logical property. <!-- 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) -->
jkaeser
added
package: web components
|
Deploy preview created for package Built with commit: 42d48a59b1968513d6487d22f84f739420b6b664 |
|
Deploy preview created for package Built with commit: 42d48a59b1968513d6487d22f84f739420b6b664 |
|
Deploy preview created for package Built with commit: 42d48a59b1968513d6487d22f84f739420b6b664 |
jkaeser
requested review from
ariellalgilmore,
sangeethababu9223,
m4olivei,
andy-blum,
a team,
kennylam and
emyarod
and removed request for
a team,
ariellalgilmore,
sangeethababu9223,
kennylam and
emyarod
andy-blum
added
the
test: CDN preview
|
Deploy preview created for package Built with commit: 42d48a59b1968513d6487d22f84f739420b6b664 |
|
Deploy preview created for package Built with commit: 42d48a59b1968513d6487d22f84f739420b6b664 |
|
Node reduction can be seen in this demo (view console logs in current.html and preview.html) On page load Products Menu Open |
andy-blum
approved these changes
Feb 8, 2024
jkaeser
merged commit 01d10f5
into
carbon-design-system:feat/masthead-v2-dev
44 of 47 checks passed
This was referenced Feb 9, 2024
jkaeser
added a commit
that referenced
this pull request
Mar 6, 2024
) * chore(masthead-v2-alpha): cherry pick template literal minification (#11504) * chore(rollup): minify html template literals (v1) (#11471) Closes # [ADCMS-4317](https://jsw.ibm.com/browse/ADCMS-4317) Adding a rollup plugin to the C4IBM build step to minify HTML template literals to reduce the DOM node count in web component shadow DOM subtrees. **New** - Adds `rollup-plugin-minify-html-literals` dependency to `carbon-web-components` and `web-components` packages, and uses the plugin in Rollup build config. **Changed** - Replaces directional property in Table of Contents component with corresponding logical property. <!-- 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) --> * chore(yarn): update lock file * chore(masthead-v2): cherry-pick features from main (#11620) * fix(masthead): prevent extra space beneath megapanel columns in Safari (#11574) none Fixes an issue that only presents on Safari where megamenu tabpanels are unnecessarily tall. **Before:** <img width="1841" alt="Screenshot 2024-02-22 at 3 44 56 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/2648a3d6-f3b0-44b8-b6a1-970206b8ed0d"> **After:** <img width="1841" alt="Screenshot 2024-02-22 at 3 44 47 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/6520e5f5-6bf9-47eb-906d-285478a0ecd8"> **Changed** - Prevents masthead megamenu tabpanels from displaying with excessive vertical space in Safari. <!-- 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) --> * feat(masthead): support all CMaaS CTA types for L1 CTA (#11597) none Supports rendering the appropriate markup to integrate with all CTA types supported by the IBM Contact Module app (documented here: https://github.ibm.com/live-advisor/cm-app/blob/master/docs/cm-doc.md#calls-to-action). > **Note:** You may need to use Requestly or a similar service to trick the Contact Module into working on a non-ibm.com webpage. I've attached my Requestly override rule below for reference. Visit the [Masthead with L1 deploy preview](https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11597/index.html?path=/story/components-masthead--with-l-1). For each L1 CTA knob option, verify: - The L1 CTA's icon changes. - The Contact Module changes the CTA text - You'll need to open the Story in a new tab to see this in effect. This is a CMApp limitation. - Clicking the CTA activates the Contact Module. For example, setting the CTA type to "scheduler" should open a "Book a meeting" panel. <img width="1029" alt="Screenshot 2024-03-04 at 9 30 01 AM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/02524ba7-a0fb-41d2-ad18-8512fd815f91"> <img width="1029" alt="Screenshot 2024-03-04 at 9 30 11 AM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/6cc834b0-90a7-49ea-bc5d-617f57d2b771"> **New** - Adds ability to configure L1 CTA to integrate with each of the supported IBM Contact Module app CTA types. - Creates `<c4d-masthead-l1-cta>` component that renders markup required for Contact Module integrations. **Changed** - Removes `<c4d-masthead-composite>`'s shadow root to enable Contact Module integrations. <!-- 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) --> * fix(masthead-v2): replace icon that doesn't exist in earlier carbon version * fix(masthead-v2): fix prefixes
jkaeser
added a commit
that referenced
this pull request
May 20, 2024
) * chore(masthead-v2-alpha): cherry pick template literal minification (#11504) * chore(rollup): minify html template literals (v1) (#11471) Closes # [ADCMS-4317](https://jsw.ibm.com/browse/ADCMS-4317) Adding a rollup plugin to the C4IBM build step to minify HTML template literals to reduce the DOM node count in web component shadow DOM subtrees. **New** - Adds `rollup-plugin-minify-html-literals` dependency to `carbon-web-components` and `web-components` packages, and uses the plugin in Rollup build config. **Changed** - Replaces directional property in Table of Contents component with corresponding logical property. <!-- 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) --> * chore(yarn): update lock file * chore(masthead-v2): cherry-pick features from main (#11620) * fix(masthead): prevent extra space beneath megapanel columns in Safari (#11574) none Fixes an issue that only presents on Safari where megamenu tabpanels are unnecessarily tall. **Before:** <img width="1841" alt="Screenshot 2024-02-22 at 3 44 56 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/2648a3d6-f3b0-44b8-b6a1-970206b8ed0d"> **After:** <img width="1841" alt="Screenshot 2024-02-22 at 3 44 47 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/6520e5f5-6bf9-47eb-906d-285478a0ecd8"> **Changed** - Prevents masthead megamenu tabpanels from displaying with excessive vertical space in Safari. <!-- 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) --> * feat(masthead): support all CMaaS CTA types for L1 CTA (#11597) none Supports rendering the appropriate markup to integrate with all CTA types supported by the IBM Contact Module app (documented here: https://github.ibm.com/live-advisor/cm-app/blob/master/docs/cm-doc.md#calls-to-action). > **Note:** You may need to use Requestly or a similar service to trick the Contact Module into working on a non-ibm.com webpage. I've attached my Requestly override rule below for reference. Visit the [Masthead with L1 deploy preview](https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11597/index.html?path=/story/components-masthead--with-l-1). For each L1 CTA knob option, verify: - The L1 CTA's icon changes. - The Contact Module changes the CTA text - You'll need to open the Story in a new tab to see this in effect. This is a CMApp limitation. - Clicking the CTA activates the Contact Module. For example, setting the CTA type to "scheduler" should open a "Book a meeting" panel. <img width="1029" alt="Screenshot 2024-03-04 at 9 30 01 AM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/02524ba7-a0fb-41d2-ad18-8512fd815f91"> <img width="1029" alt="Screenshot 2024-03-04 at 9 30 11 AM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/12532727/6cc834b0-90a7-49ea-bc5d-617f57d2b771"> **New** - Adds ability to configure L1 CTA to integrate with each of the supported IBM Contact Module app CTA types. - Creates `<c4d-masthead-l1-cta>` component that renders markup required for Contact Module integrations. **Changed** - Removes `<c4d-masthead-composite>`'s shadow root to enable Contact Module integrations. <!-- 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) --> * fix(masthead-v2): replace icon that doesn't exist in earlier carbon version * fix(masthead-v2): fix prefixes * fix(masthead): ensure opened L1 mobile dropdown is visible while there is also a ToC (#11734) ### Related Ticket(s) none ### Description Given the page uses both an L1 menu and a table of contents (ToC), and the page is displaying at a mobile breakpoint, and the ToC menu is the sticky element (i.e. stuck to the top of the viewport), and the user scrolls up slightly to reveal the L1 dropdown, and the user open the L1's dropdown menu, then the dropdown menu gets hidden above the viewport, forcing the user to scroll up more to access it. Instead, the top of L1 dropdown menu should be visible when opened. This problem is occurring because the dropdown exists in the document flow, and the StickyHeader utility doesn't reset stuck elements' positions when the menu is opened. The easiest solution I found was to position the dropdown menu absolutely like most other dropdown menus you might encounter. This bypasses the tricky problem of trying to get the StickyHeader to recalculate, and in my opinion is a slight enhancement in both performance (avoids layout shifts and associated repaint costs) and overall UX (gives dropdown a more expected behavior). ### Changelog **Changed** - Prevents mobile L1 dropdown menu from becoming hidden above viewport when opened while there is currently a sticky table of contents menu. - Prevents L1 from scrolling away when a submenu is open on desktop or the dropdown is open on mobile. - Consolidates StickyHeader utility tracked data to make debugging easier. - Refactors StickyHeader logic to support all potentially sticky elements being on page at the same time. ### Testing To test the main fix: 1. Visit [the Dotcom Shell > With L1 story](https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11734/index.html?path=/story/components-dotcom-shell--with-l-1) in the deploy preview. 2. Change the preview size to "Large mobile" or "Small mobile" 3. Scroll down the page until the ToC is stuck to the top of the viewport. 4. Scroll back up just enough to see the L1. 5. Open the L1 and verify the top of it doesn't jump back up above the viewport. 6. Scroll down and verify the L1 stays stuck to the top of the viewport. 7. Close the L1 and verify the ToC gets stuck to the top of the viewport as you scroll down. You should also test the L1 remains stuck when open at desktop widths. This PR also changes a good amount of the StickyHeader class logic. To support regression testing the existing sticky element behaviors, I've added the [Sticky Element Sandbox story](https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11734/index.html?path=/story/components-dotcom-shell--sticky-element-sandbox). Test various knob configurations at both desktop and mobile viewport sizes and let me know how you were able to break it 😄 **Note:** If you find the sticky elements aren't working correctly when switching between stories, try reloading the window. * feat(masthead): use more visible box shadow (#11793)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Gets the HTML template minifications added to
v1in #11471 into the masthead v2 alpha branch so that AEM can reap the benefits.