Skip to content

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

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 19 commits into from
May 3, 2024
Merged

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

Show file tree
Hide file tree
Changes from all 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
4 changes: 2 additions & 2 deletions 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 All @@ -118,7 +118,7 @@ class MockFilterSidePanelExample extends React.Component {
const maxShowCount = 5;
const leeway = 2;
return (
<div style={{ width: '205px', border: '1px solid grey', paddingTop: '20px' }}>
<div style={{ width: '205px' }}>
Copy link
Copy Markdown
Contributor

@mcoker mcoker May 2, 2024

Choose a reason for hiding this comment

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

Removed the border and example padding so it's clear what's coming from <FilterSidePanel> and what's part of the example. Left the width because there is no width on <FilterSidePanel> and I'm assuming this panel goes into some parent/container with a constrained width, so this will mimic closer how the component will display. Ideally I'd probably drop this width, too, so you're just seeing the extension styles.

Just dropping a note here but this and the properties side panel seem to share some styling - they're narrow, probably have padding around them. And <FilterSidePanel> has padding and no width, and <PropertiesSidePanel> has a width and no padding. I'm guessing that's fine, but wondering if there could be some consistency there.

<FilterSidePanel id="filter-panel">
<FilterSidePanelCategory key="cat1">
<TextInput type="text" id="filter-text-input" placeholder="Filter by name" aria-label="filter text input" />
Expand Down
82 changes: 42 additions & 40 deletions 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 @@ -23,47 +23,49 @@ Note: PropertiesSidePanel lives in its own package at [`@patternfly/react-catalo
import React from 'react';
import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-view-extension';
import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';
import { Icon } from '@patternfly/react-core';
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';

<div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>
Copy link
Copy Markdown
Contributor

@mcoker mcoker May 2, 2024

Choose a reason for hiding this comment

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

Took this wrapper off just so it's clear what style is coming from <PropertiesSidePanel> and what's just in the example code.

<PropertiesSidePanel>
<PropertyItem label="Operator Version" value="0.9.8 (latest)" />
<PropertyItem
label="Certified Level"
value={
<span>
<OkIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Certified
</span>
}
/>
<PropertyItem label="Provider" value="Red Hat, Inc" />
<PropertyItem label="Health Index" value="A" />
<PropertyItem
label="Repository"
value={
<a href="https://quay.io/repository/redhat/prometheus-operator">
https://quay.io/repository/redhat/prometheus-operator
</a>
}
/>
<PropertyItem
label="Container Image"
value={
<a href="#">
0.22.2 <ExternalLinkAltIcon />
</a>
}
/>
<PropertyItem
label="Created At"
value={
<span>
<GlobeIcon /> Aug 23, 1:58pm
</span>
}
/>
<PropertyItem label="Support" value={<a href="#">Red Hat</a>} />
</PropertiesSidePanel>
</div>
<PropertiesSidePanel>
<PropertyItem label="Operator Version" value="0.9.8 (latest)" />
<PropertyItem
Comment on lines +30 to +32
Copy link
Copy Markdown
Contributor

@mcoker mcoker May 2, 2024

Choose a reason for hiding this comment

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

Ideally this should just be a <DescriptionList>. That's how it's called out in the figma design but I wasn't sure if that would work for the extension, depending on how it's used. If you used <DescriptionList> there would be no custom styles here with maaayyyybe the exception of this width

react-catalog-view/packages/module/patternfly-docs/content/examples/propertiesSidePanel.css

Line 2 in d714e15

width: 165px;

Everything else comes for free 💸

label="Certified Level"
value={
<>
<Icon status="success">
<OkIcon />
</Icon>
Certified
</>
}
/>
<PropertyItem label="Provider" value="Red Hat, Inc" />
<PropertyItem label="Health Index" value="A" />
<PropertyItem
label="Repository"
value={
<a href="https://quay.io/repository/redhat/prometheus-operator">
https://quay.io/repository/redhat/prometheus-operator
</a>
}
/>
<PropertyItem
label="Container Image"
value={
<a href="#">
0.22.2 <ExternalLinkAltIcon />
</a>
}
/>
<PropertyItem
label="Created At"
value={
<span>
<GlobeIcon /> Aug 23, 1:58pm
</span>
}
/>
<PropertyItem label="Support" value={<a href="#">Red Hat</a>} />
</PropertiesSidePanel>
```
20 changes: 10 additions & 10 deletions packages/module/patternfly-docs/content/examples/catalogItemHeader.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@
align-items: center;
}
.ws-react-e-catalog-item-header .catalog-item-header-pf-icon {
font-size: 60px;
max-height: 60px;
width: 60px;
font-size: var(--pf-t--global--icon--size--2xl);
max-height: var(--pf-t--global--icon--size--2xl);
width: var(--pf-t--global--icon--size--2xl);
}
.ws-react-e-catalog-item-header .catalog-item-header-pf-text {
margin-left: 20px;
margin-inline-start: var(--pf-t--global--spacer--md);
}
.ws-react-e-catalog-item-header .catalog-item-header-pf-title {
font-weight: 400;
margin-bottom: 0;
margin-top: 0;
font-weight: var(--pf-t--global--font--weight--body);
margin-block-end: 0;
margin-block-start: 0;
}
.ws-react-e-catalog-item-header .catalog-item-header-pf-subtitle {
color: #8b8d8f;
font-size: small;
margin-bottom: 0;
color: var(--pf-t--global--text--color--subtle);
font-size: var(--pf-t--global--font--size--body--sm);
margin-block-end: 0;
}
Loading