fix(CatalogTile): Fix to correctly position fading out of description…

… text (patternfly#958)
redallen · Nov 28, 2018 · b2237fc · b2237fc
1 parent e02011c
commit b2237fc
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 95 deletions.
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less b/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less
@@ -8,7 +8,6 @@
   height: @catalog-tile-pf-height;
   margin: 0 15px @catalog-tile-pf-margin-bottom 0;
   padding: 15px;
-  position: relative;
   width: @catalog-tile-pf-width;
 
   &.featured {
@@ -63,6 +62,7 @@
 
 .catalog-tile-pf-body {
   display: flex;
+  flex: 1;
   flex-direction: column;
   margin-top: 15px;
   min-height: 0;
@@ -83,13 +83,13 @@
     overflow: hidden;
 
     &::after {
-      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
-      bottom: 20px;
-      content: "";
-      height: 25px;
+      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
+      bottom: 0;
+      color: transparent;
+      content: ".";
       position: absolute;
-      right: 15px;
-      width: 20%;
+      right: 0;
+      width: 50%;
       text-align: right;
     }
   }

diff --git a/...ternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss b/...ternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss
@@ -8,7 +8,6 @@
   height: $catalog-tile-pf-height;
   margin: 0 15px $catalog-tile-pf-margin-bottom 0;
   padding: 15px;
-  position: relative;
   width: $catalog-tile-pf-width;
 
   &.featured {
@@ -63,6 +62,7 @@
 
 .catalog-tile-pf-body {
   display: flex;
+  flex: 1;
   flex-direction: column;
   margin-top: 15px;
   min-height: 0;
@@ -81,15 +81,16 @@
     flex: 1;
     margin-top: 15px;
     overflow: hidden;
+    position: relative;
 
     &::after {
-      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
-      bottom: 20px;
-      content: "";
-      height: 25px;
+      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
+      bottom: 0;
+      color: transparent;
+      content: ".";
       position: absolute;
-      right: 15px;
-      width: 20%;
+      right: 0;
+      width: 50%;
       text-align: right;
     }
   }

diff --git a/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.js b/packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.js
@@ -4,38 +4,66 @@ import classNames from 'classnames';
 
 import CatalogTileBadge from './CatalogTileBadge';
 
-const CatalogTile = ({
-  id,
-  className,
-  featured,
-  href,
-  onClick,
-  iconImg,
-  iconClass,
-  badges,
-  title,
-  vendor,
-  description,
-  maxDescriptionLength,
-  truncateDescriptionFn,
-  ...props
-}) => {
-  const classes = classNames('catalog-tile-pf', { featured }, className);
-
-  const defaultTruncateDescription = (text, max) => {
-    if (max === -1 || typeof text !== 'string' || text.length <= max) {
-      return text;
+const defaultTruncateDescription = (text, max) => {
+  if (max === -1 || typeof text !== 'string' || text.length <= max) {
+    return text;
+  }
+
+  return (
+    <React.Fragment>
+      {text.substring(0, max - 3)}
+      &hellip;
+    </React.Fragment>
+  );
+};
+
+class CatalogTile extends React.Component {
+  state = {
+    heightStyle: {}
+  };
+
+  componentDidMount() {
+    this.computeDescHeight();
+  }
+
+  computeDescHeight() {
+    const heightStyle = {};
+
+    if (this.descFullHeight && this.descLineHeight) {
+      heightStyle.maxHeight = `${Math.floor(this.descFullHeight / this.descLineHeight) * this.descLineHeight}px`;
     }
 
-    return (
-      <React.Fragment>
-        {text.substring(0, max - 3)}
-        &hellip;
-      </React.Fragment>
-    );
+    this.setState({ heightStyle });
+  }
+
+  handleDescriptionRef = ref => {
+    if (!ref) {
+      return;
+    }
+
+    this.descFullHeight = ref.clientHeight;
+  };
+
+  handleDescriptionSpanRef = ref => {
+    if (!ref) {
+      return;
+    }
+
+    this.descLineHeight = parseInt(window.getComputedStyle(ref).getPropertyValue('line-height'), 10);
+  };
+
+  handleClick = e => {
+    const { onClick, href } = this.props;
+
+    if (!href) {
+      e.preventDefault();
+    }
+    if (onClick) {
+      onClick(e);
+    }
   };
 
-  const renderBadges = () => {
+  renderBadges = badges => {
     if (!badges || !badges.length) {
       return null;
     }
@@ -49,46 +77,61 @@ const CatalogTile = ({
     );
   };
 
-  const truncateDescription = truncateDescriptionFn || defaultTruncateDescription;
-
-  const renderInner = () => (
-    <React.Fragment>
-      <div className="catalog-tile-pf-header">
-        {iconImg && <img className="catalog-tile-pf-icon" src={iconImg} alt="" />}
-        {!iconImg && iconClass && <span className={`catalog-tile-pf-icon ${iconClass}`} />}
-        {renderBadges()}
-      </div>
-      <div className="catalog-tile-pf-body">
-        <div className="catalog-tile-pf-title">{title}</div>
-        <div className="catalog-tile-pf-subtitle">{vendor}</div>
-        <div className="catalog-tile-pf-description">{truncateDescription(description, maxDescriptionLength, id)}</div>
-      </div>
-    </React.Fragment>
-  );
+  render() {
+    const {
+      id,
+      className,
+      featured,
+      href,
+      onClick,
+      iconImg,
+      iconClass,
+      badges,
+      title,
+      vendor,
+      description,
+      truncateDescriptionFn,
+      maxDescriptionLength,
+      ...otherProps
+    } = this.props;
+    const { heightStyle } = this.state;
+    const truncateDescription = truncateDescriptionFn || defaultTruncateDescription;
+
+    const classes = classNames('catalog-tile-pf', { featured }, className);
+
+    const OuterComponent =
+      href || onClick
+        ? ({ children }) => (
+            <a id={id} className={classes} href={href || '#'} {...otherProps} onClick={e => this.handleClick(e)}>
+              {children}
+            </a>
+          )
+        : ({ children }) => (
+            <div id={id} className={classes} {...otherProps}>
+              {children}
+            </div>
+          );
 
-  const handleClick = e => {
-    if (!href) {
-      e.preventDefault();
-    }
-    if (onClick) {
-      onClick(e);
-    }
-  };
-
-  if (href || onClick) {
     return (
-      <a id={id} className={classes} href={href || '#'} {...props} onClick={e => handleClick(e)}>
-        {renderInner()}
-      </a>
+      <OuterComponent>
+        <div className="catalog-tile-pf-header">
+          {iconImg && <img className="catalog-tile-pf-icon" src={iconImg} alt="" />}
+          {!iconImg && iconClass && <span className={`catalog-tile-pf-icon ${iconClass}`} />}
+          {this.renderBadges(badges)}
+        </div>
+        <div className="catalog-tile-pf-body">
+          <div className="catalog-tile-pf-title">{title}</div>
+          <div className="catalog-tile-pf-subtitle">{vendor}</div>
+          <div className="catalog-tile-pf-description" ref={this.handleDescriptionRef} style={heightStyle}>
+            <span ref={this.handleDescriptionSpanRef}>
+              {truncateDescription(description, maxDescriptionLength, id)}
+            </span>
+          </div>
+        </div>
+      </OuterComponent>
     );
   }
-
-  return (
-    <div id={id} className={classes} {...props}>
-      {renderInner()}
-    </div>
-  );
-};
+}
 
 CatalogTile.propTypes = {
   /** Id */

diff --git a/...ernfly-react-extensions/src/components/CatalogTile/__snapshots__/CatalogTile.test.js.snap b/...ernfly-react-extensions/src/components/CatalogTile/__snapshots__/CatalogTile.test.js.snap
@@ -31,7 +31,9 @@ exports[`CatalogTile href renders properly 1`] = `
     <div
       class="catalog-tile-pf-description"
     >
-      1234567890123
+      <span>
+        1234567890123
+      </span>
     </div>
   </div>
 </a>
@@ -68,7 +70,9 @@ exports[`CatalogTile onClick behaves properly 1`] = `
     <div
       class="catalog-tile-pf-description"
     >
-      1234567890123
+      <span>
+        1234567890123
+      </span>
     </div>
   </div>
 </a>
@@ -141,7 +145,9 @@ exports[`CatalogTile renders properly 1`] = `
       <div
         class="catalog-tile-pf-description"
       >
-        A community of designers and developers collaborating to build a UI framework for enterprise web applications.
+        <span>
+          A community of designers and developers collaborating to build a UI framework for enterprise web applications.
+        </span>
       </div>
     </div>
   </div>
@@ -208,7 +214,9 @@ exports[`CatalogTile renders properly 1`] = `
       <div
         class="catalog-tile-pf-description"
       >
-        Simple collaboration from your desktop.
+        <span>
+          Simple collaboration from your desktop.
+        </span>
       </div>
     </div>
   </div>
@@ -267,7 +275,9 @@ exports[`CatalogTile renders properly 1`] = `
       <div
         class="catalog-tile-pf-description"
       >
-        This is a very long description that should be truncated after 112 characters. 112 is the default but can be …
+        <span>
+          This is a very long description that should be truncated after 112 characters. 112 is the default but can be …
+        </span>
       </div>
     </div>
   </div>
@@ -317,7 +327,9 @@ exports[`CatalogTile renders properly 1`] = `
       <div
         class="catalog-tile-pf-description"
       >
-        An online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets.
+        <span>
+          An online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets.
+        </span>
       </div>
     </div>
   </div>
@@ -357,7 +369,9 @@ exports[`CatalogTile renders properly 1`] = `
       <div
         class="catalog-tile-pf-description"
       >
-        truncated
+        <span>
+          truncated
+        </span>
       </div>
     </div>
   </div>