Skip to content
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

Jump to bottom

feat(v6): Update to PatternFly V6 Versions #54

Merged
merged 19 commits into from
May 3, 2024
Merged

feat(v6): Update to PatternFly V6 Versions #54

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c25f883
chore(pf-issues): Updated github actions to create issues in Patternf…
dlabaj Apr 3, 2024
8a3c479
Upgrade to v6
jessiehuff Mar 29, 2024
38abbf6
Fix logo path
jessiehuff Mar 29, 2024
852b12f
Update node version in github actions
jessiehuff Mar 29, 2024
131d72b
Missed a few node versions
jessiehuff Mar 29, 2024
d163927
Update snapshots
jessiehuff Mar 29, 2024
fe10357
Update with tokens
jessiehuff Apr 1, 2024
bd81ee6
Ignore experimental rule
jessiehuff Apr 1, 2024
462fc7f
Update styles based on feedback
jessiehuff Apr 2, 2024
a63fe8c
Update alpha versions
jessiehuff Apr 3, 2024
17c18c5
Update featured card to secondary styling
jessiehuff Apr 8, 2024
95b8499
Update snapshots
jessiehuff Apr 8, 2024
bafc9de
Update screen reader class
jessiehuff Apr 23, 2024
f51c84a
Update styling
jessiehuff Apr 26, 2024
46bf5b3
Update snapshots
jessiehuff Apr 26, 2024
d714e15
fix(catalog-view): update to v6 styles
mcoker May 2, 2024
5e8fdc0
chore(propertiessidepanel): fix icon color
mcoker May 2, 2024
035f51f
chore(verticalTab): move blue accent from link to li
mcoker May 3, 2024
7d9783d
Update snapshots
jessiehuff May 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .github/workflows/build-lint-test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ jobs:
fi
- uses: actions/setup-node@v1
with:
node-version: '14'
node-version: '18'
- uses: actions/cache@v2
id: yarn-cache
name: Cache npm deps
Expand Down Expand Up @@ -52,7 +52,7 @@ jobs:
fi
- uses: actions/setup-node@v1
with:
node-version: '14'
node-version: '18'
- uses: actions/cache@v2
id: yarn-cache
name: Cache npm deps
Expand Down Expand Up @@ -89,7 +89,7 @@ jobs:
fi
- uses: actions/setup-node@v1
with:
node-version: '14'
node-version: '18'
- uses: actions/cache@v2
id: yarn-cache
name: Cache npm deps
Expand Down Expand Up @@ -130,7 +130,7 @@ jobs:
fi
- uses: actions/setup-node@v1
with:
node-version: '14'
node-version: '18'
- uses: actions/cache@v2
id: yarn-cache
name: Cache npm deps
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/extensions.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,5 @@ jobs:
steps:
- uses: actions/add-to-project@v0.3.0
with:
project-url: https://github.com/orgs/patternfly/projects/12
project-url: https://github.com/orgs/patternfly/projects/7
github-token: ${{ secrets.GH_PROJECTS }}
2 changes: 1 addition & 1 deletion .github/workflows/promote.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ jobs:
run: yarn install --frozen-lockfile && yarn build
- uses: actions/setup-node@v3
with:
node-version: '16.x'
node-version: '18.x'
registry-url: 'https://registry.npmjs.org'
- name: GitHub Tag Name example
run: |
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: '14'
node-version: '18'
- uses: actions/cache@v2
id: yarn-cache
name: Cache npm deps
Expand Down
12 changes: 6 additions & 6 deletions packages/module/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,18 @@
"patternfly"
],
"dependencies": {
"@patternfly/react-core": "^6.0.0-alpha.2",
"@patternfly/react-styles": "6.0.0-alpha.2"
"@patternfly/react-core": "6.0.0-alpha.50",
"@patternfly/react-styles": "6.0.0-alpha.19"
},
"peerDependencies": {
"react": "^17 || ^18",
"react-dom": "^17 || ^18"
},
"devDependencies": {
"@patternfly/patternfly": "^6.0.0-alpha.21",
"@patternfly/documentation-framework": "^5.3.8",
"@patternfly/react-table": "^6.0.0-alpha.2",
"@patternfly/react-code-editor": "^6.0.0-alpha.2",
"@patternfly/patternfly": "6.0.0-alpha.117",
"@patternfly/documentation-framework": "6.0.0-alpha.20",
"@patternfly/react-table": "6.0.0-alpha.50",
"@patternfly/react-code-editor": "6.0.0-alpha.50",
"react-monaco-editor": "0.51.0",
"monaco-editor": "0.34.1",
"rimraf": "^2.6.2",
Expand Down
3 changes: 2 additions & 1 deletion packages/module/patternfly-a11y.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ module.exports = {
'color-contrast',
'landmark-no-duplicate-main',
'landmark-main-is-top-level',
'scrollable-region-focusable'
'scrollable-region-focusable',
'link-in-text-block',
].join(','),
ignoreIncomplete: true
};
10 changes: 5 additions & 5 deletions packages/module/patternfly-docs/content/examples/CatalogItemHeader.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/
---

import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
import pfLogo2 from './pfLogo2.svg';
import pfLogo6 from './pfLogo6.svg';
import './catalogItemHeader.css';

## Introduction
Expand All @@ -19,10 +19,10 @@ Note: Catalog item header lives in its own package at [`@patternfly/react-catalo
```js
import React from 'react';
import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
import pfLogo2 from './examples/pfLogo2.svg';
import pfLogo6 from './examples/pfLogo6.svg';

<CatalogItemHeader
iconImg={pfLogo2}
iconImg={pfLogo6}
title="PatternFly"
/>
```
Expand All @@ -31,10 +31,10 @@ import pfLogo2 from './examples/pfLogo2.svg';
```js
import React from 'react';
import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
import pfLogo2 from './examples/pfLogo2.svg';
import pfLogo6 from './examples/pfLogo6.svg';

<CatalogItemHeader
iconImg={pfLogo2}
iconImg={pfLogo6}
title="Patternfly-React"
vendor={
<span>
Expand Down
30 changes: 15 additions & 15 deletions packages/module/patternfly-docs/content/examples/CatalogTile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
import pfLogo2 from './pfLogo2.svg';
import pfLogo6 from './pfLogo6.svg';
import './catalogTile.css';

## Introduction
Expand All @@ -23,13 +23,13 @@ Note: Catalog tile lives in its own package at [`@patternfly/react-catalog-view-
import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import pfLogo2 from './pfLogo2.svg';
import pfLogo6 from './pfLogo6.svg';
import '../../../../dist/css/react-catalog-view-extension.css';

<CatalogTile
id="simple-tile"
featured
iconImg={pfLogo2}
iconImg={pfLogo6}
iconAlt="PatternFly logo"
badges={[
<CatalogTileBadge title="Certified">
Expand All @@ -52,11 +52,11 @@ import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
import pfLogo2 from './pfLogo2.svg';
import pfLogo6 from './pfLogo6.svg';

<CatalogTile
id="simple-footer"
iconImg={pfLogo2}
iconImg={pfLogo6}
iconAlt="PatternFly logo"
badges={[
<CatalogTileBadge title="Certified">
Expand All @@ -72,7 +72,7 @@ import pfLogo2 from './pfLogo2.svg';
}
footer={
<span>
<OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Enabled
<OutlinedCheckCircleIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Enabled
</span>
}
/>
Expand All @@ -83,11 +83,11 @@ import pfLogo2 from './pfLogo2.svg';
import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import pfLogo2 from './pfLogo2.svg';
import pfLogo6 from './pfLogo6.svg';

<CatalogTile
id="simple-link-variant"
iconImg={pfLogo2}
iconImg={pfLogo6}
iconAlt="PatternFly logo"
badges={[
<CatalogTileBadge title="Certified">
Expand All @@ -111,18 +111,18 @@ import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
import pfLogo2 from './pfLogo2.svg';
import pfLogo6 from './pfLogo6.svg';

<CatalogTile
id="multiIcon"
iconImg={pfLogo2}
iconImg={pfLogo6}
iconAlt="PatternFly logo"
badges={[
<CatalogTileBadge title="Certified">
<CogIcon />
</CatalogTileBadge>,
<CatalogTileBadge title="USDA Approved">
<OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} />
<OutlinedCheckCircleIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} />
</CatalogTileBadge>
]}
title="Patternfly-React"
Expand All @@ -139,11 +139,11 @@ import pfLogo2 from './pfLogo2.svg';
```js
import React from 'react';
import { CatalogTile } from '@patternfly/react-catalog-view-extension';
import pfLogo2 from './pfLogo2.svg';
import pfLogo6 from './pfLogo6.svg';

<CatalogTile
id="text-badge"
iconImg={pfLogo2}
iconImg={pfLogo6}
iconAlt="PatternFly logo"
badges={[
'Community'
Expand All @@ -163,12 +163,12 @@ import pfLogo2 from './pfLogo2.svg';
import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import pfLogo2 from './pfLogo2.svg';
import pfLogo6 from './pfLogo6.svg';

<CatalogTile
id="simple-with-children"
featured
iconImg={pfLogo2}
iconImg={pfLogo6}
iconAlt="PatternFly logo"
badges={[
<CatalogTileBadge title="Certified">
Expand Down
2 changes: 1 addition & 1 deletion packages/module/patternfly-docs/content/examples/FilterSidePanel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ class MockFilterSidePanelExample extends React.Component {

return (
<span>
<span className="pf-v5-u-screen-reader">{`${count} stars`}</span>
<span className="pf-v6-screen-reader">{`${count} stars`}</span>
{stars}
</span>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
label="Certified Level"
value={
<span>
<OkIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Certified
<OkIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Certified
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is just the default success color, it's --pf-t--global--color--status--success--default. If you want a reference for icon status colors, you can look at the icon component styles and look for --m-[status], like --m-success and see which token is used

Suggested change
<OkIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Certified
<OkIcon style={{color: 'var(--pf-t--global--color--status--success--default)'}} /> Certified

</span>
}
/>
Expand Down
9 changes: 3 additions & 6 deletions packages/module/patternfly-docs/content/examples/catalogTile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
.ws-react-e-catalog-tile .catalog-tile-pf.featured {
border-top: 2px solid #39a5dc;
}
.ws-react-e-catalog-tile .catalog-tile-pf:active, .ws-react-e-catalog-tile .catalog-tile-pf:hover, .ws-react-e-catalog-tile .catalog-tile-pf:focus, .ws-react-e-catalog-tile .catalog-tile-pf:visited {
color: inherit;
text-decoration: none;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems a little weird. The link tile has blue text/stuff in it by default (since it's a link), but this style is making all of that black on :active, :hover, :focus, :visited. So I just matched what I'm seeing in the browser for the current extension and updated the black color to use our default font color.

Here's the current extension - you'll likely need to update the href on it to some non-visited link to see the default state (I updated to href="#")

Screenshot 2024-05-02 at 5 45 33 PM

and on hover

Screenshot 2024-05-02 at 5 45 45 PM

Expand All @@ -17,14 +14,14 @@
font-size: small;
}
.ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle a {
color: #0066CC;
color: var(--pf-t--global--text--color--link--default);
text-decoration: none;
}
.ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle a:hover {
color: #004080;
color: var(--pf-t--global--text--color--link--hover);
text-decoration: underline;
}
.ws-react-e-catalog-tile .pf-v5-c-card__actions {
.ws-react-e-catalog-tile .pf-v6-c-card__actions {
padding-left: 5px;
}
.ws-react-e-catalog-tile .catalog-tile-pf-icon {
Expand Down
4 changes: 2 additions & 2 deletions packages/module/patternfly-docs/content/examples/filterSidePanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
margin-bottom: 0;
}

.filter-panel-pf-category-items .pf-v5-c-button.pf-m-link {
.filter-panel-pf-category-items .pf-v6-c-button.pf-m-link {
padding: 0;
}

Expand All @@ -37,7 +37,7 @@
margin-top: 0;
}

.filter-panel-pf-category-item .pf-v5-c-check__input {
.filter-panel-pf-category-item .pf-v6-c-check__input {
margin-left: 0px;
}

Expand Down
17 changes: 17 additions & 0 deletions packages/module/patternfly-docs/content/examples/pfLogo6.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions packages/module/patternfly-docs/content/examples/verticalTab.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
word-break: break-word;
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a:hover, .ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a:focus {
color: #0088ce;
color: var(--pf-t--global--text--color--brand--hover);
text-decoration: none;
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a.no-wrap {
Expand All @@ -33,10 +33,10 @@
white-space: nowrap;
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a {
color: #0088ce;
color: var(--pf-t--global--text--color--brand--clicked);
}
.ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a::before {
background: #0088ce;
background: var(--pf-t--global--border--color--brand--clicked);
content: " ";
left: 0;
position: absolute;
Expand Down
4 changes: 2 additions & 2 deletions packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,15 +135,15 @@ pageData.examples = {

</Example>,
'Basic with footer': props =>
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst BasicWithFooter = () => (\n <CatalogTile\n id=\"simple-footer\"\n iconImg={pfLogo2}\n iconAlt=\"PatternFly logo\"\n badges={[\n <CatalogTileBadge title=\"Certified\">\n <CogIcon />\n </CatalogTileBadge>\n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n <span>\n <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Enabled\n </span>\n }\n />\n)","title":"Basic with footer","lang":"js"}}>
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst BasicWithFooter = () => (\n <CatalogTile\n id=\"simple-footer\"\n iconImg={pfLogo2}\n iconAlt=\"PatternFly logo\"\n badges={[\n <CatalogTileBadge title=\"Certified\">\n <CogIcon />\n </CatalogTileBadge>\n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n <span>\n <OutlinedCheckCircleIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Enabled\n </span>\n }\n />\n)","title":"Basic with footer","lang":"js"}}>

</Example>,
'Link variant': props =>
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst LinkVariant = () => (\n <CatalogTile\n id=\"simple-link-variant\"\n iconImg={pfLogo2}\n iconAlt=\"PatternFly logo\"\n badges={[\n <CatalogTileBadge title=\"Certified\">\n <CogIcon />\n </CatalogTileBadge>\n ]}\n href=\"http://patternfly.org/v4\"\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"Link variant","lang":"js"}}>

</Example>,
'With multiple icon badges': props =>
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst WithMultipleIconBadges = () => (\n <CatalogTile\n id=\"multiIcon\"\n iconImg={pfLogo2}\n iconAlt=\"PatternFly logo\"\n badges={[\n <CatalogTileBadge title=\"Certified\">\n <CogIcon />\n </CatalogTileBadge>,\n <CatalogTileBadge title=\"USDA Approved\">\n <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} />\n </CatalogTileBadge>\n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}>
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst WithMultipleIconBadges = () => (\n <CatalogTile\n id=\"multiIcon\"\n iconImg={pfLogo2}\n iconAlt=\"PatternFly logo\"\n badges={[\n <CatalogTileBadge title=\"Certified\">\n <CogIcon />\n </CatalogTileBadge>,\n <CatalogTileBadge title=\"USDA Approved\">\n <OutlinedCheckCircleIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} />\n </CatalogTileBadge>\n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}>

</Example>,
'With text badge': props =>
Expand Down
Loading
Loading