From 159fb4f86c84a00c6ef5290be272dd5f0b6c0e15 Mon Sep 17 00:00:00 2001 From: Steve Goodwin Date: Mon, 9 Sep 2024 11:12:33 -0400 Subject: [PATCH] Convert deprecated perspective dropdown to select --- .../src/components/nav/NavHeader.scss | 83 +++++++++---------- .../src/components/nav/NavHeader.tsx | 52 +++++++----- 2 files changed, 66 insertions(+), 69 deletions(-) diff --git a/frontend/packages/console-app/src/components/nav/NavHeader.scss b/frontend/packages/console-app/src/components/nav/NavHeader.scss index 54868ee6baf..1c780e9dc38 100644 --- a/frontend/packages/console-app/src/components/nav/NavHeader.scss +++ b/frontend/packages/console-app/src/components/nav/NavHeader.scss @@ -1,10 +1,10 @@ @import '~@patternfly/patternfly/sass-utilities/all'; @import '~@console/internal/style/vars'; -.oc-nav-header { +.pf-v5-c-nav .oc-nav-header { border-bottom: 1px solid var(--pf-v5-global--BackgroundColor--dark-200); - padding: 0.6rem var(--pf-v5-global--spacer--sm); margin-top: var(--pf-v5-global--spacer--sm); + padding: 0.6rem var(--pf-v5-global--spacer--sm); :where(.pf-v5-theme-dark) & { // Match --pf-v5-c-nav__item--before--BorderColor @@ -16,65 +16,56 @@ padding-right: var(--pf-v5-global--spacer--md); } - &__icon { - margin-right: var(--pf-v5-global--spacer--sm); - } - - &__dropdown-toggle--is-empty { - cursor: default !important; + .pf-v5-c-menu { + --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--100); + padding: var(--pf-v5-global--spacer--sm) 0; + :where(.pf-v5-theme-dark) & { + --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300); + } } - .pf-v5-c-dropdown { - --pf-v5-c-dropdown__menu-item--PaddingLeft: 7px; - width: 100%; - cursor: pointer; - &.pf-m-expanded { - .pf-v5-c-dropdown__toggle { - background-color: var(--pf-v5-global--BackgroundColor--dark-200); - :where(.pf-v5-theme-dark) & { - background-color: var(--pf-v5-global--BackgroundColor--dark-300); - } - } + .pf-v5-c-menu__item { + color: var(--pf-v5-global--Color--100); + padding: var(--pf-v5-global--spacer--sm); + &::after,&::before { + border-style: hidden; } } - .pf-v5-c-dropdown__toggle { - :where(.pf-v5-theme-dark) & { - background-color: var(--pf-v5-c-page__sidebar--BackgroundColor); + .pf-v5-c-menu__item, + .pf-v5-c-menu__list-item { + &:hover,&:active,&:focus,&:focus-within { + --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-global--BackgroundColor--200); + --pf-v5-c-menu__list-item--Color: var(--pf-v5-global--Color--100, inherit); + :where(.pf-v5-theme-dark) & { + background-color: var(--pf-global--BackgroundColor--400); + } } } - .pf-v5-c-dropdown__menu-item, - // For Edge - .pf-v5-c-dropdown__toggle { - h1 { - font-size: $co-side-nav-font-size; + .pf-v5-c-menu-toggle { + &::after, &::before { + border-style: hidden; } - } - - .pf-v5-c-dropdown__toggle { - font-size: $co-side-nav-font-size; - justify-content: space-between; - width: 100%; - .pf-c-dropdown__toggle-icon { - color: var(--pf-v5-global--Color--light-100); - font-size: $co-side-nav-section-font-size; + :where(.pf-v5-theme-dark) & { + --pf-v5-c-menu-toggle--BackgroundColor: transparent; } - .pf-v5-c-title { - color: var(--pf-v5-global--Color--light-100); - &.pf-m-md { - font-size: $co-side-nav-section-font-size; - font-family: var( - --pf-v5-global--FontFamily--text - ); // Use RedHatText to match side nav links because buttons by default use RedHatDisplay + &.pf-m-expanded { + --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200); + :where(.pf-v5-theme-dark) & { + background-color: var(--pf-v5-global--BackgroundColor--dark-300); } } - // Needed until https://github.com/patternfly/patternfly-design/issues/1068 is resolved - &:before { - border: none; + .pf-v5-c-title.pf-m-md { + font-family: var(--pf-v5-global--FontFamily--text); // Use RedHatText to match side nav links because buttons by default use RedHatDisplay + font-size: $co-side-nav-section-font-size; } } + + &__menu-toggle--is-empty { + cursor: default !important; + } } diff --git a/frontend/packages/console-app/src/components/nav/NavHeader.tsx b/frontend/packages/console-app/src/components/nav/NavHeader.tsx index f0c327a63d8..283a206ee73 100644 --- a/frontend/packages/console-app/src/components/nav/NavHeader.tsx +++ b/frontend/packages/console-app/src/components/nav/NavHeader.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import { Title } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownToggle as DropdownToggleDeprecated, -} from '@patternfly/react-core/deprecated'; -import { CaretDownIcon } from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; + MenuToggle, + MenuToggleElement, + Select, + SelectList, + SelectOption, + Title, +} from '@patternfly/react-core'; import * as cx from 'classnames'; import { useTranslation } from 'react-i18next'; import { Perspective, useActivePerspective } from '@console/dynamic-plugin-sdk'; @@ -36,8 +37,9 @@ const PerspectiveDropdownItem: React.FC = ({ perspective.properties.icon, ]); return ( - ) => { e.preventDefault(); onClick(perspective.properties.id); @@ -51,7 +53,7 @@ const PerspectiveDropdownItem: React.FC = ({ {perspective.properties.name} - + ); }; @@ -117,8 +119,9 @@ const NavHeader: React.FC = ({ onPerspectiveSelected }) => { ...perspectiveItems, ...(!acmPerspectiveExtension && acmLink ? [ - { window.location.href = acmLink.spec.href; }} @@ -129,7 +132,7 @@ const NavHeader: React.FC = ({ onPerspectiveSelected }) => { {t('console-app~Advanced Cluster Management')} - , + , ] : []), ]; @@ -142,17 +145,20 @@ const NavHeader: React.FC = ({ onPerspectiveSelected }) => { data-tour-id="tour-perspective-dropdown" data-quickstart-id="qs-perspective-switcher" > - setPerspectiveDropdownOpen(open)} + toggle={(toggleRef: React.Ref) => ( + (perspectiveItems.length === 1 ? null : togglePerspectiveOpen())} className={cx({ - 'oc-nav-header__dropdown-toggle--is-empty': perspectiveItems.length === 1, + 'oc-nav-header__menu-toggle--is-empty': perspectiveItems.length === 1, })} - isOpen={isPerspectiveDropdownOpen} - onToggle={() => (perspectiveItems.length === 1 ? null : togglePerspectiveOpen())} - toggleIndicator={perspectiveItems.length === 1 ? null : CaretDownIcon} - data-test-id="perspective-switcher-toggle" icon={} > {name && ( @@ -160,11 +166,11 @@ const NavHeader: React.FC = ({ onPerspectiveSelected }) => { {name} )} - - } - dropdownItems={perspectiveDropdownItems} - data-test-id="perspective-switcher-menu" - /> + + )} + > + {perspectiveDropdownItems} + )}