Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(select): adjust clear button #1437

Merged
merged 2 commits into from
Mar 19, 2024
+70 −18
Merged

fix(select): adjust clear button #1437

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
367f04c
fix(select): adjust clear button
cooper-joe Dec 6, 2023
06885f5
test(select): check clear button tooltip text
cooper-joe Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion components/select/package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
1 change: 1 addition & 0 deletions components/select/src/multi-select-field/features/has_default_clear_text.feature
View file
Original file line number Diff line number Diff line change
@@ -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
9 changes: 8 additions & 1 deletion components/select/src/multi-select-field/features/has_default_clear_text/index.js
View file
Original file line number Diff line number Diff line change
@@ -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')
})
3 changes: 1 addition & 2 deletions components/select/src/multi-select/input.js
View file
Original file line number Diff line number Diff line change
@@ -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>

59 changes: 48 additions & 11 deletions components/select/src/select/input-clear-button.js
View file
Original file line number Diff line number Diff line change
@@ -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 = {
1 change: 1 addition & 0 deletions components/select/src/single-select-field/features/has_default_clear_text.feature
View file
Original file line number Diff line number Diff line change
@@ -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
9 changes: 8 additions & 1 deletion components/select/src/single-select-field/features/has_default_clear_text/index.js
View file
Original file line number Diff line number Diff line change
@@ -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')
})
3 changes: 1 addition & 2 deletions components/select/src/single-select/input.js
View file
Original file line number Diff line number Diff line change
@@ -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>

Unchanged files with check annotations Beta

View file
components/alert/src/alert-bar/alert-bar.js
}
return clearAllTimeouts
}, [hidden])

Check warning on line 101 in components/alert/src/alert-bar/alert-bar.js

GitHub Actions / lint 

React Hook useEffect has missing dependencies: 'inDOM', 'runHideAnimation', and 'runShowAnimation'. Either include them or remove the dependency array
return !inDOM ? null : (
<div
View file
components/button/src/button/button.js
if (initialFocus && ref.current) {
ref.current.focus()
}
}, [initialFocus, ref.current])

Check warning on line 38 in components/button/src/button/button.js

GitHub Actions / lint 

React Hook useEffect has an unnecessary dependency: 'ref.current'. Either exclude it or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component
const handleClick = (event) => onClick && onClick({ value, name }, event)
const handleBlur = (event) => onBlur && onBlur({ value, name }, event)
View file
components/intersection-detector/src/intersection-detector.js
// the disconnect function for better readability.
return () => intersectionObserver.disconnect()
}
}, [rootRef.current, intersectionRef.current])

Check warning on line 62 in components/intersection-detector/src/intersection-detector.js

GitHub Actions / lint 

React Hook useEffect has missing dependencies: 'onChange', 'rootRef', and 'threshold'. Either include them or remove the dependency array. Mutable values like 'rootRef.current' aren't valid dependencies because mutating them doesn't re-render the component
return (
<div ref={intersectionRef} className={className} data-test={dataTest}>
View file
components/organisation-unit-tree/src/organisation-unit-node/use-open-state.js
onExpand({ path })
setOpenedOnce(true)
}
}, [autoExpand, openedOnceDueToError])

Check warning on line 29 in components/organisation-unit-tree/src/organisation-unit-node/use-open-state.js

GitHub Actions / lint 

React Hook useEffect has missing dependencies: 'onExpand' and 'path'. Either include them or remove the dependency array. If 'onExpand' changes too often, find the parent component that defines it and wrap that definition in useCallback
const open =
(autoExpand && !openedOnceDueToError) || !!expanded.includes(path)
View file
components/organisation-unit-tree/src/organisation-unit-node/use-org-children.js
return suppressAlphabeticalSorting
? orgUnit.children
: sortNodeChildrenAlphabetically(orgUnit.children)
}, [data, suppressAlphabeticalSorting])

Check warning on line 47 in components/organisation-unit-tree/src/organisation-unit-node/use-org-children.js

GitHub Actions / lint 

React Hook useMemo has a missing dependency: 'node.children'. Either include it or remove the dependency array
useEffect(() => {
if (onComplete && orgChildren && !onCompleteCalledRef.current) {
onComplete({ ...node, children: orgChildren })
onCompleteCalledRef.current = true
}
}, [onComplete, orgChildren, onCompleteCalledRef])

Check warning on line 55 in components/organisation-unit-tree/src/organisation-unit-node/use-org-children.js

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'node'. Either include it or remove the dependency array
return { called, loading, error: error || null, data: orgChildren }
}
View file
components/organisation-unit-tree/src/organisation-unit-tree/use-force-reload.js
useEffect(() => {
const nextReloadId = reloadId + 1
forceReload === true && setReloadId(nextReloadId)
}, [forceReload])

Check warning on line 19 in components/organisation-unit-tree/src/organisation-unit-tree/use-force-reload.js

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'reloadId'. Either include it or remove the dependency array
return reloadId
}
View file
components/sharing-dialog/src/autocomplete/sharing-autocomplete.js
* clear the selection.
*/
const debouncedRefetch = useCallback(debounce(refetch, 250), [refetch])

Check warning on line 37 in components/sharing-dialog/src/autocomplete/sharing-autocomplete.js

GitHub Actions / lint 

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead
useEffect(() => {
if (search && search === selected) {
onSelection(null)
setShowResults(false)
}
}, [search])

Check warning on line 50 in components/sharing-dialog/src/autocomplete/sharing-autocomplete.js

GitHub Actions / lint 

React Hook useEffect has missing dependencies: 'debouncedRefetch', 'onSelection', and 'selected'. Either include them or remove the dependency array. If 'onSelection' changes too often, find the parent component that defines it and wrap that definition in useCallback
// Concatenate all the results
let results = []
View file
components/sharing-dialog/src/sharing-dialog.js
useEffect(() => {
refetch({ type, id })
}, [type, id])

Check warning on line 88 in components/sharing-dialog/src/sharing-dialog.js

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'refetch'. Either include it or remove the dependency array
/**
* Block interaction during the initial load