Merge pull request #1437 from dhis2/select-clear

fix(select): adjust clear button
dhis2 · Mar 19, 2024 · e015c85 · e015c85
2 parents 2ce1318 + 06885f5
commit e015c85
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 18 deletions.
diff --git a/components/select/package.json b/components/select/package.json
@@ -33,7 +33,6 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2/prop-types": "^3.1.2",
         "@dhis2-ui/box": "9.4.2",
         "@dhis2-ui/button": "9.4.2",
         "@dhis2-ui/card": "9.4.2",
@@ -45,6 +44,8 @@
         "@dhis2-ui/loader": "9.4.2",
         "@dhis2-ui/popper": "9.4.2",
         "@dhis2-ui/status-icon": "9.4.2",
+        "@dhis2-ui/tooltip": "^9.4.2",
+        "@dhis2/prop-types": "^3.1.2",
         "@dhis2/ui-constants": "9.4.2",
         "@dhis2/ui-icons": "9.4.2",
         "classnames": "^2.3.1",

diff --git a/components/select/src/multi-select-field/features/has_default_clear_text.feature b/components/select/src/multi-select-field/features/has_default_clear_text.feature
@@ -2,4 +2,5 @@ Feature: Clear text for the MultiSelectField
 
     Scenario: Rendering a clearable MultiSelectField
         Given a clearable MultiSelectField with selected option is rendered
+        When the clear button is hovered
         Then the clear text is visible
diff --git a/components/select/src/multi-select-field/features/has_default_clear_text/index.js b/components/select/src/multi-select-field/features/has_default_clear_text/index.js
@@ -1,9 +1,16 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a clearable MultiSelectField with selected option is rendered', () => {
     cy.visitStory('MultiSelectField', 'With clearable and selected option')
 })
 
+When('the clear button is hovered', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-clear"]').trigger(
+        'mouseover',
+        'top'
+    )
+})
+
 Then('the clear text is visible', () => {
     cy.contains('Clear').should('be.visible')
 })
diff --git a/components/select/src/multi-select/input.js b/components/select/src/multi-select/input.js
@@ -24,7 +24,7 @@ const Input = ({
     inputMaxHeight,
 }) => {
     const hasSelection = selected.length > 0
-    const onClear = (_, e) => {
+    const onClear = (e) => {
         const data = { selected: [] }
 
         e.stopPropagation()
@@ -80,7 +80,6 @@ const Input = ({
 
                 .root-right {
                     margin-inline-start: auto;
-                    margin-inline-end: 10px;
                 }
             `}</style>
 

diff --git a/components/select/src/select/input-clear-button.js b/components/select/src/select/input-clear-button.js
@@ -1,18 +1,55 @@
-import { Button } from '@dhis2-ui/button'
+import { Tooltip } from '@dhis2-ui/tooltip'
+import { colors, theme } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 
 const InputClearButton = ({ onClear, clearText, className, dataTest }) => (
-    <Button
-        small
-        secondary
-        dataTest={dataTest}
-        onClick={onClear}
-        type="button"
-        className={className}
-    >
-        {clearText}
-    </Button>
+    <Tooltip openDelay={500} content={clearText}>
+        <button
+            data-test={dataTest}
+            onClick={onClear}
+            type="button"
+            className={className}
+        >
+            <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z"
+                    fill="none"
+                />
+            </svg>
+            <style jsx>{`
+                button {
+                    background: none;
+                    border: none;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    height: 24px;
+                    width: 24px;
+                    border-radius: 3px;
+                }
+                button svg path {
+                    fill: ${colors.grey500};
+                }
+                button:hover svg path {
+                    fill: ${colors.grey800};
+                }
+                button:hover {
+                    background: ${colors.grey200};
+                }
+                button:focus {
+                    outline: 2px solid ${theme.focus};
+                }
+            `}</style>
+        </button>
+    </Tooltip>
 )
 
 InputClearButton.propTypes = {

diff --git a/components/select/src/single-select-field/features/has_default_clear_text.feature b/components/select/src/single-select-field/features/has_default_clear_text.feature
@@ -2,4 +2,5 @@ Feature: Clear text for the SingleSelectField
 
     Scenario: Rendering a clearable SingleSelectField
         Given a clearable SingleSelectField with selected option is rendered
+        When the clear button is hovered
         Then the clear text is visible
diff --git a/components/select/src/single-select-field/features/has_default_clear_text/index.js b/components/select/src/single-select-field/features/has_default_clear_text/index.js
@@ -1,9 +1,16 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a clearable SingleSelectField with selected option is rendered', () => {
     cy.visitStory('SingleSelectField', 'With clearable and selected option')
 })
 
+When('the clear button is hovered', () => {
+    cy.get('[data-test="dhis2-uicore-singleselect-clear"]').trigger(
+        'mouseover',
+        'top'
+    )
+})
+
 Then('the clear text is visible', () => {
     cy.contains('Clear').should('be.visible')
 })
diff --git a/components/select/src/single-select/input.js b/components/select/src/single-select/input.js
@@ -24,7 +24,7 @@ const Input = ({
     inputMaxHeight,
 }) => {
     const hasSelection = selected && typeof selected === 'string'
-    const onClear = (_, e) => {
+    const onClear = (e) => {
         const data = { selected: '' }
 
         e.stopPropagation()
@@ -72,7 +72,6 @@ const Input = ({
 
                 .root-right {
                     margin-inline-start: auto;
-                    margin-inline-end: 10px;
                 }
             `}</style>