fix: dimension item design

dhis2 · Jun 29, 2023 · 4e011f3 · 4e011f3
1 parent 8f62037
commit 4e011f3
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 106 deletions.
diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js
@@ -8,7 +8,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 +27,16 @@ class DimensionItem extends Component {
     getDimensionIcon = () => {
         const Icon = getPredefinedDimensionProp(this.props.id, 'icon')
         return Icon ? (
-            <Icon style={styles.fixedDimensionIcon} />
+            <Icon className="fixed-dimension-icon" />
         ) : (
-            <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,17 +49,12 @@ class DimensionItem extends Component {
             onClick,
             onOptionsClick,
             innerRef,
-            style,
             dataTest,
             ...rest
         } = this.props
 
         const Icon = this.getDimensionIcon()
         const Label = this.getDimensionType()
-        const itemStyle =
-            isSelected && !isDeactivated
-                ? { ...styles.item, ...styles.selected }
-                : styles.item
 
         const optionsRef = createRef()
 
@@ -87,50 +72,51 @@ class DimensionItem extends Component {
                 onMouseOver={this.onMouseOver}
                 onMouseLeave={this.onMouseExit}
                 ref={innerRef}
-                style={Object.assign(
-                    {},
-                    itemStyle,
-                    style,
-                    !isDeactivated && styles.clickable
-                )}
+                className={`
+                item 
+                ${!isDeactivated ? `clickable` : `deactivated`}
+                ${isSelected && !isDeactivated ? `selected` : ``}
+                `}
                 data-test={dataTest}
                 onClick={onLabelClick}
                 {...rest}
             >
                 <div
-                    className="label"
+                    className={`
+                    label
+                    ${isDeactivated ? `label-deactivated` : ``}
+                    `}
                     tabIndex={0}
-                    style={styles.label}
                     data-test={`${dataTest}-button-${id}`}
                 >
-                    <div style={styles.iconWrapper}>{Icon}</div>
-                    <div style={styles.labelWrapper}>
+                    <div className="icon-wrapper">{Icon}</div>
+                    <div className="label-wrapper">
                         {Label}
                         <RecommendedIcon
                             isRecommended={isRecommended}
                             dataTest={`${dataTest}-recommended-icon`}
                         />
                     </div>
                     {isLocked && (
-                        <div style={styles.iconWrapper}>
+                        <div className="lock-wrapper">
                             <IconLock16 />
                         </div>
                     )}
                 </div>
                 {onOptionsClick ? (
                     <div
-                        style={styles.optionsWrapper}
+                        className="options-wrapper"
                         ref={optionsRef}
                         data-test={`${dataTest}-menu-${id}`}
                     >
                         {this.state.mouseOver && !isDeactivated && !isLocked ? (
                             <OptionsButton
-                                style={styles.optionsButton}
                                 onClick={this.onOptionsClick(id, optionsRef)}
                             />
                         ) : null}
                     </div>
                 ) : null}
+                <style jsx>{styles}</style>
             </li>
         )
     }
@@ -145,7 +131,6 @@ DimensionItem.propTypes = {
     isDeactivated: PropTypes.bool,
     isLocked: PropTypes.bool,
     isRecommended: PropTypes.bool,
-    style: PropTypes.object,
     onClick: PropTypes.func,
     onOptionsClick: PropTypes.func,
 }

diff --git a/src/components/DimensionsPanel/List/OptionsButton.js b/src/components/DimensionsPanel/List/OptionsButton.js
@@ -2,14 +2,35 @@ 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-radius: 4px;
+                }
+                button:hover {
+                    background-color: rgba(0, 0, 0, 0.12);
+                }
+            `}
+        </style>
+    </>
 )
 
 OptionsButton.propTypes = {
-    style: PropTypes.object,
     onClick: PropTypes.func,
 }
 

diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
@@ -1,67 +1,74 @@
 import { colors, theme } from '@dhis2/ui'
+import css from 'styled-jsx/css'
 
-export const styles = {
-    labelWrapper: {
-        padding: '2px 5px 2px 0',
-    },
-    text: {
-        color: colors.grey900,
-        userSelect: 'none',
-        wordBreak: 'break-word',
-        fontSize: '14px',
-    },
-    textDeactivated: {
-        cursor: 'auto',
-        color: colors.grey500,
-    },
-    item: {
-        display: 'flex',
-        minHeight: '24px',
-        marginTop: 3,
-        marginBottom: 3,
-        alignItems: 'center',
-        borderRadius: '2px',
-    },
-    clickable: {
-        cursor: 'pointer',
-    },
-    selected: {
-        backgroundColor: theme.secondary100,
-        fontWeight: 500,
-    },
-    fixedDimensionIcon: {
-        paddingLeft: '6px',
-        paddingBottom: '2px',
-    },
-    dynamicDimensionIcon: {
-        paddingLeft: '9px',
-        paddingRight: '9px',
-    },
-    iconWrapper: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '3px 8px 0 8px',
-    },
-    optionsWrapper: {
-        position: 'relative',
-        left: '5px',
-        width: '20px',
-        height: '20px',
-    },
-    optionsButton: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '20px',
-        width: '20px',
-        padding: 0,
-        border: 'none',
-        background: 'none',
-        outline: 'none',
-        cursor: 'pointer',
-    },
-    label: {
-        display: 'flex',
-        outline: 'none',
-    },
-}
+export default css`
+    .label {
+        display: flex;
+        outline: none;
+        color: ${colors.grey900};
+        user-select: none;
+        word-break: break-word;
+        font-size: 14px;
+    }
+    .label-wrapper {
+        padding: 2px 5px 2px 0;
+    }
+    .item {
+        display: flex;
+        min-height: 24px;
+        margin-top: 3px;
+        margin-bottom: 3px;
+        align-items: center;
+        border-radius: 2px;
+    }
+    .item:hover {
+        background-color: ${colors.grey200};
+    }
+    .item:active {
+        background-color: ${colors.grey300};
+    }
+    .deactivated {
+        color: ${colors.grey500};
+    }
+    .deactivated:hover {
+        background-color: transparent;
+        cursor: not-allowed;
+    }
+    .label-deactivated {
+        color: ${colors.grey500};
+    }
+    .clickable {
+        cursor: pointer;
+    }
+    .selected {
+        background-color: ${theme.secondary100};
+        font-weight: 500;
+    }
+    .selected:hover {
+        background-color: ${theme.secondary200};
+    }
+    .fixed-dimension-icon {
+        padding-left: 6px;
+        padding-bottom: 2px;
+    }
+    .dynamic-dimension-icon {
+        padding-left: 9px;
+        padding-right: 9px;
+    }
+    .icon-wrapper {
+        display: flex;
+        flex-direction: column;
+        padding: 3px 8px 0 8px;
+    }
+    .lock-wrapper {
+        display: flex;
+        align-items: center;
+        color: ${colors.grey600};
+    }
+    .options-wrapper {
+        position: relative;
+        left: 5px;
+        width: 20px;
+        height: 20px;
+    }
+`
diff --git a/src/components/DimensionsPanel/List/styles/DimensionList.style.js b/src/components/DimensionsPanel/List/styles/DimensionList.style.js
@@ -26,9 +26,10 @@ export default css`
     .header {
         text-transform: uppercase;
         font-size: 11px;
-        color: ${colors.grey700};
-        margin: 5px 0;
+        color: ${colors.grey600};
+        margin: 0 0 ${spacers.dp8} 0;
         letter-spacing: 0.3px;
+        font-weight: 400;
     }
     .section:not(:last-child) {
         margin-bottom: ${spacers.dp24};