Apply PF breaking change best practices

Signed-off-by: Jenny <[email protected]> update comment Signed-off-by: Jenny <[email protected]> link to JIRA ticket Signed-off-by: Jenny <[email protected]> remove ticket references Signed-off-by: Jenny <[email protected]> fix styling bug with modal buttons, removes unneeded components from modal footer fix styling bug with modal buttons, removes unneeded components from modal footer
kubeflow · Oct 18, 2024 · 0bf93bb · 0bf93bb
1 parent 4c43176
commit 0bf93bb
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 86 deletions.
diff --git a/clients/ui/frontend/src/app/components/DashboardModalFooter.tsx b/clients/ui/frontend/src/app/components/DashboardModalFooter.tsx
@@ -1,13 +1,5 @@
 import * as React from 'react';
-import {
-  ActionList,
-  ActionListItem,
-  Alert,
-  Button,
-  ButtonProps,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+import { Alert, Button, ButtonProps } from '@patternfly/react-core';
 
 type DashboardModalFooterProps = {
   submitLabel: string;
@@ -33,42 +25,32 @@ const DashboardModalFooter: React.FC<DashboardModalFooterProps> = ({
   alertTitle,
 }) => (
   // make sure alert uses the full width
-  <Stack hasGutter style={{ flex: 'auto' }}>
+  <>
     {error && (
-      <StackItem>
-        <Alert data-testid="error-message-alert" isInline variant="danger" title={alertTitle}>
-          {error.message}
-        </Alert>
-      </StackItem>
+      <Alert data-testid="error-message-alert" isInline variant="danger" title={alertTitle}>
+        {error.message}
+      </Alert>
     )}
-    <StackItem>
-      <ActionList>
-        <ActionListItem>
-          <Button
-            key="submit"
-            variant={submitButtonVariant}
-            isDisabled={isSubmitDisabled}
-            onClick={onSubmit}
-            isLoading={isSubmitLoading}
-            data-testid="modal-submit-button"
-          >
-            {submitLabel}
-          </Button>
-        </ActionListItem>
-        <ActionListItem>
-          <Button
-            key="cancel"
-            variant="link"
-            isDisabled={isCancelDisabled}
-            onClick={onCancel}
-            data-testid="modal-cancel-button"
-          >
-            Cancel
-          </Button>
-        </ActionListItem>
-      </ActionList>
-    </StackItem>
-  </Stack>
+    <Button
+      key="submit"
+      variant={submitButtonVariant}
+      isDisabled={isSubmitDisabled}
+      onClick={onSubmit}
+      isLoading={isSubmitLoading}
+      data-testid="modal-submit-button"
+    >
+      {submitLabel}
+    </Button>
+    <Button
+      key="cancel"
+      variant="link"
+      isDisabled={isCancelDisabled}
+      onClick={onCancel}
+      data-testid="modal-cancel-button"
+    >
+      Cancel
+    </Button>
+  </>
 );
 
 export default DashboardModalFooter;
diff --git a/clients/ui/frontend/src/style/MUI-theme.scss b/clients/ui/frontend/src/style/MUI-theme.scss
@@ -111,7 +111,9 @@
 }
 
 .pf-v6-c-alert {
-  --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default);
+  --pf-v6-c-alert--m-warning__title--Color: var(
+    --pf-t--global--text--color--status--warning--default
+  );
   --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
   --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-font-weight);
   --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
@@ -184,7 +186,10 @@
 }
 
 .pf-v6-c-form__section-title {
-  margin: 0px 0px 0.35em;
+  --pf-v6-c-form__section-title--MarginBlockStart: 0px;
+  --pf-v6-c-form__section-title--MarginInlineStart: 0px;
+  --pf-v6-c-form__section-title--MarginBlockEnd: 0.35em;
+  --pf-v6-c-form__section-title--MarginInlineEnd: 0px;
 }
 
 .pf-v6-c-form__label {
@@ -204,28 +209,28 @@
 }
 
 .pf-v6-c-form-control input::placeholder {
-  color: var(--mui-palette-grey-600);
+  --pf-v6-c-form-control--m-placeholder--Color: var(--mui-palette-grey-600);
 }
 
-.pf-v6-c-form-control.pf-m-disabled {
-  background-color: var(--mui-palette-common-white);
+.pf-v6-c-form-control {
+  --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--mui-palette-common-white);
   --pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled);
 }
 
-.pf-v6-c-form-control.pf-m-resize-both {
+.pf-v6-c-form-control {
   // Resize is disabled in MUI.
-  resize: none;
-  padding-top: var(--mui-spacing-16px);
-  padding-bottom: var(--mui-spacing-16px);
+  --pf-v6-c-form-control--Resize: none;
+  --pf-v6-c-form-control--PaddingBlockStart: var(--mui-spacing-16px);
+  --pf-v6-c-form-control--PaddingBlockEnd: var(--mui-spacing-16px);
 }
 
-.pf-v6-c-form-control > :is(input, select, textarea) {
+.pf-v6-c-form-control > :is(input, select) {
   padding-block-start: 0px;
   padding-block-end: 0px;
 }
 
 .pf-v6-c-form__section {
-  gap: 0px;
+  --pf-v6-c-form__section--Gap: 0px;
 }
 
 .toolbar-fieldset-wrapper .pf-v6-c-form-control input {
@@ -237,21 +242,23 @@
 }
 
 .pf-v6-c-form-control input {
+  // Using CSS property here since PF vars for input padding do not exist.
   padding: 16.5px 14px;
 }
 
-.pf-v6-c-text-input-group__text-input {
-  padding: 16.5px 14px;
-  padding-left: 32px;
+.pf-v6-c-text-input-group {
+  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: 16.5px;
+  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: 32px;
+  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: 14px;
+  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: 14px;
 }
 
 .pf-v6-c-text-input-group::before {
   border: none;
 }
 
-.pf-v6-c-text-input-group__icon {
-  color: rgba(0, 0, 0, 0.38);
-  margin-right: var(--mui-spacing-4px);
+.pf-v6-c-text-input-group {
+  --pf-v6-c-text-input-group__icon--Color: rgba(0, 0, 0, 0.38);
 }
 
 .pf-v6-c-form__group-control textarea {
@@ -397,6 +404,8 @@
 }
 
 .pf-v6-c-form__group:focus-within .pf-v6-c-form__label {
+  // Using CSS property here since --pf-v6-c-form__label--Color does not exist.
+
   /* Change color of the label when the input is focused */
   color: var(--mui-palette-primary-main);
 }
@@ -418,15 +427,19 @@
 .pf-v6-c-menu-toggle {
   --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
   --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
-  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-menu-toggle--expanded--BackgroundColor);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
+    --mui-menu-toggle--expanded--BackgroundColor
+  );
   --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
   --pf-v6-c-menu-toggle--ColumnGap: var(--mui-menu-toggle--ColumnGap);
   --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
   --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
-  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(
+    --pf-t--global--background--color--action--plain--hover
+  );
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
     --pf-t--global--color--brand--default
   );
@@ -447,15 +460,19 @@
 }
 
 .pf-v6-c-menu-toggle.pf-m-plain {
+  // Needs clarity --pf-v6-c-menu-toggle--m-plain--BorderRadius does not exist
   --pf-v6-c-menu-toggle--BorderRadius: 50%;
 }
 
 .pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button {
   --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
 }
 
-.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button .pf-v6-c-menu-toggle__button[aria-expanded="true"] {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--mui-palette-primary-dark);
+.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
+  .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
+    --mui-palette-primary-dark
+  );
 }
 
 .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
@@ -465,23 +482,16 @@
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
 }
 
-.pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon {
-  width: 1em;
-  height: 1em;
-  font-size: 20px;
-}
-
 .pf-v6-c-menu-toggle__button .pf-v6-c-menu-toggle__toggle-icon .pf-v6-svg {
   vertical-align: revert;
 }
 
 .pf-v6-c-menu-toggle__toggle-icon {
-  --pf-v6-c-menu-toggle__toggle-icon--expanded--Color: var(--pf-t--global--icon--color--300);
   font-size: 20px;
 }
 
 .pf-v6-c-menu-toggle:not(.pf-m-split-button) .pf-v6-c-menu-toggle__toggle-icon {
-  margin-right: -4px;
+  margin-right: calc(var(--mui-spacing) * -1 + 4px);
   margin-left: var(--mui-spacing);
 }
 
@@ -500,8 +510,8 @@
 }
 
 .pf-v6-c-radio__input {
-  display: none;
   /* Hide default radio button */
+  display: none;
 }
 
 .pf-v6-c-radio__label {
@@ -514,7 +524,7 @@
 
 /* Custom radio circle */
 .pf-v6-c-radio__label::before {
-  content: "";
+  content: '';
   position: absolute;
   left: 0;
   top: 50%;
@@ -534,7 +544,7 @@
 
 /* Inner dot for checked state */
 .pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::after {
-  content: "";
+  content: '';
   position: absolute;
   left: 5px;
   /* Center the dot */
@@ -563,11 +573,15 @@
   --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
   --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
-  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline);
+  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(
+    --mui-table--cell--first-last-child--PaddingInline
+  );
   --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight);
   --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
   --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
-  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart);
+  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(
+    --mui-table__sort-indicator--MarginInlineStart
+  );
 
   letter-spacing: 0.01071em;
 }
@@ -604,12 +618,12 @@
   opacity: 0.6;
 }
 
-.pf-v6-c-table__sort[aria-sort="ascending"] .pf-v6-c-table__sort-indicator {
+.pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator {
   transform: rotate(180deg);
   align-self: end;
 }
 
-.pf-v6-c-table__sort[aria-sort="descending"] .pf-v6-c-table__sort-indicator {
+.pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator {
   align-self: start;
 }
 
@@ -631,7 +645,9 @@
   --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
   --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
   --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
-  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--mui-tabs__item--m-current__link--after--BorderWidth);
+  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
+    --mui-tabs__item--m-current__link--after--BorderWidth
+  );
   --pf-v6-c-tabs__link--FontSize: 0.875rem;
 }
 
@@ -693,16 +709,12 @@
   padding: 4px;
 }
 
-.pf-v6-c-label.pf-m-outline .pf-v6-c-label__text {
-  color: var(--mui-palette-common-black);
-}
-
 .pf-v6-c-modal-box {
   --pf-v6-c-modal-box--BorderRadius: var(--mui-shape-borderRadius);
 }
 
 .pf-v6-c-page__main-container {
-  border-radius: var(--mui-shape-borderRadius);
+  --pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius);
   box-shadow: var(--mui-shadows-1);
 }
 
@@ -725,5 +737,5 @@
 }
 
 .pf-v6-c-pagination__page-menu::before {
-  content: "Rows per page:";
+  content: 'Rows per page:';
 }