Social Share: update wrapper and propagate size from the AMP element (#…

…30326)
ampproject · Sep 22, 2020 · 6170365 · 6170365
1 parent f3612a9
commit 6170365
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/extensions/amp-social-share/1.0/amp-social-share.js b/extensions/amp-social-share/1.0/amp-social-share.js
@@ -158,6 +158,9 @@ class AmpSocialShare extends PreactBaseElement {
 /** @override */
 AmpSocialShare['Component'] = SocialShare;
 
+/** @override */
+AmpSocialShare['layoutSizeDefined'] = true;
+
 /** @override */
 AmpSocialShare['passthroughNonEmpty'] = true;
 

diff --git a/extensions/amp-social-share/1.0/social-share.js b/extensions/amp-social-share/1.0/social-share.js
@@ -18,6 +18,7 @@ import * as CSS from './social-share.css';
 import * as Preact from '../../../src/preact';
 import {Keys} from '../../../src/utils/key-codes';
 import {SocialShareIcon} from '../../../third_party/optimized-svg-icons/social-share-svgs';
+import {Wrapper} from '../../../src/preact/component';
 import {addParamsToUrl, parseQueryString} from '../../../src/url';
 import {dict} from '../../../src/utils/object';
 import {getSocialConfig} from './social-share-config';
@@ -56,28 +57,26 @@ export function SocialShare({
     checkedTarget,
   } = checkProps(type, endpoint, target, width, height, params);
 
-  const size = dict({
-    'width': checkedWidth,
-    'height': checkedHeight,
-  });
-
   return (
-    <div
+    <Wrapper
       {...rest}
       role="button"
       tabindex={tabIndex}
       onKeyDown={(e) => handleKeyPress(e, finalEndpoint, checkedTarget)}
       onClick={() => handleActivation(finalEndpoint, checkedTarget)}
-      style={{...size, ...style}}
+      wrapperStyle={{
+        width: checkedWidth,
+        height: checkedHeight,
+        ...style,
+      }}
     >
       {processChildren(
         /** @type {string} */ (type),
         children,
         color,
-        background,
-        size
+        background
       )}
-    </div>
+    </Wrapper>
   );
 }
 
@@ -89,10 +88,9 @@ export function SocialShare({
  * @param {?PreactDef.Renderable|undefined} children
  * @param {string|undefined} color
  * @param {string|undefined} background
- * @param {JsonObject} size
  * @return {PreactDef.Renderable}
  */
-function processChildren(type, children, color, background, size) {
+function processChildren(type, children, color, background) {
   if (children) {
     return children;
   } else {
@@ -104,7 +102,12 @@ function processChildren(type, children, color, background, size) {
     });
     return (
       <SocialShareIcon
-        style={{...iconStyle, ...baseStyle, ...size}}
+        style={{
+          ...iconStyle,
+          ...baseStyle,
+          width: '100%',
+          height: '100%',
+        }}
         type={type.toUpperCase()}
       />
     );