fix: dimension list design (DHIS2-16270)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "26.6.9",
+    "version": "999.9.9-chip-alpha.5",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
@@ -35,7 +35,7 @@
         "@dhis2/cli-app-scripts": "^9.0.1",
         "@dhis2/cli-style": "^10.4.1",
         "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/ui": "^9.2.0",
+        "@dhis2/ui": "^9.4.4",
         "@sambego/storybook-state": "^2.0.1",
         "@storybook/addons": "^6.5.16",
         "@storybook/preset-create-react-app": "^3.1.7",

src/__demo__/DimensionsPanel.stories.js

@@ -94,6 +94,7 @@ storiesOf('DimensionsPanel', module).add('locked dimension', () => {
         <DimensionsPanel
             dimensions={[...fixedDimensions, ...dynamicDimensions]}
             onDimensionClick={onDimensionClick}
+            selectedIds={[DIMENSION_ID_DATA]}
             lockedDimension={(dimension) => dimension === DIMENSION_ID_DATA}
         />
     )

src/assets/DynamicDimensionIcon.js

@@ -3,49 +3,24 @@ import React from 'react'
 const DynamicDimensionIcon = () => {
     return (
         <svg
-            width="16px"
-            height="16px"
-            viewBox="0 0 16 16"
-            version="1.1"
+            width="16"
+            height="16"
+            fill="none"
             xmlns="http://www.w3.org/2000/svg"
         >
-            <g
-                id="Exp"
-                stroke="none"
-                strokeWidth="1"
-                fill="none"
-                fillRule="evenodd"
-            >
-                <g id="Artboard" transform="translate(-80.000000, -9.000000)">
-                    <g
-                        id="icon_dimension_new"
-                        transform="translate(80.000000, 9.000000)"
-                    >
-                        <rect id="frame" x="0" y="0" width="16" height="16" />
-                        <g
-                            id="module"
-                            transform="translate(4.000000, 4.000000)"
-                            stroke="#000000"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                        >
-                            <path
-                                d="M0.33209728,1.1742111 L3.16308174,0.0641666694 C3.37911767,-0.0213888898 3.61963794,-0.0213888898 3.83567387,0.0641666694 L6.66665833,1.1742111 C6.87300668,1.26220739 7.00497003,1.467 6.99984343,1.69127776 L6.99984343,5.30887771 C7.00517859,5.53285411 6.87376309,5.73756106 6.66790272,5.82594437 L3.83691826,6.93629991 C3.62076407,7.02123336 3.38048032,7.02123336 3.16432613,6.93629991 L0.333341668,5.82594437 C0.126993317,5.73794808 -0.00497002591,5.53315547 0.000156574133,5.30887771 L0.000156574133,1.69127776 C-0.00517858533,1.46730136 0.126236906,1.26259441 0.33209728,1.1742111 Z"
-                                id="Shape"
-                            />
-                            <path
-                                d="M3.5,2.72795833 L0.322,1.48195833"
-                                id="Shape"
-                            />
-                            <path
-                                d="M3.5,2.72795833 L6.678,1.48195833"
-                                id="Shape"
-                            />
-                            <path d="M3.5,6.78125 L3.5,2.72795833" id="Shape" />
-                        </g>
-                    </g>
-                </g>
-            </g>
+            <path
+                clipRule="evenodd"
+                d="m4.832 5.674 2.831-1.11a.913.913 0 0 1 .673 0l2.83 1.11a.548.548 0 0 1 .334.517V9.81a.548.548 0 0 1-.332.517l-2.831 1.11a.92.92 0 0 1-.673 0l-2.83-1.11a.548.548 0 0 1-.334-.517V6.19a.548.548 0 0 1 .332-.517Z"
+                stroke="#212934"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M8 7.228 4.822 5.982M8 7.228l3.178-1.246M8 11.281V7.228"
+                stroke="#212934"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
         </svg>
     )
 }

src/components/DimensionsPanel/List/DimensionItem.js

@@ -1,4 +1,5 @@
-import { IconLock16 } from '@dhis2/ui'
+import { CssVariables } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component, createRef } from 'react'
 import DynamicDimensionIcon from '../../../assets/DynamicDimensionIcon.js'
@@ -8,7 +9,7 @@ import {
 } from '../../../modules/predefinedDimensions.js'
 import OptionsButton from './OptionsButton.js'
 import RecommendedIcon from './RecommendedIcon.js'
-import { styles } from './styles/DimensionItem.style.js'
+import styles from './styles/DimensionItem.style.js'
 
 class DimensionItem extends Component {
     state = { mouseOver: false }
@@ -27,26 +28,16 @@ class DimensionItem extends Component {
     getDimensionIcon = () => {
         const Icon = getPredefinedDimensionProp(this.props.id, 'icon')
         return Icon ? (
-            <Icon style={styles.fixedDimensionIcon} />
+            <Icon className="fixedDimensionIcon" />
         ) : (
-            <DynamicDimensionIcon style={styles.dynamicDimensionIcon} />
+            <DynamicDimensionIcon className="dynamic-dimension-icon" />
         )
     }
 
     getDimensionType = () => {
-        const { id, name, isDeactivated } = this.props
+        const { id, name } = this.props
 
-        return (
-            <span
-                data-dimensionid={id}
-                style={{
-                    ...styles.text,
-                    ...(isDeactivated ? styles.textDeactivated : {}),
-                }}
-            >
-                {name}
-            </span>
-        )
+        return <span data-dimensionid={id}>{name}</span>
     }
 
     render() {
@@ -59,20 +50,37 @@ class DimensionItem extends Component {
             onClick,
             onOptionsClick,
             innerRef,
-            style,
             dataTest,
+            className,
             ...rest
         } = this.props
 
         const Icon = this.getDimensionIcon()
         const Label = this.getDimensionType()
-        const itemStyle =
-            isSelected && !isDeactivated
-                ? { ...styles.item, ...styles.selected }
-                : styles.item
 
         const optionsRef = createRef()
 
+        const LockIcon = (
+            <>
+                <div className="lockWrapper">
+                    <svg
+                        width="7"
+                        height="9"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
+                            fill="none"
+                        />
+                    </svg>
+                </div>
+                <style jsx>{styles}</style>
+            </>
+        )
+
         const onLabelClick = () => {
             if (
                 !isDeactivated &&
@@ -83,55 +91,58 @@ class DimensionItem extends Component {
         }
 
         return (
-            <li
-                onMouseOver={this.onMouseOver}
-                onMouseLeave={this.onMouseExit}
-                ref={innerRef}
-                style={Object.assign(
-                    {},
-                    itemStyle,
-                    style,
-                    !isDeactivated && styles.clickable
-                )}
-                data-test={dataTest}
-                onClick={onLabelClick}
-                {...rest}
-            >
-                <div
-                    className="label"
-                    tabIndex={0}
-                    style={styles.label}
-                    data-test={`${dataTest}-button-${id}`}
-                >
-                    <div style={styles.iconWrapper}>{Icon}</div>
-                    <div style={styles.labelWrapper}>
-                        {Label}
-                        <RecommendedIcon
-                            isRecommended={isRecommended}
-                            dataTest={`${dataTest}-recommended-icon`}
-                        />
-                    </div>
-                    {isLocked && (
-                        <div style={styles.iconWrapper}>
-                            <IconLock16 />
-                        </div>
+            <>
+                <CssVariables colors />
+                <li
+                    onMouseOver={this.onMouseOver}
+                    onMouseLeave={this.onMouseExit}
+                    ref={innerRef}
+                    className={cx(
+                        'item',
+                        {
+                            deactivated: isDeactivated,
+                            selected: isSelected && !isDeactivated,
+                        },
+                        className
                     )}
-                </div>
-                {onOptionsClick ? (
+                    data-test={dataTest}
+                    onClick={onLabelClick}
+                    {...rest}
+                >
                     <div
-                        style={styles.optionsWrapper}
-                        ref={optionsRef}
-                        data-test={`${dataTest}-menu-${id}`}
+                        className="label"
+                        tabIndex={0}
+                        data-test={`${dataTest}-button-${id}`}
                     >
-                        {this.state.mouseOver && !isDeactivated && !isLocked ? (
-                            <OptionsButton
-                                style={styles.optionsButton}
-                                onClick={this.onOptionsClick(id, optionsRef)}
+                        <div className="iconWrapper">{Icon}</div>
+                        <div className="labelWrapper">
+                            <span className="labelText">{Label}</span>
+                            <RecommendedIcon
+                                isRecommended={isRecommended}
+                                dataTest={`${dataTest}-recommended-icon`}
                             />
-                        ) : null}
+                        </div>
                     </div>
-                ) : null}
-            </li>
+                    {onOptionsClick && !isDeactivated && !isLocked ? (
+                        <div
+                            className="optionsWrapper"
+                            ref={optionsRef}
+                            data-test={`${dataTest}-menu-${id}`}
+                        >
+                            {this.state.mouseOver ? (
+                                <OptionsButton
+                                    onClick={this.onOptionsClick(
+                                        id,
+                                        optionsRef
+                                    )}
+                                />
+                            ) : null}
+                        </div>
+                    ) : null}
+                    {isLocked && LockIcon}
+                </li>
+                <style jsx>{styles}</style>
+            </>
         )
     }
 }
@@ -140,12 +151,12 @@ DimensionItem.propTypes = {
     id: PropTypes.string.isRequired,
     isSelected: PropTypes.bool.isRequired, // XXX
     name: PropTypes.string.isRequired,
+    className: PropTypes.string,
     dataTest: PropTypes.string,
     innerRef: PropTypes.func,
     isDeactivated: PropTypes.bool,
     isLocked: PropTypes.bool,
     isRecommended: PropTypes.bool,
-    style: PropTypes.object,
     onClick: PropTypes.func,
     onOptionsClick: PropTypes.func,
 }

src/components/DimensionsPanel/List/OptionsButton.js

@@ -2,14 +2,36 @@ import { IconMore16 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const OptionsButton = ({ style, onClick }) => (
-    <button style={style} onClick={onClick}>
-        <IconMore16 />
-    </button>
+const OptionsButton = ({ onClick }) => (
+    <>
+        <button onClick={onClick}>
+            <IconMore16 />
+        </button>
+        <style jsx>
+            {`
+                button {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 20px;
+                    width: 20px;
+                    padding: 0;
+                    border: none;
+                    background: none;
+                    outline: none;
+                    cursor: pointer;
+                    border-top-right-radius: 2px;
+                    border-bottom-left-radius: 2px;
+                }
+                button:hover {
+                    background-color: rgba(0, 0, 0, 0.09);
+                }
+            `}
+        </style>
+    </>
 )
 
 OptionsButton.propTypes = {
-    style: PropTypes.object,
     onClick: PropTypes.func,
 }
 

src/components/DimensionsPanel/List/RecommendedIcon.js

@@ -9,7 +9,6 @@ const RecommendedIcon = ({ isRecommended, dataTest }) =>
         <Tooltip
             content={i18n.t('Dimension recommended with selected data')}
             placement="bottom"
-            maxWidth={160}
         >
             <div style={styles.recommendedIcon} data-test={dataTest} />
         </Tooltip>