chore: Reusing arrow styles between popover and annotation context (#4042)

Author: pan-kot

src/annotation-context/annotation/annotation-popover.tsx

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect } from 'react';
-import clsx from 'clsx';
 
 import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 
@@ -11,9 +10,9 @@ import { InternalButton } from '../../button/internal';
 import { HotspotProps } from '../../hotspot/interfaces';
 import { scrollElementIntoView } from '../../internal/utils/scrollable-containers';
 import { joinStrings } from '../../internal/utils/strings/join-strings.js';
+import Arrow from '../../popover/arrow';
 import PopoverBody from '../../popover/body';
 import PopoverContainer from '../../popover/container';
-import { InternalPosition } from '../../popover/interfaces';
 import InternalSpaceBetween from '../../space-between/internal';
 import { AnnotationContextProps } from '../interfaces';
 
@@ -48,13 +47,6 @@ interface AnnotationPopoverProps {
   i18nStrings: AnnotationContextProps['i18nStrings'];
 }
 
-const arrow = (position: InternalPosition | null) => (
-  <div className={clsx(styles.arrow, styles[`arrow-position-${position}`])}>
-    <div className={styles['arrow-outer']} />
-    <div className={styles['arrow-inner']} />
-  </div>
-);
-
 export function AnnotationPopover({
   title,
   content,
@@ -97,7 +89,7 @@ export function AnnotationPopover({
       trackRef={trackRef}
       trackKey={taskLocalStepIndex}
       variant="annotation"
-      arrow={arrow}
+      arrow={position => <Arrow position={position} variant="info" />}
       zIndex={7000}
       renderWithPortal={true}
     >

src/annotation-context/annotation/arrow.scss

@@ -8,8 +8,6 @@
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
-@use './arrow';
-
 .annotation,
 .next-button,
 .previous-button,

src/annotation-context/annotation/styles.scss

@@ -13,7 +13,7 @@
   //   - A foreground triangle with popover background color overlapping
   //     the outer triangle 1 pixel in
   //
-  // For the sake of accurate positioning, the arrow box has to be an even integer in px
+  // For the sake of accurate positioning, the arrow box has to be an even integer (in px, not rem).
   // The box-shadow rotates with the arrow, so we need different shadows for each direction
 
   // Based on $awsui-box-shadow-inner shadow, but rotated based on x and y multipliers.
@@ -22,8 +22,8 @@
     box-shadow: ($box-shadow-size * $x) ($box-shadow-size * $y) 4px -2px awsui.$color-shadow-default;
   }
 
-  $arrow-edge-length: 14px;
-  $arrow-width: 20px;
+  $arrow-edge-length: 1.4 * styles.$base-size;
+  $arrow-width: 2 * styles.$base-size;
   $arrow-height: $arrow-width * 0.5;
 
   inline-size: $arrow-width;
@@ -114,3 +114,17 @@
     }
   }
 }
+
+.arrow-variant-info {
+  > .arrow-outer {
+    &::after {
+      background-color: awsui.$color-border-status-info;
+    }
+  }
+
+  > .arrow-inner {
+    &::after {
+      background-color: awsui.$color-background-status-info;
+    }
+  }
+}

src/popover/arrow.scss

@@ -10,13 +10,13 @@ import styles from './styles.css.js';
 
 interface ArrowProps {
   position: InternalPosition | null;
+  variant?: 'default' | 'info';
 }
 
-const Arrow = (props: ArrowProps) => {
+const Arrow = ({ position, variant }: ArrowProps) => {
   const isVisualRefresh = useVisualRefresh();
-
   return (
-    <div className={clsx(styles.arrow, props.position && styles[`arrow-position-${props.position}`])}>
+    <div className={clsx(styles.arrow, styles[`arrow-position-${position}`], styles[`arrow-variant-${variant}`])}>
       <div className={styles['arrow-outer']} />
       <div className={clsx(styles['arrow-inner'], isVisualRefresh && styles.refresh)} />
     </div>