chore: Refine the Popover arrow position for VR to align the stroke a…

…ppearance (#1916)
cloudscape-design · Jan 31, 2024 · e2bc55c · e2bc55c
1 parent 0b80d83
commit e2bc55c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/popover/arrow.scss b/src/popover/arrow.scss
@@ -65,6 +65,10 @@
   &-inner {
     top: 2px;
 
+    &.refresh {
+      top: 3px;
+    }
+
     &::after {
       border-radius: 1px 0 0 0;
       background-color: awsui.$color-background-popover;

diff --git a/src/popover/arrow.tsx b/src/popover/arrow.tsx
@@ -5,16 +5,21 @@ import clsx from 'clsx';
 
 import styles from './styles.css.js';
 import { InternalPosition } from './interfaces';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 
 export interface ArrowProps {
   position: InternalPosition | null;
 }
 
-const Arrow = (props: ArrowProps) => (
-  <div className={clsx(styles.arrow, props.position && styles[`arrow-position-${props.position}`])}>
-    <div className={styles['arrow-outer']} />
-    <div className={styles['arrow-inner']} />
-  </div>
-);
+const Arrow = (props: ArrowProps) => {
+  const isVisualRefresh = useVisualRefresh();
+
+  return (
+    <div className={clsx(styles.arrow, props.position && styles[`arrow-position-${props.position}`])}>
+      <div className={styles['arrow-outer']} />
+      <div className={clsx(styles['arrow-inner'], isVisualRefresh && styles.refresh)} />
+    </div>
+  );
+};
 
 export default React.memo(Arrow);