Skip to content

Commit

Permalink
Apply PF breaking change best practice, WIP
Browse files Browse the repository at this point in the history 
Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>
  • Loading branch information
@jenny-s51
jenny-s51 committed Oct 16, 2024
1 parent 4c43176 commit 329957e
Showing 1 changed file with 54 additions and 41 deletions.
95 changes: 54 additions & 41 deletions clients/ui/frontend/src/style/MUI-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -237,21 +242,23 @@
}

.pf-v6-c-form-control input {
// TODO: need clarity from PF
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 {
Expand Down Expand Up @@ -398,6 +405,7 @@

.pf-v6-c-form__group:focus-within .pf-v6-c-form__label {
/* Change color of the label when the input is focused */
// TODO: need clarity from PF, --pf-v6-c-form__label--Color does not exist
color: var(--mui-palette-primary-main);
}

Expand All @@ -418,15 +426,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
);
Expand All @@ -447,15 +459,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) {
Expand All @@ -465,23 +481,17 @@
--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);
}

Expand All @@ -500,8 +510,8 @@
}

.pf-v6-c-radio__input {
display: none;
/* Hide default radio button */
display: none;
}

.pf-v6-c-radio__label {
Expand All @@ -514,7 +524,7 @@

/* Custom radio circle */
.pf-v6-c-radio__label::before {
content: "";
content: '';
position: absolute;
left: 0;
top: 50%;
Expand All @@ -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 */
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}

Expand Down Expand Up @@ -693,16 +709,13 @@
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);
}

Expand All @@ -725,5 +738,5 @@
}

.pf-v6-c-pagination__page-menu::before {
content: "Rows per page:";
content: 'Rows per page:';
}

0 comments on commit 329957e

Please sign in to comment.