Merge branch 'Shopify:main' into main

README.md

@@ -69,7 +69,7 @@ You can follow this [quick start guide for theme developers](https://github.com/
 
 We recommend using [Theme Check](https://github.com/shopify/theme-check) as a way to validate and lint your Shopify themes.
 
-We've added Theme Check to Dawn's [list of VS Code extensions](https://github.com/Shopify/dawn/blob/update-README/.vscode/extensions.json) so if you're using Visual Studio Code as your code editor of choice, you'll be prompted to install the [Theme Check VS Code](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode) extension upon opening VS Code after you've forked and cloned Dawn.
+We've added Theme Check to Dawn's [list of VS Code extensions](/.vscode/extensions.json) so if you're using Visual Studio Code as your code editor of choice, you'll be prompted to install the [Theme Check VS Code](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode) extension upon opening VS Code after you've forked and cloned Dawn.
 
 You can also run it from a terminal with the following Shopify CLI command:
 

assets/base.css

@@ -1189,39 +1189,103 @@ deferred-media {
 .share-button {
   display: block;
   position: relative;
+  max-width: 31rem;
+}
+
+.share-button details {
+  width: fit-content;
+}
+
+.share-button__button {
+  font-size: 1.4rem;
+  display: flex;
+  align-items: baseline;
+  color: rgba(var(--color-link), var(--alpha-link));
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.share-button__button:hover, details[open] > .share-button__button {
+  color: rgb(var(--color-link));
+}
+
+details[open] > .share-button__fallback {
+  animation: animateMenuOpen var(--duration-default) ease;
+}
+
+.share-button__button:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.3rem;
+}
+
+.share-button__button,
+.share-button__fallback button {
+  cursor: pointer;
+  background: rgb(var(--color-background));
+  border: none;
 }
 
 .share-button__button .icon-share {
   margin-right: 1rem;
 }
 
 .share-button__fallback {
-  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
   background: rgb(var(--color-background));
-  padding: 2rem;
+  display: flex;
+  align-items: center;
   position: absolute;
-  top: 4rem;
-  left: -0.1rem;
+  top: 3rem;
+  left: 0.1rem;
   z-index: 3;
   width: 100%;
+  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
+}
+
+.share-button__fallback button {
+  width: 4.4rem;
+  height: 4.4rem;
+  padding: 0;
+  flex-shrink: 0;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.share-button__fallback .button {
-  margin-top: 1rem;
+.share-button__fallback button:hover {
+  color: rgba(var(--color-foreground),.75);
+}
+
+.share-button__fallback button:hover svg {
+  transform: scale(1.07);
+}
+
+.share-button__close:not(.hidden) + .share-button__copy {
+  display: none;
+}
+
+.share-button__fallback .field__input {
+  box-shadow: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
-.share-button__fallback .icon-clipboard {
-  height: 1.4rem;
-  width: 1.8rem;
+.share-button__fallback .icon {
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .share-button__message:not(:empty) {
-  font-size: 1.2rem;
-  text-align: right;
-  display: block;
-  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  margin-top: 0;
+  padding: 0.8rem 0 0.8rem 1.5rem;
+}
+
+.share-button__message:not(:empty):not(.hidden) ~ * {
+  display: none;
 }
 
 /* component-form */

assets/collection-filters-form.js

@@ -38,7 +38,12 @@ class CollectionFiltersForm extends HTMLElement {
 
   renderPage(searchParams, event, updateURLHash = true) {
     const sections = this.getSections();
+    const countContainerDesktop = document.getElementById('CollectionProductCountDesktop');
     document.getElementById('CollectionProductGrid').querySelector('.collection').classList.add('loading');
+    document.getElementById('CollectionProductCount').classList.add('loading');
+    if (countContainerDesktop){
+      countContainerDesktop.classList.add('loading');
+    }
 
     sections.forEach((section) => {
       const url = `${window.location.pathname}?section_id=${section.section}&${searchParams}`;
@@ -77,10 +82,13 @@ class CollectionFiltersForm extends HTMLElement {
 
   renderProductCount(html) {
     const count = new DOMParser().parseFromString(html, 'text/html').getElementById('CollectionProductCount').innerHTML
+    const container = document.getElementById('CollectionProductCount');
     const containerDesktop = document.getElementById('CollectionProductCountDesktop');
-    document.getElementById('CollectionProductCount').innerHTML = count;
+    container.innerHTML = count;
+    container.classList.remove('loading');
     if (containerDesktop) {
       containerDesktop.innerHTML = count;
+      containerDesktop.classList.remove('loading');
     }
   }
 

assets/component-collection-hero.css

@@ -1,51 +1,41 @@
-.collection-hero {
-  margin-bottom: 2rem;
-}
-
 .collection-hero--with-image {
   background-color: rgba(var(--color-foreground), 0.04);
 }
 
 .collection-hero__inner {
   display: flex;
-  flex-direction: column;
+  flex-direction: column; 
+  margin-bottom: 2rem; 
+}
+
+.collection-hero--with-image .collection-hero__inner {
+  margin-bottom: 0;
   padding-bottom: 2rem;
-  margin-bottom: 2rem;
 }
 
 @media screen and (min-width: 750px) {
   .collection-hero.collection-hero--with-image {
     padding: 4rem 0 4rem;
   }
+
+  .collection-hero--with-image .collection-hero__inner {
+    padding-bottom: 0;
+  }
 }
 
 .collection-hero__text-wrapper {
   flex-basis: 100%;
 }
 
-.collection-hero--with-image .collection-hero__inner {
-  margin-bottom: 4rem;
-}
-
 @media screen and (min-width: 750px) {
   .collection-hero {
-    padding: 0 0 2rem;
-    margin-bottom: 0;
-  }
-
-  .collection-hero--with-image {
-    margin-bottom: 4.5rem;
+    padding: 0;
   }
 
   .collection-hero__inner {
     align-items: center;
     flex-direction: row;
     padding-bottom: 0;
-    margin-bottom: 0;
-  }
-
-  .collection-hero--with-image .collection-hero__inner {
-    margin-bottom: 0;
   }
 }
 

assets/component-menu-drawer.css

@@ -18,13 +18,15 @@
   opacity: 0;
   visibility: hidden;
   z-index: 2;
-  transition: opacity var(--duration-default) ease,
-    visibility var(--duration-default) ease;
+  transition: opacity 0s,
+    visibility 0s;
 }
 
 menu-drawer > details[open] > summary::before {
   visibility: visible;
   opacity: 1;
+  transition: opacity var(--duration-default) ease,
+    visibility var(--duration-default) ease;
 }
 
 .menu-drawer {

assets/component-slider.css

@@ -27,6 +27,7 @@ slider-component {
     scroll-behavior: smooth;
     scroll-padding-left: 1rem;
     -webkit-overflow-scrolling: touch;
+    margin-bottom: 0;
   }
 
   .slider.slider--mobile .slider__slide {
@@ -44,6 +45,7 @@ slider-component {
     scroll-behavior: smooth;
     scroll-padding-left: 1rem;
     -webkit-overflow-scrolling: touch;
+    margin-bottom: 0;
   }
 
   .slider.slider--tablet .slider__slide {

assets/section-blog-post.css

@@ -83,10 +83,8 @@
   margin-top: 3rem;
 }
 
-@media screen and (min-width: 750px) {
-  .article-template .share-button__fallback {
-    width: 60%;
-  }
+.article-template__social-sharing + header, .article-template__social-sharing + .article-template__content {
+  margin-top: 1.5rem;
 }
 
 .article-template__comment-wrapper {

assets/section-main-product.css

@@ -224,8 +224,7 @@ fieldset.product-form__input .form__label {
 }
 
 .product__info-container .product-form,
-.product__info-container .product__description,
-.product__info-container .share-button {
+.product__info-container .product__description {
   margin: 2.5rem 0;
 }
 

assets/share.js

@@ -4,6 +4,8 @@ class ShareButton extends DetailsDisclosure {
 
     this.elements = {
       shareButton: this.querySelector('button'),
+      shareSummary: this.querySelector('summary'),
+      closeButton: this.querySelector('.share-button__close'),
       successMessage: this.querySelector('[id^="ShareMessage"]'),
       urlInput: this.querySelector('input')
     }
@@ -12,24 +14,35 @@ class ShareButton extends DetailsDisclosure {
       this.elements.shareButton.classList.remove('hidden');
       this.elements.shareButton.addEventListener('click', () => { navigator.share({ url: document.location.href, title: document.title }) });
     } else {
+      this.addAccessibilityAttributes();
       this.mainDetailsToggle.addEventListener('toggle', this.toggleDetails.bind(this));
-      this.mainDetailsToggle.querySelector('button').addEventListener('click', this.copyToClipboard.bind(this));
+      this.mainDetailsToggle.querySelector('.share-button__copy').addEventListener('click', this.copyToClipboard.bind(this));
+      this.mainDetailsToggle.querySelector('.share-button__close').addEventListener('click', this.close.bind(this));
     }
   }
 
+  addAccessibilityAttributes() {
+    this.elements.shareSummary.setAttribute('role', 'button');
+    this.elements.shareSummary.setAttribute('aria-expanded', 'false');
+    this.elements.shareSummary.setAttribute('aria-controls', this.elements.shareSummary.nextElementSibling.id);
+  }
+
   toggleDetails() {
-    if (!this.mainDetailsToggle.open)
+    if (!this.mainDetailsToggle.open) {
       this.elements.successMessage.classList.add('hidden');
+      this.elements.successMessage.textContent = '';
+      this.elements.closeButton.classList.add('hidden');
+      this.elements.shareSummary.focus();
+    }
+    this.elements.shareSummary.setAttribute('aria-expanded', this.mainDetailsToggle.open);
   }
 
   copyToClipboard() {
     navigator.clipboard.writeText(this.elements.urlInput.value).then(() => {
       this.elements.successMessage.classList.remove('hidden');
-      this.elements.successMessage.setAttribute('aria-hidden', false);
-
-      setTimeout(() => {
-        this.elements.successMessage.setAttribute('aria-hidden', true);
-      }, 6000);
+      this.elements.successMessage.textContent = window.accessibilityStrings.shareSuccess;
+      this.elements.closeButton.classList.remove('hidden');
+      this.elements.closeButton.focus();
     });
   }
 }