Skip to content

Commit e313996

Browse files
wise-king-sullymanwise-king-sullyman
authored
feat(deps): Update to latest pf6 alphas (patternfly#69)
* feat(deps): Update to latest pf6 alphas * chore(styles): Update custom styles to use global token values * chore(deps): bump with final PF alpha versions * feat(Feedback): Update structure and styles for v6
1 parent 41c2dbb commit e313996

10 files changed

Lines changed: 2241 additions & 2000 deletions

File tree

‎packages/module/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@
3333
},
3434
"homepage": "https://github.com/patternfly/react-user-feedback#readme",
3535
"resolutions": {
36-
"@patternfly/react-icons": "^5.0.0"
36+
"@patternfly/react-icons": "6.0.0-alpha.19"
3737
},
3838
"dependencies": {
39-
"@patternfly/react-core": "^6.0.0-alpha.2",
40-
"@patternfly/react-icons": "^6.0.0-alpha.2"
39+
"@patternfly/react-core": "6.0.0-alpha.50",
40+
"@patternfly/react-icons": "6.0.0-alpha.19"
4141
},
4242
"peerDependencies": {
4343
"react": "^17 || ^18",
@@ -53,10 +53,10 @@
5353
"@types/react": "^18",
5454
"@types/react-dom": "^18",
5555
"@patternfly/patternfly-a11y": "^4.3.1",
56-
"@patternfly/documentation-framework": "^5.3.8",
57-
"@patternfly/patternfly":"^6.0.0-alpha.21",
58-
"@patternfly/react-table": "^6.0.0-alpha.2",
59-
"@patternfly/react-code-editor": "^6.0.0-alpha.2",
56+
"@patternfly/documentation-framework": "6.0.0-alpha.20",
57+
"@patternfly/patternfly":"6.0.0-alpha.117",
58+
"@patternfly/react-table": "6.0.0-alpha.50",
59+
"@patternfly/react-code-editor": "6.0.0-alpha.50",
6060
"node-sass-package-importer": "^5.3.2",
6161
"fs-extra": "^9.1.0",
6262
"glob": "^7.2.3",

‎packages/module/patternfly-a11y.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ module.exports = {
2222
'color-contrast',
2323
'landmark-no-duplicate-main',
2424
'landmark-main-is-top-level',
25-
'scrollable-region-focusable'
25+
'scrollable-region-focusable',
26+
'link-in-text-block'
2627
].join(','),
2728
ignoreIncomplete: true
2829
};

‎packages/module/patternfly-docs/generated/extensions/user-feedback/design-guidelines.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const pageData = {
1111
"section": "extensions",
1212
"subsection": "",
1313
"deprecated": false,
14+
"template": false,
1415
"beta": false,
1516
"demo": false,
1617
"newImplementationLink": false,
@@ -19,9 +20,6 @@ const pageData = {
1920
"slug": "/extensions/user-feedback/design-guidelines",
2021
"sourceLink": "https://github.com/patternfly/patternfly-org/blob/main/packages/module/patternfly-docs/content/design-guidelines/design-guidelines.md",
2122
"relPath": "packages/module/patternfly-docs/content/design-guidelines/design-guidelines.md"
22-
};
23-
pageData.relativeImports = {
24-
2523
};
2624
pageData.examples = {
2725

‎packages/module/patternfly-docs/generated/extensions/user-feedback/react.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const pageData = {
77
"section": "extensions",
88
"subsection": "",
99
"deprecated": false,
10+
"template": false,
1011
"beta": false,
1112
"demo": false,
1213
"newImplementationLink": false,
@@ -82,9 +83,6 @@ const pageData = {
8283
pageData.liveContext = {
8384
FeedbackModal,
8485
feedbackImage
85-
};
86-
pageData.relativeImports = {
87-
8886
};
8987
pageData.examples = {
9088
'Basic modal': props =>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
module.exports = {
2-
'/extensions/user-feedback/design-guidelines': {
2+
'/extensions/user-feedback/react': {
33
id: "User feedback",
44
title: "User feedback",
5-
toc: [{"text":"Elements"},{"text":"Behavior"},{"text":"Variations"},[{"text":"Modal items open forms within the modal"},{"text":"Modal items link to external URLs"}]],
5+
toc: [{"text":"About"},{"text":"Examples"},[{"text":"Basic modal"},{"text":"Advanced modal"},{"text":"Advanced that autofills an email address"},{"text":"Modal with asynchronous call support"},{"text":"Modal with internationalization support"}]],
6+
examples: ["Basic modal","Advanced modal","Advanced that autofills an email address","Modal with asynchronous call support","Modal with internationalization support"],
67
section: "extensions",
78
subsection: "",
8-
source: "design-guidelines",
9+
source: "react",
910
tabName: null,
10-
Component: () => import(/* webpackChunkName: "extensions/user-feedback/design-guidelines/index" */ './extensions/user-feedback/design-guidelines')
11+
Component: () => import(/* webpackChunkName: "extensions/user-feedback/react/index" */ './extensions/user-feedback/react')
1112
},
12-
'/extensions/user-feedback/react': {
13+
'/extensions/user-feedback/design-guidelines': {
1314
id: "User feedback",
1415
title: "User feedback",
15-
toc: [{"text":"About"},{"text":"Examples"},[{"text":"Basic modal"},{"text":"Advanced modal"},{"text":"Advanced that autofills an email address"},{"text":"Modal with asynchronous call support"},{"text":"Modal with internationalization support"}]],
16-
examples: ["Basic modal","Advanced modal","Advanced that autofills an email address","Modal with asynchronous call support","Modal with internationalization support"],
16+
toc: [{"text":"Elements"},{"text":"Behavior"},{"text":"Variations"},[{"text":"Modal items open forms within the modal"},{"text":"Modal items link to external URLs"}]],
1717
section: "extensions",
1818
subsection: "",
19-
source: "react",
19+
source: "design-guidelines",
2020
tabName: null,
21-
Component: () => import(/* webpackChunkName: "extensions/user-feedback/react/index" */ './extensions/user-feedback/react')
21+
Component: () => import(/* webpackChunkName: "extensions/user-feedback/design-guidelines/index" */ './extensions/user-feedback/design-guidelines')
2222
}
2323
};

‎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 variant="light" style={centerStyle}>
13+
<PageSection style={centerStyle}>
1414
<div style={{ flex: 'none', textAlign: 'center' }}>
1515
<Title size="4xl" headingLevel="h1">
1616
My extension docs

‎packages/module/src/Feedback/Feedback.scss‎

Lines changed: 53 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,63 @@
11
.chr-c-feedback-modal {
2-
margin: 0;
3-
padding: 0;
2+
--pf-v6-c-modal-box__close--sibling--MarginRight: 0;
43

5-
.pf-c-content {
6-
margin-bottom: var(--pf-v5-c-content--MarginBottom);
4+
.pf-v6-c-modal-box__close {
5+
z-index: inherit;
76
}
7+
}
88

9-
.pf-c-modal-box__body {
10-
padding: 0;
11-
margin: 0;
12-
}
13-
.pf-c-modal-box > .pf-c-button + *{
14-
margin-right: 0;
15-
}
16-
& .pf-c-modal-box__body {
17-
&:last-child {
18-
padding-bottom: 0;
19-
}
20-
}
9+
.chr-c-feedback-description {
10+
margin-inline-end: 0 !important;
2111
}
2212

23-
.chr-c-feedback-cards {
24-
margin: var(--pf-v5-global--spacer--sm);
13+
.chr-c-feedback-content {
14+
padding: var(--pf-t--global--spacer--xl);
15+
gap: var(--pf-t--global--spacer--md);
16+
height: 100%;
17+
display: flex;
18+
flex-direction: column;
19+
align-items: flex-start;
2520
}
2621

27-
.chr-c-feedback-card-title {
28-
color: var(--pf-v5-global--link--Color);
22+
.chr-c-feedback-heading {
23+
padding: 0 37px var(--pf-t--global--spacer--sm) 0;
2924
}
3025

31-
.chr-c-feedback {
32-
width: 100%;
26+
.chr-c-feedback-content-main {
27+
max-height: 450px;
3328
display: flex;
34-
flex-direction: row;
29+
flex-direction: column;
30+
align-self: stretch;
3531
}
3632

37-
.chr-c-feedback-content {
33+
.chr-c-feedback-cards {
34+
gap: var(--pf-t--global--spacer--md);
3835
display: flex;
3936
flex-direction: column;
40-
padding-right: var(--pf-v5-global--spacer--lg);
41-
padding-top: var(--pf-v5-global--spacer--lg);
42-
margin: var(--pf-v5-global--spacer--md);
43-
}
37+
align-items: flex-start;
38+
padding: inherit;
4439

45-
.chr-c-feedback-button {
46-
margin: var(--pf-v5-global--spacer--sm);
47-
text-align: left;
48-
position: absolute;
49-
bottom: var(--pf-v5-global--spacer--md);
50-
}
40+
.pf-v6-c-card {
41+
width: 100%;
5142

52-
.chr-c-feedback-footer-button {
53-
margin: var(--pf-v5-global--spacer--md);
43+
.pf-v6-c-card__title-text {
44+
color: var(--pf-t--global--text--color--regular);
45+
}
46+
}
5447
}
5548

56-
.chr-c-feedback-buttons {
57-
margin: var(--pf-v5-global--spacer--sm);
58-
position: absolute;
59-
bottom: var(--pf-v5-global--spacer--md);
49+
.chr-c-feedback-footer {
50+
display: flex;
51+
align-self: stretch;
52+
flex-wrap: wrap;
53+
padding: 0 0 var(--pf-t--global--spacer--sm) 0;
54+
margin-top: auto;
55+
box-shadow: none;
56+
column-gap: var(--pf-t--global--spacer--xl);
57+
58+
.pf-v6-c-action-list__group {
59+
flex-wrap: wrap;
60+
}
6061
}
6162

6263
.chr-c-feedback-success-content {
@@ -69,23 +70,24 @@
6970
}
7071

7172
.chr-c-feedback-email {
72-
margin-top: var(--pf-v5-global--spacer--lg);
73+
margin-top: var(--pf-t--global--spacer--lg);
7374
overflow: hidden;
7475
}
7576

7677
.chr-c-feedback-image {
77-
background-color: var(--pf-v5-global--palette--black-150);
78-
}
79-
80-
.chr-c-feedback-panel {
81-
margin-bottom: var(--pf-v5-global--spacer--lg);
82-
&__body {
83-
padding-bottom: 4px;
84-
padding-top: 4px;
85-
border-bottom: 1px solid var(--pf-v5-global--palette--black-500);
86-
}
78+
background-color: var(--pf-t--global--background--color--secondary--default);
8779
}
8880

8981
.chr-c-feedback-text-area {
9082
resize: none;
9183
}
84+
85+
@media (max-width: 480px) {
86+
.chr-c-feedback-content-main {
87+
max-height: var(--pf-v6-c-panel__main--MaxHeight);
88+
}
89+
90+
.chr-c-feedback-image {
91+
display: none;
92+
}
93+
}

0 commit comments

Comments
 (0)