feat: rtl for modal

dhis2 · Feb 5, 2024 · f269b2f · f269b2f
1 parent 6f45f8c
commit f269b2f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/components/modal/src/modal/close-button.js b/components/modal/src/modal/close-button.js
@@ -23,7 +23,7 @@ export const CloseButton = ({ onClick }) => (
                 border-radius: 3px;
                 position: absolute;
                 top: 0px;
-                right: 0px;
+                inset-inline-end: 0px;
             }
             button:hover {
                 background-color: ${colors.grey200};

diff --git a/components/modal/src/modal/modal.stories.js b/components/modal/src/modal/modal.stories.js
@@ -9,7 +9,7 @@ import {
 import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select'
 import { Tooltip } from '@dhis2-ui/tooltip'
 import { sharedPropTypes } from '@dhis2/ui-constants'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { ModalActions, ModalContent, ModalTitle } from '../index.js'
 import { Modal } from './modal.js'
 
@@ -991,3 +991,18 @@ FluidBottom.args = {
     position: 'bottom',
 }
 FluidBottom.storyName = 'Fluid (Bottom)'
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <SmallTitleContentAction {...args} />
+        </div>
+    )
+}
+RTL.args = { small: true, onClose }