Bug 1867282 - Hide show more button if content is too small in shopping card. r=shopping-reviewers,kpatenio

Differential Revision: https://phabricator.services.mozilla.com/D195467

browser/components/shopping/content/highlights.mjs

@@ -107,14 +107,11 @@ class ReviewHighlights extends MozLitElement {
       highlightsTemplate.push(highlightEl);
     }
 
-    // Only use show-more card type if there are more than two highlights.
-    let isShowMore = Array.from(this.#highlightsMap.values()).flat().length > 2;
-
     return html`
       <shopping-card
         data-l10n-id="shopping-highlights-label"
         data-l10n-attrs="label"
-        type=${isShowMore ? "show-more" : ""}
+        type="show-more"
       >
         <div slot="content" id="review-highlights-wrapper">
           <dl id="review-highlights-list">${highlightsTemplate}</dl>

browser/components/shopping/content/shopping-card.css

@@ -138,10 +138,14 @@ details[open] .chevron-icon {
   height: 200px;
 }
 
-.show-more ::slotted(div) {
+:host(:not([showMoreButtonDisabled])) .show-more ::slotted(div) {
   margin-block-end: 4rem;
 }
 
+:host([showMoreButtonDisabled]) footer {
+  display: none;
+}
+
 @media (prefers-color-scheme: dark) {
   :host > .shopping-card {
     background-color: #42414d;

browser/components/shopping/content/shopping-card.mjs

@@ -6,6 +6,7 @@
 import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
 
+const MIN_SHOW_MORE_HEIGHT = 200;
 /**
  * A card container to be used in the shopping sidebar. There are three card types.
  * The default type where no type attribute is required and the card will have no extra functionality.
@@ -26,6 +27,7 @@ class ShoppingCard extends MozLitElement {
   static get queries() {
     return {
       detailsEl: "#shopping-details",
+      contentEl: "#content",
     };
   }
 
@@ -117,8 +119,7 @@ class ShoppingCard extends MozLitElement {
         : "shopping-show-more-button"
     );
     // toggle content expanded attribute
-    e.target.parentElement.parentElement.attributes.expanded.value =
-      this._isExpanded;
+    this.contentEl.attributes.expanded.value = this._isExpanded;
 
     let action = this._isExpanded ? "expanded" : "collapsed";
     Glean.shopping.surfaceShowMoreReviewsButtonClicked.record({
@@ -126,10 +127,60 @@ class ShoppingCard extends MozLitElement {
     });
   }
 
+  enableShowMoreButton() {
+    this._isExpanded = false;
+    this.toggleAttribute("showMoreButtonDisabled", false);
+    this.contentEl.attributes.expanded.value = false;
+  }
+
+  disableShowMoreButton() {
+    this._isExpanded = true;
+    this.toggleAttribute("showMoreButtonDisabled", true);
+    this.contentEl.attributes.expanded.value = true;
+  }
+
   handleChevronButtonClick() {
     this.detailsEl.open = !this.detailsEl.open;
   }
 
+  firstUpdated() {
+    if (this.type !== "show-more") {
+      return;
+    }
+
+    let contentSlot = this.shadowRoot.querySelector("slot[name='content']");
+    let contentSlotEls = contentSlot.assignedElements();
+    if (!contentSlotEls.length) {
+      return;
+    }
+
+    let slottedDiv = contentSlotEls[0];
+
+    this.handleContentSlotResize = this.handleContentSlotResize.bind(this);
+    this.contentResizeObserver = new ResizeObserver(
+      this.handleContentSlotResize
+    );
+    this.contentResizeObserver.observe(slottedDiv);
+  }
+
+  disconnectedCallback() {
+    this.contentResizeObserver.disconnect();
+  }
+
+  handleContentSlotResize(entries) {
+    for (let entry of entries) {
+      if (entry.contentRect.height === 0) {
+        return;
+      }
+
+      if (entry.contentRect.height < MIN_SHOW_MORE_HEIGHT) {
+        this.disableShowMoreButton();
+      } else if (this.hasAttribute("showMoreButtonDisabled")) {
+        this.enableShowMoreButton();
+      }
+    }
+  }
+
   render() {
     return html`
       <link

browser/components/storybook/stories/shopping-card.stories.mjs

@@ -62,11 +62,30 @@ CardTypeAccordion.args = {
   type: "accordion",
 };
 
-export const CardTypeShowMore = Template.bind({});
-CardTypeShowMore.args = {
+export const CardTypeShowMoreButtonDisabled = Template.bind({});
+CardTypeShowMoreButtonDisabled.args = {
   ...DefaultCard.args,
   content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nunc velit turpis, mollis a ultricies vitae, accumsan ut augue.
   In a eros ac dolor hendrerit varius et at mauris.`,
   type: "show-more",
 };
+
+export const CardTypeShowMore = Template.bind({});
+CardTypeShowMore.args = {
+  ...DefaultCard.args,
+  content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  Posuere morbi leo urna molestie at elementum.
+  Felis donec et odio pellentesque.
+  Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Varius duis at consectetur lorem donec massa sapien faucibus et.
+  Et tortor consequat id porta nibh venenatis.
+  Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum.
+  Viverra accumsan in nisl nisi scelerisque eu ultrices vitae.
+  Gravida neque convallis a cras.
+  Fringilla est ullamcorper eget nulla.
+  Habitant morbi tristique senectus et netus.
+  Quam vulputate dignissim suspendisse in est ante in.
+  Feugiat vivamus at augue eget arcu dictum varius duis.
+  Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Ultricies integer quis auctor elit.`,
+  type: "show-more",
+};