From dd293b21a4f794114c80fe3baaff2e717f770461 Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Fri, 16 Feb 2024 15:07:35 +0100
Subject: [PATCH 1/6] fix: chip default margins

---
 components/chip/src/chip.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/components/chip/src/chip.js b/components/chip/src/chip.js
index c349c509cb..cf4249e585 100644
--- a/components/chip/src/chip.js
+++ b/components/chip/src/chip.js
@@ -100,10 +100,10 @@ const Chip = ({
         <style jsx>{`
             span {
                 ${marginBottom && `margin-bottom: ${marginBottom}px;`}
-                ${marginLeft &&
-                `margin-inline-start: ${marginInlineStart ?? marginLeft}px;`}
-                ${marginRight &&
-                `margin-inline-end: ${marginInlineEnd ?? marginRight}px;`}
+                ${marginInlineStart &&
+                `margin-inline-start: ${marginLeft ?? marginInlineStart}px;`}
+                ${marginInlineEnd &&
+                `margin-inline-end: ${marginRight ?? marginInlineEnd}px;`}
                 ${marginTop && `margin-top: ${marginTop}px`}
             }
         `}</style>
@@ -113,8 +113,6 @@ const Chip = ({
 Chip.defaultProps = {
     dataTest: 'dhis2-uicore-chip',
     marginBottom: 4,
-    marginLeft: 4,
-    marginRight: 4,
     marginInlineStart: 4,
     marginInlineEnd: 4,
     marginTop: 4,

From 1e297f70084b920795e0660d6ae17c4c51f8b5ee Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Fri, 16 Feb 2024 15:14:35 +0100
Subject: [PATCH 2/6] fix: sharing dialog story, remove invalid comment

---
 components/sharing-dialog/src/sharing-dialog.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/sharing-dialog/src/sharing-dialog.stories.js b/components/sharing-dialog/src/sharing-dialog.stories.js
index 96b263f74e..72181e4479 100644
--- a/components/sharing-dialog/src/sharing-dialog.stories.js
+++ b/components/sharing-dialog/src/sharing-dialog.stories.js
@@ -265,7 +265,7 @@ export const RTL = (args) => {
         </div>
     )
 }
-// Have this be the primary story on the docs page
+
 RTL.parameters = {
     docs: { disable: false, source: { type: 'dynamic' } },
 }

From c09a69c47b8d9c0908ec79fee87a485853111a3d Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Fri, 16 Feb 2024 15:15:08 +0100
Subject: [PATCH 3/6] fix: transfer icons style placement

---
 components/transfer/src/icons.js | 150 +++++++++++++++----------------
 1 file changed, 71 insertions(+), 79 deletions(-)

diff --git a/components/transfer/src/icons.js b/components/transfer/src/icons.js
index b39d47ff7f..ddbda732c4 100644
--- a/components/transfer/src/icons.js
+++ b/components/transfer/src/icons.js
@@ -13,31 +13,29 @@ const centerButtonStyles = css`
 `
 
 export const IconAddAll = ({ dataTest, disabled }) => (
-    <>
-        <div className="centerButton">
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                data-test={dataTest}
-                fill={disabled ? theme.disabled : '#404B5A'}
-            >
-                <g fillRule="evenodd">
-                    <polygon
-                        fillRule="nonzero"
-                        points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
-                    />
+    <div className="centerButton">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+            fill={disabled ? theme.disabled : '#404B5A'}
+        >
+            <g fillRule="evenodd">
+                <polygon
+                    fillRule="nonzero"
+                    points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
+                />
 
-                    <polygon
-                        fillRule="nonzero"
-                        points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
-                    />
-                </g>
-            </svg>
-        </div>
+                <polygon
+                    fillRule="nonzero"
+                    points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
+                />
+            </g>
+        </svg>
         <style jsx>{centerButtonStyles}</style>
-    </>
+    </div>
 )
 
 IconAddAll.propTypes = {
@@ -46,21 +44,19 @@ IconAddAll.propTypes = {
 }
 
 export const IconAddIndividual = ({ dataTest, disabled }) => (
-    <>
-        <div className="centerButton">
-            <svg
-                fill={disabled ? theme.disabled : '#404B5A'}
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                data-test={dataTest}
-            >
-                <polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
-            </svg>
-        </div>
+    <div className="centerButton">
+        <svg
+            fill={disabled ? theme.disabled : '#404B5A'}
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+        >
+            <polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
+        </svg>
         <style jsx>{centerButtonStyles}</style>
-    </>
+    </div>
 )
 
 IconAddIndividual.propTypes = {
@@ -69,33 +65,31 @@ IconAddIndividual.propTypes = {
 }
 
 export const IconRemoveAll = ({ dataTest, disabled }) => (
-    <>
-        <div className="centerButton">
-            <svg
-                fill={disabled ? theme.disabled : '#404B5A'}
-                width="16px"
-                height="16px"
-                viewBox="0 0 16 16"
-                data-test={dataTest}
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <g fillRule="evenodd">
-                    <polygon
-                        fillRule="nonzero"
-                        points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
-                        transform="matrix(-1 0 0 1 20 0)"
-                    />
+    <div className="centerButton">
+        <svg
+            fill={disabled ? theme.disabled : '#404B5A'}
+            width="16px"
+            height="16px"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g fillRule="evenodd">
+                <polygon
+                    fillRule="nonzero"
+                    points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
+                    transform="matrix(-1 0 0 1 20 0)"
+                />
 
-                    <polygon
-                        fillRule="nonzero"
-                        points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
-                        transform="matrix(-1 0 0 1 7.06 0)"
-                    />
-                </g>
-            </svg>
-        </div>
+                <polygon
+                    fillRule="nonzero"
+                    points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
+                    transform="matrix(-1 0 0 1 7.06 0)"
+                />
+            </g>
+        </svg>
         <style jsx>{centerButtonStyles}</style>
-    </>
+    </div>
 )
 
 IconRemoveAll.propTypes = {
@@ -104,24 +98,22 @@ IconRemoveAll.propTypes = {
 }
 
 export const IconRemoveIndividual = ({ dataTest, disabled }) => (
-    <>
-        <div className="centerButton">
-            <svg
-                fill={disabled ? theme.disabled : '#404B5A'}
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                data-test={dataTest}
-            >
-                <polygon
-                    points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
-                    transform="matrix(-1 0 0 1 16 0)"
-                />
-            </svg>
-        </div>
+    <div className="centerButton">
+        <svg
+            fill={disabled ? theme.disabled : '#404B5A'}
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+        >
+            <polygon
+                points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
+                transform="matrix(-1 0 0 1 16 0)"
+            />
+        </svg>
         <style jsx>{centerButtonStyles}</style>
-    </>
+    </div>
 )
 
 IconRemoveIndividual.propTypes = {

From 0407bdfc738f73eabcb305bfd6df476bd4792be6 Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Fri, 16 Feb 2024 15:26:01 +0100
Subject: [PATCH 4/6] fix: rotate chevron in menu

---
 components/menu/src/menu-item/menu-item.stories.js | 11 +++++++++++
 components/menu/src/menu-item/menu-item.styles.js  |  4 ++++
 2 files changed, 15 insertions(+)

diff --git a/components/menu/src/menu-item/menu-item.stories.js b/components/menu/src/menu-item/menu-item.stories.js
index ff4607aa06..3f1464a714 100644
--- a/components/menu/src/menu-item/menu-item.stories.js
+++ b/components/menu/src/menu-item/menu-item.stories.js
@@ -166,3 +166,14 @@ SubMenus.parameters = {
         },
     },
 }
+
+export const RTLSuffixAndChevron = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)
+RTLSuffixAndChevron.args = {
+    label: 'Security notifications',
+    chevron: true,
+    suffix: <Tag>3</Tag>,
+}
diff --git a/components/menu/src/menu-item/menu-item.styles.js b/components/menu/src/menu-item/menu-item.styles.js
index 40b20fe646..ce68600a38 100644
--- a/components/menu/src/menu-item/menu-item.styles.js
+++ b/components/menu/src/menu-item/menu-item.styles.js
@@ -109,6 +109,10 @@ export default css`
         margin-inline-start: ${spacers.dp24};
     }
 
+    .chevron:dir(rtl) {
+        transform: rotate(180deg);
+    }
+
     li.dense .icon {
         margin-inline-end: ${spacers.dp8};
         width: 16px;

From 583daca75bdacc2d0e4830c47ce8a4546c2dc711 Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Fri, 16 Feb 2024 15:30:11 +0100
Subject: [PATCH 5/6] fix: remove unnecessary global operator

---
 components/pagination/src/page-controls.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/pagination/src/page-controls.js b/components/pagination/src/page-controls.js
index 420255b046..6d3e5a7e1c 100644
--- a/components/pagination/src/page-controls.js
+++ b/components/pagination/src/page-controls.js
@@ -61,7 +61,7 @@ const PageControls = ({
                 padding-inline-end: 0;
                 margin-inline-start: ${spacers.dp4};
             }
-            div :global(.navigator-icon:dir(rtl)) {
+            div .navigator-icon:dir(rtl) {
                 transform: rotate(180deg);
             }
         `}</style>

From 9e6793dd2527812fd2e4138a6807a760e079f738 Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Fri, 16 Feb 2024 15:41:55 +0100
Subject: [PATCH 6/6] fix: refine chip margin logic

---
 components/chip/src/chip.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/chip/src/chip.js b/components/chip/src/chip.js
index cf4249e585..221bf677cd 100644
--- a/components/chip/src/chip.js
+++ b/components/chip/src/chip.js
@@ -6,6 +6,8 @@ import { Content } from './content.js'
 import { Icon } from './icon.js'
 import { Remove } from './remove.js'
 
+const DEFAULT_INLINE_MARGIN = '4'
+
 const Chip = ({
     selected,
     dense,
@@ -100,10 +102,12 @@ const Chip = ({
         <style jsx>{`
             span {
                 ${marginBottom && `margin-bottom: ${marginBottom}px;`}
-                ${marginInlineStart &&
-                `margin-inline-start: ${marginLeft ?? marginInlineStart}px;`}
-                ${marginInlineEnd &&
-                `margin-inline-end: ${marginRight ?? marginInlineEnd}px;`}
+                margin-inline-start: ${marginInlineStart ??
+                marginLeft ??
+                DEFAULT_INLINE_MARGIN}px;
+                margin-inline-end: ${marginInlineEnd ??
+                marginRight ??
+                DEFAULT_INLINE_MARGIN}px;
                 ${marginTop && `margin-top: ${marginTop}px`}
             }
         `}</style>
@@ -113,8 +117,6 @@ const Chip = ({
 Chip.defaultProps = {
     dataTest: 'dhis2-uicore-chip',
     marginBottom: 4,
-    marginInlineStart: 4,
-    marginInlineEnd: 4,
     marginTop: 4,
 }