m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fixes clear button size TextFieldSearch (#19153)

Browse Source 
* Fixing broken prop

* Adding translations and hopefully fixing the display of the native search icon on mobile
This commit is contained in:
George Marshall 2023-05-16 13:15:13 -07:00 committed by GitHub
parent 471889e5bb
commit e3eec3a43d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/components/component-library/text-field-search/text-field-search.js
View File

@ -4,6 +4,7 @@ import classnames from 'classnames';
import { ButtonIcon, ButtonIconSize, Icon, IconName, IconSize } from '..'; import { ButtonIcon, ButtonIconSize, Icon, IconName, IconSize } from '..';
import { TextField, TEXT_FIELD_TYPES } from '../text-field'; import { TextField, TEXT_FIELD_TYPES } from '../text-field';
import { useI18nContext } from '../../../hooks/useI18nContext';
export const TextFieldSearch = ({ export const TextFieldSearch = ({
className, className,
@ -15,7 +16,9 @@ export const TextFieldSearch = ({
value, value,
onChange, onChange,
...props ...props
}) => ( }) => {
const t = useI18nContext();
return (
<TextField <TextField
className={classnames('mm-text-field-search', className)} className={classnames('mm-text-field-search', className)}
value={value} value={value}
@ -26,9 +29,9 @@ export const TextFieldSearch = ({
<> <>
<ButtonIcon <ButtonIcon
className="mm-text-field__button-clear" className="mm-text-field__button-clear"
ariaLabel="Clear" // TODO: i18n ariaLabel={t('clear')}
iconName={IconName.Close} iconName={IconName.Close}
size={ButtonIconSize.SM} size={ButtonIconSize.Sm}
onClick={clearButtonOnClick} onClick={clearButtonOnClick}
{...clearButtonProps} {...clearButtonProps}
/> />
@ -46,6 +49,7 @@ export const TextFieldSearch = ({
{...props} {...props}
/> />
); );
};
TextFieldSearch.propTypes = { TextFieldSearch.propTypes = {
/** /**

8
ui/components/component-library/text-field-search/text-field-search.scss
View File

@ -1,5 +1,9 @@
.mm-text-field-search { .mm-text-field-search {
::-webkit-search-cancel-button { // hides the native search icon and clear button
display: none; // hides the default search cancel button ::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
display: none;
} }
} }

8
ui/components/component-library/text-field-search/text-field-search.test.js
View File

@ -29,7 +29,7 @@ describe('TextFieldSearch', () => {
}); });
await user.type(getByRole('searchbox'), 'test value'); await user.type(getByRole('searchbox'), 'test value');
expect(getByRole('searchbox')).toHaveValue('test value'); expect(getByRole('searchbox')).toHaveValue('test value');
expect(getByRole('button', { name: /Clear/u })).toBeDefined(); expect(getByRole('button', { name: /clear/u })).toBeDefined();
}); });
it('should still render with the endAccessory if it exists', async () => { it('should still render with the endAccessory if it exists', async () => {
const fn = jest.fn(); const fn = jest.fn();
@ -43,7 +43,7 @@ describe('TextFieldSearch', () => {
); );
await user.type(getByRole('searchbox'), 'test value'); await user.type(getByRole('searchbox'), 'test value');
expect(getByRole('searchbox')).toHaveValue('test value'); expect(getByRole('searchbox')).toHaveValue('test value');
expect(getByRole('button', { name: /Clear/u })).toBeDefined(); expect(getByRole('button', { name: /clear/u })).toBeDefined();
expect(getByText('end-accessory')).toBeDefined(); expect(getByText('end-accessory')).toBeDefined();
}); });
it('should fire onClick event when passed to clearButtonOnClick when clear button is clicked', async () => { it('should fire onClick event when passed to clearButtonOnClick when clear button is clicked', async () => {
@ -53,7 +53,7 @@ describe('TextFieldSearch', () => {
clearButtonOnClick: fn, clearButtonOnClick: fn,
}); });
await user.type(getByRole('searchbox'), 'test value'); await user.type(getByRole('searchbox'), 'test value');
await user.click(getByRole('button', { name: /Clear/u })); await user.click(getByRole('button', { name: /clear/u }));
expect(fn).toHaveBeenCalledTimes(1); expect(fn).toHaveBeenCalledTimes(1);
}); });
it('should fire onClick event when passed to clearButtonProps.onClick prop', async () => { it('should fire onClick event when passed to clearButtonProps.onClick prop', async () => {
@ -64,7 +64,7 @@ describe('TextFieldSearch', () => {
clearButtonOnClick: fn, clearButtonOnClick: fn,
}); });
await user.type(getByRole('searchbox'), 'test value'); await user.type(getByRole('searchbox'), 'test value');
await user.click(getByRole('button', { name: /Clear/u })); await user.click(getByRole('button', { name: /clear/u }));
expect(fn).toHaveBeenCalledTimes(1); expect(fn).toHaveBeenCalledTimes(1);
}); });
}); });