Merge branch 'master' into title-bar-changes

dhis2 · Sep 26, 2024 · a851bd1 · a851bd1
2 parents 4ab6d36 + 9b3b585
commit a851bd1
Show file tree

Hide file tree

Showing 70 changed files with 1,345 additions and 2,073 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
@@ -12,7 +12,10 @@
 }
 
 .buttonPadding {
-    padding: 0 var(--spacers-dp8) 0 0;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 0;
+    padding-inline-end: var(--spacers-dp8);
     display: inline-flex;
 }
 
@@ -22,7 +25,7 @@
 }
 
 .chipsContainer {
-    min-height: 48px;
+    min-block-size: 48px;
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
@@ -35,7 +38,7 @@
 
     .controlsSmall {
         display: block;
-        margin-bottom: var(--spacers-dp4);
+        margin-block-end: var(--spacers-dp4);
     }
 
     .controlsLarge {
@@ -52,20 +55,20 @@
         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%;
     }
 
     .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
@@ -5,17 +5,20 @@
 .container {
     position: relative;
     background-color: var(--colors-white);
-    border-bottom: 1px solid var(--colors-grey300);
+    border-block-end: 1px solid var(--colors-grey300);
     overflow: hidden;
     box-sizing: border-box;
     flex: none;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
-    padding: 6px;
-    height: var(--user-rows-height);
-    width: 100%;
+    padding-block-start: 6px;
+    padding-block-end: 6px;
+    padding-inline-start: 6px;
+    padding-inline-end: 6px;
+    block-size: var(--user-rows-height);
+    inline-size: 100%;
     z-index: 1;
 }
 
@@ -24,7 +27,7 @@
 }
 
 .expanded .container {
-    height: var(--max-rows-height);
+    block-size: var(--max-rows-height);
     z-index: 1999;
     box-shadow: var(--elevations-e400);
 }
@@ -33,7 +36,7 @@
     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) {
@@ -65,7 +68,7 @@
 
     .expanded .spacer {
         display: block;
-        height: var(--min-rows-height);
+        block-size: var(--min-rows-height);
     }
 }
 
@@ -75,14 +78,14 @@
         padding: 6px 0 6px 6px;
     }
     .collapsed .container {
-        height: var(--min-rows-height);
+        block-size: var(--min-rows-height);
     }
 
     .expanded .container {
         position: absolute;
         display: flex;
         flex-direction: row;
-        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: transparent;
 }