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

.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',
+            },
+        ],
+    },
+}

d2.config.js

@@ -7,6 +7,8 @@ const config = {
 
     minDHIS2Version: '2.40',
 
+    direction: 'auto',
+
     pwa: {
         enabled: true,
         caching: {

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"
 

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"
     }
 }

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;
     }
 }

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;
     }
 }

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;
     }
 

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 {

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);
 }