chore: Remove high-contrast treatment from toolbar (#2851)

Co-authored-by: Francesco Longo <flongo@amazon.de>
cloudscape-design · Oct 11, 2024 · ba8b99c · ba8b99c
1 parent e2d76f2
commit ba8b99c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/src/app-layout/__tests__/header-variant.test.tsx b/src/app-layout/__tests__/header-variant.test.tsx
@@ -44,16 +44,18 @@ describeEachAppLayout({ themes: ['refresh', 'refresh-toolbar'], sizes: ['desktop
         <AppLayout notifications="Notifications" breadcrumbs="Breadcrumbs" headerVariant="high-contrast" />
       );
       expect(hasHighContrastContext(wrapper.findNotifications()!.getElement())).toBeTruthy();
-      expect(hasHighContrastContext(wrapper.findBreadcrumbs()!.getElement())).toBeTruthy();
       if (theme === 'refresh') {
         // For refresh toolbar, high-contrast header is not implemented in contentHeader slot, or in conjunction with ContentLayout
+        expect(hasHighContrastContext(wrapper.findBreadcrumbs()!.getElement())).toBeTruthy();
         expect(
           hasHighContrastContext(wrapper.findByClassName(visualRefreshStyles.background)!.getElement())
         ).toBeTruthy();
       } else {
+        // the toolbar should not have the high-contrast context
+        expect(hasHighContrastContext(wrapper.findBreadcrumbs()!.getElement())).toBeFalsy();
         expect(
           hasHighContrastContext(wrapper.findByClassName(toolbarSkeletonStyles['toolbar-container'])!.getElement())
-        ).toBeTruthy();
+        ).toBeFalsy();
       }
     });
   });
@@ -69,10 +71,6 @@ describeEachAppLayout({ themes: ['refresh', 'refresh-toolbar'], sizes: ['mobile'
         expect(wrapper.findByClassName(visualRefreshStyles['mobile-toolbar'])!.getElement()).not.toHaveClass(
           highContrastHeaderClassName
         );
-      } else {
-        expect(
-          hasHighContrastContext(wrapper.findByClassName(toolbarSkeletonStyles['toolbar-container'])!.getElement())
-        ).toBeFalsy();
       }
     });
 
@@ -87,7 +85,7 @@ describeEachAppLayout({ themes: ['refresh', 'refresh-toolbar'], sizes: ['mobile'
       } else {
         expect(
           hasHighContrastContext(wrapper.findByClassName(toolbarSkeletonStyles['toolbar-container'])!.getElement())
-        ).toBeTruthy();
+        ).toBeFalsy();
       }
     });
   });

diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 
 import { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/implementation';
-import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
 import { createWidgetizedComponent } from '../../../internal/widgets';
 import { AppLayoutProps } from '../../interfaces';
 import { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';
@@ -89,7 +88,6 @@ export function AppLayoutToolbarImplementation({
 }: AppLayoutToolbarImplementationProps) {
   const {
     breadcrumbs,
-    headerVariant,
     discoveredBreadcrumbs,
     verticalOffsets,
     isMobile,
@@ -173,7 +171,6 @@ export function AppLayoutToolbarImplementation({
       className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {
         [testutilStyles['mobile-bar']]: isMobile,
         [styles['toolbar-hidden']]: toolbarHidden,
-        [highContrastHeaderClassName]: headerVariant === 'high-contrast',
       })}
       style={{
         insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,