feat: improve support for right-to-left languages (#3073)

Implements DHIS2-16778 Key features * Use logical CSS properties instead of physical properties throughout the project (done automatically with a tool) * Update the cli-style to a version that supports checking logical properties Description This PR implements better support for right-to-left languages in the app, by leveraging the use of logical CSS properties that are independent of language direction, rather than physical properties (i.e. *-start instead of -left and *-end instead *-right). Logical properties are widely supported now and they should become the default way for layout going-forward to ensure that we support RTL languages without extra development burden (will be enforced by d2 style). The better support for RTL builds on top of previous work done in the platform, namely: * changing the UI library to support RTL: feat: rtl support for components [LIBS-525] ui#1448 * introducing an opt-in option in d2.config that allows apps to declare they're ready to support RT. The platform changes also takes care of setting the correct direction and language for the header among other things: feat: add configurable dir for language directions to app adapter [DHIS2-16480] app-platform#825 * updates to cli-style to enforce and apply rules for using logical CSS properties: feat: add stylelint cli-style#464 --------- Co-authored-by: Martin <martin@moid.se> Co-authored-by: @dhis2-bot <apps@dhis2.org> Co-authored-by: Jen Jones Arnesen <jennifer@dhis2.org>
dhis2 · Oct 7, 2024 · 777b36d · 777b36d
1 parent f88382b
commit 777b36d
Show file tree

Hide file tree

Showing 59 changed files with 837 additions and 516 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1,13 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.stylelint],
+    rules: {
+        'csstools/use-logical': [
+            true,
+            {
+                severity: 'error',
+            },
+        ],
+    },
+}
diff --git a/d2.config.js b/d2.config.js
@@ -7,6 +7,8 @@ const config = {
 
     minDHIS2Version: '2.40',
 
+    direction: 'auto',
+
     pwa: {
         enabled: true,
         caching: {

diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
         "cy:run": "start-server-and-test 'yarn start:nobrowser' http://localhost:3000 'yarn cypress run --browser chrome headless --env networkMode=live'"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^10.3.9",
-        "@dhis2/cli-style": "^10.5.1",
+        "@dhis2/cli-app-scripts": "^11.3.0",
+        "@dhis2/cli-style": "^10.7.3",
         "@dhis2/cypress-commands": "^10.0.3",
         "@dhis2/cypress-plugins": "^10.0.2",
         "@reportportal/agent-js-cypress": "git+https://github.com/dhis2/agent-js-cypress.git#develop",
@@ -44,7 +44,7 @@
     },
     "dependencies": {
         "@dhis2/analytics": "^26.8.1",
-        "@dhis2/app-runtime": "^3.7.0",
+        "@dhis2/app-runtime": "^3.10.4",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
         "@dhis2/d2-i18n": "^1.1.0",

diff --git a/src/components/App.css b/src/components/App.css
@@ -1,7 +1,7 @@
 /* App */
 
 .data-visualizer-app {
-    height: 100%;
+    block-size: 100%;
     background-color: var(--colors-grey300);
     overflow: hidden;
 }
@@ -34,7 +34,7 @@ body {
 /* Headerbar */
 
 .section-headerbar {
-    height: 48px;
+    block-size: 48px;
 }
 
 /* Main */
@@ -43,14 +43,14 @@ body {
 }
 
 .main-left {
-    min-width: 260px;
+    min-inline-size: 260px;
 }
 
 .main-right {
     flex: 1 1 0%;
-    max-width: 380px;
+    max-inline-size: 380px;
     background-color: var(--colors-grey100);
-    border-left: 1px solid var(--colors-grey400);
+    border-inline-start: 1px solid var(--colors-grey400);
     box-shadow: 1px 0 -2px 0 rgba(0, 0, 0, 0.03);
     overflow-y: auto;
     overflow-x: hidden;
@@ -61,7 +61,7 @@ body {
 .main-center-canvas {
     display: flex;
     justify-content: center;
-    height: 100%;
+    block-size: 100%;
     overflow: hidden;
     position: relative;
 }

diff --git a/src/components/AxesTabs/AxesTabs.js b/src/components/AxesTabs/AxesTabs.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import VerticalTab from '../VerticalTabBar/VerticalTab.js'
 import VerticalTabBar from '../VerticalTabBar/VerticalTabBar.js'
-import { tabSectionTitle } from '../VisualizationOptions/styles/VisualizationOptions.style.js'
+import tabStyles from '../VisualizationOptions/styles/VisualizationOptions.module.css'
 import styles from './styles/AxesTabs.module.css'
 
 const AxesTabs = ({ items, dataTest }) => {
@@ -24,12 +24,11 @@ const AxesTabs = ({ items, dataTest }) => {
                 </VerticalTabBar>
             </div>
             <div className={styles.content}>
-                <span className={tabSectionTitle.className}>
+                <span className={tabStyles.tabSectionTitle}>
                     {items[selectedTabIndex].label}
                 </span>
                 {items[selectedTabIndex].content}
             </div>
-            {tabSectionTitle.styles}
         </>
     )
 }

diff --git a/src/components/AxesTabs/styles/AxesTabs.module.css b/src/components/AxesTabs/styles/AxesTabs.module.css
@@ -1,11 +1,10 @@
 .tabs {
-    width: 200px;
+    inline-size: 200px;
     position: absolute;
-    top: 136px; /* modal title + horizontal tab bar height */
-    bottom: 84px; /* modal actions section height */
+    inset-block: 136px 84px; /* modal title + horizontal tab bar height */ /* modal actions section height */
     z-index: 1;
 }
 
 .content {
-    margin-left: 200px;
+    margin-inline-start: 200px;
 }
diff --git a/src/components/DetailsPanel/styles/DetailsPanel.module.css b/src/components/DetailsPanel/styles/DetailsPanel.module.css
@@ -1,3 +1,3 @@
 .panel {
-    width: 380px;
+    inline-size: 380px;
 }
diff --git a/src/components/DimensionsPanel/Dialogs/styles/DialogManager.module.css b/src/components/DimensionsPanel/Dialogs/styles/DialogManager.module.css
@@ -1,3 +1,3 @@
 .tabs {
-    padding-bottom: var(--spacers-dp16);
+    padding-block-end: var(--spacers-dp16);
 }
diff --git a/src/components/DimensionsPanel/styles/DndDimensionList.module.css b/src/components/DimensionsPanel/styles/DndDimensionList.module.css
@@ -1,19 +1,19 @@
 .container {
     position: relative;
     flex: 1 1 0%;
-    min-height: 30vh;
+    min-block-size: 30vh;
 }
 
 .wrapper {
     position: absolute;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     overflow: auto;
-    margin-top: 0px;
+    margin-block-start: 0px;
     padding: var(--spacers-dp8);
     background: var(--colors-white);
-    border-top: 1px solid var(--colors-grey300);
-    border-bottom: 1px solid var(--colors-grey300);
+    border-block-start: 1px solid var(--colors-grey300);
+    border-block-end: 1px solid var(--colors-grey300);
 }
 
 .list {
@@ -28,11 +28,14 @@
     text-transform: uppercase;
     font-size: 11px;
     color: var(--colors-grey600);
-    margin: 0 0 var(--spacers-dp8) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--spacers-dp8);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
     letter-spacing: 0.3px;
     font-weight: 400;
 }
 
 .section:not(:last-child) {
-    margin-bottom: var(--spacers-dp24);
+    margin-block-end: var(--spacers-dp24);
 }
diff --git a/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css b/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css
@@ -1,15 +1,18 @@
 .container {
-    height: 100%;
+    block-size: 100%;
     display: flex;
     flex-direction: column;
     background-color: var(--colors-grey100);
-    border-right: 1px solid var(--colors-grey400);
+    border-inline-end: 1px solid var(--colors-grey400);
     box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.03);
     padding: 0;
     overflow: hidden;
 }
 
 .filter {
-    padding: var(--spacers-dp8) var(--spacers-dp8) 0 var(--spacers-dp8);
+    padding-block-start: var(--spacers-dp8);
+    padding-block-end: 0;
+    padding-inline-start: var(--spacers-dp8);
+    padding-inline-end: var(--spacers-dp8);
     background: var(--colors-white);
 }
diff --git a/src/components/DownloadMenu/ModalDownloadDropdown.module.css b/src/components/DownloadMenu/ModalDownloadDropdown.module.css
@@ -1,4 +1,4 @@
 .container {
-    margin-top: var(--spacers-dp12);
-    margin-bottom: var(--spacers-dp16);
+    margin-block-start: var(--spacers-dp12);
+    margin-block-end: var(--spacers-dp16);
 }
diff --git a/src/components/IconButton/styles/IconButton.module.css b/src/components/IconButton/styles/IconButton.module.css
@@ -10,9 +10,12 @@
     padding: 0;
     vertical-align: middle;
     border-radius: 0;
-    width: 20px;
-    height: 20px;
-    margin: 0px 0px 0px 2px;
+    inline-size: 20px;
+    block-size: 20px;
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    margin-inline-start: 2px;
+    margin-inline-end: 0px;
     color: var(--colors-grey700);
 }
 

diff --git a/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css b/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css
@@ -1,10 +1,10 @@
 .content {
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     align-items: flex-start;
     align-content: flex-start;
     flex-wrap: wrap;
-    min-height: 26px;
+    min-block-size: 26px;
 }
 
 .content > div {

diff --git a/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js b/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js
@@ -11,7 +11,7 @@ export default {
         padding: layoutStyle.AXIS_PADDING,
     },
     axisContainerLeft: {
-        borderLeftWidth: 0,
+        borderInlineStartWidth: 0,
     },
     label: {
         minWidth: 55,

diff --git a/src/components/Layout/ScatterLayout/styles/ScatterAxis.style.js b/src/components/Layout/ScatterLayout/styles/ScatterAxis.style.js
@@ -12,7 +12,7 @@ export default {
         padding: layoutStyle.AXIS_PADDING,
     },
     axisContainerLeft: {
-        borderLeftWidth: 0,
+        borderInlineStartWidth: 0,
     },
     label: {
         minWidth: 55,

diff --git a/src/components/Layout/styles/Chip.module.css b/src/components/Layout/styles/Chip.module.css
@@ -1,5 +1,5 @@
 .chip {
-    max-width: 400px;
+    max-inline-size: 400px;
     display: flex;
     align-items: center;
     background-color: var(--colors-teal100);
@@ -40,27 +40,39 @@
 }
 
 .fixedDimensionIcon {
-    padding: 0 4px;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 4px;
+    padding-inline-end: 4px;
 }
 
 .leftIconWrapper {
-    padding: 0 4px;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 4px;
+    padding-inline-end: 4px;
     display: flex;
     align-items: center;
 }
 
 .warningIconWrapper {
-    padding-left: 2px;
-    height: 20px;
+    padding-inline-start: 2px;
+    block-size: 20px;
     display: flex;
     align-items: center;
 }
 
 .lockIconWrapper {
     background: #cbe7e5;
-    height: 20px;
-    padding: 0 2px 0 3px;
-    margin: 0 0 0 2px;
+    block-size: 20px;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 3px;
+    padding-inline-end: 2px;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 2px;
+    margin-inline-end: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -89,19 +101,22 @@
     overflow: hidden;
     text-overflow: ellipsis;
     display: flex;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
+    border-start-end-radius: 0px;
+    border-end-end-radius: 0px;
     align-items: center;
-    min-height: 20px;
-    margin: 0 2px 0 0;
+    min-block-size: 20px;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 2px;
 }
 
 .chipRight {
-    padding-left: 0px;
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
+    padding-inline-start: 0px;
+    border-start-start-radius: 0px;
+    border-end-start-radius: 0px;
     display: flex;
-    height: 20px;
+    block-size: 20px;
 }
 
 .chipRight + .lockIconWrapper {
@@ -113,10 +128,13 @@
     font-size: 11px;
     background: #c5e4e3;
     border-radius: 2px;
-    margin-left: 4px;
-    min-width: 12px;
+    margin-inline-start: 4px;
+    min-inline-size: 12px;
     text-align: center;
-    padding: 2px 2px 1px 2px;
+    padding-block-start: 2px;
+    padding-block-end: 1px;
+    padding-inline-start: 2px;
+    padding-inline-end: 2px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

diff --git a/src/components/Layout/styles/Tooltip.style.js b/src/components/Layout/styles/Tooltip.style.js
@@ -32,6 +32,6 @@ export const styles = {
     },
     label: {
         whiteSpace: 'normal',
-        marginLeft: '6px',
+        marginInlineStart: '6px',
     },
 }
diff --git a/src/components/Snackbar/styles/Snackbar.module.css b/src/components/Snackbar/styles/Snackbar.module.css
@@ -1,6 +1,6 @@
 .container {
     position: fixed;
-    bottom: 0;
-    left: 50%;
+    inset-block-end: 0;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
 }
diff --git a/src/components/TitleBar/styles/TitleBar.style.js b/src/components/TitleBar/styles/TitleBar.style.js
@@ -17,7 +17,7 @@ export default {
         fontSize: '14px',
     },
     suffix: {
-        paddingLeft: '4px',
+        paddingInlineStart: '4px',
     },
     titleUnsaved: {
         color: colors.grey500,

diff --git a/src/components/VerticalTabBar/styles/VerticalTab.module.css b/src/components/VerticalTabBar/styles/VerticalTab.module.css
@@ -10,7 +10,7 @@
 .selected,
 .selected:hover {
     background: var(--colors-blue050);
-    border-right: 4px solid var(--colors-blue700);
+    border-inline-end: 4px solid var(--colors-blue700);
     color: var(--colors-blue700);
-    margin-right: -1px;
+    margin-inline-end: -1px;
 }