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

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

@ -1,5 +1,9 @@
.mm-text-field-search {
::-webkit-search-cancel-button {
display: none; // hides the default search cancel button
// hides the native search icon and clear 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');
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 () => {
const fn = jest.fn();
@ -43,7 +43,7 @@ describe('TextFieldSearch', () => {
);
await user.type(getByRole('searchbox'), '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();
});
it('should fire onClick event when passed to clearButtonOnClick when clear button is clicked', async () => {
@ -53,7 +53,7 @@ describe('TextFieldSearch', () => {
clearButtonOnClick: fn,
});
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);
});
it('should fire onClick event when passed to clearButtonProps.onClick prop', async () => {
@ -64,7 +64,7 @@ describe('TextFieldSearch', () => {
clearButtonOnClick: fn,
});
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);
});
});