feat: improve support for right-to-left languages in Data Visualiser

.stylelintrc.js

@@ -0,0 +1,13 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.stylelint],
+    rules: {
+        'csstools/use-logical': [
+            true,
+            {
+                severity: 'error',
+            },
+        ],
+    },
+}

d2.config.js

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

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

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

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

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

src/components/DetailsPanel/styles/DetailsPanel.module.css

@@ -1,3 +1,3 @@
 .panel {
-    width: 380px;
+    inline-size: 380px;
 }

src/components/DimensionsPanel/Dialogs/styles/DialogManager.module.css

@@ -1,3 +1,3 @@
 .tabs {
-    padding-bottom: var(--spacers-dp16);
+    padding-block-end: var(--spacers-dp16);
 }

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

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

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

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

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 {

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,

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,

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;

src/components/Layout/styles/Tooltip.style.js

@@ -32,6 +32,6 @@ export const styles = {
     },
     label: {
         whiteSpace: 'normal',
-        marginLeft: '6px',
+        marginInlineStart: '6px',
     },
 }

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

src/components/TitleBar/styles/TitleBar.style.js

@@ -17,7 +17,7 @@ export default {
         fontSize: '14px',
     },
     suffix: {
-        paddingLeft: '4px',
+        paddingInlineStart: '4px',
     },
     titleUnsaved: {
         color: colors.grey500,

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