chore: Add RTL support for Popover component. (#2121)

cloudscape-design · Apr 15, 2024 · e4e2f25 · e4e2f25
1 parent 5250e7b
commit e4e2f25
Show file tree

Hide file tree

Showing 25 changed files with 477 additions and 355 deletions.
diff --git a/pages/autosuggest/autosuggest-input.page.tsx b/pages/autosuggest/autosuggest-input.page.tsx
@@ -43,23 +43,23 @@ function ContentNoMatch() {
 
 function ContentSmall() {
   return (
-    <div style={{ width: 200 }}>
+    <div style={{ inlineSize: 200 }}>
       <button>Small</button>
     </div>
   );
 }
 
 function ContentMedium() {
   return (
-    <div style={{ width: 350 }}>
+    <div style={{ inlineSize: 350 }}>
       <button>Medium</button>
     </div>
   );
 }
 
 function ContentLarge() {
   return (
-    <div style={{ width: 500 }}>
+    <div style={{ inlineSize: 500 }}>
       <button>Large</button>
     </div>
   );

diff --git a/pages/dropdown/interior-fitting.page.tsx b/pages/dropdown/interior-fitting.page.tsx
@@ -63,7 +63,7 @@ export default function DropdownScenario() {
         </div>
       </div>
       <div className={clsx(styles.container, styles['container-wide'])}>
-        <div id="parentDropdown2" className={styles['dropdown-container']} style={{ left: '270px' }}>
+        <div id="parentDropdown2" className={styles['dropdown-container']} style={{ insetInlineStart: '270px' }}>
           <Dropdown
             stretchWidth={false}
             trigger={
@@ -127,7 +127,11 @@ export default function DropdownScenario() {
         </div>
       </div>
       <div className={clsx(styles.container, styles['container-wide'])}>
-        <div id="parentDropdown4" className={styles['dropdown-container']} style={{ left: '270px', top: '170px' }}>
+        <div
+          id="parentDropdown4"
+          className={styles['dropdown-container']}
+          style={{ insetInlineStart: '270px', insetBlockStart: '170px' }}
+        >
           <Dropdown
             stretchWidth={false}
             trigger={

diff --git a/pages/dropdown/interior-stretch-height.page.tsx b/pages/dropdown/interior-stretch-height.page.tsx
@@ -27,7 +27,7 @@ export default function DropdownScenario() {
         <div
           id="dropdown1"
           className={clsx(styles['dropdown-container'], styles.middle2)}
-          style={{ left: '100px', height: '800px' }}
+          style={{ insetInlineStart: '100px', blockSize: '800px' }}
         >
           <Dropdown
             stretchWidth={false}
@@ -48,7 +48,7 @@ export default function DropdownScenario() {
         className={clsx(styles.container, styles['container-wide'], styles['container-overflow-y-visible'])}
         id={'container-2'}
       >
-        <div id="dropdown2" className={styles['dropdown-container']} style={{ left: '100px' }}>
+        <div id="dropdown2" className={styles['dropdown-container']} style={{ insetInlineStart: '100px' }}>
           <Dropdown
             stretchWidth={false}
             stretchHeight={false}
@@ -68,7 +68,7 @@ export default function DropdownScenario() {
         className={clsx(styles.container, styles['container-wide'], styles['container-overflow-visible'])}
         id={'container-3'}
       >
-        <div id="dropdown3" className={styles['dropdown-container']} style={{ left: '100px' }}>
+        <div id="dropdown3" className={styles['dropdown-container']} style={{ insetInlineStart: '100px' }}>
           <Dropdown
             stretchWidth={true}
             stretchHeight={true}
@@ -80,7 +80,7 @@ export default function DropdownScenario() {
             open={openParent3}
             onDropdownClose={() => setOpenParent3(false)}
           >
-            <div style={{ width: '400px' }}>
+            <div style={{ inlineSize: '400px' }}>
               <ListContent n={15} withSpaces={true} repeat={20} />
             </div>
           </Dropdown>

diff --git a/pages/dropdown/interior-with-wrapping.page.tsx b/pages/dropdown/interior-with-wrapping.page.tsx
@@ -27,7 +27,7 @@ export default function DropdownScenario() {
         <div
           id="parentDropdown5"
           className={clsx(styles['dropdown-container'], styles.middle2)}
-          style={{ left: '100px' }}
+          style={{ insetInlineStart: '100px' }}
         >
           <Dropdown
             stretchWidth={false}
@@ -60,7 +60,11 @@ export default function DropdownScenario() {
         </div>
       </div>
       <div className={clsx(styles.container, styles['container-wide'])}>
-        <div id="parentDropdown6" className={styles['dropdown-container']} style={{ top: '170px', left: '190px' }}>
+        <div
+          id="parentDropdown6"
+          className={styles['dropdown-container']}
+          style={{ insetBlockStart: '170px', insetInlineStart: '190px' }}
+        >
           <Dropdown
             stretchWidth={false}
             trigger={

diff --git a/pages/dropdown/positioning.page.tsx b/pages/dropdown/positioning.page.tsx
@@ -50,7 +50,7 @@ export default function DropdownScenario() {
         </div>
       </div>
       <div className={styles.container}>
-        <div id="topRightDropDown" className={styles['dropdown-container']} style={{ left: '80px' }}>
+        <div id="topRightDropDown" className={styles['dropdown-container']} style={{ insetInlineStart: '80px' }}>
           <Dropdown
             stretchWidth={false}
             trigger={
@@ -82,7 +82,7 @@ export default function DropdownScenario() {
         </div>
       </div>
       <div className={styles.container}>
-        <div id="topMiddleDropDown" className={styles['dropdown-container']} style={{ left: '20px' }}>
+        <div id="topMiddleDropDown" className={styles['dropdown-container']} style={{ insetInlineStart: '20px' }}>
           <Dropdown
             stretchWidth={false}
             trigger={
@@ -98,7 +98,11 @@ export default function DropdownScenario() {
         </div>
       </div>
       <div className={styles.container}>
-        <div id="bottomRightDropDown" className={styles['dropdown-container']} style={{ left: '80px', top: '170px' }}>
+        <div
+          id="bottomRightDropDown"
+          className={styles['dropdown-container']}
+          style={{ insetInlineStart: '80px', insetBlockStart: '170px' }}
+        >
           <Dropdown
             stretchWidth={false}
             trigger={

diff --git a/pages/dropdown/prefer-center.page.tsx b/pages/dropdown/prefer-center.page.tsx
@@ -42,7 +42,7 @@ export default function DropdownScenario() {
         </div>
       </div>
       <div className={clsx(styles.container, styles['container-wide'])}>
-        <div id="centerDropdown" className={styles['dropdown-container']} style={{ left: '100px' }}>
+        <div id="centerDropdown" className={styles['dropdown-container']} style={{ insetInlineStart: '100px' }}>
           <Dropdown
             stretchWidth={false}
             preferCenter={true}
@@ -59,7 +59,7 @@ export default function DropdownScenario() {
         </div>
       </div>
       <div className={clsx(styles.container, styles['container-wide'])}>
-        <div id="rightDropdown" className={styles['dropdown-container']} style={{ left: '250px' }}>
+        <div id="rightDropdown" className={styles['dropdown-container']} style={{ insetInlineStart: '250px' }}>
           <Dropdown
             stretchWidth={false}
             preferCenter={true}

diff --git a/pages/popover/container-test.page.tsx b/pages/popover/container-test.page.tsx
@@ -3,6 +3,7 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import ScreenshotArea from '../utils/screenshot-area';
 import PopoverContainer from '~components/popover/container';
+import { isRtl } from '~components/internal/direction';
 import clsx from 'clsx';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -33,7 +34,7 @@ export default function () {
     <article>
       <h1>Popover container test</h1>
       <ScreenshotArea>
-        <svg width={500} height={500} style={{ margin: '20px' }}>
+        <svg width={500} height={500} style={{ margin: '20px', transform: isRtl(document.body) ? 'scaleX(-1)' : '' }}>
           {points.map(point => (
             <circle
               key={point.id}

diff --git a/src/annotation-context/annotation/arrow.scss b/src/annotation-context/annotation/arrow.scss
@@ -56,6 +56,13 @@
       transform: rotate(45deg);
       transform-origin: 0 100%;
     }
+
+    @include styles.with-direction('rtl') {
+      &::after {
+        transform: rotate(-45deg);
+        transform-origin: 100% 100%;
+      }
+    }
   }
 
   &-outer {

diff --git a/src/button-dropdown/category-elements/styles.scss b/src/button-dropdown/category-elements/styles.scss
@@ -107,7 +107,12 @@
 
   &-right {
     transform: rotate(-90deg);
+
+    @include styles.with-direction('rtl') {
+      transform: rotate(90deg);
+    }
   }
+
   @include styles.with-motion {
     transition: transform awsui.$motion-duration-rotate-180 awsui.$motion-easing-rotate-180;
   }

diff --git a/src/internal/components/chart-popover/index.tsx b/src/internal/components/chart-popover/index.tsx
@@ -20,7 +20,7 @@ export interface ChartPopoverProps extends PopoverProps {
   title?: React.ReactNode;
 
   /** References the element the container is positioned against. */
-  trackRef: React.RefObject<Element>;
+  trackRef: React.RefObject<HTMLElement | SVGElement>;
   /**
     Used to update the container position in case track or track position changes:
     

diff --git a/src/internal/components/dropdown/__tests__/dropdown-fit-handler.test.ts b/src/internal/components/dropdown/__tests__/dropdown-fit-handler.test.ts
@@ -3,21 +3,22 @@
 import { getDropdownPosition } from '../../../../../lib/components/internal/components/dropdown/dropdown-fit-handler';
 
 const windowSize = {
-  top: 0,
-  left: 0,
-  width: 1000,
-  height: 1000,
+  insetBlockStart: 0,
+  insetInlineStart: 0,
+  inlineSize: 1000,
+  blockSize: 1000,
 };
 const defaults = {
-  dropLeft: false,
-  dropUp: false,
-  height: '605px',
-  left: 'auto',
-  width: '100px',
+  dropInlineStart: false,
+  dropBlockStart: false,
+  blockSize: '605px',
+  insetInlineStart: 'auto',
+  inlineSize: '100px',
 };
 
 function getSizedElement(width: number, height: number, top = 0, left = 0) {
   const element = document.createElement('div');
+
   element.getBoundingClientRect = () =>
     ({ width, height, top, left, bottom: top + height, right: left + width } as DOMRect);
   Object.defineProperty(element, 'offsetHeight', { value: height });
@@ -41,8 +42,8 @@ describe('getDropdownPosition', () => {
       getDropdownPosition({ triggerElement: trigger, dropdownElement: dropdown, overflowParents: [windowSize] })
     ).toEqual({
       ...defaults,
-      dropUp: true,
-      height: '853px',
+      dropBlockStart: true,
+      blockSize: '853px',
     });
   });
 
@@ -53,8 +54,8 @@ describe('getDropdownPosition', () => {
       getDropdownPosition({ triggerElement: trigger, dropdownElement: dropdown, overflowParents: [windowSize] })
     ).toEqual({
       ...defaults,
-      dropLeft: true,
-      width: '550px',
+      dropInlineStart: true,
+      inlineSize: '550px',
     });
   });
 
@@ -65,7 +66,7 @@ describe('getDropdownPosition', () => {
       getDropdownPosition({ triggerElement: trigger, dropdownElement: dropdown, overflowParents: [windowSize] })
     ).toEqual({
       ...defaults,
-      width: '900px',
+      inlineSize: '900px',
     });
   });
 
@@ -81,7 +82,7 @@ describe('getDropdownPosition', () => {
       })
     ).toEqual({
       ...defaults,
-      width: '300px',
+      inlineSize: '300px',
     });
   });
 
@@ -97,7 +98,7 @@ describe('getDropdownPosition', () => {
       })
     ).toEqual({
       ...defaults,
-      width: '600px',
+      inlineSize: '600px',
     });
   });
 
@@ -113,19 +114,19 @@ describe('getDropdownPosition', () => {
       })
     ).toEqual({
       ...defaults,
-      width: '200px',
+      inlineSize: '200px',
     });
   });
 
   test('dropdown matches trigger width when trigger sticks to the right screen edge', () => {
-    const trigger = getSizedElement(100, 50, 300, windowSize.width - 110);
+    const trigger = getSizedElement(100, 50, 300, windowSize.inlineSize - 110);
     const dropdown = getSizedElement(100, 400);
 
     expect(
       getDropdownPosition({ triggerElement: trigger, dropdownElement: dropdown, overflowParents: [windowSize] })
     ).toEqual({
       ...defaults,
-      dropLeft: true, // TODO: this value is incorrect, should be fixed, see AWSUI-16369 for details
+      dropInlineStart: true, // TODO: this value is incorrect, should be fixed, see AWSUI-16369 for details
     });
   });
 
@@ -135,7 +136,7 @@ describe('getDropdownPosition', () => {
     expect(
       getDropdownPosition({ triggerElement: trigger, dropdownElement: dropdown, overflowParents: [windowSize] })
     ).toEqual(defaults);
-    const scrollableContainer = { top: 100, left: 0, height: 400, width: 400 };
+    const scrollableContainer = { insetBlockStart: 100, insetInlineStart: 0, blockSize: 400, inlineSize: 400 };
     expect(
       getDropdownPosition({
         triggerElement: trigger,
@@ -144,8 +145,8 @@ describe('getDropdownPosition', () => {
       })
     ).toEqual({
       ...defaults,
-      dropUp: true,
-      height: '140px',
+      dropBlockStart: true,
+      blockSize: '140px',
     });
   });
 
@@ -161,8 +162,8 @@ describe('getDropdownPosition', () => {
       })
     ).toEqual({
       ...defaults,
-      width: '200px',
-      left: '-50px',
+      inlineSize: '200px',
+      insetInlineStart: '-50px',
     });
   });
 
@@ -178,7 +179,7 @@ describe('getDropdownPosition', () => {
       })
     ).toEqual({
       ...defaults,
-      width: '200px',
+      inlineSize: '200px',
     });
   });
 
@@ -196,7 +197,7 @@ describe('getDropdownPosition', () => {
         })
       ).toEqual({
         ...defaults,
-        width: '200px',
+        inlineSize: '200px',
       });
     });
 
@@ -213,7 +214,7 @@ describe('getDropdownPosition', () => {
         })
       ).toEqual({
         ...defaults,
-        width: '465px',
+        inlineSize: '465px',
       });
     });
 
@@ -230,7 +231,7 @@ describe('getDropdownPosition', () => {
         })
       ).toEqual({
         ...defaults,
-        width: '700px',
+        inlineSize: '700px',
       });
     });
   });