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

Move search icon and add to storybook (#14940)

Browse Source 
* move search icon || update imports || add to story

* Optimized svg path, updated icon api and updating colors

* update other icons

* update snapshot

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
daniba 2022-06-21 16:18:35 +01:00 committed by GitHub
parent 5a1bc94aa4
commit 085126d275
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 63 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/app/account-menu/account-menu.component.js
View File

@ -28,7 +28,6 @@ import {
///: END:ONLY_INCLUDE_IN
} from '../../../helpers/constants/routes';
import TextField from '../../ui/text-field';
import SearchIcon from '../../ui/search-icon';
import IconCheck from '../../ui/icon/icon-check';
import IconSpeechBubbles from '../../ui/icon/icon-speech-bubbles';
import IconConnect from '../../ui/icon/icon-connect';
@ -37,6 +36,7 @@ import IconPlus from '../../ui/icon/icon-plus';
import IconImport from '../../ui/icon/icon-import';
import Button from '../../ui/button';
import SearchIcon from '../../ui/icon/search-icon';
import KeyRingLabel from './keyring-label';
export function AccountMenuItem(props) {
@ -145,7 +145,7 @@ export default class AccountMenu extends Component {
marginLeft: '8px',
}}
>
<SearchIcon color="currentColor" />
<SearchIcon color="var(--color-icon-muted)" />
</InputAdornment>
);

2
ui/components/ui/icon/icon.stories.js
View File

@ -38,6 +38,7 @@ import IconPlus from './icon-plus';
import IconEye from './icon-eye';
import IconEyeSlash from './icon-eye-slash';
import IconTokenSearch from './icon-token-search';
import SearchIcon from './search-icon';
const validColors = [
'var(--color-icon-default)',
@ -127,6 +128,7 @@ export const DefaultStory = (args) => (
<IconItem Component={<IconSpeechBubbles {...args} />} />
<IconItem Component={<IconCog {...args} />} />
<IconItem Component={<IconTokenSearch {...args} />} />
<IconItem Component={<SearchIcon {...args} />} />
</div>
</Box>
<Typography

42
ui/components/ui/icon/search-icon.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
const SearchIcon = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m235 427c-51 0-100-21-136-57-36-36-56-84-56-135 0-26 5-51 14-74 10-23 24-44 42-62 18-18 39-32 62-42 23-9 48-14 74-14 25 0 50 5 73 14 23 10 45 24 62 42 18 18 32 39 42 62 10 23 15 48 15 74 0 43-15 86-42 119l78 79c2 2 4 4 5 7 1 2 1 5 1 8 0 3 0 6-1 8-1 3-3 5-5 7-2 2-4 4-7 5-2 1-5 1-8 1-3 0-6 0-8-1-3-1-5-3-7-5l-79-78c-33 27-76 42-119 42z m0-43c82 0 149-67 149-149 0-83-67-150-149-150-83 0-150 67-150 150 0 82 67 149 150 149z" />
</svg>
);
SearchIcon.propTypes = {
/**
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
*/
size: PropTypes.number,
/**
* The color of the icon accepts design token css variables
*/
color: PropTypes.string,
/**
* An additional className to assign the Icon
*/
className: PropTypes.string,
/**
* The aria-label of the icon for accessibility purposes
*/
ariaLabel: PropTypes.string,
};
export default SearchIcon;

1
ui/components/ui/search-icon/index.js
View File

@ -1 +0,0 @@
export { default } from './search-icon.component';

20
ui/components/ui/search-icon/search-icon.component.js
View File

@ -1,20 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
export default function SearchIcon({ color }) {
return (
<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill={color}>
<g clipRule="evenodd" fillRule="evenodd">
<path d="M9.167 3.333a5.833 5.833 0 100 11.667 5.833 5.833 0 000-11.667zm-7.5 5.834a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z" />
<path d="M13.286 13.286a.833.833 0 011.178 0l3.625 3.625a.833.833 0 11-1.178 1.178l-3.625-3.625a.833.833 0 010-1.178z" />
</g>
</svg>
);
}
SearchIcon.propTypes = {
/**
* Color of the icon should be a valid design system color and is required
*/
color: PropTypes.string.isRequired,
};

6
ui/pages/import-token/token-search/token-search.component.js
View File

@ -4,6 +4,7 @@ import Fuse from 'fuse.js';
import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '../../../components/ui/text-field';
import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
import SearchIcon from '../../../components/ui/icon/search-icon';
export default class TokenSearch extends Component {
static contextTypes = {
@ -59,10 +60,7 @@ export default class TokenSearch extends Component {
renderAdornment() {
return (
<InputAdornment position="start" style={{ marginRight: '12px' }}>
<i
className="fa fa-search"
style={{ color: 'var(--color-icon-muted)' }}
/>
<SearchIcon color="var(--color-icon-muted)" />
</InputAdornment>
);
}

2
ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js
View File

@ -4,7 +4,7 @@ import Fuse from 'fuse.js';
import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '../../../../components/ui/text-field';
import { I18nContext } from '../../../../contexts/i18n';
import SearchIcon from '../../../../components/ui/search-icon';
import SearchIcon from '../../../../components/ui/icon/search-icon';
export default function CustomContentSearch({
onSearch,

2
ui/pages/settings/settings-search/settings-search.js
View File

@ -7,7 +7,7 @@ import Fuse from 'fuse.js';
import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '../../../components/ui/text-field';
import { I18nContext } from '../../../contexts/i18n';
import SearchIcon from '../../../components/ui/search-icon';
import SearchIcon from '../../../components/ui/icon/search-icon';
import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import { getSnapsRouteObjects } from '../../../selectors';

14
ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
View File

@ -11,9 +11,17 @@ exports[`SearchableItemList renders the component with initial props 1`] = `
class="MuiInputAdornment-root MuiInputAdornment-positionStart"
style="margin-right: 12px;"
>
<i
class="fa fa-search fa-lg"
/>
<svg
fill="var(--color-icon-muted)"
height="20"
viewBox="0 0 512 512"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m235 427c-51 0-100-21-136-57-36-36-56-84-56-135 0-26 5-51 14-74 10-23 24-44 42-62 18-18 39-32 62-42 23-9 48-14 74-14 25 0 50 5 73 14 23 10 45 24 62 42 18 18 32 39 42 62 10 23 15 48 15 74 0 43-15 86-42 119l78 79c2 2 4 4 5 7 1 2 1 5 1 8 0 3 0 6-1 8-1 3-3 5-5 7-2 2-4 4-7 5-2 1-5 1-8 1-3 0-6 0-8-1-3-1-5-3-7-5l-79-78c-33 27-76 42-119 42z m0-43c82 0 149-67 149-149 0-83-67-150-149-150-83 0-150 67-150 150 0 82 67 149 150 149z"
/>
</svg>
</div>
<input
aria-invalid="false"

6
ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js
View File

@ -9,13 +9,11 @@ import { usePrevious } from '../../../../hooks/usePrevious';
import { isValidHexAddress } from '../../../../../shared/modules/hexstring-utils';
import { fetchToken } from '../../swaps.util';
import { getCurrentChainId } from '../../../../selectors/selectors';
import SearchIcon from '../../../../components/ui/icon/search-icon';
const renderAdornment = () => (
<InputAdornment position="start" style={{ marginRight: '12px' }}>
<i
className="fa fa-search fa-lg"
style={{ color: 'var(--color-icon-muted)' }}
/>
<SearchIcon size={20} color="var(--color-icon-muted)" />
</InputAdornment>
);