Updates css based on review comments

openshift · Feb 19, 2025 · 8ff1ead · 8ff1ead
1 parent 315038c
commit 8ff1ead
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 67 deletions.
diff --git a/frontend/packages/console-app/src/components/nav/FavoriteNavItemResources.scss b/frontend/packages/console-app/src/components/nav/FavoriteNavItemResources.scss
@@ -1,18 +1,19 @@
+.oc-favorite-delete-button {
+  background-color: transparent !important;
+  margin-left: auto;
+  margin-right: var(--pf-t--global--spacer--lg);
+}
+
 .oc-favorite-resource.pf-v6-c-nav__item {
   .pf-v6-c-nav__link {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-grow: 1;
-    overflow: hidden;
-    position: relative;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-top: 0;
     padding-bottom: 0;
     padding-right: 0;
+    padding-top: 0;
+    white-space: nowrap;
+
     &:hover {
       --pf-v6-c-nav__section-title--PaddingRight: 30px;
+
       .oc-favorite-delete-button {
         .pf-v6-c-button__text {
           opacity: 1;
@@ -22,17 +23,7 @@
   }
 }
 
-.oc-favorite-delete-button {
-  background-color: transparent !important;
-  margin-left: auto;
-  margin-right: var(--pf-t--global--spacer--lg);
-}
-
-.oc-favorite-menu {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
 .oc-no-favorites-message {
-  padding-left: var(--pf-t--global--spacer--md);
+  color: var(--pf-v6-c-nav__link--Color);
+  padding-left: var(--pf-v6-c-nav__link--PaddingInlineStart);
 }
diff --git a/frontend/packages/console-app/src/components/nav/FavoriteNavItemResources.tsx b/frontend/packages/console-app/src/components/nav/FavoriteNavItemResources.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Nav, NavExpandable, NavList, Button } from '@patternfly/react-core';
+import { Nav, NavExpandable, NavList, Button, FlexItem, Flex } from '@patternfly/react-core';
 import { StarIcon } from '@patternfly/react-icons';
 import * as classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -50,7 +50,7 @@ export const FavoriteNavItemResources: React.FC = () => {
     };
     if (!loaded) return null;
     if (!favorites || favorites.length === 0) {
-      return <div className="oc-no-favorites-message">{t('public~No favorites added')}</div>;
+      return <li className="oc-no-favorites-message">{t('public~No favorites added')}</li>;
     }
 
     return favorites.map((favorite) => (
@@ -63,23 +63,32 @@ export const FavoriteNavItemResources: React.FC = () => {
         to={favorite.url}
         isActive={activeItem === `favorites-item-${favorite.url}`}
       >
-        {favorite.name}
-        <Button
-          variant="plain"
-          aria-label={`Unfavorite ${favorite.name}`}
-          onClick={(e) => {
-            e.preventDefault();
-            handleUnfavorite(favorite.url);
-          }}
-          className="oc-favorite-delete-button"
-          icon={<StarIcon color="gold" />}
-        />
+        <Flex
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+          flexWrap={{ default: 'nowrap' }}
+          style={{ width: '100%' }}
+        >
+          <FlexItem className="pf-m-truncate">{favorite.name}</FlexItem>
+          <FlexItem>
+            <Button
+              variant="plain"
+              aria-label={`Unfavorite ${favorite.name}`}
+              onClick={(e) => {
+                e.preventDefault();
+                handleUnfavorite(favorite.url);
+              }}
+              className="oc-favorite-delete-button"
+              icon={<StarIcon color="gold" />}
+            />
+          </FlexItem>
+        </Flex>
       </FavoriteNavItemResource>
     ));
   }, [favorites, activeItem, loaded, t, setFavorites]);
 
   return (
-    <Nav onSelect={onSelect} aria-label="favorite-resources" className="oc-favorite-menu">
+    <Nav onSelect={onSelect} aria-label="favorite-resources" className="pf-v6-u-py-0">
       <NavList>
         <NavExpandable
           title={t('public~Favorites')}

diff --git a/frontend/packages/operator-lifecycle-manager/src/style.scss b/frontend/packages/operator-lifecycle-manager/src/style.scss
@@ -319,7 +319,6 @@ $co-affinity-row-margin: 15px;
 .co-operator-details__actions {
   align-items: baseline;
   display: flex;
-  flex-grow: 1;
   flex-wrap: wrap;
   @media (min-width: $screen-sm-min) {
     flex-wrap: nowrap;

diff --git a/frontend/public/components/utils/headings.tsx b/frontend/public/components/utils/headings.tsx
@@ -172,7 +172,7 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
             className={classNames({
               'co-m-pane__heading--logo': props.icon,
               'co-m-pane__heading--with-help-text': helpText,
-              'co-m-pane__heading--full-width': !showActions,
+              'pf-v6-u-flex-grow-1': !showActions,
             })}
             alignItemsBaseline={!!link}
             centerText={centerText}
@@ -199,32 +199,34 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
               <span className="co-m-pane__heading-badge">{badge}</span>
             )}
             {link && <div className="co-m-pane__heading-link">{link}</div>}
-            <div className="co-actions" data-test-id="details-actions">
-              {perspective === 'admin' && (
-                <div>
-                  <FavoriteButton />
-                </div>
-              )}
-              {showActions && (
-                <>
-                  {hasButtonActions && (
-                    <ActionButtons actionButtons={buttonActions.map((a) => a(kindObj, data))} />
-                  )}
-                  {hasMenuActions && (
-                    <ActionsMenu
-                      actions={
-                        _.isFunction(menuActions)
-                          ? menuActions(kindObj, data, extraResources, customData)
-                          : menuActions.map((a) => a(kindObj, data, extraResources, customData))
-                      }
-                    />
-                  )}
-                  {_.isFunction(customActionMenu)
-                    ? customActionMenu(kindObj, data)
-                    : customActionMenu}
-                </>
-              )}
-            </div>
+            {(perspective === 'admin' || showActions) && (
+              <div className="co-actions" data-test-id="details-actions">
+                {perspective === 'admin' && (
+                  <div>
+                    <FavoriteButton />
+                  </div>
+                )}
+                {showActions && (
+                  <>
+                    {hasButtonActions && (
+                      <ActionButtons actionButtons={buttonActions.map((a) => a(kindObj, data))} />
+                    )}
+                    {hasMenuActions && (
+                      <ActionsMenu
+                        actions={
+                          _.isFunction(menuActions)
+                            ? menuActions(kindObj, data, extraResources, customData)
+                            : menuActions.map((a) => a(kindObj, data, extraResources, customData))
+                        }
+                      />
+                    )}
+                    {_.isFunction(customActionMenu)
+                      ? customActionMenu(kindObj, data)
+                      : customActionMenu}
+                  </>
+                )}
+              </div>
+            )}
           </PrimaryHeading>
         )}
         {helpText && (

diff --git a/frontend/public/style/_common.scss b/frontend/public/style/_common.scss
@@ -164,10 +164,6 @@ dl.co-inline {
   font-size: $font-size-base;
 }
 
-.co-m-pane__heading--full-width {
-  width: 100%;
-}
-
 .co-no-bold {
   font-weight: var(--pf-t--global--font--weight--body--default);
 }