Initial implementation of optimization for high contrast header removal

cloudscape-design · Jan 18, 2024 · 0e17f95 · 0e17f95
1 parent d1f6584
commit 0e17f95
Show file tree

Hide file tree

Showing 14 changed files with 136 additions and 33 deletions.
diff --git a/pages/app-layout/with-cards.page.tsx b/pages/app-layout/with-cards.page.tsx
@@ -73,7 +73,7 @@ export default function () {
         ariaLabels={labels}
         breadcrumbs={<Breadcrumbs />}
         navigation={<Navigation />}
-        contentType="table"
+        contentType="cards"
         tools={<Tools>{toolsContent[selectedTool]}</Tools>}
         toolsOpen={toolsOpen}
         onToolsChange={({ detail }) => setToolsOpen(detail.open)}

diff --git a/src/app-layout/visual-refresh/mobile-toolbar.scss b/src/app-layout/visual-refresh/mobile-toolbar.scss
@@ -11,7 +11,7 @@ section.mobile-toolbar {
   align-items: center;
   background-color: awsui.$color-background-layout-main;
   border-bottom: 1px solid awsui.$color-border-divider-default;
-  box-shadow: awsui.$shadow-panel-toggle;
+  box-shadow: awsui.$shadow-flash-sticky;
   box-sizing: border-box;
   height: var(#{custom-props.$mobileBarHeight});
   display: grid;
@@ -22,6 +22,10 @@ section.mobile-toolbar {
   position: sticky;
   top: var(#{custom-props.$offsetTop});
   z-index: 1000;
+  &:not(.remove-high-contrast-header) {
+    background-color: awsui.$color-background-home-header;
+    box-shadow: awsui.$shadow-panel-toggle;
+  }
 
   > .mobile-toolbar-nav {
     grid-column: 1;

diff --git a/src/app-layout/visual-refresh/mobile-toolbar.tsx b/src/app-layout/visual-refresh/mobile-toolbar.tsx
@@ -8,6 +8,7 @@ import { MobileTriggers as DrawersMobileTriggers } from './drawers';
 import { useAppLayoutInternals } from './context';
 import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
+import { isHighContrastHeaderActive } from '../../internal/utils/content-header-utils';
 
 export default function MobileToolbar() {
   const {
@@ -45,7 +46,8 @@ export default function MobileToolbar() {
           [styles.unfocusable]: hasDrawerViewportOverlay,
         },
         testutilStyles['mobile-bar'],
-        contentHeaderClassName
+        contentHeaderClassName,
+        isHighContrastHeaderActive && styles['remove-high-contrast-header']
       )}
     >
       {!navigationHide && (

diff --git a/src/app-layout/visual-refresh/trigger-button.scss b/src/app-layout/visual-refresh/trigger-button.scss
@@ -88,8 +88,11 @@ handleSplitPanelMaxWidth function in the context.
 
 .trigger-wrapper {
   position: relative;
-  box-shadow: awsui.$shadow-panel-toggle;
   border-radius: 50%;
+
+  &:not(.remove-high-contrast-header) {
+    box-shadow: awsui.$shadow-panel-toggle;
+  }
 }
 
 .dot {

diff --git a/src/app-layout/visual-refresh/trigger-button.tsx b/src/app-layout/visual-refresh/trigger-button.tsx
@@ -6,6 +6,7 @@ import Icon from '../../icon/internal';
 import styles from './styles.css.js';
 import { ButtonProps } from '../../button/interfaces';
 import { IconProps } from '../../icon/interfaces';
+import { isHighContrastHeaderActive } from '../../internal/utils/content-header-utils';
 
 export interface TriggerButtonProps {
   ariaLabel?: string;
@@ -36,7 +37,9 @@ function TriggerButton(
   ref: React.Ref<ButtonProps.Ref>
 ) {
   return (
-    <div className={clsx(styles['trigger-wrapper'])}>
+    <div
+      className={clsx(styles['trigger-wrapper'], isHighContrastHeaderActive && styles['remove-high-contrast-header'])}
+    >
       <button
         aria-expanded={ariaExpanded}
         aria-controls={ariaControls}

diff --git a/src/cards/index.tsx b/src/cards/index.tsx
@@ -31,6 +31,7 @@ import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
 import { CollectionLabelContext } from '../internal/context/collection-label-context';
 import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
+import { isHighContrastHeaderActive } from '../internal/utils/content-header-utils';
 
 export { CardsProps };
 
@@ -147,7 +148,8 @@ const Cards = React.forwardRef(function <T = any>(
                   className={clsx(
                     styles.header,
                     isRefresh && styles['header-refresh'],
-                    styles[`header-variant-${computedVariant}`]
+                    styles[`header-variant-${computedVariant}`],
+                    isHighContrastHeaderActive && styles['remove-high-contrast-header']
                   )}
                 >
                   <CollectionLabelContext.Provider value={{ assignId: setHeaderRef }}>
@@ -166,7 +168,13 @@ const Cards = React.forwardRef(function <T = any>(
             __darkHeader={computedVariant === 'full-page'}
             __disableFooterDivider={true}
           >
-            <div className={clsx(hasToolsHeader && styles['has-header'])}>
+            <div
+              className={clsx(
+                hasToolsHeader && styles['has-header'],
+                isRefresh && styles.refresh,
+                isHighContrastHeaderActive && styles['remove-high-contrast-header']
+              )}
+            >
               {!!renderAriaLive && !!firstIndex && (
                 <LiveRegion>
                   <span>

diff --git a/src/cards/styles.scss b/src/cards/styles.scss
@@ -88,6 +88,11 @@
   // Unfortunately, we don't have access to the header of InternalContainer
   // in order to use margin-bottom instead.
   margin-top: awsui.$space-grid-gutter;
+  &.refresh {
+    &.remove-high-contrast-header {
+      margin-top: awsui.$space-scaled-s;
+    }
+  }
 }
 
 .card {

diff --git a/src/container/internal.tsx b/src/container/internal.tsx
@@ -16,6 +16,7 @@ import styles from './styles.css.js';
 import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 import { useModalContext } from '../internal/context/modal-context';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { isHighContrastHeaderActive } from '../internal/utils/content-header-utils';
 
 export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {
   __stickyHeader?: boolean;
@@ -103,6 +104,7 @@ export default function InternalContainer({
    * stays in the same vertical position as the header content.
    */
   useEffect(() => {
+    console.log('hello' + isHighContrastHeaderActive);
     const shouldUpdateStickyBackground = isSticky && variant === 'full-page' && setHasStickyBackground;
     if (shouldUpdateStickyBackground) {
       setHasStickyBackground(true);
@@ -121,7 +123,7 @@ export default function InternalContainer({
 
   const hasMedia = !!media?.content;
   const mediaPosition = media?.position ?? 'top';
-
+  console.log(isHighContrastHeaderActive);
   return (
     <div
       {...baseProps}
@@ -153,15 +155,21 @@ export default function InternalContainer({
         {header && (
           <StickyHeaderContext.Provider value={{ isStuck }}>
             <div
-              className={clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], {
-                [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
-                [styles['header-sticky-enabled']]: isSticky,
-                [styles['header-dynamic-height']]: hasDynamicHeight,
-                [styles['header-stuck']]: isStuck,
-                [styles['with-paddings']]: !disableHeaderPaddings,
-                [styles['with-hidden-content']]: !children || __hiddenContent,
-                [styles['header-with-media']]: hasMedia,
-              })}
+              className={clsx(
+                isRefresh && styles.refresh,
+                styles.header,
+                styles[`header-variant-${variant}`],
+                isHighContrastHeaderActive && styles['remove-high-contrast-header'],
+                {
+                  [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
+                  [styles['header-sticky-enabled']]: isSticky,
+                  [styles['header-dynamic-height']]: hasDynamicHeight,
+                  [styles['header-stuck']]: isStuck,
+                  [styles['with-paddings']]: !disableHeaderPaddings,
+                  [styles['with-hidden-content']]: !children || __hiddenContent,
+                  [styles['header-with-media']]: hasMedia,
+                }
+              )}
               {...stickyStyles}
               ref={headerMergedRef}
             >
@@ -174,9 +182,14 @@ export default function InternalContainer({
           </StickyHeaderContext.Provider>
         )}
         <div
-          className={clsx(styles.content, fitHeight && styles['content-fit-height'], {
-            [styles['with-paddings']]: !disableContentPaddings,
-          })}
+          className={clsx(
+            styles.content,
+            fitHeight && styles['content-fit-height'],
+            isHighContrastHeaderActive && styles['remove-high-contrast-header'],
+            {
+              [styles['with-paddings']]: !disableContentPaddings,
+            }
+          )}
         >
           {children}
         </div>

diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -189,6 +189,17 @@
   &-variant-full-page.header-stuck {
     box-shadow: none;
 
+    &::before {
+      content: '';
+
+      position: absolute;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      top: 0;
+      border-bottom: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    }
+
     &::after {
       content: '';
 
@@ -202,6 +213,13 @@
       // This polygon only shows the part of the shadow that is lower than the element itself.
       clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
     }
+
+    &:not(.remove-high-contrast-header) {
+      &::before {
+        content: '';
+        border-bottom: none;
+      }
+    }
   }
 }
 

diff --git a/src/internal/utils/content-header-utils.ts b/src/internal/utils/content-header-utils.ts
@@ -5,3 +5,5 @@ import { getGlobalFlag } from './global-flags';
 export const contentHeaderClassName: string = getGlobalFlag('removeHighContrastHeader')
   ? ''
   : 'awsui-context-content-header';
+
+export const isHighContrastHeaderActive = !!getGlobalFlag('removeHighContrastHeader');
diff --git a/src/wizard/internal.tsx b/src/wizard/internal.tsx
@@ -27,6 +27,7 @@ import { WizardProps } from './interfaces';
 
 import styles from './styles.css.js';
 import { useFunnelChangeEvent } from './analytics';
+import { isHighContrastHeaderActive } from '../internal/utils/content-header-utils';
 
 type InternalWizardProps = WizardProps & InternalBaseComponentProps;
 
@@ -148,7 +149,12 @@ export default function InternalWizard({
   return (
     <div {...baseProps} {...funnelProps} ref={ref} className={clsx(styles.root, baseProps.className)}>
       <div
-        className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}
+        className={clsx(
+          styles.wizard,
+          isVisualRefresh && styles.refresh,
+          smallContainer && styles['small-container'],
+          isHighContrastHeaderActive && styles['remove-high-contrast-header']
+        )}
       >
         <WizardNavigation
           activeStepIndex={actualActiveStepIndex}
@@ -163,7 +169,12 @@ export default function InternalWizard({
           steps={steps}
         />
         <div
-          className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}
+          className={clsx(
+            styles.form,
+            isVisualRefresh && styles.refresh,
+            smallContainer && styles['small-container'],
+            isHighContrastHeaderActive && styles['remove-high-contrast-header']
+          )}
         >
           {isVisualRefresh && <div className={clsx(styles.background, contentHeaderClassName)} />}
           <WizardForm

diff --git a/src/wizard/styles.scss b/src/wizard/styles.scss
@@ -18,12 +18,15 @@
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: auto 1fr;
-  row-gap: awsui.$space-scaled-xl;
+  row-gap: awsui.$space-scaled-xxs;
 
   &.small-container {
     grid-template-columns: minmax(0, 1fr) 0;
     row-gap: awsui.$space-scaled-l;
   }
+  &:not(.remove-high-contrast-header) {
+    row-gap: awsui.$space-scaled-xl;
+  }
 }
 
 .wizard:not(.refresh) {
@@ -35,14 +38,18 @@
   grid-row: 1 / span 2;
   padding-top: var(#{custom-props.$containerFirstGap}, 0px);
 
-  > ul {
+  > ul.refresh {
     background: awsui.$color-background-container-content;
     position: relative;
-    @include styles.container-style;
     margin: 0;
-    padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l awsui.$space-m;
-    width: 280px;
+    padding: awsui.$space-scaled-xxs 0 0 0;
+    width: 260px;
     box-sizing: border-box;
+    &:not(.remove-high-contrast-header) {
+      @include styles.container-style;
+      padding: awsui.$space-scaled-m awsui.$space-l awsui.$space-scaled-l awsui.$space-m;
+      width: 280px;
+    }
 
     > li {
       display: grid;
@@ -172,7 +179,7 @@
   padding-top: awsui.$space-xxs;
   width: 20 * styles.$base-size;
 
-  > ul {
+  > ul:not(.refresh) {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -222,8 +229,15 @@
   }
 
   > .form-header > .form-header-content {
-    padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-s);
-    padding-bottom: awsui.$space-scaled-m;
+    padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-m - awsui.$space-xxxs);
+    padding-bottom: awsui.$space-scaled-s;
+  }
+
+  &:not(.remove-high-contrast-header) {
+    > .form-header > .form-header-content {
+      padding-top: calc(var(#{custom-props.$containerFirstGap}, 0px) + awsui.$space-s);
+      padding-bottom: awsui.$space-scaled-m;
+    }
   }
 
   > .form-component {

diff --git a/src/wizard/wizard-form-header.tsx b/src/wizard/wizard-form-header.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';
 import { contentHeaderClassName } from '../internal/utils/content-header-utils';
 import styles from './styles.css.js';
+import { isHighContrastHeaderActive } from '../internal/utils/content-header-utils';
 
 interface WizardFormHeaderProps {
   children: React.ReactNode;
@@ -24,7 +25,14 @@ export default function WizardFormHeader({ children, isVisualRefresh }: WizardFo
       )}
       ref={overlapElement}
     >
-      <div className={clsx(styles['form-header-content'])}>{children}</div>
+      <div
+        className={clsx(
+          styles['form-header-content'],
+          isHighContrastHeaderActive && styles['remove-high-contrast-header']
+        )}
+      >
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/src/wizard/wizard-navigation.tsx b/src/wizard/wizard-navigation.tsx
@@ -6,6 +6,7 @@ import InternalLink from '../link/internal';
 import InternalBox from '../box/internal';
 import { WizardProps } from './interfaces';
 import styles from './styles.css.js';
+import { isHighContrastHeaderActive } from '../internal/utils/content-header-utils';
 
 interface NavigationProps {
   activeStepIndex: number;
@@ -50,10 +51,21 @@ export default function Navigation({
 }: NavigationProps) {
   return (
     <nav
-      className={clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh)}
+      className={clsx(
+        styles.navigation,
+        hidden && styles.hidden,
+        isVisualRefresh && styles.refresh,
+        isHighContrastHeaderActive && styles['remove-high-contrast-header']
+      )}
       aria-label={i18nStrings.navigationAriaLabel}
     >
-      <ul className={clsx(isVisualRefresh && styles.refresh)}>
+      <ul
+        className={clsx(
+          styles.list,
+          isVisualRefresh && styles.refresh,
+          isHighContrastHeaderActive && styles['remove-high-contrast-header']
+        )}
+      >
         {steps.map((step, index: number) =>
           isVisualRefresh ? (
             <NavigationStepVisualRefresh