FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

improvement(CatalogTile): Removed truncation fade and fixed length by rebeccaalpert · Pull Request #3378 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

improvement(CatalogTile): Removed truncation fade and fixed length #3378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dlabaj merged 13 commits into from
Jan 14, 2020
Conversation 37 Commits 13 Checks 0 Files changed
Merged

improvement(CatalogTile): Removed truncation fade and fixed length #3378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
307b647
improvement(CatalogTile): Removed truncation fade per OpenShift reque…
rebeccaalpert Dec 5, 2019
9550053
Fix test
rebeccaalpert Dec 5, 2019
27a1926
Truncate more when footer; rename class
rebeccaalpert Dec 5, 2019
85e3d8d
Add refs
rebeccaalpert Dec 5, 2019
06742e8
update calculations to compute height
jcaianirh Dec 10, 2019
1eb09fa
Added refs to control description height more programmatically
rebeccaalpert Dec 18, 2019
fde74cd
Update examples
rebeccaalpert Dec 18, 2019
a7ecc9a
Update tests
rebeccaalpert Dec 19, 2019
9236c1b
Remove console statements
rebeccaalpert Jan 2, 2020
16933a8
Update ref handling
rebeccaalpert Jan 7, 2020
71e6c8f
Address PR feedback
rebeccaalpert Jan 8, 2020
394623b
Revert to CSS-based solution as refs were not performant
rebeccaalpert Jan 9, 2020
f9f40e3
Update snapshot
rebeccaalpert Jan 13, 2020
File filter

Filter by extension

Filter by extension .css  (1) .md  (1) .scss  (1) .snap  (1) .tsx  (1) All 5 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
      • _catalog-tile.scss
      • CatalogTile.tsx
        • CatalogTile.test.tsx.snap
        • CatalogTile.md
        • catalogTile.css
19 changes: 7 additions & 12 deletions ...rnfly-4/react-catalog-view-extension/sass/react-catalog-view-extension/_catalog-tile.scss
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -60,19 +60,14 @@
.catalog-tile-pf-description {
margin-top: 0;

.truncated {
span {
display: -webkit-box;
overflow: hidden;
position: relative;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

&::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
bottom: 0;
color: transparent;
content: ".";
position: absolute;
right: 0;
width: 50%;
text-align: right;
}
.has-footer {
-webkit-line-clamp: 1;
}
}
26 changes: 8 additions & 18 deletions ...ages/patternfly-4/react-catalog-view-extension/src/components/CatalogTile/CatalogTile.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import classNames from 'classnames';

import { Omit } from '../../helpers/typeUtils';
import { CatalogTileBadge } from './CatalogTileBadge';

export interface CatalogTileProps extends Omit<React.HTMLProps<HTMLElement>, 'title'> {
/** Id */
id?: any;
Expand Down Expand Up @@ -63,7 +62,6 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
if (max === -1 || typeof text !== 'string' || text.length <= max) {
return text;
}

return (
<React.Fragment>
{text.substring(0, max - 3)}
Expand All @@ -72,13 +70,6 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
);
};

private isTruncated = (text: string | React.ReactNode, max: number) => {
if (max === -1 || typeof text !== 'string' || text.length <= max) {
return false;
}
return true;
}

private handleClick = (e: React.SyntheticEvent<HTMLElement>) => {
const { onClick, href } = this.props;

Expand Down Expand Up @@ -126,28 +117,27 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
...props
} = this.props;
const truncateDescription = truncateDescriptionFn || this.defaultTruncateDescription;
const isTruncated = this.isTruncated(description, maxDescriptionLength);

return (
<Card component={href || onClick ? 'a' : 'div'} id={id} href={href || '#'} className={classNames('catalog-tile-pf', { featured }, className)} onClick={e => this.handleClick(e)} isHoverable {...props}>
<CardHead>
{(badges.length > 0 || iconImg || iconClass || icon) && <CardHead>
{iconImg && <img className="catalog-tile-pf-icon" src={iconImg} alt={iconAlt} />}
{!iconImg && (iconClass || icon) && <span className={`catalog-tile-pf-icon ${iconClass}`}>{icon}</span>}
<CardActions>
{badges.length > 0 && <CardActions>
{this.renderBadges(badges)}
</CardActions>
</CardHead>
</CardActions>}
</CardHead>}
<CardHeader className="catalog-tile-pf-header">
<div className="catalog-tile-pf-title">{title}</div>
<div className="catalog-tile-pf-subtitle">{vendor}</div>
{vendor && <div className="catalog-tile-pf-subtitle">{vendor}</div>}
</CardHeader>
<CardBody className="catalog-tile-pf-body">
{description && <CardBody className="catalog-tile-pf-body">
<div className="catalog-tile-pf-description">
<span className={classNames({'truncated': isTruncated})}>
<span className={classNames({'has-footer': footer})}>
{truncateDescription(description, maxDescriptionLength, id)}
</span>
</div>
</CardBody>
</CardBody>}
{footer && <CardFooter className="catalog-tile-pf-footer">{footer}</CardFooter>}
</Card>
);
Expand Down
51 changes: 3 additions & 48 deletions ...catalog-view-extension/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,6 @@ exports[`CatalogTile href renders properly 1`] = `
id="test-href"
onClick={[Function]}
>
<CardHead>
<div
className="pf-c-card__head"
>
<CardActions>
<div
className="pf-c-card__actions"
/>
</CardActions>
</div>
</CardHead>
<CardHeader
className="catalog-tile-pf-header"
>
Expand Down Expand Up @@ -1139,7 +1128,7 @@ exports[`CatalogTile renders properly 1`] = `
className="catalog-tile-pf-description"
>
<span
className="truncated"
className=""
>
This is a very long description that should be truncated after 112 characters. 112 is the default but can be
…
Expand Down Expand Up @@ -1462,17 +1451,6 @@ exports[`CatalogTile renders properly 1`] = `
id="test-custom-truncation"
onClick={[Function]}
>
<CardHead>
<div
className="pf-c-card__head"
>
<CardActions>
<div
className="pf-c-card__actions"
/>
</CardActions>
</div>
</CardHead>
<CardHeader
className="catalog-tile-pf-header"
>
Expand Down Expand Up @@ -1508,7 +1486,7 @@ exports[`CatalogTile renders properly 1`] = `
className="catalog-tile-pf-description"
>
<span
className="truncated"
className=""
>
truncated
</span>
Expand Down Expand Up @@ -1786,7 +1764,7 @@ exports[`CatalogTile renders properly 1`] = `
className="catalog-tile-pf-description"
>
<span
className="truncated"
className="has-footer"
>
This is a very long description that should be truncated after 112 characters. 112 is the default but can be
…
Expand Down Expand Up @@ -1901,11 +1879,6 @@ exports[`CatalogTile renders properly 1`] = `
/>
</svg>
</span>
<CardActions>
<div
className="pf-c-card__actions"
/>
</CardActions>
</div>
</CardHead>
<CardHeader
Expand All @@ -1919,26 +1892,8 @@ exports[`CatalogTile renders properly 1`] = `
>
Custom SVG
</div>
<div
className="catalog-tile-pf-subtitle"
/>
</div>
</CardHeader>
<CardBody
className="catalog-tile-pf-body"
>
<div
className="pf-c-card__body catalog-tile-pf-body"
>
<div
className="catalog-tile-pf-description"
>
<span
className=""
/>
</div>
</div>
</CardBody>
</a>
</Card>
</CatalogTile>
Expand Down
70 changes: 22 additions & 48 deletions ...react-catalog-view-extension/src/components/CatalogTile/examples/CatalogTile.md
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -37,40 +37,11 @@ Basic = () => (
]}
title="Patternfly-React"
vendor="provided by Red Hat"
description={
'This is a very long description that should be truncated after 112 characters. ' +
'112 is the default but can be overridden if need be. You can also provide a custom truncation function ' +
'to truncate the description how you see fit. It will be passed the description, max length, and id.'
}
/>
</React.Fragment>
);
```

```js title=Basic-without-truncated-text
import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import { CogIcon } from '@patternfly/react-icons';
import { pfLogo2 } from './examples/pfLogo2.svg'

SimpleNoTrunc = () => (
<React.Fragment>
<CatalogTile
id="simple"
iconImg={pfLogo2}
iconAlt="PatternFly logo"
badges={[
<CatalogTileBadge title="Certified">
<CogIcon />
</CatalogTileBadge>
]}
title="Patternfly-React"
vendor="provided by Red Hat"
maxDescriptionLength={-1}
description={
'This is a very long description that is not truncated after 112 characters. ' +
'To turn off truncation, pass in a maxDescriptionLength of -1. Please note that this has changed from ' +
'PatternFly 3.'
'This is a very, very long description that should be truncated after three lines. ' +
'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +
'This has changed from PatternFly 3.'
}
/>
</React.Fragment>
Expand All @@ -96,10 +67,11 @@ SimpleFooter = () => (
]}
title="Patternfly-React"
vendor="provided by Red Hat"
maxDescriptionLength={-1}
description={
'This is a very long description that should be truncated after 112 characters. ' +
'112 is the default but can be overridden if need be. You can also provide a custom truncation function ' +
'to truncate the description how you see fit. It will be passed the description, max length, and id.'
'This is a very, very long description that should be truncated after one line. ' +
'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +
'This has changed from PatternFly 3.'
}
footer={
<span>
Expand All @@ -120,7 +92,7 @@ import { pfLogo2 } from './examples/pfLogo2.svg'
Link = () => (
<React.Fragment>
<CatalogTile
id="simple"
id="link-variant"
iconImg={pfLogo2}
iconAlt="PatternFly logo"
badges={[
Expand All @@ -130,11 +102,12 @@ Link = () => (
]}
href="http://patternfly.org/v4"
title="Patternfly-React"
vendor={<React.Fragment>provided by <a href="http://redhat.com">Red Hat</a></React.Fragment>}
vendor="provided by Red Hat"
maxDescriptionLength={-1}
description={
'This is a very long description that should be truncated after 112 characters. ' +
'112 is the default but can be overridden if need be. You can also provide a custom truncation function ' +
'to truncate the description how you see fit. It will be passed the description, max length, and id.'
'This is a very, very long description that should be truncated after three lines. ' +
'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +
'This has changed from PatternFly 3.'
}
/>
</React.Fragment>
Expand Down Expand Up @@ -163,10 +136,11 @@ MultiIcon = () => (
]}
title="Patternfly-React"
vendor={<React.Fragment>provided by <a href="http://redhat.com">Red Hat</a></React.Fragment>}
maxDescriptionLength={-1}
description={
'This is a very long description that should be truncated after 112 characters. ' +
'112 is the default but can be overridden if need be. You can also provide a custom truncation function ' +
'to truncate the description how you see fit. It will be passed the description, max length, and id.'
'This is a very, very long description that should be truncated after three lines. ' +
'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +
'This has changed from PatternFly 3.'
}
/>
</React.Fragment>
Expand All @@ -181,21 +155,21 @@ import { pfLogo2 } from './examples/pfLogo2.svg'
TextBadge = () => (
<React.Fragment>
<CatalogTile
id="multiIcon"
id="text-badge"
iconImg={pfLogo2}
iconAlt="PatternFly logo"
badges={[
'Community'
]}
title="Patternfly-React"
vendor={<React.Fragment>provided by <a href="http://redhat.com">Red Hat</a></React.Fragment>}
maxDescriptionLength={-1}
description={
'This is a very long description that should be truncated after 112 characters. ' +
'112 is the default but can be overridden if need be. You can also provide a custom truncation function ' +
'to truncate the description how you see fit. It will be passed the description, max length, and id.'
'This is a very, very long description that should be truncated after three lines. ' +
'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +
'This has changed from PatternFly 3.'
}
/>
</React.Fragment>
);
```

19 changes: 7 additions & 12 deletions ...ernfly-4/react-catalog-view-extension/src/components/CatalogTile/examples/catalogTile.css
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,14 @@
font-size: 16px;
margin-left: 5px;
}
.ws-react-c-catalogtile .catalog-tile-pf-body .catalog-tile-pf-description span.truncated {
.ws-react-c-catalogtile .catalog-tile-pf-body .catalog-tile-pf-description span {
display: -webkit-box;
overflow: hidden;
position: relative;
}
.ws-react-c-catalogtile .catalog-tile-pf-body .catalog-tile-pf-description span.truncated::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 75%);
bottom: 0;
color: transparent;
content: ".";
position: absolute;
right: 0;
width: 50%;
text-align: right;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.ws-react-c-catalogtile .catalog-tile-pf-body .catalog-tile-pf-description span.has-footer {
-webkit-line-clamp: 1;
}
.ws-react-c-catalogtile .example-ok-icon {
color: #4CB140;
Expand Down
Back | FazBrowse Home | New Git URL