youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-04 01:18:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): add hover clear button for provider search (#32707)

Browse Source 
Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
This commit is contained in:
-LAN-
2026-02-27 20:42:30 +08:00
committed by GitHub
parent f9196f7bea
commit f73be8d69e
6 changed files with 51 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/base/input/index.spec.tsx
View File

@ -43,7 +43,7 @@ describe('Input component', () => {
it('shows left icon when showLeftIcon is true', () => {
render(<Input showLeftIcon />)
const searchIcon = document.querySelector('svg')
const searchIcon = document.querySelector('.i-ri-search-line')
expect(searchIcon).toBeInTheDocument()
const input = screen.getByPlaceholderText('Search')
expect(input).toHaveClass('pl-[26px]')
@ -51,7 +51,7 @@ describe('Input component', () => {
it('shows clear icon when showClearIcon is true and has value', () => {
render(<Input showClearIcon value="test" />)
const clearIcon = document.querySelector('.group svg')
const clearIcon = document.querySelector('.i-ri-close-circle-fill')
expect(clearIcon).toBeInTheDocument()
const input = screen.getByDisplayValue('test')
expect(input).toHaveClass('pr-[26px]')
@ -59,21 +59,21 @@ describe('Input component', () => {
it('does not show clear icon when disabled, even with value', () => {
render(<Input showClearIcon value="test" disabled />)
const clearIcon = document.querySelector('.group svg')
const clearIcon = document.querySelector('.i-ri-close-circle-fill')
expect(clearIcon).not.toBeInTheDocument()
})
it('calls onClear when clear icon is clicked', () => {
const onClear = vi.fn()
render(<Input showClearIcon value="test" onClear={onClear} />)
const clearIconContainer = document.querySelector('.group')
const clearIconContainer = screen.getByTestId('input-clear')
fireEvent.click(clearIconContainer!)
expect(onClear).toHaveBeenCalledTimes(1)
})
it('shows warning icon when destructive is true', () => {
render(<Input destructive />)
const warningIcon = document.querySelector('svg')
const warningIcon = document.querySelector('.i-ri-error-warning-line')
expect(warningIcon).toBeInTheDocument()
const input = screen.getByPlaceholderText('Please input')
expect(input).toHaveClass('border-components-input-border-destructive')

13
web/app/components/base/input/index.tsx
View File

@ -1,6 +1,5 @@
import type { VariantProps } from 'class-variance-authority'
import type { ChangeEventHandler, CSSProperties, FocusEventHandler } from 'react'
import { RiCloseCircleFill, RiErrorWarningLine, RiSearchLine } from '@remixicon/react'
import { cva } from 'class-variance-authority'
import { noop } from 'es-toolkit/function'
import * as React from 'react'
@ -13,8 +12,8 @@ export const inputVariants = cva(
{
variants: {
size: {
regular: 'px-3 radius-md system-sm-regular',
large: 'px-4 radius-lg system-md-regular',
regular: 'px-3 system-sm-regular radius-md',
large: 'px-4 system-md-regular radius-lg',
},
},
defaultVariants: {
@ -83,7 +82,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
}
return (
<div className={cn('relative w-full', wrapperClassName)}>
{showLeftIcon && <RiSearchLine className={cn('absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-components-input-text-placeholder')} />}
{showLeftIcon && <span className={cn('i-ri-search-line absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-components-input-text-placeholder')} />}
<input
ref={ref}
style={styleCss}
@ -115,11 +114,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
onClick={onClear}
data-testid="input-clear"
>
<RiCloseCircleFill className="h-3.5 w-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" />
<span className="i-ri-close-circle-fill h-3.5 w-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" />
</div>
)}
{destructive && (
<RiErrorWarningLine className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-text-destructive-secondary" />
<span className="i-ri-error-warning-line absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-text-destructive-secondary" />
)}
{showCopyIcon && (
<div className={cn('group absolute right-0 top-1/2 -translate-y-1/2 cursor-pointer')}>
@ -131,7 +130,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
)}
{
unit && (
<div className="system-sm-regular absolute right-2 top-1/2 -translate-y-1/2 text-text-tertiary">
<div className="absolute right-2 top-1/2 -translate-y-1/2 text-text-tertiary system-sm-regular">
{unit}
</div>
)