Skip to content

Commit 01de186

Browse files
nicolethoennicolethoen
authored
Merge pull request #10 from fhlavac/v5
[Do not merge] Introduce PF v5 data view
2 parents bfc592e + 6adef22 commit 01de186

File tree

8 files changed

+6634
-6460
lines changed

8 files changed

+6634
-6460
lines changed

‎package-lock.json‎

Lines changed: 6448 additions & 6280 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/module/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@
3030
"access": "public"
3131
},
3232
"dependencies": {
33-
"@patternfly/react-core": "^6.0.0-alpha.69",
34-
"@patternfly/react-icons": "^6.0.0-alpha.24",
35-
"@patternfly/react-table": "^6.0.0-alpha.69",
36-
"@patternfly/react-component-groups": "^6.0.0-alpha.2",
33+
"@patternfly/react-core": "^5.3.3",
34+
"@patternfly/react-icons": "^5.3.2",
35+
"@patternfly/react-table": "^5.3.3",
36+
"@patternfly/react-component-groups": "^5.3.0-prerelease.2",
3737
"react-jss": "^10.10.0",
3838
"clsx": "^2.1.1"
3939
},
@@ -43,8 +43,8 @@
4343
},
4444
"devDependencies": {
4545
"@patternfly/patternfly-a11y": "^4.3.1",
46-
"@patternfly/documentation-framework": "^6.0.0-alpha.49",
47-
"@patternfly/patternfly": "6.0.0-alpha.139",
46+
"@patternfly/documentation-framework": "^5.16.9",
47+
"@patternfly/patternfly": "^5.3.1",
4848
"@types/react": "^18.3.1",
4949
"@types/react-dom": "^18.3.0",
5050
"@types/react-router-dom": "^5.3.3",

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Layout/AbstractLayoutExample.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
44
const layoutItemStyling = {
55
width: '100%',
66
height: '5rem',
7-
padding: 'var(--pf-t--global--spacer--md)',
8-
border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
7+
padding: 'var(--pf-v5-global--spacer--md)',
8+
borderStyle: 'dashed',
9+
borderWidth: '2px',
910
};
1011

1112
export const BasicExample: React.FunctionComponent = () => (
1213
<DataView>
1314
<div style={layoutItemStyling}>Header</div>
14-
<div style={layoutItemStyling}>Data representation</div>
15+
<div style={{ ...layoutItemStyling, borderTopWidth: 0, borderBottomWidth: 0 }}>Data representation</div>
1516
<div style={layoutItemStyling}>Footer</div>
1617
</DataView>
1718
)

‎packages/module/patternfly-docs/generated/extensions/data-view/about-data-view/extensions.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,23 @@ pageData.examples = {
2323

2424
const Component = () => (
2525
<React.Fragment>
26-
<p {...{"className":"pf-v6-c-content--p ws-p "}}>
26+
<p {...{"className":"ws-p"}}>
2727
{`Data view lives in its own package `}
28-
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-data-view","className":""}}>
29-
<code {...{"className":"ws-code "}}>
28+
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-data-view"}}>
29+
<code {...{"className":"ws-code"}}>
3030
{`@patternfly/react-data-view`}
3131
</code>
3232
</PatternflyThemeLink>
3333
</p>
34-
<AutoLinkHeader {...{"id":"data-view","headingLevel":"h1","className":"ws-title ws-h1"}}>
34+
<AutoLinkHeader {...{"id":"data-view","size":"h1","className":"ws-title ws-h1"}}>
3535
{`Data view`}
3636
</AutoLinkHeader>
37-
<p {...{"className":"pf-v6-c-content--p ws-p "}}>
37+
<p {...{"className":"ws-p"}}>
3838
{`The data view extension contains implementation of the data view component allowing to display record data in a configured layout.`}
3939
</p>
40-
<p {...{"className":"pf-v6-c-content--p ws-p "}}>
40+
<p {...{"className":"ws-p"}}>
4141
{`If you notice a bug or have a suggestion for the data view, feel free to file an issue in our `}
42-
<PatternflyThemeLink {...{"to":"https://github.com/patternfly/react-data-view/issues","className":""}}>
42+
<PatternflyThemeLink {...{"to":"https://github.com/patternfly/react-data-view/issues"}}>
4343
{`GitHub repository`}
4444
</PatternflyThemeLink>
4545
{`! Please make sure to check if there is already a pre-existing issue before creating a new issue.`}

‎packages/module/patternfly-docs/pages/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const centerStyle = {
1010

1111
const IndexPage = () => {
1212
return (
13-
<PageSection style={centerStyle}>
13+
<PageSection variant="light" style={centerStyle}>
1414
<div style={{ flex: 'none', textAlign: 'center' }}>
1515
<Title size="4xl" headingLevel="h1">
1616
My extension docs

‎packages/module/src/DataView/DataView.test.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@ import DataView from './DataView';
55
const layoutItemStyling = {
66
width: '100%',
77
height: '5rem',
8-
padding: 'var(--pf-t--global--spacer--md)',
9-
border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
8+
padding: 'var(--pf-v5-global--spacer--md)',
9+
borderStyle: 'dashed',
10+
borderWidth: '2px',
1011
};
1112

1213
describe('DataView component', () => {
1314
test('should render correctly', () => {
1415
expect(render(
1516
<DataView>
1617
<div style={layoutItemStyling}>Header</div>
17-
<div style={layoutItemStyling}>Data representation</div>
18+
<div style={{ ...layoutItemStyling, borderTopWidth: 0, borderBottomWidth: 0 }}>Data representation</div>
1819
<div style={layoutItemStyling}>Footer</div>
1920
</DataView>)).toMatchSnapshot();
2021
});

‎packages/module/src/DataView/__snapshots__/DataView.test.tsx.snap‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,35 @@ exports[`DataView component should render correctly 1`] = `
66
"baseElement": <body>
77
<div>
88
<div
9-
class="pf-v6-l-stack"
9+
class="pf-v5-l-stack"
1010
data-ouia-component-id="DataView-stack}"
1111
>
1212
<div
13-
class="pf-v6-l-stack__item"
13+
class="pf-v5-l-stack__item"
1414
data-ouia-component-id="DataView-stack-item-0"
1515
>
1616
<div
17-
style="width: 100%; height: 5rem;"
17+
style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
1818
>
1919
Header
2020
</div>
2121
</div>
2222
<div
23-
class="pf-v6-l-stack__item"
23+
class="pf-v5-l-stack__item"
2424
data-ouia-component-id="DataView-stack-item-1"
2525
>
2626
<div
27-
style="width: 100%; height: 5rem;"
27+
style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px; border-top-width: 0; border-bottom-width: 0;"
2828
>
2929
Data representation
3030
</div>
3131
</div>
3232
<div
33-
class="pf-v6-l-stack__item"
33+
class="pf-v5-l-stack__item"
3434
data-ouia-component-id="DataView-stack-item-2"
3535
>
3636
<div
37-
style="width: 100%; height: 5rem;"
37+
style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
3838
>
3939
Footer
4040
</div>
@@ -44,35 +44,35 @@ exports[`DataView component should render correctly 1`] = `
4444
</body>,
4545
"container": <div>
4646
<div
47-
class="pf-v6-l-stack"
47+
class="pf-v5-l-stack"
4848
data-ouia-component-id="DataView-stack}"
4949
>
5050
<div
51-
class="pf-v6-l-stack__item"
51+
class="pf-v5-l-stack__item"
5252
data-ouia-component-id="DataView-stack-item-0"
5353
>
5454
<div
55-
style="width: 100%; height: 5rem;"
55+
style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
5656
>
5757
Header
5858
</div>
5959
</div>
6060
<div
61-
class="pf-v6-l-stack__item"
61+
class="pf-v5-l-stack__item"
6262
data-ouia-component-id="DataView-stack-item-1"
6363
>
6464
<div
65-
style="width: 100%; height: 5rem;"
65+
style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px; border-top-width: 0; border-bottom-width: 0;"
6666
>
6767
Data representation
6868
</div>
6969
</div>
7070
<div
71-
class="pf-v6-l-stack__item"
71+
class="pf-v5-l-stack__item"
7272
data-ouia-component-id="DataView-stack-item-2"
7373
>
7474
<div
75-
style="width: 100%; height: 5rem;"
75+
style="width: 100%; height: 5rem; border-style: dashed; border-width: 2px;"
7676
>
7777
Footer
7878
</div>

0 commit comments

Comments
 (0)