Share button UI update (Shopify#349)

tairli · Aug 17, 2021 · 789c3d9 · 789c3d9
1 parent 132fbc4
commit 789c3d9
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 54 deletions.
diff --git a/assets/base.css b/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 */

diff --git a/assets/section-blog-post.css b/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 {

diff --git a/assets/section-main-product.css b/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;
 }
 

diff --git a/assets/share.js b/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();
     });
   }
 }

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -141,6 +141,10 @@
         soldOut: `{{ 'products.product.sold_out' | t }}`,
         unavailable: `{{ 'products.product.unavailable' | t }}`,
       }
+
+      window.accessibilityStrings = {
+        shareSuccess: `{{ 'general.share.success_message' | t }}`,
+      }
     </script>
   </body>
 </html>
diff --git a/locales/en.default.json b/locales/en.default.json
@@ -44,10 +44,10 @@
       "item_added": "Item added to your cart"
     },
     "share": {
+      "close": "Close share",
       "copy_to_clipboard": "Copy link",
-      "share": "Share",
       "share_url": "Link",
-      "success_message": "Link copied to clipboard!"
+      "success_message": "Link copied to clipboard"
     }
   },
   "date_formats": {

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -851,6 +851,9 @@
         "share": {
           "name": "Share",
           "settings": {
+            "text": {
+              "label": "Text"
+            },
             "featured_image_info": {
               "content": "If you include a link in social media posts, the page’s featured image will be shown as the preview image. [Learn more](https://help.shopify.com/en/manual/online-store/images/showing-social-media-thumbnail-images)."
             },
@@ -1159,6 +1162,9 @@
         "share": {
           "name": "Share",
           "settings": {
+            "text": {
+              "label": "Text"
+            },
             "featured_image_info": {
               "content": "If you include a link in social media posts, the page’s featured image will be shown as the preview image. [Learn more](https://help.shopify.com/en/manual/online-store/images/showing-social-media-thumbnail-images)."
             },

diff --git a/sections/main-article.liquid b/sections/main-article.liquid
@@ -52,17 +52,19 @@
         {%- when 'share' -%}
           <div class="article-template__social-sharing page-width page-width--narrow" {{ block.shopify_attributes }}>
             <share-button class="share-button" {{ block.shopify_attributes }}>
-              <button class="share-button__button button button--tertiary hidden">
+              <button class="share-button__button hidden">
                 {% render 'icon-share' %}
-                {{ 'general.share.share' | t }}
+                {{ block.settings.share_label | escape }}
               </button>
               <details>
-                <summary class="share-button__button button button--tertiary">
+                <summary class="share-button__button">
                   {% render 'icon-share' %}
-                  {{ 'general.share.share' | t }}
+                  {{ block.settings.share_label | escape }}
                 </summary>
-                <div class="share-button__fallback">
+                <div id="Article-share-{{ section.id }}" class="share-button__fallback motion-reduce">
                   <div class="field">
+                    <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
+                    </span>
                     <input type="text"
                           class="field__input"
                           id="url"
@@ -73,13 +75,14 @@
                     >
                     <label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
                   </div>
-                  <button class="button button--tertiary">
+                  <button class="share-button__close hidden no-js-hidden">
+                    {% render 'icon-close' %}
+                    <span class="visually-hidden">{{ 'general.share.close' | t }}</span>
+                  </button>
+                  <button class="share-button__copy no-js-hidden">
                     {% render 'icon-clipboard' %}
-                    {{ 'general.share.copy_to_clipboard' | t }}
+                    <span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
                   </button>
-                  <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status" aria-hidden="true">
-                    {{ 'general.share.success_message' | t }}
-                  </span>
                 </div>
               </details>
             </share-button>
@@ -304,8 +307,14 @@
     {
       "type": "share",
       "name": "t:sections.main-article.blocks.share.name",
-      "limit": 1,
+      "limit": 2,
       "settings": [
+        {
+          "type": "text",
+          "id": "share_label",
+          "label": "t:sections.main-article.blocks.share.settings.text.label",
+          "default": "Share"
+        },
         {
           "type": "paragraph",
           "content": "t:sections.main-article.blocks.share.settings.featured_image_info.content"

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -148,17 +148,19 @@
               <a href="{{ block.settings.page.url }}" class="product-popup-modal__button link no-js">{{ block.settings.text }}</a>
           {%- when 'share' -%}
             <share-button class="share-button" {{ block.shopify_attributes }}>
-              <button class="share-button__button button button--tertiary hidden">
+              <button class="share-button__button hidden">
                 {% render 'icon-share' %}
-                {{ 'general.share.share' | t }}
+                {{ block.settings.share_label | escape }}
               </button>
               <details>
-                <summary class="share-button__button button button--tertiary">
+                <summary class="share-button__button">
                   {% render 'icon-share' %}
-                  {{ 'general.share.share' | t }}
+                  {{ block.settings.share_label | escape }}
                 </summary>
-                <div class="share-button__fallback">
+                <div id="Product-share-{{ section.id }}" class="share-button__fallback motion-reduce">
                   <div class="field">
+                    <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
+                    </span>
                     <input type="text"
                           class="field__input"
                           id="url"
@@ -169,13 +171,14 @@
                     >
                     <label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
                   </div>
-                  <button class="button button--tertiary">
+                  <button class="share-button__close hidden no-js-hidden">
+                    {% render 'icon-close' %}
+                    <span class="visually-hidden">{{ 'general.share.close' | t }}</span>
+                  </button>
+                  <button class="share-button__copy no-js-hidden">
                     {% render 'icon-clipboard' %}
-                    {{ 'general.share.copy_to_clipboard' | t }}
+                    <span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
                   </button>
-                  <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status" aria-hidden="true">
-                    {{ 'general.share.success_message' | t }}
-                  </span>
                 </div>
               </details>
             </share-button>
@@ -564,6 +567,12 @@
       "name": "t:sections.main-product.blocks.share.name",
       "limit": 1,
       "settings": [
+        {
+          "type": "text",
+          "id": "share_label",
+          "label": "t:sections.main-product.blocks.share.settings.text.label",
+          "default": "Share"
+        },
         {
           "type": "paragraph",
           "content": "t:sections.main-product.blocks.share.settings.featured_image_info.content"

diff --git a/snippets/icon-clipboard.liquid b/snippets/icon-clipboard.liquid
@@ -1,3 +1,3 @@
-<svg class="icon icon-clipboard" width="11" height="13" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+<svg class="icon icon-clipboard" width="11" height="13" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 11 13">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M2 1a1 1 0 011-1h7a1 1 0 011 1v9a1 1 0 01-1 1V1H2zM1 2a1 1 0 00-1 1v9a1 1 0 001 1h7a1 1 0 001-1V3a1 1 0 00-1-1H1zm0 10V3h7v9H1z" fill="currentColor"/>
 </svg>
diff --git a/snippets/icon-share.liquid b/snippets/icon-share.liquid
@@ -1,4 +1,4 @@
-<svg width="13" height="13" viewBox="0 0 13 13" class="icon icon-share" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+<svg width="13" height="12" viewBox="0 0 13 12" class="icon icon-share" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
   <path d="M1.625 8.125V10.2917C1.625 10.579 1.73914 10.8545 1.9423 11.0577C2.14547 11.2609 2.42102 11.375 2.70833 11.375H10.2917C10.579 11.375 10.8545 11.2609 11.0577 11.0577C11.2609 10.8545 11.375 10.579 11.375 10.2917V8.125" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
   <path fill-rule="evenodd" clip-rule="evenodd" d="M6.14775 1.27137C6.34301 1.0761 6.65959 1.0761 6.85485 1.27137L9.56319 3.9797C9.75845 4.17496 9.75845 4.49154 9.56319 4.6868C9.36793 4.88207 9.05135 4.88207 8.85609 4.6868L6.5013 2.33203L4.14652 4.6868C3.95126 4.88207 3.63468 4.88207 3.43942 4.6868C3.24415 4.49154 3.24415 4.17496 3.43942 3.9797L6.14775 1.27137Z" fill="currentColor"/>
   <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 1.125C6.77614 1.125 7 1.34886 7 1.625V8.125C7 8.40114 6.77614 8.625 6.5 8.625C6.22386 8.625 6 8.40114 6 8.125V1.625C6 1.34886 6.22386 1.125 6.5 1.125Z" fill="currentColor"/>

diff --git a/templates/article.json b/templates/article.json
@@ -19,8 +19,8 @@
      "block_order": [
        "featured_image",
        "title",
-       "content",
-       "share"
+       "share",
+       "content"
     ]
    }
  },