fix(dimensions-panel): prevent movement of content in dimension item on hover [DHIS2-19046] (#1762)

Implements DHIS2-19046

This PR fixes issues displaying multiline content in the DimensionsItem shown in
DimensionsPanel. Movement of content on hover is prevented.
The OptionsButton and LockIcon now span full height.

Co-authored-by: Bruno Raimbault <[email protected]>
Co-authored-by: Jen Jones Arnesen <[email protected]>

Author: 3 people

src/__demo__/DimensionsPanel.stories.js

@@ -24,15 +24,19 @@ const fixedDimensions = [
 const dynamicDimensions = [
     {
         id: '0000001',
-        name: 'One',
+        name: 'Dietary diversity score based on variety of consumed food groups over a weekly period',
     },
     {
         id: '0000002',
-        name: 'Two',
+        name: 'Healthcare services access and utilization frequency including preventive check-ups and specialist care',
     },
     {
         id: '0000003',
-        name: 'Three',
+        name: 'Sleep quality index incorporating duration, time to sleep, frequency of awakenings, and restfulness',
+    },
+    {
+        id: '0000004',
+        name: 'Malaria incidence rate',
     },
 ]
 
@@ -156,3 +160,30 @@ export const WithMenu = () => {
 WithMenu.story = {
     name: 'with menu',
 }
+
+export const TextWrapping = () => {
+    return (
+        <div
+            style={{
+                width: '260px',
+                height: '400px',
+                borderInlineEnd: '1px dotted #CCC',
+                resize: 'both',
+                overflow: 'auto',
+            }}
+        >
+            <DimensionsPanel
+                dimensions={[...fixedDimensions, ...dynamicDimensions]}
+                onDimensionClick={onDimensionClick}
+                onDimensionOptionsClick={() => alert('options click')}
+                recommendedDimension={(dimension) => dimension === '0000002'}
+                lockedDimension={(dimension) => dimension === '0000003'}
+                selectedIds={['0000003', '0000002']}
+            />
+        </div>
+    )
+}
+
+TextWrapping.story = {
+    name: 'text wrapping',
+}

src/components/DimensionsPanel/List/OptionsButton.js

@@ -13,7 +13,7 @@ const OptionsButton = ({ onClick }) => (
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    height: 20px;
+                    height: 100%;
                     width: 20px;
                     padding: 0;
                     border: none;
@@ -24,8 +24,10 @@ const OptionsButton = ({ onClick }) => (
                     border-bottom-left-radius: 2px;
                 }
                 button:hover {
-                    background-color: rgba(0, 0, 0, 0.09);
+                    background-color: rgba(33, 41, 52, 0.08);
                 }
+                button:active {
+                    background-color: rgba(33, 41, 52, 0.13);
             `}
         </style>
     </>

src/components/DimensionsPanel/List/styles/DimensionItem.style.js

@@ -7,6 +7,7 @@ export default css`
         background-color: transparent;
         fill: ${colors.grey800};
         display: flex;
+        gap: 4px;
         outline: none;
         justify-content: space-between;
         padding: 0 0 0 4px;
@@ -28,12 +29,13 @@ export default css`
     }
     .labelWrapper {
         display: flex;
-        align-items: center;
+        padding: 2px 0;
     }
     .labelText {
         font-size: 13px;
         line-height: 15px;
         margin-top: 1px;
+        align-self: center;
     }
 
     .iconWrapper {
@@ -63,7 +65,8 @@ export default css`
 
     .optionsWrapper {
         width: 20px;
-        height: 20px;
+        flex-shrink: 0;
+        align-self: stretch;
     }
 
     .lockWrapper svg path {
@@ -72,7 +75,7 @@ export default css`
 
     .lockWrapper {
         background: ${colors.grey300};
-        height: 20px;
+        align-self: stretch;
         padding: 0 2px 0 3px;
         display: flex;
         align-items: center;