From 085126d275ffd5938119b2ab0d67f8a8a29a4a7e Mon Sep 17 00:00:00 2001 From: daniba Date: Tue, 21 Jun 2022 16:18:35 +0100 Subject: [PATCH] Move search icon and add to storybook (#14940) * 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 --- .../account-menu/account-menu.component.js | 4 +- ui/components/ui/icon/icon.stories.js | 2 + ui/components/ui/icon/search-icon.js | 42 +++++++++++++++++++ ui/components/ui/search-icon/index.js | 1 - .../ui/search-icon/search-icon.component.js | 20 --------- .../token-search/token-search.component.js | 6 +-- .../custom-content-search.js | 2 +- .../settings-search/settings-search.js | 2 +- .../searchable-item-list.test.js.snap | 14 +++++-- .../list-item-search.component.js | 6 +-- 10 files changed, 63 insertions(+), 36 deletions(-) create mode 100644 ui/components/ui/icon/search-icon.js delete mode 100644 ui/components/ui/search-icon/index.js delete mode 100644 ui/components/ui/search-icon/search-icon.component.js diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index 5b82da54c..44b68b739 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -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', }} > - + ); diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index d23aec7db..263ddd11b 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/ui/components/ui/icon/icon.stories.js @@ -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) => ( } /> } /> } /> + } /> ( + + + +); + +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; diff --git a/ui/components/ui/search-icon/index.js b/ui/components/ui/search-icon/index.js deleted file mode 100644 index 7583cbf6b..000000000 --- a/ui/components/ui/search-icon/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './search-icon.component'; diff --git a/ui/components/ui/search-icon/search-icon.component.js b/ui/components/ui/search-icon/search-icon.component.js deleted file mode 100644 index fd3d78081..000000000 --- a/ui/components/ui/search-icon/search-icon.component.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -export default function SearchIcon({ color }) { - return ( - - - - - - - ); -} - -SearchIcon.propTypes = { - /** - * Color of the icon should be a valid design system color and is required - */ - color: PropTypes.string.isRequired, -}; diff --git a/ui/pages/import-token/token-search/token-search.component.js b/ui/pages/import-token/token-search/token-search.component.js index d5f88a826..b6546cd78 100644 --- a/ui/pages/import-token/token-search/token-search.component.js +++ b/ui/pages/import-token/token-search/token-search.component.js @@ -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 ( - + ); } diff --git a/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js b/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js index 9704e4821..7daffb4ce 100644 --- a/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js +++ b/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js @@ -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, diff --git a/ui/pages/settings/settings-search/settings-search.js b/ui/pages/settings/settings-search/settings-search.js index 2126d5547..6f37e399c 100644 --- a/ui/pages/settings/settings-search/settings-search.js +++ b/ui/pages/settings/settings-search/settings-search.js @@ -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'; diff --git a/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap b/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap index b0ea92102..347fcbec7 100644 --- a/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap +++ b/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap @@ -11,9 +11,17 @@ exports[`SearchableItemList renders the component with initial props 1`] = ` class="MuiInputAdornment-root MuiInputAdornment-positionStart" style="margin-right: 12px;" > - + + + ( - + );