From 9b0261e1cbfe070b016d944a9fa2dfc346e52ab7 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 23 May 2023 15:55:25 -0400 Subject: [PATCH 1/3] fix(react-styles): updated class names to include versions --- .../components/Consoles/AccessConsoles.css | 6 +- .../css/components/Consoles/DesktopViewer.css | 2 +- .../css/components/Consoles/SerialConsole.css | 6 +- .../css/components/Consoles/VncConsole.css | 4 +- .../src/css/components/Table/inline-edit.css | 58 +++++++++---------- 5 files changed, 38 insertions(+), 38 deletions(-) diff --git a/packages/react-styles/src/css/components/Consoles/AccessConsoles.css b/packages/react-styles/src/css/components/Consoles/AccessConsoles.css index 9f27a9b57e5..919a89e3a2c 100644 --- a/packages/react-styles/src/css/components/Consoles/AccessConsoles.css +++ b/packages/react-styles/src/css/components/Consoles/AccessConsoles.css @@ -1,14 +1,14 @@ -.pf-c-console { +.pf-v5-c-console { display: grid; grid-template-areas: 'actions-main actions-extra' 'main main'; row-gap: var(--pf-v5-global--spacer--md); } -.pf-c-console__actions { +.pf-v5-c-console__actions { grid-area: actions-main; display: flex; } -.pf-c-console__actions > div { +.pf-v5-c-console__actions > div { margin-right: var(--pf-v5-global--spacer--sm); } diff --git a/packages/react-styles/src/css/components/Consoles/DesktopViewer.css b/packages/react-styles/src/css/components/Consoles/DesktopViewer.css index 5d67d43d477..a7c91ab7ae8 100644 --- a/packages/react-styles/src/css/components/Consoles/DesktopViewer.css +++ b/packages/react-styles/src/css/components/Consoles/DesktopViewer.css @@ -1,4 +1,4 @@ -.pf-c-console__desktop-viewer { +.pf-v5-c-console__desktop-viewer { grid-area: main; display: grid; gap: var(--pf-v5-global--spacer--md); diff --git a/packages/react-styles/src/css/components/Consoles/SerialConsole.css b/packages/react-styles/src/css/components/Consoles/SerialConsole.css index 7828fe07b8b..992847028c8 100644 --- a/packages/react-styles/src/css/components/Consoles/SerialConsole.css +++ b/packages/react-styles/src/css/components/Consoles/SerialConsole.css @@ -1,11 +1,11 @@ -.pf-c-console__serial { +.pf-v5-c-console__serial { grid-area: main; } -.pf-c-console__actions-serial { +.pf-v5-c-console__actions-serial { grid-area: actions-extra; display: flex; justify-content: flex-end; } -.pf-c-console__actions-serial > button { +.pf-v5-c-console__actions-serial > button { margin-right: var(--pf-v5-global--spacer--sm); } diff --git a/packages/react-styles/src/css/components/Consoles/VncConsole.css b/packages/react-styles/src/css/components/Consoles/VncConsole.css index 8c5ca15219e..51c36c7657c 100644 --- a/packages/react-styles/src/css/components/Consoles/VncConsole.css +++ b/packages/react-styles/src/css/components/Consoles/VncConsole.css @@ -1,7 +1,7 @@ -.pf-c-console__vnc { +.pf-v5-c-console__vnc { grid-area: main; } -.pf-c-console__actions-vnc { +.pf-v5-c-console__actions-vnc { grid-area: actions-extra; display: flex; flex-wrap: wrap; diff --git a/packages/react-styles/src/css/components/Table/inline-edit.css b/packages/react-styles/src/css/components/Table/inline-edit.css index de778b6c7ef..4d5ffcd8d9d 100644 --- a/packages/react-styles/src/css/components/Table/inline-edit.css +++ b/packages/react-styles/src/css/components/Table/inline-edit.css @@ -1,60 +1,60 @@ :root { - --pf-v5-global--Blue--50: #def3ff; - --pf-v5-global--Blue--200: #7dc3e8; + --pf-v5-global--palette--blue--50: #def3ff; + --pf-v5-global--palette--blue--200: #7dc3e8; } -tr.pf-c-table__editable-row:hover, -tr.pf-c-table__editable-row.pf-m-editing { - 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; } -tr.pf-c-table__editable-row:hover td, -tr.pf-c-table__editable-row.pf-m-editing td { - border-bottom: 1px solid var(--pf-v5-global--Blue--200) !important; - border-top: 1px solid var(--pf-v5-global--Blue--200) !important; +tr.pf-v5-c-table__editable-row:hover td, +tr.pf-v5-c-table__editable-row.pf-m-editing td { + border-bottom: 1px solid var(--pf-v5-global--palette--blue--200) !important; + border-top: 1px solid var(--pf-v5-global--palette--blue--200) !important; } -tr.pf-c-table__editable-row:hover td:first-child, -tr.pf-c-table__editable-row.pf-m-editing td:first-child { - 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; } -tr.pf-c-table__editable-row:hover td:last-child, -tr.pf-c-table__editable-row.pf-m-editing td:last-child { - 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; } -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; } -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; } -tr.pf-c-table__editable-row input { +tr.pf-v5-c-table__editable-row input { display: block; background: var(--pf-v5-global--BackgroundColor--100); border: 1px solid var(--pf-v5-global--BorderColor); } -tr.pf-c-table__editable-row input:hover { +tr.pf-v5-c-table__editable-row input:hover { cursor: text; } -.pf-c-table__inline-edit-buttons { +.pf-v5-c-table__inline-edit-buttons { position: fixed; z-index: 1000; padding: 4px; margin: 0; - background: var(--pf-v5-global--Blue--50); - border: 1px solid var(--pf-v5-global--Blue--200); + background: var(--pf-v5-global--palette--blue--50); + border: 1px solid var(--pf-v5-global--palette--blue--200); } -.pf-c-table__inline-edit-buttons.pf-m-top { +.pf-v5-c-table__inline-edit-buttons.pf-m-top { border-bottom: 0; } -.pf-c-table__inline-edit-buttons.pf-m-bottom { +.pf-v5-c-table__inline-edit-buttons.pf-m-bottom { border-top: 0; } -.pf-c-table__inline-edit-buttons.pf-m-bold { +.pf-v5-c-table__inline-edit-buttons.pf-m-bold { border-width: 3px; } -.pf-c-table__inline-edit-buttons button { +.pf-v5-c-table__inline-edit-buttons button { margin-left: 4px; } -.pf-c-table__inline-edit-buttons button:first-child { +.pf-v5-c-table__inline-edit-buttons button:first-child { margin-left: 0; } From 88d4dae728914ca5fd1ca10807de921c4cbf9ac9 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 31 May 2023 09:37:08 -0400 Subject: [PATCH 2/3] chore(react-styles): removed extra hyphen from class names --- .../src/css/components/Table/inline-edit.css | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/react-styles/src/css/components/Table/inline-edit.css b/packages/react-styles/src/css/components/Table/inline-edit.css index 4d5ffcd8d9d..8f745e96e88 100644 --- a/packages/react-styles/src/css/components/Table/inline-edit.css +++ b/packages/react-styles/src/css/components/Table/inline-edit.css @@ -1,30 +1,30 @@ :root { - --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; } 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; + background: var(--pf-v5-global--palette--blue-50) !important; } tr.pf-v5-c-table__editable-row:hover td, tr.pf-v5-c-table__editable-row.pf-m-editing td { - 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; } 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; + border-left: 1px solid var(--pf-v5-global--palette--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; + border-right: 1px solid var(--pf-v5-global--palette--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; + border-top: 3px solid var(--pf-v5-global--palette--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; + border-bottom: 3px solid var(--pf-v5-global--palette--blue-200) !important; } tr.pf-v5-c-table__editable-row input { display: block; @@ -40,8 +40,8 @@ tr.pf-v5-c-table__editable-row input:hover { z-index: 1000; padding: 4px; margin: 0; - 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); } .pf-v5-c-table__inline-edit-buttons.pf-m-top { border-bottom: 0; From 6e70e86d2e8a2baaa911c454adfce07550dfbf6f Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Thu, 1 Jun 2023 10:40:16 -0400 Subject: [PATCH 3/3] Update packages/react-styles/src/css/components/Table/inline-edit.css Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> --- packages/react-styles/src/css/components/Table/inline-edit.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-styles/src/css/components/Table/inline-edit.css b/packages/react-styles/src/css/components/Table/inline-edit.css index 8f745e96e88..00cfa0f350e 100644 --- a/packages/react-styles/src/css/components/Table/inline-edit.css +++ b/packages/react-styles/src/css/components/Table/inline-edit.css @@ -29,7 +29,7 @@ tr.pf-v5-c-table__editable-row.pf-m-table-editing-last-row { tr.pf-v5-c-table__editable-row input { display: block; background: var(--pf-v5-global--BackgroundColor--100); - border: 1px solid var(--pf-v5-global--BorderColor); + border: 1px solid var(--pf-v5-global--BorderColor--100); } tr.pf-v5-c-table__editable-row input:hover { cursor: text;