fix(react-styles): updated class names to include versions #9173

wise-king-sullyman · 2023-05-23T20:10:07Z

What: Closes #9150

Additional issues:

patternfly-build · 2023-05-23T20:18:41Z

Preview: https://patternfly-react-pr-9173.surge.sh

A11y report: https://patternfly-react-pr-9173-a11y.surge.sh

mcoker

None of these classes exist in core, so I tried tracing at least one back and looks like this update should work...

The styles for .pf-v5-c-table__inline-edit-buttons, as an example, are converted to a js file and that's read in here, and the class is applied to the markup. So updating the source CSS should also update the markup, at least for that class. I'm assuming the .pf-v5-c-table__editable-row pf-v5-c-console work the same way? I didn't verify that. Also it's worth noting that I found this snippet in the main branch - I'm assuming this inline-edit-extension dir has been moved to another repo? It isn't on v5 as far as I can tell.

patternfly-react/packages/react-inline-edit-extension/src/components/ConfirmButtons/ConfirmButtons.tsx

Line 57 in a0f857c

styles.tableInlineEditButtons,

However, the color vars do need to be updated. The format is --pf-v5-global--palette--[color]-[number] - just need to remove the extra hyphen between the color name and number.

mcoker · 2023-05-30T21:43:14Z

packages/react-styles/src/css/components/Table/inline-edit.css

+  --pf-v5-global--palette--blue--50: #def3ff;
+  --pf-v5-global--palette--blue--200: #7dc3e8;


Suggested change

--pf-v5-global--palette--blue--50: #def3ff;

--pf-v5-global--palette--blue--200: #7dc3e8;

--pf-v5-global--palette--blue-50: #def3ff;

--pf-v5-global--palette--blue-200: #7dc3e8;

mcoker · 2023-05-30T21:43:23Z

packages/react-styles/src/css/components/Table/inline-edit.css

-  background: var(--pf-v5-global--Blue--50) !important;
+tr.pf-v5-c-table__editable-row:hover,
+tr.pf-v5-c-table__editable-row.pf-m-editing {
+  background: var(--pf-v5-global--palette--blue--50) !important;


Suggested change

background: var(--pf-v5-global--palette--blue--50) !important;

background: var(--pf-v5-global--palette--blue-50) !important;

mcoker · 2023-05-30T21:43:31Z

packages/react-styles/src/css/components/Table/inline-edit.css

+  border-bottom: 1px solid var(--pf-v5-global--palette--blue--200) !important;
+  border-top: 1px solid var(--pf-v5-global--palette--blue--200) !important;


Suggested change

border-bottom: 1px solid var(--pf-v5-global--palette--blue--200) !important;

border-top: 1px solid var(--pf-v5-global--palette--blue--200) !important;

border-bottom: 1px solid var(--pf-v5-global--palette--blue-200) !important;

border-top: 1px solid var(--pf-v5-global--palette--blue-200) !important;

mcoker · 2023-05-30T21:43:44Z

packages/react-styles/src/css/components/Table/inline-edit.css

-  border-left: 1px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td:first-child,
+tr.pf-v5-c-table__editable-row.pf-m-editing td:first-child {
+  border-left: 1px solid var(--pf-v5-global--palette--blue--200) !important;


Suggested change

border-left: 1px solid var(--pf-v5-global--palette--blue--200) !important;

border-left: 1px solid var(--pf-v5-global--palette--blue-200) !important;

mcoker · 2023-05-30T21:43:49Z

packages/react-styles/src/css/components/Table/inline-edit.css

-  border-right: 1px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td:last-child,
+tr.pf-v5-c-table__editable-row.pf-m-editing td:last-child {
+  border-right: 1px solid var(--pf-v5-global--palette--blue--200) !important;


Suggested change

border-right: 1px solid var(--pf-v5-global--palette--blue--200) !important;

border-right: 1px solid var(--pf-v5-global--palette--blue-200) !important;

mcoker · 2023-05-30T21:43:56Z

packages/react-styles/src/css/components/Table/inline-edit.css

-tr.pf-c-table__editable-row.pf-m-table-editing-first-row {
-  border-top: 3px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row.pf-m-table-editing-first-row {
+  border-top: 3px solid var(--pf-v5-global--palette--blue--200) !important;


Suggested change

border-top: 3px solid var(--pf-v5-global--palette--blue--200) !important;

border-top: 3px solid var(--pf-v5-global--palette--blue-200) !important;

mcoker · 2023-05-30T21:44:01Z

packages/react-styles/src/css/components/Table/inline-edit.css

-tr.pf-c-table__editable-row.pf-m-table-editing-last-row {
-  border-bottom: 3px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row.pf-m-table-editing-last-row {
+  border-bottom: 3px solid var(--pf-v5-global--palette--blue--200) !important;


Suggested change

border-bottom: 3px solid var(--pf-v5-global--palette--blue--200) !important;

border-bottom: 3px solid var(--pf-v5-global--palette--blue-200) !important;

mcoker · 2023-05-30T21:44:13Z

packages/react-styles/src/css/components/Table/inline-edit.css

+  background: var(--pf-v5-global--palette--blue--50);
+  border: 1px solid var(--pf-v5-global--palette--blue--200);


Suggested change

background: var(--pf-v5-global--palette--blue--50);

border: 1px solid var(--pf-v5-global--palette--blue--200);

background: var(--pf-v5-global--palette--blue-50);

border: 1px solid var(--pf-v5-global--palette--blue-200);

tlabaj

lgtm
I will defer to css for final approval.

tlabaj

lgtm
I will defer to css for final approval.

mcoker

one more small one I missed

packages/react-styles/src/css/components/Table/inline-edit.css

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

mcoker

👍

patternfly-build · 2023-06-01T20:04:32Z

Your changes have been released in:

@patternfly/react-charts@7.0.0-alpha.34
@patternfly/react-code-editor@5.0.0-alpha.131
@patternfly/react-core@5.0.0-alpha.130
@patternfly/react-docs@6.0.0-alpha.140
demo-app-ts@5.0.0-alpha.114
@patternfly/react-styles@5.0.0-alpha.18
@patternfly/react-table@5.0.0-alpha.134

Thanks for your contribution! 🎉

…y#9173) * fix(react-styles): updated class names to include versions * chore(react-styles): removed extra hyphen from class names * Update packages/react-styles/src/css/components/Table/inline-edit.css Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> --------- Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

fix(react-styles): updated class names to include versions

9b0261e

tlabaj requested review from mattnolting and mcoker May 24, 2023 14:38

tlabaj added the css review label May 24, 2023

mcoker requested changes May 30, 2023

View reviewed changes

chore(react-styles): removed extra hyphen from class names

88d4dae

wise-king-sullyman requested a review from mcoker May 31, 2023 13:40

tlabaj reviewed May 31, 2023

View reviewed changes

tlabaj approved these changes May 31, 2023

View reviewed changes

mcoker requested changes May 31, 2023

View reviewed changes

packages/react-styles/src/css/components/Table/inline-edit.css Outdated Show resolved Hide resolved

Update packages/react-styles/src/css/components/Table/inline-edit.css

6e70e86

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

mcoker approved these changes Jun 1, 2023

View reviewed changes

jpuzz0 approved these changes Jun 1, 2023

View reviewed changes

gitdallas approved these changes Jun 1, 2023

View reviewed changes

tlabaj merged commit ae05e89 into patternfly:v5 Jun 1, 2023

wise-king-sullyman deleted the update-react-styles-class-names branch June 1, 2023 19:53

		--pf-v5-global--palette--blue--50: #def3ff;
		--pf-v5-global--palette--blue--200: #7dc3e8;

	background: var(--pf-v5-global--palette--blue--50) !important;
	background: var(--pf-v5-global--palette--blue-50) !important;

		border-bottom: 1px solid var(--pf-v5-global--palette--blue--200) !important;
		border-top: 1px solid var(--pf-v5-global--palette--blue--200) !important;

	border-left: 1px solid var(--pf-v5-global--palette--blue--200) !important;
	border-left: 1px solid var(--pf-v5-global--palette--blue-200) !important;

	border-right: 1px solid var(--pf-v5-global--palette--blue--200) !important;
	border-right: 1px solid var(--pf-v5-global--palette--blue-200) !important;

	border-top: 3px solid var(--pf-v5-global--palette--blue--200) !important;
	border-top: 3px solid var(--pf-v5-global--palette--blue-200) !important;

	border-bottom: 3px solid var(--pf-v5-global--palette--blue--200) !important;
	border-bottom: 3px solid var(--pf-v5-global--palette--blue-200) !important;

		background: var(--pf-v5-global--palette--blue--50);
		border: 1px solid var(--pf-v5-global--palette--blue--200);

fix(react-styles): updated class names to include versions #9173

fix(react-styles): updated class names to include versions #9173

Uh oh!

Conversation

wise-king-sullyman commented May 23, 2023

Uh oh!

patternfly-build commented May 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

tlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Jun 1, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

patternfly-build commented May 23, 2023 •

edited

Loading