From d35f3a3cb0acd1b76fc259208c659ac63176986f Mon Sep 17 00:00:00 2001 From: mariktar <100trk@gmail.com> Date: Thu, 24 Oct 2024 17:46:08 +0300 Subject: [PATCH 1/3] chore(react-components): show on hover/focus --- .../src/Autocomplete/autocomplete.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx index cbd9723d..dee1f480 100644 --- a/packages/react-components/src/Autocomplete/autocomplete.tsx +++ b/packages/react-components/src/Autocomplete/autocomplete.tsx @@ -209,6 +209,9 @@ TypographyOwnProps '&:hover': { backgroundColor: 'var(--pv-color-gray-3)', borderColor: borderColorHover, + '[aria-hidden]': { + visibility: 'visible', + }, }, '&[aria-placeholder]': { color: colorPlaceholder, @@ -220,10 +223,16 @@ TypographyOwnProps '&:focus-visible': { backgroundColor: backgroundColorFocus, borderColor: borderColorFocus, + '[aria-hidden]': { + visibility: 'visible', + }, }, '&:focus-within': { backgroundColor: backgroundColorFocus, borderColor: borderColorFocus, + '[aria-hidden]': { + visibility: 'visible', + }, }, }), }); @@ -242,6 +251,7 @@ const AutocompleteActions = styled('div')({ const AutocompleteRemoveIcon = styled(CloseSmallIcon)({ color: 'var(--pv-color-gray-10)', cursor: 'pointer', + visibility: 'hidden', '&[aria-disabled="true"]': { color: 'inherit', pointerEvents: 'none', @@ -612,6 +622,7 @@ export const Autocomplete = < role="button" title="clear" aria-disabled={disabled} + aria-hidden // @ts-ignore onClick={onClick} /> @@ -620,7 +631,6 @@ export const Autocomplete = < role="button" title="open" aria-disabled={disabled} - aria-hidden open={popoverProps.open} /> From 97fe42e2ada681b8041dd96e2c89875f7ab81043 Mon Sep 17 00:00:00 2001 From: donskov Date: Fri, 25 Oct 2024 12:07:13 +0300 Subject: [PATCH 2/3] chore(react-components): update Autocomplete clear button styles --- .../src/Autocomplete/autocomplete.tsx | 47 ++++++++++--------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx index dee1f480..b3a7386a 100644 --- a/packages/react-components/src/Autocomplete/autocomplete.tsx +++ b/packages/react-components/src/Autocomplete/autocomplete.tsx @@ -209,7 +209,7 @@ TypographyOwnProps '&:hover': { backgroundColor: 'var(--pv-color-gray-3)', borderColor: borderColorHover, - '[aria-hidden]': { + '[aria-label="Clear"]': { visibility: 'visible', }, }, @@ -223,14 +223,14 @@ TypographyOwnProps '&:focus-visible': { backgroundColor: backgroundColorFocus, borderColor: borderColorFocus, - '[aria-hidden]': { + '[aria-label="Clear"]': { visibility: 'visible', }, }, '&:focus-within': { backgroundColor: backgroundColorFocus, borderColor: borderColorFocus, - '[aria-hidden]': { + '[aria-label="Clear"]': { visibility: 'visible', }, }, @@ -248,17 +248,19 @@ const AutocompleteActions = styled('div')({ margin: '0px var(--pv-size-base)', }); -const AutocompleteRemoveIcon = styled(CloseSmallIcon)({ +const AutocompleteClearButton = styled('button')({ color: 'var(--pv-color-gray-10)', cursor: 'pointer', visibility: 'hidden', - '&[aria-disabled="true"]': { - color: 'inherit', - pointerEvents: 'none', - }, + display: 'inline-flex', + appearance: 'none', + outline: '0px', + padding: '0px', + borderWidth: '0px', + background: 'transparent', }); -const AutocompleteArrowIcon = styled(ArrowDropDownIcon)<{ open: boolean }>({ +const AutocompleteOpenButton = styled(ArrowDropDownIcon)<{ open: boolean }>({ color: 'var(--pv-color-gray-10)', '&[aria-disabled="true"]': { color: 'inherit', @@ -455,9 +457,6 @@ export const Autocomplete = < onChange, ...otherInputProps } = getInputProps(); - const { - onClick, - } = getClearProps(); const rootProps = getRootProps(); const popoverProps = getPopoverProps(); @@ -618,18 +617,22 @@ export const Autocomplete = < )} {!isValueEmpty && !readOnly ? ( - + + + ) : null} - From 7dcd88a57e3dc03c21ee6c4be9d5bcb4bccc1a52 Mon Sep 17 00:00:00 2001 From: mariktar <100trk@gmail.com> Date: Fri, 25 Oct 2024 13:08:53 +0300 Subject: [PATCH 3/3] chore(react-components): fix test --- .../__snapshots__/autocomplete.test.tsx.snap | 80 ++++++++++++++++--- .../src/Autocomplete/autocomplete.test.tsx | 17 ++-- 2 files changed, 80 insertions(+), 17 deletions(-) diff --git a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap index c152e120..4edac0e4 100644 --- a/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap +++ b/packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap @@ -49,6 +49,10 @@ exports[` should render with default styles 1`] = ` border-color: var(--pv-color-gray-7); } +.emotion-0:hover [aria-label="Clear"] { + visibility: visible; +} + .emotion-0[aria-placeholder] { color: var(--pv-color-gray-9); } @@ -63,11 +67,19 @@ exports[` should render with default styles 1`] = ` border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-visible [aria-label="Clear"] { + visibility: visible; +} + .emotion-0:focus-within { background-color: var(--pv-color-secondary-tint-5); border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-within [aria-label="Clear"] { + visibility: visible; +} + .emotion-1 { margin: 0; color: var(--pv-color-black); @@ -175,12 +187,12 @@ exports[` should render with default styles 1`] = ` > should render with multiple selection enabled 1`] = ` border-color: var(--pv-color-gray-7); } +.emotion-0:hover [aria-label="Clear"] { + visibility: visible; +} + .emotion-0[aria-placeholder] { color: var(--pv-color-gray-9); } @@ -268,11 +284,19 @@ exports[` should render with multiple selection enabled 1`] = ` border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-visible [aria-label="Clear"] { + visibility: visible; +} + .emotion-0:focus-within { background-color: var(--pv-color-secondary-tint-5); border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-within [aria-label="Clear"] { + visibility: visible; +} + .emotion-1 { margin: 0; color: var(--pv-color-black); @@ -380,12 +404,12 @@ exports[` should render with multiple selection enabled 1`] = ` > sizes renders with size "large" 1`] = ` border-color: var(--pv-color-gray-7); } +.emotion-0:hover [aria-label="Clear"] { + visibility: visible; +} + .emotion-0[aria-placeholder] { color: var(--pv-color-gray-9); } @@ -473,11 +501,19 @@ exports[` sizes renders with size "large" 1`] = ` border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-visible [aria-label="Clear"] { + visibility: visible; +} + .emotion-0:focus-within { background-color: var(--pv-color-secondary-tint-5); border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-within [aria-label="Clear"] { + visibility: visible; +} + .emotion-1 { margin: 0; color: var(--pv-color-black); @@ -585,12 +621,12 @@ exports[` sizes renders with size "large" 1`] = ` > sizes renders with size "medium" 1`] = ` border-color: var(--pv-color-gray-7); } +.emotion-0:hover [aria-label="Clear"] { + visibility: visible; +} + .emotion-0[aria-placeholder] { color: var(--pv-color-gray-9); } @@ -678,11 +718,19 @@ exports[` sizes renders with size "medium" 1`] = ` border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-visible [aria-label="Clear"] { + visibility: visible; +} + .emotion-0:focus-within { background-color: var(--pv-color-secondary-tint-5); border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-within [aria-label="Clear"] { + visibility: visible; +} + .emotion-1 { margin: 0; color: var(--pv-color-black); @@ -790,12 +838,12 @@ exports[` sizes renders with size "medium" 1`] = ` > sizes renders with size "small" 1`] = ` border-color: var(--pv-color-gray-7); } +.emotion-0:hover [aria-label="Clear"] { + visibility: visible; +} + .emotion-0[aria-placeholder] { color: var(--pv-color-gray-9); } @@ -883,11 +935,19 @@ exports[` sizes renders with size "small" 1`] = ` border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-visible [aria-label="Clear"] { + visibility: visible; +} + .emotion-0:focus-within { background-color: var(--pv-color-secondary-tint-5); border-color: var(--pv-color-secondary-tint-3); } +.emotion-0:focus-within [aria-label="Clear"] { + visibility: visible; +} + .emotion-1 { margin: 0; color: var(--pv-color-black); @@ -995,12 +1055,12 @@ exports[` sizes renders with size "small" 1`] = ` > ', () => { expect(screen.getByDisplayValue('clearable-option')).toBeInTheDocument(); + await userEvent.hover(screen.getByRole('combobox')); + await act(async () => { - fireEvent.click(screen.getByRole('combobox')); + fireEvent.click(screen.getByTitle('Clear')); }); - - fireEvent.click(screen.getByRole('button', { name: /clear/i })); expect(screen.queryByDisplayValue('clearable-option')).not.toBeInTheDocument(); }); @@ -239,8 +240,10 @@ describe('', () => { expect(screen.getByDisplayValue('option-1')).toBeInTheDocument(); + await userEvent.hover(screen.getByRole('combobox')); + await act(async () => { - fireEvent.click(screen.getByRole('button', { name: /clear/i })); + fireEvent.click(screen.getByTitle('Clear')); }); expect(screen.queryByDisplayValue('option-1')).not.toBeInTheDocument(); @@ -301,11 +304,11 @@ describe('', () => { fireEvent.click(screen.getByText('option-1')); fireEvent.click(screen.getByText('option-2')); + await userEvent.hover(screen.getByRole('combobox')); + await act(async () => { - fireEvent.click(screen.getByRole('combobox')); + fireEvent.click(screen.getByTitle('Clear')); }); - - fireEvent.click(screen.getByRole('button', { name: /clear/i })); expect(screen.queryByText('option-1')).not.toBeInTheDocument(); expect(screen.queryByText('option-2')).not.toBeInTheDocument(); });