feat: rtl for tooltip, popper; cleanup

dhis2 · Feb 7, 2024 · d16afce · d16afce
1 parent a9e69c2
commit d16afce
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 19 deletions.
diff --git a/components/chip/API.md b/components/chip/API.md
@@ -22,8 +22,10 @@ import { Chip } from '@dhis2-ui/chip'
 |dragging|boolean||||
 |icon|element||||
 |marginBottom|number|`4`||`margin-bottom` value, applied in `px`|
-|marginLeft|number|`4`||`margin-left` value, applied in `px`|
-|marginRight|number|`4`||`margin-right` value, applied in `px`|
+|marginInlineStart|number|`4`||`margin-inline-start` value, applied in `px`|
+|marginLeft|number|`4`||`margin-inline-start` value if marginInlineStart is not provided, applied in `px`|
+|marginInlineEnd|number|`4`||`margin-inline-end` value, applied in `px`|
+|marginRight|number|`4`||`margin-inline-end` value if marginInlineEnd is not provided, applied in `px`|
 |marginTop|number|`4`||`margin-top` value, applied in `px`|
 |overflow|boolean||||
 |selected|boolean||||

diff --git a/components/divider/src/divider.js b/components/divider/src/divider.js
@@ -2,18 +2,20 @@ import { colors, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Divider = ({ className, dataTest, dense, margin }) => {
-    let rtlMargin = margin
+const flipMargin = (margin) => {
     const splitMargin = margin.split(' ')
     if (splitMargin?.length === 4) {
-        rtlMargin = [
+        return [
             splitMargin[0],
             splitMargin[3],
             splitMargin[2],
             splitMargin[1],
         ].join(' ')
     }
+    return margin
+}
 
+const Divider = ({ className, dataTest, dense, margin }) => {
     return (
         <div className={className} data-test={dataTest}>
             <style jsx>{`
@@ -29,7 +31,7 @@ const Divider = ({ className, dataTest, dense, margin }) => {
                     margin: ${dense ? `${spacers.dp4} 0` : margin};
                 }
                 :dir(rtl) {
-                    margin: ${dense ? `${spacers.dp4} 0` : rtlMargin};
+                    margin: ${dense ? `${spacers.dp4} 0` : flipMargin(margin)};
                 }
             `}</style>
         </div>

diff --git a/components/popper/src/popper.js b/components/popper/src/popper.js
@@ -5,6 +5,16 @@ import { usePopper } from 'react-popper'
 import { getReferenceElement } from './get-reference-element.js'
 import { deduplicateModifiers } from './modifiers.js'
 
+const flipPlacement = (placement) => {
+    if (placement.startsWith('right')) {
+        return placement.replace('right', 'left')
+    }
+    if (placement.startsWith('left')) {
+        return placement.replace('left', 'right')
+    }
+    return placement
+}
+
 const Popper = ({
     children,
     className,
@@ -32,7 +42,10 @@ const Popper = ({
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
         strategy,
         onFirstUpdate,
-        placement,
+        placement:
+            document.documentElement.dir === 'rtl'
+                ? flipPlacement(placement)
+                : placement,
         modifiers: deduplicatedModifiers,
     })
 

diff --git a/components/popper/src/popper.stories.js b/components/popper/src/popper.stories.js
@@ -1,5 +1,5 @@
 import { sharedPropTypes } from '@dhis2/ui-constants'
-import React, { useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Popper } from './popper.js'
 
 const description = `
@@ -143,3 +143,20 @@ export const VirtualElementRef = (args) => {
 }
 VirtualElementRef.args = { placement: 'left-end' }
 VirtualElementRef.parameters = { docs: { source: { type: 'code' } } }
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.documentElement.setAttribute('dir', 'rtl')
+        return () => {
+            document.documentElement.setAttribute('dir', 'ltr')
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <span>If dir=rtl, `left` and `right` placement are reversed</span>
+            <Template {...args} placement="left" />
+            <br />
+            <Template {...args} placement="right-start" />
+        </div>
+    )
+}
diff --git a/components/switch/src/switch/switch-icons.js b/components/switch/src/switch/switch-icons.js
@@ -116,13 +116,6 @@ export function SwitchRegular({ className }) {
                 // fill="#FFFFFF"
                 // fillRule="nonzero"
             ></path>
-            <path
-                transform="scale(-1, -1)"
-                d="M7.74451387,10.0285252 C7.39595738,10.1198564 7.12375034,10.3923519 7.03251575,10.7412777 C6.94128115,11.0902035 7.04521722,11.4612586 7.30437605,11.7118278 L10.2982384,14.7078028 C10.6875399,15.0973991 11.3185977,15.0973991 11.7078992,14.7078028 L16.695624,8.71585285 C16.9547828,8.46528367 17.0587189,8.09422851 16.9674843,7.74530271 C16.8762497,7.39637691 16.6040426,7.12388146 16.2554861,7.0325502 C15.9069296,6.94121893 15.5362672,7.04526513 15.2859632,7.30469855 L11.0030688,12.5910713 L8.71403676,10.3006735 C8.46373279,10.0412401 8.09307036,9.9371939 7.74451387,10.0285252 Z"
-                className="checkmarkRTL"
-                // fill="#FFFFFF"
-                // fillRule="nonzero"
-            ></path>
             <path
                 d="M11,20 C15.9705627,20 20,15.9705627 20,11 C20,6.02943725 15.9705627,2 11,2 C6.02943725,2 2,6.02943725 2,11 C2,15.9705627 6.02943725,20 11,20 Z"
                 className="handle handle-unchecked"

diff --git a/components/table/src/data-table/table-elements/__tests__/table-data-cell.test.js b/components/table/src/data-table/table-elements/__tests__/table-data-cell.test.js
@@ -71,7 +71,7 @@ describe('<TableDataCell>', () => {
         const left = '200px'
         const wrapper = shallow(<TableDataCell left={left} />)
 
-        expect(wrapper.html()).toContain(`left: ${left};`)
+        expect(wrapper.html()).toContain(`inset-inline-start: ${left};`)
     })
     it('accepts a muted prop', () => {
         const wrapper = shallow(<TableDataCell muted />)

diff --git a/components/table/src/data-table/table-elements/__tests__/table-header-cell.test.js b/components/table/src/data-table/table-elements/__tests__/table-header-cell.test.js
@@ -77,7 +77,7 @@ describe('<TableHeaderCell>', () => {
         const left = '200px'
         const wrapper = shallow(<TableHeaderCell left={left} />)
 
-        expect(wrapper.html()).toContain(`left: ${left};`)
+        expect(wrapper.html()).toContain(`inset-inline-start: ${left};`)
     })
     it('accepts an muted prop', () => {
         const wrapper = shallow(<TableHeaderCell muted />)

diff --git a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
@@ -62,7 +62,7 @@ export const TableDataCell = forwardRef(
                 <style jsx>{styles}</style>
                 <style jsx>{`
                     td {
-                        insert-inline-start: ${left};
+                        inset-inline-start: ${left};
                         text-align: ${align};
                         width: ${width};
                         background-color: ${backgroundColor || colors.white};

diff --git a/components/tooltip/src/tooltip.stories.js b/components/tooltip/src/tooltip.stories.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Tooltip } from './tooltip.js'
 
 const subtitle = 'Displayed when a user hovers over the element'
@@ -186,3 +186,18 @@ export const HidesWhenOutOfFrame = (args) => (
         <p>{"I'm an extra paragraph"}</p>
     </div>
 )
+
+export const RTLLeft = (args) => {
+    useEffect(() => {
+        document.documentElement.setAttribute('dir', 'rtl')
+        return () => {
+            document.documentElement.setAttribute('dir', 'ltr')
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <Template {...args} />
+        </div>
+    )
+}
+RTLLeft.args = { placement: 'left' }