fix: Fix outline issue (#1817)

Co-authored-by: Joan Perals Tresserra <[email protected]> Co-authored-by: Abdallah Alhalees <[email protected]> Co-authored-by: Jessica Kuelz <[email protected]>
cloudscape-design · Dec 18, 2023 · 851dc85 · 851dc85
1 parent 61deb3a
commit 851dc85
Show file tree

Hide file tree

Showing 39 changed files with 642 additions and 342 deletions.
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
diff --git a/src/__tests__/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/__snapshots__/design-tokens.test.ts.snap
diff --git a/src/app-layout/__integ__/app-layout-drawers.test.ts b/src/app-layout/__integ__/app-layout-drawers.test.ts
@@ -94,7 +94,7 @@ const setupTest = (
 
 for (const visualRefresh of ['true', 'false']) {
   describe(`visualRefresh=${visualRefresh}`, () => {
-    // there is an extra border inside drawer box in visual refresh
+    // there is an extra 2 borders inside drawer box in visual refresh
     const vrBorderOffset = visualRefresh === 'true' ? 2 : 0;
 
     test(
@@ -131,7 +131,7 @@ for (const visualRefresh of ['true', 'false']) {
         // there are different layouts between these two designs
         await expect(page.getActiveDrawerWidth()).resolves.toEqual(290 + vrBorderOffset);
         await page.dragResizerTo({ x: 0, y: 0 });
-        await expect(page.getActiveDrawerWidth()).resolves.toEqual(visualRefresh === 'true' ? 448 : 520);
+        await expect(page.getActiveDrawerWidth()).resolves.toEqual(visualRefresh === 'true' ? 447 : 520);
       })
     );
 

diff --git a/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts b/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts
@@ -45,6 +45,8 @@ function setupTest(viewportWidth: number, testFn: (page: AppLayoutRefreshNotofic
   });
 }
 
+const vrBorderOffset = 1;
+
 describe('Default width per contentType', () => {
   const testCases = [
     { viewPortWidth: 1920, navigationWidth: 280, contentWidth: 1280, toolsWidth: 290 }, // XXXS - L breakpoint
@@ -62,8 +64,8 @@ describe('Default width per contentType', () => {
 
           // Open the drawers and check their width
           await page.setDrawersOpen();
-          await expect(page.getNavigationWidth()).resolves.toBe(navigationWidth);
-          await expect(page.getToolsWidth()).resolves.toBe(toolsWidth);
+          await expect(page.getNavigationWidth()).resolves.toBe(navigationWidth + vrBorderOffset);
+          await expect(page.getToolsWidth()).resolves.toBe(toolsWidth + vrBorderOffset);
         })
       );
     }

diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
@@ -20,7 +20,6 @@
 
   &.has-open-drawer {
     background-color: awsui.$color-background-container-content;
-    box-shadow: awsui.$shadow-panel;
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
@@ -163,6 +162,7 @@
 
   &.is-drawer-open {
     border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
     opacity: 1;
     width: var(#{custom-props.$drawerSize});
   }

diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
@@ -87,7 +87,6 @@ nav.show-navigation {
 
 nav.navigation {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
   bottom: 0;
   height: 100%;
   overflow-x: hidden;
@@ -97,6 +96,7 @@ nav.navigation {
   position: relative;
   word-wrap: break-word;
   pointer-events: auto;
+  border-right: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
 
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {

diff --git a/src/app-layout/visual-refresh/split-panel.scss b/src/app-layout/visual-refresh/split-panel.scss
@@ -84,6 +84,7 @@ section.split-panel-bottom {
   */
   &.is-split-panel-open.position-bottom {
     box-shadow: awsui.$shadow-split-bottom;
+
     &.animating {
       @include styles.with-motion {
         animation: openSplitPanelBottom awsui.$motion-duration-refresh-only-fast;
@@ -108,8 +109,12 @@ section.split-panel-side {
   be persistent in the DOM when closed.
   */
   &.is-split-panel-open.position-side {
-    box-shadow: awsui.$shadow-panel;
     max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
     min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+
+    &:not(.has-open-drawer) {
+      border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-side;
+    }
   }
 }
diff --git a/src/app-layout/visual-refresh/split-panel.tsx b/src/app-layout/visual-refresh/split-panel.tsx
@@ -123,6 +123,8 @@ function SplitPanelSide() {
     splitPanelMaxWidth,
     splitPanelMinWidth,
     splitPanelControlId,
+    isToolsOpen,
+    activeDrawerId,
   } = useAppLayoutInternals();
 
   if (!splitPanel) {
@@ -135,6 +137,7 @@ function SplitPanelSide() {
       aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}
       className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {
         [styles['is-split-panel-open']]: isSplitPanelOpen,
+        [styles['has-open-drawer']]: !!activeDrawerId || isToolsOpen,
       })}
       style={{
         [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,

diff --git a/src/app-layout/visual-refresh/tools.scss b/src/app-layout/visual-refresh/tools.scss
@@ -61,7 +61,6 @@ viewport size and state of the Tools drawer.
 
 .tools {
   background-color: awsui.$color-background-container-content;
-  box-shadow: awsui.$shadow-panel;
   flex-shrink: 0;
   height: 100%;
   overflow-y: auto;
@@ -93,6 +92,8 @@ viewport size and state of the Tools drawer.
 
   // Apply the animation when the Tools is opened
   &.is-tools-open {
+    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+
     &.animating {
       @include styles.with-motion {
         animation: openTools awsui.$motion-duration-refresh-only-fast;
@@ -168,6 +169,7 @@ handleSplitPanelMaxWidth function in the context.
       display: flex;
       flex-direction: column;
       gap: awsui.$space-xs;
+
       &.animating {
         @include styles.with-motion {
           animation: showButtons awsui.$motion-duration-refresh-only-fast;

diff --git a/src/button-dropdown/category-elements/styles.scss b/src/button-dropdown/category-elements/styles.scss
@@ -55,7 +55,7 @@
         color: awsui.$color-text-dropdown-item-dimmed;
       }
       &.is-focused {
-        border-color: awsui.$color-border-item-focused;
+        border-color: awsui.$color-border-dropdown-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }

diff --git a/src/button-dropdown/item-element/styles.scss b/src/button-dropdown/item-element/styles.scss
@@ -45,7 +45,7 @@
       }
 
       &.is-focused {
-        border-color: awsui.$color-border-item-focused;
+        border-color: awsui.$color-border-dropdown-item-focused;
         box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
       }
     }

diff --git a/src/cards/index.tsx b/src/cards/index.tsx
@@ -230,6 +230,7 @@ const CardsList = <T,>({
 }) => {
   const selectable = !!selectionType;
   const canClickEntireCard = selectable && entireCardClickable;
+  const isRefresh = useVisualRefresh();
 
   const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);
 
@@ -268,7 +269,7 @@ const CardsList = <T,>({
           role={listItemRole}
         >
           <div
-            className={styles['card-inner']}
+            className={clsx(styles['card-inner'], isRefresh && styles.refresh)}
             onClick={
               canClickEntireCard
                 ? event => {

diff --git a/src/cards/styles.scss b/src/cards/styles.scss
@@ -10,14 +10,38 @@
 @use '../container/shared' as container;
 @use './motion';
 
+@mixin card-style {
+  border-radius: awsui.$border-radius-container;
+  box-sizing: border-box;
+
+  &::before {
+    @include styles.base-pseudo-element;
+    // Reset border color to prevent it from flashing black during card selection animation
+    border-color: transparent;
+    border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+    border-radius: awsui.$border-radius-container;
+    z-index: 1;
+  }
+
+  &::after {
+    @include styles.base-pseudo-element;
+    border-radius: awsui.$border-radius-container;
+  }
+  &:not(.refresh)::after {
+    box-shadow: awsui.$shadow-container;
+  }
+  &.refresh::after {
+    border: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  }
+}
+
 .root {
   @include styles.styles-reset();
   @include styles.default-text-style;
 }
 
 .header {
   &-variant-full-page.header-refresh {
-    @include container.borders-and-shadows;
     padding-top: 0;
     padding-left: 0;
     padding-right: 0;
@@ -78,9 +102,9 @@
     background-color: awsui.$color-background-container-content;
     margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
     padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
-    @include styles.container-shadow;
     width: 100%;
     min-width: 0;
+    @include card-style;
   }
   &-header {
     @include styles.font-heading-m;

diff --git a/src/collection-preferences/content-display/content-display-option.scss b/src/collection-preferences/content-display/content-display-option.scss
@@ -37,7 +37,7 @@ $border-radius: awsui.$border-radius-item;
 .content-display-option {
   list-style: none;
   position: relative;
-  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
   &:not(.placeholder).sorting {
     @include animated;
   }

diff --git a/src/collection-preferences/visible-content.scss b/src/collection-preferences/visible-content.scss
@@ -6,7 +6,7 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 
-$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+$border: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
 
 .visible-content,
 .visible-content-toggle,

diff --git a/src/container/__tests__/sticky-header.test.tsx b/src/container/__tests__/sticky-header.test.tsx
@@ -95,6 +95,28 @@ test('should set isStuck to false when rootTop is larger than than headerTop', (
   expect(result.current.isStuck).toBe(false);
 });
 
+test('should not set isStuck to true when rootTop has a border and is larger than than headerTop', () => {
+  (supportsStickyPosition as jest.Mock).mockReturnValue(true);
+
+  const rootRef = {
+    current: document.createElement('div'),
+  };
+  rootRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 199 });
+  rootRef.current.style.borderTopWidth = '1px';
+
+  const headerRef = {
+    current: document.createElement('div'),
+  };
+  headerRef.current.getBoundingClientRect = jest.fn().mockReturnValue({ top: 200 });
+
+  const { result } = renderHook(() => useStickyHeader(rootRef, headerRef, true, 0, 0, false));
+  act(() => {
+    window.dispatchEvent(new Event('scroll'));
+  });
+
+  expect(result.current.isStuck).toBe(false);
+});
+
 test('should set isStuck to false when headerRef is null', () => {
   (supportsStickyPosition as jest.Mock).mockReturnValue(true);
 

diff --git a/src/container/internal.tsx b/src/container/internal.tsx
@@ -131,7 +131,8 @@ export default function InternalContainer({
         styles[`variant-${variant}`],
         fitHeight && styles['fit-height'],
         hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),
-        shouldHaveStickyStyles && [styles['sticky-enabled']]
+        shouldHaveStickyStyles && [styles['sticky-enabled']],
+        isRefresh && styles.refresh
       )}
       ref={mergedRef}
     >
@@ -151,7 +152,7 @@ export default function InternalContainer({
         {header && (
           <StickyHeaderContext.Provider value={{ isStuck }}>
             <div
-              className={clsx(styles.header, styles[`header-variant-${variant}`], {
+              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,

diff --git a/src/container/shared.scss b/src/container/shared.scss
@@ -15,10 +15,6 @@ $footer-padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
 $header-focus-visible-padding: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width})
   calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
 
-@mixin borders-and-shadows {
-  @include styles.container-shadow;
-}
-
 @mixin divider {
   border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -24,17 +24,17 @@
   &.variant {
     &-default,
     &-stacked {
-      // Border and shadows are applied with ::before and ::after elements (respectively)
-      @include shared.borders-and-shadows;
       background-color: awsui.$color-background-container-content;
+      // Border and shadows are applied with ::before and ::after elements (respectively)
+      @include styles.container-style;
     }
-
     // Meld container bottom corners into next adjoining container
     &-stacked:not(:last-child),
     &-stacked:not(:last-child)::before,
     &-stacked:not(:last-child)::after {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
+      border-bottom-width: 0;
     }
     // Meld container top corners into preceding container
     &-stacked + &-stacked,
@@ -44,17 +44,13 @@
       border-top-right-radius: 0;
     }
     // Replace container border with a divider
-    &-stacked + &-stacked::before {
+    &-stacked + &-stacked:not(.refresh)::before {
       @include shared.divider;
     }
-    // Reset container shadow to prevent unwanted overflow
-    &-stacked + &-stacked::after {
-      box-shadow: awsui.$shadow-container-stacked;
-    }
   }
 
   // To ensure the top border/divider is visible on sticky elements which have a higher z-index
-  &.sticky-enabled {
+  &.sticky-enabled:not(.refresh) {
     &::before {
       top: calc(-1 * #{awsui.$border-container-top-width});
     }
@@ -176,11 +172,11 @@
   }
 
   &-variant-cards {
+    // Border and shadows are applied with ::before and ::after elements (respectively)
+    @include styles.container-style;
     &:not(.header-sticky-enabled) {
       position: relative;
     }
-    @include shared.borders-and-shadows;
-
     &.header-stuck::after,
     &.header-stuck::before {
       border: 0;

diff --git a/src/container/use-sticky-header.ts b/src/container/use-sticky-header.ts
@@ -121,8 +121,10 @@ export const useStickyHeader = (
   // box-shadow, applied here by a "header-stuck" className
   const checkIfStuck = useCallback(() => {
     if (rootRef.current && headerRef.current) {
-      const rootTop = rootRef.current.getBoundingClientRect().top;
+      const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;
+      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;
       const headerTop = headerRef.current.getBoundingClientRect().top;
+
       if (rootTop < headerTop) {
         setIsStuck(true);
       } else {

diff --git a/src/header/styles.scss b/src/header/styles.scss
@@ -128,7 +128,6 @@
 .title {
   @include styles.text-wrapping;
   color: awsui.$color-text-heading-default;
-
   &-variant-h1 {
     font-size: awsui.$font-size-heading-xl;
     padding-top: awsui.$space-scaled-2x-xxs;

diff --git a/src/internal/components/abstract-switch/styles.scss b/src/internal/components/abstract-switch/styles.scss
@@ -13,6 +13,10 @@
   display: block;
 }
 
+.label {
+  color: awsui.$color-text-form-default;
+}
+
 .outline {
   display: none;
   &.show-outline {