amp-fit-text:1.0 Vertical center non-overflowing text (#32558)

* Use display: flex for non overflowing text elements. * Wrap with Wrapper * ContainWrapper should be top level
ampproject · Feb 10, 2021 · 614dd77 · 614dd77
1 parent 0ab0609
commit 614dd77
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/extensions/amp-fit-text/1.0/component.js b/extensions/amp-fit-text/1.0/component.js
@@ -74,14 +74,14 @@ export function FitText({
       size={true}
       layout={true}
       paint={true}
-      ref={containerRef}
-      wrapperClassName={classes.fitTextContentWrapper}
-      contentRef={measurerRef}
-      contentClassName={classes.fitTextContent}
+      contentRef={containerRef}
+      contentClassName={classes.fitTextContentWrapper}
       {...rest}
     >
-      <div ref={heightRef} className={classes.minContentHeight}>
-        {children}
+      <div ref={measurerRef} className={classes.fitTextContent}>
+        <div ref={heightRef} className={classes.minContentHeight}>
+          {children}
+        </div>
       </div>
     </ContainWrapper>
   );
@@ -134,7 +134,12 @@ function setOverflowStyle(measurer, maxHeight, fontSize) {
       '-webkit-line-clamp': numberOfLines,
       'maxHeight': px(lineHeight * numberOfLines),
     });
+    // Cannot use setInitialDisplay which calls devAssert.
+    // eslint-disable-next-line local/no-style-display
+    resetStyles(measurer, ['display']);
   } else {
+    // eslint-disable-next-line local/no-style-display
+    setStyle(measurer, 'display', 'flex');
     resetStyles(measurer, ['lineClamp', '-webkit-line-clamp', 'maxHeight']);
   }
 }
diff --git a/extensions/amp-fit-text/1.0/component.jss.js b/extensions/amp-fit-text/1.0/component.jss.js
@@ -33,6 +33,10 @@ const fitTextContent = {
   '-webkit-box-orient': 'vertical',
   'overflow': 'hidden',
   'textOverflow': 'ellipsis',
+
+  'flexDirection': 'column',
+  'flexWrap': 'nowrap',
+  'justifyContent': 'center',
 };
 
 const minContentHeight = {

diff --git a/extensions/amp-fit-text/1.0/storybook/Basic.js b/extensions/amp-fit-text/1.0/storybook/Basic.js
@@ -34,7 +34,7 @@ export const _default = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
       aeque inermis reprehendunt.
@@ -51,7 +51,7 @@ export const scaleUpOverflowEllipsis = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
       aeque inermis reprehendunt.
@@ -68,7 +68,7 @@ export const scaleDown = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
       aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te
@@ -89,7 +89,7 @@ export const scaleDownMore = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       Superlongword text
     </FitText>
@@ -106,7 +106,7 @@ export const configureContent = () => {
     <FitText
       minFontSize={minFontSize}
       maxFontSize={maxFontSize}
-      style={{display: 'block', border: '1px solid black', width, height}}
+      style={{border: '1px solid black', width, height}}
     >
       {content}
     </FitText>