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

66
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,37 +16,40 @@ export const TextFieldSearch = ({
value, value,
onChange, onChange,
...props ...props
}) => ( }) => {
<TextField const t = useI18nContext();
className={classnames('mm-text-field-search', className)} return (
value={value} <TextField
onChange={onChange} className={classnames('mm-text-field-search', className)}
type={TEXT_FIELD_TYPES.SEARCH} value={value}
endAccessory={ onChange={onChange}
value && showClearButton ? ( type={TEXT_FIELD_TYPES.SEARCH}
<> endAccessory={
<ButtonIcon value && showClearButton ? (
className="mm-text-field__button-clear" <>
ariaLabel="Clear" // TODO: i18n <ButtonIcon
iconName={IconName.Close} className="mm-text-field__button-clear"
size={ButtonIconSize.SM} ariaLabel={t('clear')}
onClick={clearButtonOnClick} iconName={IconName.Close}
{...clearButtonProps} size={ButtonIconSize.Sm}
/> onClick={clearButtonOnClick}
{endAccessory} {...clearButtonProps}
</> />
) : ( {endAccessory}
endAccessory </>
) ) : (
} endAccessory
startAccessory={<Icon name={IconName.Search} size={IconSize.Sm} />} )
inputProps={{ }
marginRight: showClearButton ? 6 : 0, startAccessory={<Icon name={IconName.Search} size={IconSize.Sm} />}
...inputProps, inputProps={{
}} marginRight: showClearButton ? 6 : 0,
{...props} ...inputProps,
/> }}
); {...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);
}); });
}); });