fix: highlight info icon when info popover is open

dhis2 · Nov 21, 2024 · a0893ad · a0893ad
1 parent 60a7a6e
commit a0893ad
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/components/DataDimension/ItemSelector.js b/src/components/DataDimension/ItemSelector.js
@@ -510,6 +510,7 @@ const ItemSelector = ({
                         /* eslint-disable react/prop-types */
                         {...props}
                         active={isActive(props.value)}
+                        showingInfo={currentDataItem?.id === props.value}
                         icon={getIcon(getItemType(props.value))}
                         dimensionType={getDimensionType({
                             type: getItemType(props.value),

diff --git a/src/components/DataDimension/TransferOption.js b/src/components/DataDimension/TransferOption.js
@@ -17,6 +17,7 @@ export const TransferOption = ({
     dimensionType,
     dataTest,
     itemsRef,
+    showingInfo,
     onEditClick,
     onInfoClick,
 }) => {
@@ -63,7 +64,9 @@ export const TransferOption = ({
             <div className={cx('group', 'nowrap', 'typeGroup')}>
                 <span className="type">{dimensionType}</span>
                 <span
-                    className="info"
+                    className={cx('info', {
+                        active: showingInfo,
+                    })}
                     ref={(node) => {
                         node
                             ? itemsRef.current.set(value, node)

diff --git a/src/components/DataDimension/styles/TransferOption.style.js b/src/components/DataDimension/styles/TransferOption.style.js
@@ -87,6 +87,9 @@ export default css`
         display: flex;
         align-items: center;
     }
+    .info.active {
+        background-color: ${colors.grey200};
+    }
 
     .highlighted {
         background: ${theme.secondary700};