@patternfly/react-docs 7.2.0-prerelease.4 → 7.2.0-prerelease.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +161 -0
- package/package.json +15 -15
- package/patternfly-docs/pages/icons.js +5 -1
- package/patternfly-docs/pages/index.js +3 -1
- package/static/like-button.js +0 -30
- package/static/umd.html +0 -98
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,167 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [7.2.0-prerelease.41](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.40...@patternfly/react-docs@7.2.0-prerelease.41) (2025-03-03)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
9
|
+
|
|
10
|
+
# [7.2.0-prerelease.40](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.39...@patternfly/react-docs@7.2.0-prerelease.40) (2025-02-27)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
13
|
+
|
|
14
|
+
# [7.2.0-prerelease.39](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.38...@patternfly/react-docs@7.2.0-prerelease.39) (2025-02-27)
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
|
|
18
|
+
- **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.11 ([#11565](https://github.com/patternfly/patternfly-react/issues/11565)) ([f8832f1](https://github.com/patternfly/patternfly-react/commit/f8832f1b5abd0b62c61905eaeea0584daeb0a650))
|
|
19
|
+
- **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.12 ([#11571](https://github.com/patternfly/patternfly-react/issues/11571)) ([df1322d](https://github.com/patternfly/patternfly-react/commit/df1322d1550f8a83a227534a670547895457d959))
|
|
20
|
+
|
|
21
|
+
# [7.2.0-prerelease.38](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.37...@patternfly/react-docs@7.2.0-prerelease.38) (2025-02-25)
|
|
22
|
+
|
|
23
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
24
|
+
|
|
25
|
+
# [7.2.0-prerelease.37](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.36...@patternfly/react-docs@7.2.0-prerelease.37) (2025-02-24)
|
|
26
|
+
|
|
27
|
+
### Bug Fixes
|
|
28
|
+
|
|
29
|
+
- **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.9 ([#11550](https://github.com/patternfly/patternfly-react/issues/11550)) ([e4c7d8d](https://github.com/patternfly/patternfly-react/commit/e4c7d8d3cdf474c9e477091c0867dccbdd17d1f7))
|
|
30
|
+
|
|
31
|
+
# [7.2.0-prerelease.36](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.35...@patternfly/react-docs@7.2.0-prerelease.36) (2025-02-24)
|
|
32
|
+
|
|
33
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
34
|
+
|
|
35
|
+
# [7.2.0-prerelease.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.34...@patternfly/react-docs@7.2.0-prerelease.35) (2025-02-20)
|
|
36
|
+
|
|
37
|
+
### Bug Fixes
|
|
38
|
+
|
|
39
|
+
- **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.7 ([#11543](https://github.com/patternfly/patternfly-react/issues/11543)) ([1779da2](https://github.com/patternfly/patternfly-react/commit/1779da23c863dfc7637ad68d3e266253d77569e9))
|
|
40
|
+
|
|
41
|
+
# [7.2.0-prerelease.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.33...@patternfly/react-docs@7.2.0-prerelease.34) (2025-02-17)
|
|
42
|
+
|
|
43
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
44
|
+
|
|
45
|
+
# [7.2.0-prerelease.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.32...@patternfly/react-docs@7.2.0-prerelease.33) (2025-02-14)
|
|
46
|
+
|
|
47
|
+
### Bug Fixes
|
|
48
|
+
|
|
49
|
+
- **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.4 ([#11525](https://github.com/patternfly/patternfly-react/issues/11525)) ([04daac6](https://github.com/patternfly/patternfly-react/commit/04daac6234bf7b85bdf663e4e9cb1093a16b9f44))
|
|
50
|
+
|
|
51
|
+
# [7.2.0-prerelease.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.31...@patternfly/react-docs@7.2.0-prerelease.32) (2025-02-13)
|
|
52
|
+
|
|
53
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
54
|
+
|
|
55
|
+
# [7.2.0-prerelease.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.30...@patternfly/react-docs@7.2.0-prerelease.31) (2025-02-12)
|
|
56
|
+
|
|
57
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
58
|
+
|
|
59
|
+
# [7.2.0-prerelease.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.29...@patternfly/react-docs@7.2.0-prerelease.30) (2025-02-12)
|
|
60
|
+
|
|
61
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
62
|
+
|
|
63
|
+
# [7.2.0-prerelease.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.28...@patternfly/react-docs@7.2.0-prerelease.29) (2025-01-31)
|
|
64
|
+
|
|
65
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
66
|
+
|
|
67
|
+
# [7.2.0-prerelease.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.27...@patternfly/react-docs@7.2.0-prerelease.28) (2025-01-30)
|
|
68
|
+
|
|
69
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
70
|
+
|
|
71
|
+
# [7.2.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.26...@patternfly/react-docs@7.2.0-prerelease.27) (2025-01-28)
|
|
72
|
+
|
|
73
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
74
|
+
|
|
75
|
+
# [7.2.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.25...@patternfly/react-docs@7.2.0-prerelease.26) (2025-01-28)
|
|
76
|
+
|
|
77
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
78
|
+
|
|
79
|
+
# [7.2.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.24...@patternfly/react-docs@7.2.0-prerelease.25) (2025-01-28)
|
|
80
|
+
|
|
81
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
82
|
+
|
|
83
|
+
# [7.2.0-prerelease.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.23...@patternfly/react-docs@7.2.0-prerelease.24) (2025-01-27)
|
|
84
|
+
|
|
85
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
86
|
+
|
|
87
|
+
# [7.2.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.22...@patternfly/react-docs@7.2.0-prerelease.23) (2025-01-27)
|
|
88
|
+
|
|
89
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
90
|
+
|
|
91
|
+
# [7.2.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.21...@patternfly/react-docs@7.2.0-prerelease.22) (2025-01-27)
|
|
92
|
+
|
|
93
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
94
|
+
|
|
95
|
+
# [7.2.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.20...@patternfly/react-docs@7.2.0-prerelease.21) (2025-01-24)
|
|
96
|
+
|
|
97
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
98
|
+
|
|
99
|
+
# [7.2.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.19...@patternfly/react-docs@7.2.0-prerelease.20) (2025-01-24)
|
|
100
|
+
|
|
101
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
102
|
+
|
|
103
|
+
# [7.2.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.18...@patternfly/react-docs@7.2.0-prerelease.19) (2025-01-24)
|
|
104
|
+
|
|
105
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
106
|
+
|
|
107
|
+
# [7.2.0-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.17...@patternfly/react-docs@7.2.0-prerelease.18) (2025-01-24)
|
|
108
|
+
|
|
109
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
110
|
+
|
|
111
|
+
# [7.2.0-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.16...@patternfly/react-docs@7.2.0-prerelease.17) (2025-01-23)
|
|
112
|
+
|
|
113
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
114
|
+
|
|
115
|
+
# [7.2.0-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.15...@patternfly/react-docs@7.2.0-prerelease.16) (2025-01-23)
|
|
116
|
+
|
|
117
|
+
### Bug Fixes
|
|
118
|
+
|
|
119
|
+
- **deps:** update dependency victory to ^37.3.6 ([#11447](https://github.com/patternfly/patternfly-react/issues/11447)) ([6686381](https://github.com/patternfly/patternfly-react/commit/6686381558104f5392a1eb25c37f0bd73e9f33a6))
|
|
120
|
+
|
|
121
|
+
# [7.2.0-prerelease.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.14...@patternfly/react-docs@7.2.0-prerelease.15) (2025-01-21)
|
|
122
|
+
|
|
123
|
+
### Bug Fixes
|
|
124
|
+
|
|
125
|
+
- **deps:** update dependency @patternfly/patternfly to v6.1.0 ([#11436](https://github.com/patternfly/patternfly-react/issues/11436)) ([b1b172d](https://github.com/patternfly/patternfly-react/commit/b1b172dc1b427ce8883ec1078c307955bc60a2eb))
|
|
126
|
+
|
|
127
|
+
# [7.2.0-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.13...@patternfly/react-docs@7.2.0-prerelease.14) (2025-01-20)
|
|
128
|
+
|
|
129
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
130
|
+
|
|
131
|
+
# [7.2.0-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.12...@patternfly/react-docs@7.2.0-prerelease.13) (2025-01-20)
|
|
132
|
+
|
|
133
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
134
|
+
|
|
135
|
+
# [7.2.0-prerelease.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.11...@patternfly/react-docs@7.2.0-prerelease.12) (2025-01-17)
|
|
136
|
+
|
|
137
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
138
|
+
|
|
139
|
+
# [7.2.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.10...@patternfly/react-docs@7.2.0-prerelease.11) (2025-01-15)
|
|
140
|
+
|
|
141
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
142
|
+
|
|
143
|
+
# [7.2.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.9...@patternfly/react-docs@7.2.0-prerelease.10) (2025-01-14)
|
|
144
|
+
|
|
145
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
146
|
+
|
|
147
|
+
# [7.2.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.8...@patternfly/react-docs@7.2.0-prerelease.9) (2025-01-14)
|
|
148
|
+
|
|
149
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
150
|
+
|
|
151
|
+
# [7.2.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.7...@patternfly/react-docs@7.2.0-prerelease.8) (2025-01-14)
|
|
152
|
+
|
|
153
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
154
|
+
|
|
155
|
+
# [7.2.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.6...@patternfly/react-docs@7.2.0-prerelease.7) (2025-01-14)
|
|
156
|
+
|
|
157
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
158
|
+
|
|
159
|
+
# [7.2.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.5...@patternfly/react-docs@7.2.0-prerelease.6) (2025-01-14)
|
|
160
|
+
|
|
161
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
162
|
+
|
|
163
|
+
# [7.2.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.4...@patternfly/react-docs@7.2.0-prerelease.5) (2025-01-10)
|
|
164
|
+
|
|
165
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
166
|
+
|
|
6
167
|
# [7.2.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.2.0-prerelease.3...@patternfly/react-docs@7.2.0-prerelease.4) (2025-01-10)
|
|
7
168
|
|
|
8
169
|
**Note:** Version bump only for package @patternfly/react-docs
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-docs",
|
|
3
3
|
"description": "PatternFly React Docs",
|
|
4
|
-
"version": "7.2.0-prerelease.
|
|
4
|
+
"version": "7.2.0-prerelease.41",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"tag": "prerelease"
|
|
@@ -23,21 +23,21 @@
|
|
|
23
23
|
"test:a11y": "patternfly-a11y --config patternfly-a11y.config"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@patternfly/patternfly": "6.
|
|
27
|
-
"@patternfly/react-charts": "^8.2.0-prerelease.
|
|
28
|
-
"@patternfly/react-code-editor": "^6.2.0-prerelease.
|
|
29
|
-
"@patternfly/react-core": "^6.2.0-prerelease.
|
|
30
|
-
"@patternfly/react-drag-drop": "^6.2.0-prerelease.
|
|
31
|
-
"@patternfly/react-icons": "^6.2.0-prerelease.
|
|
32
|
-
"@patternfly/react-styles": "^6.2.0-prerelease.
|
|
33
|
-
"@patternfly/react-table": "^6.2.0-prerelease.
|
|
34
|
-
"@patternfly/react-templates": "^6.2.0-prerelease.
|
|
35
|
-
"@patternfly/react-tokens": "^6.2.0-prerelease.
|
|
36
|
-
"victory": "^37.3.
|
|
26
|
+
"@patternfly/patternfly": "6.2.0-prerelease.12",
|
|
27
|
+
"@patternfly/react-charts": "^8.2.0-prerelease.20",
|
|
28
|
+
"@patternfly/react-code-editor": "^6.2.0-prerelease.26",
|
|
29
|
+
"@patternfly/react-core": "^6.2.0-prerelease.24",
|
|
30
|
+
"@patternfly/react-drag-drop": "^6.2.0-prerelease.26",
|
|
31
|
+
"@patternfly/react-icons": "^6.2.0-prerelease.7",
|
|
32
|
+
"@patternfly/react-styles": "^6.2.0-prerelease.6",
|
|
33
|
+
"@patternfly/react-table": "^6.2.0-prerelease.25",
|
|
34
|
+
"@patternfly/react-templates": "^6.2.0-prerelease.25",
|
|
35
|
+
"@patternfly/react-tokens": "^6.2.0-prerelease.6",
|
|
36
|
+
"victory": "^37.3.6"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@patternfly/documentation-framework": "^6.5.
|
|
40
|
-
"@patternfly/patternfly-a11y": "5.
|
|
39
|
+
"@patternfly/documentation-framework": "^6.5.15",
|
|
40
|
+
"@patternfly/patternfly-a11y": "5.1.0"
|
|
41
41
|
},
|
|
42
42
|
"keywords": [
|
|
43
43
|
"gatsby"
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"last 2 versions",
|
|
47
47
|
"not ie <= 11"
|
|
48
48
|
],
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "ddb087660a31365535aa8483fe1f063dc73051eb"
|
|
50
50
|
}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
+
import { Content } from '@patternfly/react-core/dist/esm/components/Content';
|
|
4
|
+
import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid';
|
|
5
|
+
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page/PageSection';
|
|
6
|
+
import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
|
|
3
7
|
import spacerMd from '@patternfly/react-tokens/dist/esm/t_global_spacer_md';
|
|
4
8
|
import labelFontSize from '@patternfly/react-tokens/dist/esm/t_global_font_size_sm';
|
|
5
9
|
import * as IconsModule from '@patternfly/react-icons/dist/esm';
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
+
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page/PageSection';
|
|
4
|
+
import { Title } from '@patternfly/react-core/dist/esm/components/Title';
|
|
3
5
|
|
|
4
6
|
// https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
|
|
5
7
|
const centerStyle = {
|
package/static/like-button.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const e = React.createElement;
|
|
4
|
-
|
|
5
|
-
class LikeButton extends React.Component {
|
|
6
|
-
constructor(props) {
|
|
7
|
-
super(props);
|
|
8
|
-
this.state = { liked: false };
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
render() {
|
|
12
|
-
if (this.state.liked) {
|
|
13
|
-
return e(PatternFlyReact.Alert, {
|
|
14
|
-
title: ' Great success',
|
|
15
|
-
children: 'You liked this',
|
|
16
|
-
variant: 'success'
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
return e(
|
|
21
|
-
PatternFlyReact.Button,
|
|
22
|
-
{ onClick: () => this.setState({ liked: true }) },
|
|
23
|
-
'Like'
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const domContainer = document.querySelector('#react-root');
|
|
30
|
-
ReactDOM.render(e(LikeButton), domContainer);
|
package/static/umd.html
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en-us">
|
|
3
|
-
<head>
|
|
4
|
-
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css" crossorigin="anonymous" />
|
|
5
|
-
<meta charset="utf-8"/>
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<h1 class="pf-c-title pf-m-2xl">PatternFly-React UMD Build</h1>
|
|
9
|
-
<p>
|
|
10
|
-
UMD build allow for you to quickly get started using <a href="">@patternfly/react-core.</a>
|
|
11
|
-
If you care about how this is accomplished, it's highly recommended to read
|
|
12
|
-
<a href="https://reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute">React's getting started with UMD guide</a> before returning here since.
|
|
13
|
-
This guide uses React's guide as a base.
|
|
14
|
-
</p>
|
|
15
|
-
<h2 class="pf-c-title pf-m-2xl">1. Write HTML</h2>
|
|
16
|
-
<p>
|
|
17
|
-
Create a container to inject React components into.
|
|
18
|
-
<pre>
|
|
19
|
-
<div id="react-root">Inject in here</div>
|
|
20
|
-
</pre>
|
|
21
|
-
</p>
|
|
22
|
-
<h2 class="pf-c-title pf-m-2xl">2. Include JS</h2>
|
|
23
|
-
<p>
|
|
24
|
-
PatternFly React depends on React and PropTypes. Add these to the bottom of the <body> tag on your page:
|
|
25
|
-
<pre>
|
|
26
|
-
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin="anonymous"></script>
|
|
27
|
-
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin="anonymous"></script>
|
|
28
|
-
<script src="https://unpkg.com/prop-types@15.6/prop-types.js" crossorigin="anonymous"></script>
|
|
29
|
-
<script src="https://unpkg.com/@patternfly/react-core@3/dist/umd/react-core.js" crossorigin="anonymous"></script>
|
|
30
|
-
<script src="like-button.js"></script>
|
|
31
|
-
</pre>
|
|
32
|
-
|
|
33
|
-
@patternfly/react-core exposes a "PatternFlyReact" object for use in your like-button.js. Populate your like-button.js with something like:
|
|
34
|
-
<pre>
|
|
35
|
-
'use strict';
|
|
36
|
-
|
|
37
|
-
const e = React.createElement;
|
|
38
|
-
|
|
39
|
-
class LikeButton extends React.Component {
|
|
40
|
-
constructor(props) {
|
|
41
|
-
super(props);
|
|
42
|
-
this.state = { liked: false };
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
render() {
|
|
46
|
-
if (this.state.liked) {
|
|
47
|
-
return e(PatternFlyReact.Alert, {
|
|
48
|
-
title: ' Great success',
|
|
49
|
-
children: 'You liked this',
|
|
50
|
-
variant: 'success'
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
return e(
|
|
55
|
-
PatternFlyReact.Button,
|
|
56
|
-
{ onClick: () => this.setState({ liked: true }) },
|
|
57
|
-
'Like'
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
const domContainer = document.querySelector('#react-root');
|
|
64
|
-
ReactDOM.render(e(LikeButton), domContainer);
|
|
65
|
-
</pre>
|
|
66
|
-
</p>
|
|
67
|
-
<h2 class="pf-c-title pf-m-2xl">3. (Optional) Include styles</h2>
|
|
68
|
-
<p>
|
|
69
|
-
You have to include <b>ALL</b> our PatternFly styles. There's two ways to do this:
|
|
70
|
-
<pre>
|
|
71
|
-
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css" crossorigin />
|
|
72
|
-
</pre>
|
|
73
|
-
OR
|
|
74
|
-
<pre>
|
|
75
|
-
<link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/styles/base.css" crossorigin />
|
|
76
|
-
<link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/react-core.umd.css" crossorigin />
|
|
77
|
-
</pre>
|
|
78
|
-
</p>
|
|
79
|
-
<h2 class="pf-c-title pf-m-2xl">4. Don't do this in production</h2>
|
|
80
|
-
<p>
|
|
81
|
-
This implementation is very bloated.
|
|
82
|
-
ALL of React, ReactDOM, PropTypes (which you don't need in production...), and PatternFly (including CSS and fonts) are included which takes 912KB <i>after</i> being gzipped.
|
|
83
|
-
Even when minified, they take 520Kb <i>after</i> being gzipped.
|
|
84
|
-
Also, you probably want to be able to use JSX.
|
|
85
|
-
To enable using JSX, treeshaking, and other modern JS tools PatternFly recommendeds consumption using <a href="https://github.com/patternfly/patternfly-react-seed">Webpack.</a>
|
|
86
|
-
It's as simple as cloning <a href="https://github.com/patternfly/patternfly-react-seed">our seed repo</a> and running 2 commands!
|
|
87
|
-
</p>
|
|
88
|
-
<p>
|
|
89
|
-
This page serves as an example of how to do this. Checkout the like button below!
|
|
90
|
-
</p>
|
|
91
|
-
<div id="react-root">Inject like button here</div>
|
|
92
|
-
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin="anonymous"></script>
|
|
93
|
-
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin="anonymous"></script>
|
|
94
|
-
<script src="https://unpkg.com/prop-types@15.6/prop-types.js" crossorigin="anonymous"></script>
|
|
95
|
-
<script src="https://unpkg.com/@patternfly/react-core@3/dist/umd/react-core.js" crossorigin="anonymous"></script>
|
|
96
|
-
<script src="like-button.js"></script>
|
|
97
|
-
</body>
|
|
98
|
-
</html>
|