feat: add rtl support for ui components (#1452)

dhis2 · Feb 16, 2024 · 19bffac · 19bffac
1 parent bb83b95
commit 19bffac
Show file tree

Hide file tree

Showing 152 changed files with 1,285 additions and 536 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,43 @@
+# [9.4.0-alpha.2](https://github.com/dhis2/ui/compare/v9.4.0-alpha.1...v9.4.0-alpha.2) (2024-02-16)
+
+
+### Bug Fixes
+
+* clean up from pr review ([#1456](https://github.com/dhis2/ui/issues/1456)) ([ced3e26](https://github.com/dhis2/ui/commit/ced3e26c90b586995706cfe14f5beda215e58f57))
+
+# [9.4.0-alpha.1](https://github.com/dhis2/ui/compare/v9.3.0...v9.4.0-alpha.1) (2024-02-14)
+
+
+### Bug Fixes
+
+* rtl cleanup ([#1450](https://github.com/dhis2/ui/issues/1450)) ([5f6761f](https://github.com/dhis2/ui/commit/5f6761f8b6154dc9d9b44b226d3562f4035cf536))
+
+
+### Features
+
+* rtl support for components [LIBS-525] ([#1448](https://github.com/dhis2/ui/issues/1448)) ([d8b5fec](https://github.com/dhis2/ui/commit/d8b5feccd4b20aa17c10f6fa9315e40daa03902a))
+
 # [9.3.0](https://github.com/dhis2/ui/compare/v9.2.0...v9.3.0) (2024-02-13)
 
 
 ### Features
 
 * update accessibility in button component ([0a015c7](https://github.com/dhis2/ui/commit/0a015c7fe9115edcaa5126daca0ef65f092c925e))
 
+# [9.3.0-alpha.2](https://github.com/dhis2/ui/compare/v9.3.0-alpha.1...v9.3.0-alpha.2) (2024-02-13)
+
+
+### Bug Fixes
+
+* rtl cleanup ([#1450](https://github.com/dhis2/ui/issues/1450)) ([5f6761f](https://github.com/dhis2/ui/commit/5f6761f8b6154dc9d9b44b226d3562f4035cf536))
+
+# [9.3.0-alpha.1](https://github.com/dhis2/ui/compare/v9.2.0...v9.3.0-alpha.1) (2024-02-08)
+
+
+### Features
+
+* rtl support for components [LIBS-525] ([#1448](https://github.com/dhis2/ui/issues/1448)) ([d8b5fec](https://github.com/dhis2/ui/commit/d8b5feccd4b20aa17c10f6fa9315e40daa03902a))
+
 # [9.2.0](https://github.com/dhis2/ui/compare/v9.1.2...v9.2.0) (2024-01-11)
 
 

diff --git a/collections/forms/package.json b/collections/forms/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-forms",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "sideEffects": [
@@ -35,15 +35,15 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/checkbox": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/file-input": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/radio": "9.3.0",
-        "@dhis2-ui/select": "9.3.0",
-        "@dhis2-ui/switch": "9.3.0",
-        "@dhis2-ui/text-area": "9.3.0",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/checkbox": "9.4.0-alpha.2",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/file-input": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/radio": "9.4.0-alpha.2",
+        "@dhis2-ui/select": "9.4.0-alpha.2",
+        "@dhis2-ui/switch": "9.4.0-alpha.2",
+        "@dhis2-ui/text-area": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "final-form": "^4.20.2",
         "prop-types": "^15.7.2",

diff --git a/collections/ui/API.md b/collections/ui/API.md
@@ -368,8 +368,10 @@ import { Chip } from '@dhis2/ui'
 |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`|
+|marginInlineEnd|number|||`margin-inline-end` value, applied in `px`|
+|marginInlineStart|number|||`margin-inline-start` value, applied in `px`|
+|marginLeft|number|||`margin-inline-start` value, applied in `px`|
+|marginRight|number|||`margin-inline-end` value, applied in `px`|
 |marginTop|number|`4`||`margin-top` value, applied in `px`|
 |overflow|boolean||||
 |selected|boolean||||

diff --git a/collections/ui/package.json b/collections/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
@@ -21,54 +21,54 @@
         "build": "d2-app-scripts build"
     },
     "dependencies": {
-        "@dhis2-ui/alert": "9.3.0",
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/calendar": "9.3.0",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/center": "9.3.0",
-        "@dhis2-ui/checkbox": "9.3.0",
-        "@dhis2-ui/chip": "9.3.0",
-        "@dhis2-ui/cover": "9.3.0",
-        "@dhis2-ui/css": "9.3.0",
-        "@dhis2-ui/divider": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/file-input": "9.3.0",
-        "@dhis2-ui/header-bar": "9.3.0",
-        "@dhis2-ui/help": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/intersection-detector": "9.3.0",
-        "@dhis2-ui/label": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/legend": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/logo": "9.3.0",
-        "@dhis2-ui/menu": "9.3.0",
-        "@dhis2-ui/modal": "9.3.0",
-        "@dhis2-ui/node": "9.3.0",
-        "@dhis2-ui/notice-box": "9.3.0",
-        "@dhis2-ui/organisation-unit-tree": "9.3.0",
-        "@dhis2-ui/pagination": "9.3.0",
-        "@dhis2-ui/popover": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2-ui/portal": "9.3.0",
-        "@dhis2-ui/radio": "9.3.0",
-        "@dhis2-ui/required": "9.3.0",
-        "@dhis2-ui/segmented-control": "9.3.0",
-        "@dhis2-ui/select": "9.3.0",
-        "@dhis2-ui/selector-bar": "9.3.0",
-        "@dhis2-ui/sharing-dialog": "9.3.0",
-        "@dhis2-ui/switch": "9.3.0",
-        "@dhis2-ui/tab": "9.3.0",
-        "@dhis2-ui/table": "9.3.0",
-        "@dhis2-ui/tag": "9.3.0",
-        "@dhis2-ui/text-area": "9.3.0",
-        "@dhis2-ui/tooltip": "9.3.0",
-        "@dhis2-ui/transfer": "9.3.0",
-        "@dhis2-ui/user-avatar": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-forms": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/alert": "9.4.0-alpha.2",
+        "@dhis2-ui/box": "9.4.0-alpha.2",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/calendar": "9.4.0-alpha.2",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/center": "9.4.0-alpha.2",
+        "@dhis2-ui/checkbox": "9.4.0-alpha.2",
+        "@dhis2-ui/chip": "9.4.0-alpha.2",
+        "@dhis2-ui/cover": "9.4.0-alpha.2",
+        "@dhis2-ui/css": "9.4.0-alpha.2",
+        "@dhis2-ui/divider": "9.4.0-alpha.2",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/file-input": "9.4.0-alpha.2",
+        "@dhis2-ui/header-bar": "9.4.0-alpha.2",
+        "@dhis2-ui/help": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/intersection-detector": "9.4.0-alpha.2",
+        "@dhis2-ui/label": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/legend": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/logo": "9.4.0-alpha.2",
+        "@dhis2-ui/menu": "9.4.0-alpha.2",
+        "@dhis2-ui/modal": "9.4.0-alpha.2",
+        "@dhis2-ui/node": "9.4.0-alpha.2",
+        "@dhis2-ui/notice-box": "9.4.0-alpha.2",
+        "@dhis2-ui/organisation-unit-tree": "9.4.0-alpha.2",
+        "@dhis2-ui/pagination": "9.4.0-alpha.2",
+        "@dhis2-ui/popover": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2-ui/portal": "9.4.0-alpha.2",
+        "@dhis2-ui/radio": "9.4.0-alpha.2",
+        "@dhis2-ui/required": "9.4.0-alpha.2",
+        "@dhis2-ui/segmented-control": "9.4.0-alpha.2",
+        "@dhis2-ui/select": "9.4.0-alpha.2",
+        "@dhis2-ui/selector-bar": "9.4.0-alpha.2",
+        "@dhis2-ui/sharing-dialog": "9.4.0-alpha.2",
+        "@dhis2-ui/switch": "9.4.0-alpha.2",
+        "@dhis2-ui/tab": "9.4.0-alpha.2",
+        "@dhis2-ui/table": "9.4.0-alpha.2",
+        "@dhis2-ui/tag": "9.4.0-alpha.2",
+        "@dhis2-ui/text-area": "9.4.0-alpha.2",
+        "@dhis2-ui/tooltip": "9.4.0-alpha.2",
+        "@dhis2-ui/transfer": "9.4.0-alpha.2",
+        "@dhis2-ui/user-avatar": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-forms": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "prop-types": "^15.7.2"
     },
     "peerDependencies": {

diff --git a/components/alert/package.json b/components/alert/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/alert",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Alert",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/portal": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/portal": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

diff --git a/components/alert/src/alert-bar/action.js b/components/alert/src/alert-bar/action.js
@@ -14,7 +14,7 @@ class Action extends Component {
                 {this.props.label}
                 <style jsx>{`
                     span {
-                        margin-right: ${spacers.dp12};
+                        margin-inline-end: ${spacers.dp12};
                         text-decoration: underline;
                         white-space: nowrap;
                     }

diff --git a/components/alert/src/alert-bar/actions.js b/components/alert/src/alert-bar/actions.js
@@ -21,8 +21,8 @@ const Actions = ({ actions, hide, dataTest }) => {
             ))}
             <style jsx>{`
                 div {
-                    margin-left: ${spacers.dp48};
-                    margin-right: -${spacers.dp12};
+                    margin-inline-start: ${spacers.dp48};
+                    margin-inline-end: -${spacers.dp12};
                 }
             `}</style>
         </div>

diff --git a/components/alert/src/alert-bar/alert-bar.stories.js b/components/alert/src/alert-bar/alert-bar.stories.js
@@ -108,6 +108,23 @@ export const States = () => (
     </React.Fragment>
 )
 
+export const RTL = () => (
+    <React.Fragment>
+        <div dir="rtl">
+            <AlertBar permanent>Default (info)</AlertBar>
+            <AlertBar permanent success>
+                Success
+            </AlertBar>
+            <AlertBar permanent warning>
+                Warning
+            </AlertBar>
+            <AlertBar permanent critical>
+                Critical
+            </AlertBar>
+        </div>
+    </React.Fragment>
+)
+
 export const AutoHiding = () => (
     <React.Fragment>
         <AlertBar permanent>Permanent never auto-hides</AlertBar>

diff --git a/components/alert/src/alert-bar/alert-bar.styles.js b/components/alert/src/alert-bar/alert-bar.styles.js
@@ -11,9 +11,9 @@ export default css`
         border-radius: 4px;
         box-shadow: ${elevations.e300};
         padding-top: ${spacers.dp8};
-        padding-right: ${spacers.dp8};
+        padding-inline-end: ${spacers.dp8};
         padding-bottom: ${spacers.dp8};
-        padding-left: ${spacers.dp24};
+        padding-inline-start: ${spacers.dp24};
         margin-bottom: ${spacers.dp16};
         max-width: 600px;
         min-width: 300px;

diff --git a/components/alert/src/alert-bar/dismiss.js b/components/alert/src/alert-bar/dismiss.js
@@ -8,7 +8,7 @@ const Dismiss = ({ onClick, dataTest }) => (
         <IconCross24 />
         <style jsx>{`
             div {
-                margin-left: ${spacers.dp16};
+                margin-inline-start: ${spacers.dp16};
                 min-height: 32px;
                 min-width: 32px;
                 display: flex;

diff --git a/components/alert/src/alert-bar/icon.js b/components/alert/src/alert-bar/icon.js
@@ -57,7 +57,7 @@ const Icon = ({ icon, success, warning, critical, info, dataTest }) => {
             )}
             <style jsx>{`
                 div {
-                    margin-right: ${spacers.dp16};
+                    margin-inline-end: ${spacers.dp16};
                 }
             `}</style>
         </div>

diff --git a/components/alert/src/alert-stack/alert-stack.js b/components/alert/src/alert-stack/alert-stack.js
@@ -12,9 +12,9 @@ export const AlertStack = ({ className, children, dataTest }) => (
                 div {
                     position: fixed;
                     top: auto;
-                    right: auto;
+                    inset-inline-end: auto;
                     bottom: 0;
-                    left: 50%;
+                    inset-inline-start: 50%;
                     transform: translateX(-50%);
 
                     z-index: ${layers.alert};
@@ -24,6 +24,10 @@ export const AlertStack = ({ className, children, dataTest }) => (
 
                     pointer-events: none;
                 }
+
+                div:dir(rtl) {
+                    transform: translateX(50%);
+                }
             `}</style>
         </div>
     </Portal>

diff --git a/components/alert/src/alert-stack/alert-stack.stories.js b/components/alert/src/alert-stack/alert-stack.stories.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { AlertBar } from '../alert-bar/index.js'
 import { AlertStack } from './alert-stack.js'
 
@@ -39,3 +39,30 @@ export const Default = (args) => (
         </AlertBar>
     </AlertStack>
 )
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <AlertStack {...args}>
+                <AlertBar permanent>
+                    First notification - I am at the bottom
+                </AlertBar>
+                <AlertBar permanent critical>
+                    Second notification
+                </AlertBar>
+                <AlertBar permanent warning>
+                    Third notification
+                </AlertBar>
+                <AlertBar permanent success>
+                    Fourth notification - I am at the top
+                </AlertBar>
+            </AlertStack>
+        </div>
+    )
+}
diff --git a/components/box/package.json b/components/box/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/box",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Box",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

diff --git a/components/button/package.json b/components/button/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Button",
     "repository": {
         "type": "git",
@@ -33,11 +33,11 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },