feat: improve support for right-to-left languages in Dashboard app (#…

…2985) 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 (and automatically converting physical to 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 (which will be enforced by d2 style). Although the change set is big. It's mostly done automatically using d2 style apply css which under the hood uses stylelint to enforce and apply the rules. 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
dhis2 · Sep 26, 2024 · 9b3b585 · 9b3b585
1 parent 85b3da8
commit 9b3b585
Show file tree

Hide file tree

Showing 72 changed files with 1,349 additions and 2,087 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1,14 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.stylelint],
+    rules: {
+        'csstools/use-logical': [
+            true,
+            {
+                // overriding the default config to error since this should be all fixed in this repo
+                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/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-03-19T12:31:03.302Z\n"
-"PO-Revision-Date: 2024-03-19T12:31:03.302Z\n"
+"POT-Creation-Date: 2024-08-27T07:26:05.058Z\n"
+"PO-Revision-Date: 2024-08-27T07:26:05.060Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -322,6 +322,9 @@ msgstr "Show fewer"
 msgid "Show more"
 msgstr "Show more"
 
+msgid "Open visualization in new tab"
+msgstr "Open visualization in new tab"
+
 msgid "Insert"
 msgstr "Insert"
 

diff --git a/package.json b/package.json
@@ -6,10 +6,10 @@
     "license": "BSD-3-Clause",
     "dependencies": {
         "@dhis2/analytics": "^26.8.2",
-        "@dhis2/app-runtime": "^3.10.2",
+        "@dhis2/app-runtime": "^3.10.6",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/d2-i18n": "^1.1.3",
-        "@dhis2/ui": "^9.2.0",
+        "@dhis2/ui": "^9.11.3",
         "@krakenjs/post-robot": "^11.0.0",
         "classnames": "^2.3.2",
         "d2": "^31.10.0",
@@ -46,8 +46,8 @@
         "@badeball/cypress-cucumber-preprocessor": "^20.1.0",
         "@bahmutov/cypress-esbuild-preprocessor": "^2.2.1",
         "@cypress/webpack-preprocessor": "^6.0.2",
-        "@dhis2/cli-app-scripts": "^10.3.10",
-        "@dhis2/cli-style": "^10.5.1",
+        "@dhis2/cli-app-scripts": "^11.7.1",
+        "@dhis2/cli-style": "^10.7.3",
         "@dhis2/cypress-commands": "^10.0.6",
         "@dhis2/cypress-plugins": "^10.0.6",
         "@semantic-release/changelog": "^6",
@@ -70,8 +70,5 @@
         "moduleNameMapper": {
             "^.+\\.(css|sass|scss)$": "identity-obj-proxy"
         }
-    },
-    "resolutions": {
-        "@dhis2/ui": "^9.2.0"
     }
 }
diff --git a/src/components/DashboardsBar/styles/Chip.module.css b/src/components/DashboardsBar/styles/Chip.module.css
@@ -6,11 +6,11 @@
 
 .labelWithAdornment {
     position: relative;
-    top: -2px;
+    inset-block-start: -2px;
 }
 
 .adornment {
-    margin-left: var(--spacers-dp4);
+    margin-inline-start: var(--spacers-dp4);
     fill: var(--colors-grey600);
 }
 
@@ -19,9 +19,12 @@
 }
 
 .progressIndicator {
-    margin: 0 0 0 4px !important;
-    width: 16px !important;
-    height: 16px !important;
+    margin-block-start: 0 !important;
+    margin-block-end: 0 !important;
+    margin-inline-start: 4px !important;
+    margin-inline-end: 0 !important;
+    inline-size: 16px !important;
+    block-size: 16px !important;
 }
 
 .progressIndicator.selected {
@@ -30,6 +33,9 @@
 
 @media only screen and (max-width: 480px) {
     .link {
-        margin: 0 -2px;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: -2px;
+        margin-inline-end: -2px;
     }
 }
diff --git a/src/components/DashboardsBar/styles/ClearButton.module.css b/src/components/DashboardsBar/styles/ClearButton.module.css
@@ -2,8 +2,8 @@
     border: none;
     border-radius: 50%;
     cursor: pointer;
-    width: 24px;
-    height: 24px;
+    inline-size: 24px;
+    block-size: 24px;
 }
 
 .button > span {
@@ -17,13 +17,13 @@
 }
 
 .icon {
-    width: 16px;
-    height: 16px;
+    inline-size: 16px;
+    block-size: 16px;
 }
 
 @media only screen and (max-width: 480px) {
     .button {
-        margin-bottom: var(--spacers-dp4);
-        margin-right: 1px;
+        margin-block-end: var(--spacers-dp4);
+        margin-inline-end: 1px;
     }
 }
diff --git a/src/components/DashboardsBar/styles/Content.module.css b/src/components/DashboardsBar/styles/Content.module.css
@@ -9,11 +9,14 @@
 .controlsLarge {
     display: inline-flex;
     position: relative;
-    top: 5px;
+    inset-block-start: 5px;
 }
 
 .buttonPadding {
-    padding: 2px var(--spacers-dp8) 0 var(--spacers-dp8);
+    padding-block-start: 2px;
+    padding-block-end: 0;
+    padding-inline-start: var(--spacers-dp8);
+    padding-inline-end: var(--spacers-dp8);
     display: inline-flex;
 }
 
@@ -23,7 +26,7 @@
 }
 
 .chipsContainer {
-    min-height: 40px;
+    min-block-size: 40px;
 }
 
 @media only screen and (max-width: 480px) {
@@ -33,7 +36,7 @@
 
     .controlsSmall {
         display: block;
-        margin-bottom: var(--spacers-dp4);
+        margin-block-end: var(--spacers-dp4);
     }
 
     .controlsLarge {
@@ -44,33 +47,36 @@
         display: flex;
         overflow-x: auto;
         overflow-y: hidden;
-        padding: var(--spacers-dp4) 0 var(--spacers-dp4) var(--spacers-dp4);
+        padding-block-start: var(--spacers-dp4);
+        padding-block-end: var(--spacers-dp4);
+        padding-inline-start: var(--spacers-dp4);
+        padding-inline-end: 0;
     }
 
     .container.expanded {
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        padding-top: var(--spacers-dp12);
-        padding-left: var(--spacers-dp8);
+        padding-block-start: var(--spacers-dp12);
+        padding-inline-start: var(--spacers-dp8);
     }
 
     .expanded .chipsContainer .controls {
-        margin-left: var(--spacers-dp4);
-        margin-right: var(--spacers-dp8);
-        width: 100%;
+        margin-inline-start: var(--spacers-dp4);
+        margin-inline-end: var(--spacers-dp8);
+        inline-size: 100%;
     }
 
     .chipsContainer {
-        margin-bottom: -4px;
-        padding-right: 2px;
-        min-height: 0;
+        margin-block-end: -4px;
+        padding-inline-end: 2px;
+        min-block-size: 0;
     }
 
     .expanded .chipsContainer {
         overflow-x: hidden;
         overflow-y: auto;
-        padding-right: 6px;
+        padding-inline-end: 6px;
         flex: 1;
     }
 

diff --git a/src/components/DashboardsBar/styles/DashboardsBar.module.css b/src/components/DashboardsBar/styles/DashboardsBar.module.css
@@ -11,31 +11,34 @@
     flex: none;
     display: flex;
     flex-direction: column;
-    height: var(--user-rows-height);
-    width: 100%;
+    block-size: var(--user-rows-height);
+    inline-size: 100%;
     z-index: 1;
 }
 
 .content {
-    padding: 10px 6px 0 6px;
+    padding-block-start: 10px;
+    padding-block-end: 0;
+    padding-inline-start: 6px;
+    padding-inline-end: 6px;
     overflow: hidden;
-    margin-bottom: 21px; /* to make space for the show more button */
+    margin-block-end: 21px; /* to make space for the show more button */
 }
 
 .expanded .content {
     overflow-y: auto;
 }
 
 .expanded .container {
-    height: var(--max-rows-height);
+    block-size: var(--max-rows-height);
     z-index: 1999;
 }
 
 .spacer {
     display: none;
     box-sizing: border-box;
     flex: none;
-    height: var(--user-rows-height);
+    block-size: var(--user-rows-height);
 }
 
 @media only screen and (min-width: 481px) {
@@ -66,21 +69,21 @@
 
     .expanded .spacer {
         display: block;
-        height: var(--min-rows-height);
+        block-size: var(--min-rows-height);
     }
 }
 
 /* phone LANDSCAPE MODE or small screen */
 @media only screen and (max-height: 480px), only screen and (max-width: 480px) {
     .collapsed .container {
-        height: var(--min-rows-height);
+        block-size: var(--min-rows-height);
     }
 
     .expanded .container {
         position: absolute;
         display: flex;
         flex-direction: column;
-        height: var(--sm-expanded-controlbar-height);
+        block-size: var(--sm-expanded-controlbar-height);
     }
 
     .expanded .content {

diff --git a/src/components/DashboardsBar/styles/DragHandle.module.css b/src/components/DashboardsBar/styles/DragHandle.module.css
@@ -1,19 +1,19 @@
 .draghandle {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     cursor: ns-resize;
     transition: all ease-out 75ms;
-    height: 7px;
+    block-size: 7px;
 }
 
 .draghandle:after {
     content: '';
     position: absolute;
-    bottom: 0;
-    height: 3px;
-    width: 100%;
+    inset-block-end: 0;
+    block-size: 3px;
+    inline-size: 100%;
     background: var(--colors-white);
 }