fix(color and icon picker): add remove icon btn & adjust styles accor…

…ding to specs
dhis2 · Oct 25, 2023 · c18f7f0 · c18f7f0
1 parent f557dd0
commit c18f7f0
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 67 deletions.
diff --git a/src/components/ColorAndIconPicker/ColorAndIconPicker.tsx b/src/components/ColorAndIconPicker/ColorAndIconPicker.tsx
@@ -17,7 +17,6 @@ export function ColorAndIconPicker({
     return (
         <div className={classes.container}>
             <ColorPicker color={color} onColorPick={onColorPick} />
-
             <IconPicker icon={icon} onIconPick={onIconPick} />
         </div>
     )

diff --git a/src/components/ColorAndIconPicker/ColorPicker.module.css b/src/components/ColorAndIconPicker/ColorPicker.module.css
@@ -3,7 +3,7 @@
     gap: var(--spacers-dp8);
     padding: var(--spacers-dp8);
     border-radius: 3px;
-    border: 1px solid var(--colors-grey600);
+    border: 1px solid var(--colors-grey500);
     background: var(--colors-white);
     width: 68px;
     cursor: pointer;
@@ -15,7 +15,8 @@
     justify-content: center;
     height: 26px;
     width: 26px;
-    border: 1px solid var(--colors-black);
+    border: 1px dashed var(--colors-grey400);
+    border-radius: 2px;
 }
 
 .hasColor .chosenColor {

diff --git a/src/components/ColorAndIconPicker/ColorPicker.tsx b/src/components/ColorAndIconPicker/ColorPicker.tsx
@@ -1,57 +1,10 @@
-import {
-    IconChevronDown16,
-    IconChevronUp16,
-    IconEmptyFrame24,
-    Layer,
-    Popper,
-} from '@dhis2/ui'
+import { IconChevronDown16, IconChevronUp16, Layer, Popper } from '@dhis2/ui'
 import cx from 'classnames'
 import React, { useRef, useState } from 'react'
 import { SwatchesPicker } from 'react-color'
+import { AVAILABLE_COLORS } from './availableColors'
 import classes from './ColorPicker.module.css'
 
-const COLORS = [
-    [
-        '#ffcdd2',
-        '#e57373',
-        '#d32f2f',
-        '#f06292',
-        '#c2185b',
-        '#880e4f',
-        '#f50057',
-    ],
-    [
-        '#e1bee7',
-        '#ba68c8',
-        '#8e24aa',
-        '#aa00ff',
-        '#7e57c2',
-        '#4527a0',
-        '#7c4dff',
-        '#6200ea',
-    ],
-    ['#c5cae9', '#7986cb', '#3949ab', '#304ffe'],
-    ['#e3f2fd', '#64b5f6', '#1976d2', '#0288d1'],
-    ['#40c4ff', '#00b0ff', '#80deea'],
-    ['#00acc1', '#00838f', '#006064'],
-    ['#e0f2f1', '#80cbc4', '#00695c', '#64ffda'],
-    ['#c8e6c9', '#66bb6a', '#2e7d32', '#1b5e20'],
-    ['#00e676', '#aed581', '#689f38', '#33691e'],
-    ['#76ff03', '#64dd17', '#cddc39', '#9e9d24', '#827717'],
-    [
-        '#fff9c4',
-        '#fbc02d',
-        '#f57f17',
-        '#ffff00',
-        '#ffcc80',
-        '#ffccbc',
-        '#ffab91',
-    ],
-    ['#bcaaa4', '#8d6e63', '#4e342e'],
-    ['#fafafa', '#bdbdbd', '#757575', '#424242'],
-    ['#cfd8dc', '#b0bec5', '#607d8b', '#37474f'],
-]
-
 export function ColorPicker({
     onColorPick,
     color = '',
@@ -74,9 +27,7 @@ export function ColorPicker({
                 <div
                     className={classes.chosenColor}
                     style={{ background: color }}
-                >
-                    {!color && <IconEmptyFrame24 />}
-                </div>
+                />
 
                 <div className={classes.openCloseIconContainer}>
                     {showPicker ? <IconChevronUp16 /> : <IconChevronDown16 />}
@@ -88,7 +39,7 @@ export function ColorPicker({
                     <Popper placement="bottom-start" reference={ref}>
                         <div className={classes.colors}>
                             <SwatchesPicker
-                                presetColors={COLORS}
+                                presetColors={AVAILABLE_COLORS}
                                 color={color}
                                 onChangeComplete={({
                                     hex,

diff --git a/src/components/ColorAndIconPicker/IconPicker.module.css b/src/components/ColorAndIconPicker/IconPicker.module.css
@@ -3,7 +3,7 @@
     gap: var(--spacers-dp8);
     padding: var(--spacers-dp8);
     border-radius: 3px;
-    border: 1px solid var(--colors-grey600);
+    border: 1px solid var(--colors-grey500);
     background: var(--colors-white);
     width: 68px;
     cursor: pointer;
@@ -15,7 +15,13 @@
     justify-content: center;
     height: 26px;
     width: 26px;
-    border: 1px solid var(--colors-black);
+    border: 1px dashed var(--colors-grey400);
+    border-radius: 2px;
+}
+
+.hasIcon .chosenIcon {
+    border: 0;
+    border-radius: 0;
 }
 
 .iconImage {
@@ -24,10 +30,6 @@
     height: auto;
 }
 
-.hasIcon .chosenIcon {
-    border: 0;
-}
-
 .openCloseIconContainer {
     display: flex;
     align-items: center;

diff --git a/src/components/ColorAndIconPicker/IconPicker.tsx b/src/components/ColorAndIconPicker/IconPicker.tsx
@@ -1,4 +1,4 @@
-import { IconChevronDown16, IconChevronUp16, IconEmptyFrame24 } from '@dhis2/ui'
+import { IconChevronDown16, IconChevronUp16 } from '@dhis2/ui'
 import cx from 'classnames'
 import React, { useState } from 'react'
 import classes from './IconPicker.module.css'
@@ -25,7 +25,6 @@ export function IconPicker({
                 })}
             >
                 <div className={classes.chosenIcon}>
-                    {!icon && <IconEmptyFrame24 />}
                     {selectedIcon && (
                         <img
                             className={classes.iconImage}
@@ -42,6 +41,7 @@ export function IconPicker({
 
             {showPicker && (
                 <IconPickerModal
+                    selected={icon}
                     onCancel={() => setShowPicker(false)}
                     onChange={({ icon }) => {
                         onIconPick({ icon })

diff --git a/src/components/ColorAndIconPicker/IconPickerModal.tsx b/src/components/ColorAndIconPicker/IconPickerModal.tsx
@@ -19,15 +19,17 @@ import { useIconsQuery, Icon } from './useIconsQuery'
 type TabName = 'all' | 'positive' | 'negative' | 'outline'
 
 export function IconPickerModal({
+    selected,
     onChange,
     onCancel,
 }: {
+    selected: string
     onChange: ({ icon }: { icon: string }) => void
     onCancel: () => void
 }) {
     const [searchValue, setSearchValue] = useState('')
     const [activeTab, setActiveTab] = useState<TabName>('all')
-    const [icon, setIcon] = useState('')
+    const [icon, setIcon] = useState(selected)
     const icons = useIconsQuery()
     const displayIcons = searchValue
         ? filterIcons(icons.data[activeTab], searchValue)
@@ -107,11 +109,15 @@ export function IconPickerModal({
                         disabled={!icon}
                         onClick={() => onChange({ icon })}
                     >
-                        Select
+                        {i18n.t('Select')}
+                    </Button>
+
+                    <Button onClick={() => onChange({ icon: '' })}>
+                        {i18n.t('Remove icon')}
                     </Button>
 
                     <Button secondary onClick={onCancel}>
-                        Cancel
+                        {i18n.t('Cancel')}
                     </Button>
                 </ButtonStrip>
             </ModalActions>

diff --git a/src/components/ColorAndIconPicker/availableColors.ts b/src/components/ColorAndIconPicker/availableColors.ts
@@ -0,0 +1,41 @@
+export const AVAILABLE_COLORS = [
+    [
+        '#ffcdd2',
+        '#e57373',
+        '#d32f2f',
+        '#f06292',
+        '#c2185b',
+        '#880e4f',
+        '#f50057',
+    ],
+    [
+        '#e1bee7',
+        '#ba68c8',
+        '#8e24aa',
+        '#aa00ff',
+        '#7e57c2',
+        '#4527a0',
+        '#7c4dff',
+        '#6200ea',
+    ],
+    ['#c5cae9', '#7986cb', '#3949ab', '#304ffe'],
+    ['#e3f2fd', '#64b5f6', '#1976d2', '#0288d1'],
+    ['#40c4ff', '#00b0ff', '#80deea'],
+    ['#00acc1', '#00838f', '#006064'],
+    ['#e0f2f1', '#80cbc4', '#00695c', '#64ffda'],
+    ['#c8e6c9', '#66bb6a', '#2e7d32', '#1b5e20'],
+    ['#00e676', '#aed581', '#689f38', '#33691e'],
+    ['#76ff03', '#64dd17', '#cddc39', '#9e9d24', '#827717'],
+    [
+        '#fff9c4',
+        '#fbc02d',
+        '#f57f17',
+        '#ffff00',
+        '#ffcc80',
+        '#ffccbc',
+        '#ffab91',
+    ],
+    ['#bcaaa4', '#8d6e63', '#4e342e'],
+    ['#fafafa', '#bdbdbd', '#757575', '#424242'],
+    ['#cfd8dc', '#b0bec5', '#607d8b', '#37474f'],
+]