diff --git a/components/select/package.json b/components/select/package.json index 4c2d0e8b39..df691c0a95 100644 --- 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 index 368887c0e4..b7bc5e161d 100644 --- 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 index c166b76ca9..753f25815a 100644 --- 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 index cc0711345d..d43d5e1aec 100644 --- 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; } `} diff --git a/components/select/src/select/input-clear-button.js b/components/select/src/select/input-clear-button.js index cb965e9621..ceef7d656c 100644 --- 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 }) => ( - + + + ) 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 index 30518cc930..d593f6368a 100644 --- 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 index b5fb83fd06..52fe0661a1 100644 --- 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 index 9ab60a8679..4d2b4f4a1b 100644 --- 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; } `}