From 0bf6aeb5f5025e71c91648342ea22c53c9fe8ac3 Mon Sep 17 00:00:00 2001
From: Garrett Bear
Date: Tue, 24 Jan 2023 09:39:46 -0800
Subject: [PATCH] icon audit, remove xxs icon size (#17089)
* icon audit, remove xxs icon size
* update icon file names and snapshots
* remove unused icon- code and fix icons with slash issue
* close icon fix
* remove icons id
* update snapshot
* font awesome icon list
* remove font awesome
* fix linting issue
---
...n-add-square-filled.svg => add-square.svg} | 2 +-
.../icons/{icon-add-outline.svg => add.svg} | 4 +-
...icon-arrow-2-down.svg => arrow-2-down.svg} | 4 +-
...icon-arrow-2-left.svg => arrow-2-left.svg} | 4 +-
...on-arrow-2-right.svg => arrow-2-right.svg} | 4 +-
.../{icon-arrow-2-up.svg => arrow-2-up.svg} | 4 +-
.../{icon-arrow-down.svg => arrow-down.svg} | 2 +-
.../{icon-arrow-left.svg => arrow-left.svg} | 4 +-
.../{icon-arrow-right.svg => arrow-right.svg} | 4 +-
.../icons/{icon-arrow-up.svg => arrow-up.svg} | 2 +-
...n-bank-token-filled.svg => bank-token.svg} | 4 +-
.../icons/{icon-bank-filled.svg => bank.svg} | 4 +-
.../icons/{icon-book-filled.svg => book.svg} | 4 +-
...{icon-bookmark-filled.svg => bookmark.svg} | 4 +-
...n-calculator-filled.svg => calculator.svg} | 4 +-
...{icon-card-pos-filled.svg => card-pos.svg} | 4 +-
...n-card-token-filled.svg => card-token.svg} | 2 +-
.../icons/{icon-card-filled.svg => card.svg} | 4 +-
...{icon-category-filled.svg => category.svg} | 4 +-
.../{icon-chart-filled.svg => chart.svg} | 4 +-
.../{icon-check-outline.svg => check.svg} | 2 +-
.../{icon-clock-filled.svg => clock.svg} | 4 +-
app/images/icons/close.svg | 1 +
...code-circle-filled.svg => code-circle.svg} | 2 +-
.../icons/{icon-coin-filled.svg => coin.svg} | 4 +-
...nfirmation-filled.svg => confirmation.svg} | 4 +-
.../{icon-connect-filled.svg => connect.svg} | 4 +-
...py-success-filled.svg => copy-success.svg} | 2 +-
.../icons/{icon-copy-filled.svg => copy.svg} | 4 +-
.../{icon-danger-filled.svg => danger.svg} | 4 +-
.../icons/{icon-dark-filled.svg => dark.svg} | 4 +-
.../icons/{icon-data-filled.svg => data.svg} | 4 +-
.../icons/{icon-diagram.svg => diagram.svg} | 4 +-
...ment-code-filled.svg => document-code.svg} | 4 +-
.../icons/{icon-edit-filled.svg => edit.svg} | 4 +-
.../{icon-eraser-filled.svg => eraser.svg} | 4 +-
.../{icon-expand-outline.svg => expand.svg} | 4 +-
.../{icon-explore-filled.svg => explore.svg} | 4 +-
.../icons/{icon-export.svg => export.svg} | 2 +-
app/images/icons/eye-slash.svg | 1 +
.../icons/{icon-eye-filled.svg => eye.svg} | 4 +-
.../{icon-filter-outline.svg => filter.svg} | 4 +-
.../icons/{icon-flag-filled.svg => flag.svg} | 4 +-
app/images/icons/flash-slash.svg | 1 +
.../{icon-flash-filled.svg => flash.svg} | 4 +-
...full-circle-filled.svg => full-circle.svg} | 4 +-
.../icons/{icon-gas-filled.svg => gas.svg} | 4 +-
...al-search-filled.svg => global-search.svg} | 2 +-
.../{icon-global-filled.svg => global.svg} | 4 +-
.../{icon-graph-filled.svg => graph.svg} | 4 +-
app/images/icons/hardware.svg | 3 +
.../{icon-heart-filled.svg => heart.svg} | 4 +-
app/images/icons/hierarchy.svg | 3 +
.../icons/{icon-home-filled.svg => home.svg} | 4 +-
.../icons/icon-check-box-off-outline.svg | 3 -
app/images/icons/icon-check-box-on-filled.svg | 3 -
.../icons/icon-check-circle-on-filled.svg | 3 -
app/images/icons/icon-close-outline.svg | 3 -
app/images/icons/icon-eye-slash-filled.svg | 3 -
app/images/icons/icon-flash-slash-filled.svg | 3 -
app/images/icons/icon-hierarchy-filled.svg | 3 -
app/images/icons/icon-lock-slash-filled.svg | 3 -
.../icons/icon-notification-circle-filled.svg | 3 -
.../icons/icon-security-slash-filled.svg | 3 -
app/images/icons/icon-slash-filled.svg | 3 -
.../icons/{icon-import.svg => import.svg} | 4 +-
.../icons/{icon-info-filled.svg => info.svg} | 4 +-
.../icons/{icon-key-filled.svg => key.svg} | 4 +-
.../{icon-light-filled.svg => light.svg} | 4 +-
.../icons/{icon-link-outline.svg => link.svg} | 2 +-
.../{icon-loading-filled.svg => loading.svg} | 4 +-
...lock-circle-filled.svg => lock-circle.svg} | 4 +-
app/images/icons/lock-slash.svg | 1 +
.../icons/{icon-lock-filled.svg => lock.svg} | 4 +-
.../{icon-login-outline.svg => login.svg} | 4 +-
app/images/icons/logout.svg | 1 +
.../icons/{icon-menu-outline.svg => menu.svg} | 4 +-
...estion-filled.svg => message-question.svg} | 4 +-
...{icon-messages-filled.svg => messages.svg} | 4 +-
...nus-square-filled.svg => minus-square.svg} | 4 +-
.../{icon-minus-outline.svg => minus.svg} | 4 +-
.../{icon-mobile-filled.svg => mobile.svg} | 4 +-
.../{icon-money-filled.svg => money.svg} | 4 +-
.../{icon-monitor-filled.svg => monitor.svg} | 2 +-
...zontal-outline.svg => more-horizontal.svg} | 4 +-
...vertical-outline.svg => more-vertical.svg} | 4 +-
app/images/icons/notification-circle.svg | 3 +
...tification-filled.svg => notification.svg} | 4 +-
...rd-check-filled.svg => password-check.svg} | 4 +-
.../{icon-people-filled.svg => people.svg} | 4 +-
...rows-filled.svg => programming-arrows.svg} | 2 +-
...{icon-question-filled.svg => question.svg} | 4 +-
...icon-received-outline.svg => received.svg} | 4 +-
.../icons/{icon-refresh.svg => refresh.svg} | 4 +-
app/images/icons/{icon-save.svg => save.svg} | 4 +-
...an-barcode-filled.svg => scan-barcode.svg} | 4 +-
...-scan-focus-outline.svg => scan-focus.svg} | 4 +-
.../icons/{icon-scan-filled.svg => scan.svg} | 4 +-
.../{icon-scroll-filled.svg => scroll.svg} | 4 +-
.../{icon-search-filled.svg => search.svg} | 2 +-
...rity-card-filled.svg => security-card.svg} | 4 +-
...ty-cross-filled.svg => security-cross.svg} | 4 +-
...curity-key-filled.svg => security-key.svg} | 4 +-
...-search-filled.svg => security-search.svg} | 4 +-
app/images/icons/security-slash.svg | 1 +
...rity-tick-filled.svg => security-tick.svg} | 2 +-
...rity-time-filled.svg => security-time.svg} | 4 +-
...rity-user-filled.svg => security-user.svg} | 4 +-
app/images/icons/security.svg | 1 +
.../{icon-send-1-filled.svg => send-1.svg} | 4 +-
.../{icon-send-2-outline.svg => send-2.svg} | 4 +-
.../{icon-setting-filled.svg => setting.svg} | 4 +-
app/images/icons/slash.svg | 1 +
...aps-mobile-filled.svg => snaps-mobile.svg} | 4 +-
...n-snaps-plus-filled.svg => snaps-plus.svg} | 4 +-
.../{icon-snaps-filled.svg => snaps.svg} | 2 +-
...speedometer-filled.svg => speedometer.svg} | 4 +-
app/images/icons/{icon-star.svg => star.svg} | 4 +-
.../{icon-student-filled.svg => student.svg} | 2 +-
...zontal-outline.svg => swap-horizontal.svg} | 4 +-
...-vertical-filled.svg => swap-vertical.svg} | 4 +-
.../icons/{icon-tag-filled.svg => tag.svg} | 4 +-
.../icons/{icon-tilde.svg => tilde.svg} | 4 +-
.../{icon-timer-filled.svg => timer.svg} | 4 +-
.../{icon-trash-filled.svg => trash.svg} | 4 +-
...n-trend-down-filled.svg => trend-down.svg} | 4 +-
...{icon-trend-up-filled.svg => trend-up.svg} | 4 +-
...cle-add-filled.svg => user-circle-add.svg} | 4 +-
...user-circle-filled.svg => user-circle.svg} | 4 +-
.../icons/{icon-user-filled.svg => user.svg} | 4 +-
...wallet-card-filled.svg => wallet-card.svg} | 4 +-
...llet-money-filled.svg => wallet-money.svg} | 4 +-
.../{icon-wallet-filled.svg => wallet.svg} | 4 +-
.../{icon-warning-filled.svg => warning.svg} | 4 +-
development/generate-icon-names.js | 9 +--
.../signature-request-siwe-icon/index.js | 2 +-
.../__snapshots__/avatar-favicon.test.js.snap | 2 +-
.../avatar-favicon/avatar-favicon.js | 2 +-
.../component-library/avatar-icon/README.mdx | 10 +--
.../__snapshots__/avatar-icon.test.js.snap | 2 +-
.../avatar-icon/avatar-icon.stories.js | 26 +++----
.../avatar-icon/avatar-icon.test.js | 18 ++---
.../component-library/button-base/README.mdx | 2 +-
.../button-base/button-base.js | 4 +-
.../button-base/button-base.stories.js | 4 +-
.../component-library/button-icon/README.mdx | 12 ++--
.../__snapshots__/button-icon.test.js.snap | 2 +-
.../button-icon/button-icon.stories.js | 20 +++---
.../button-icon/button-icon.test.js | 22 +++---
.../component-library/button/README.mdx | 2 +-
.../button/button.stories.js | 10 +--
.../form-text-field/README.mdx | 8 +--
.../form-text-field.stories.js | 8 +--
.../component-library/help-text/README.mdx | 2 +-
.../help-text/help-text.stories.js | 2 +-
.../help-text/help-text.test.js | 2 +-
.../component-library/icon/README.mdx | 52 +++++++-------
.../icon/__snapshots__/icon.test.js.snap | 2 +-
.../component-library/icon/icon.constants.js | 1 -
ui/components/component-library/icon/icon.js | 6 +-
.../component-library/icon/icon.scss | 3 -
.../component-library/icon/icon.stories.js | 4 +-
.../component-library/icon/icon.test.js | 71 ++++++++-----------
.../component-library/label/README.mdx | 2 +-
.../component-library/label/label.stories.js | 2 +-
.../component-library/label/label.test.js | 2 +-
.../__snapshots__/picker-network.test.js.snap | 2 +-
.../__snapshots__/tag-url.test.js.snap | 2 +-
.../component-library/tag-url/tag-url.js | 2 +-
.../text-field-base/README.mdx | 8 +--
.../text-field-base.stories.js | 14 ++--
.../text-field-search.test.js.snap | 2 +-
.../text-field-search/text-field-search.js | 2 +-
.../text-field/text-field.js | 2 +-
174 files changed, 378 insertions(+), 438 deletions(-)
rename app/images/icons/{icon-add-square-filled.svg => add-square.svg} (77%)
rename app/images/icons/{icon-add-outline.svg => add.svg} (69%)
rename app/images/icons/{icon-arrow-2-down.svg => arrow-2-down.svg} (66%)
rename app/images/icons/{icon-arrow-2-left.svg => arrow-2-left.svg} (66%)
rename app/images/icons/{icon-arrow-2-right.svg => arrow-2-right.svg} (67%)
rename app/images/icons/{icon-arrow-2-up.svg => arrow-2-up.svg} (65%)
rename app/images/icons/{icon-arrow-down.svg => arrow-down.svg} (67%)
rename app/images/icons/{icon-arrow-left.svg => arrow-left.svg} (64%)
rename app/images/icons/{icon-arrow-right.svg => arrow-right.svg} (68%)
rename app/images/icons/{icon-arrow-up.svg => arrow-up.svg} (67%)
rename app/images/icons/{icon-bank-token-filled.svg => bank-token.svg} (91%)
rename app/images/icons/{icon-bank-filled.svg => bank.svg} (83%)
rename app/images/icons/{icon-book-filled.svg => book.svg} (82%)
rename app/images/icons/{icon-bookmark-filled.svg => bookmark.svg} (81%)
rename app/images/icons/{icon-calculator-filled.svg => calculator.svg} (91%)
rename app/images/icons/{icon-card-pos-filled.svg => card-pos.svg} (82%)
rename app/images/icons/{icon-card-token-filled.svg => card-token.svg} (88%)
rename app/images/icons/{icon-card-filled.svg => card.svg} (80%)
rename app/images/icons/{icon-category-filled.svg => category.svg} (81%)
rename app/images/icons/{icon-chart-filled.svg => chart.svg} (80%)
rename app/images/icons/{icon-check-outline.svg => check.svg} (62%)
rename app/images/icons/{icon-clock-filled.svg => clock.svg} (72%)
create mode 100644 app/images/icons/close.svg
rename app/images/icons/{icon-code-circle-filled.svg => code-circle.svg} (82%)
rename app/images/icons/{icon-coin-filled.svg => coin.svg} (86%)
rename app/images/icons/{icon-confirmation-filled.svg => confirmation.svg} (70%)
rename app/images/icons/{icon-connect-filled.svg => connect.svg} (87%)
rename app/images/icons/{icon-copy-success-filled.svg => copy-success.svg} (80%)
rename app/images/icons/{icon-copy-filled.svg => copy.svg} (74%)
rename app/images/icons/{icon-danger-filled.svg => danger.svg} (83%)
rename app/images/icons/{icon-dark-filled.svg => dark.svg} (73%)
rename app/images/icons/{icon-data-filled.svg => data.svg} (86%)
rename app/images/icons/{icon-diagram.svg => diagram.svg} (82%)
rename app/images/icons/{icon-document-code-filled.svg => document-code.svg} (82%)
rename app/images/icons/{icon-edit-filled.svg => edit.svg} (85%)
rename app/images/icons/{icon-eraser-filled.svg => eraser.svg} (77%)
rename app/images/icons/{icon-expand-outline.svg => expand.svg} (81%)
rename app/images/icons/{icon-explore-filled.svg => explore.svg} (78%)
rename app/images/icons/{icon-export.svg => export.svg} (84%)
create mode 100644 app/images/icons/eye-slash.svg
rename app/images/icons/{icon-eye-filled.svg => eye.svg} (78%)
rename app/images/icons/{icon-filter-outline.svg => filter.svg} (73%)
rename app/images/icons/{icon-flag-filled.svg => flag.svg} (64%)
create mode 100644 app/images/icons/flash-slash.svg
rename app/images/icons/{icon-flash-filled.svg => flash.svg} (61%)
rename app/images/icons/{icon-full-circle-filled.svg => full-circle.svg} (66%)
rename app/images/icons/{icon-gas-filled.svg => gas.svg} (82%)
rename app/images/icons/{icon-global-search-filled.svg => global-search.svg} (90%)
rename app/images/icons/{icon-global-filled.svg => global.svg} (90%)
rename app/images/icons/{icon-graph-filled.svg => graph.svg} (78%)
create mode 100644 app/images/icons/hardware.svg
rename app/images/icons/{icon-heart-filled.svg => heart.svg} (67%)
create mode 100644 app/images/icons/hierarchy.svg
rename app/images/icons/{icon-home-filled.svg => home.svg} (71%)
delete mode 100644 app/images/icons/icon-check-box-off-outline.svg
delete mode 100644 app/images/icons/icon-check-box-on-filled.svg
delete mode 100644 app/images/icons/icon-check-circle-on-filled.svg
delete mode 100644 app/images/icons/icon-close-outline.svg
delete mode 100644 app/images/icons/icon-eye-slash-filled.svg
delete mode 100644 app/images/icons/icon-flash-slash-filled.svg
delete mode 100644 app/images/icons/icon-hierarchy-filled.svg
delete mode 100644 app/images/icons/icon-lock-slash-filled.svg
delete mode 100644 app/images/icons/icon-notification-circle-filled.svg
delete mode 100644 app/images/icons/icon-security-slash-filled.svg
delete mode 100644 app/images/icons/icon-slash-filled.svg
rename app/images/icons/{icon-import.svg => import.svg} (83%)
rename app/images/icons/{icon-info-filled.svg => info.svg} (85%)
rename app/images/icons/{icon-key-filled.svg => key.svg} (78%)
rename app/images/icons/{icon-light-filled.svg => light.svg} (89%)
rename app/images/icons/{icon-link-outline.svg => link.svg} (82%)
rename app/images/icons/{icon-loading-filled.svg => loading.svg} (79%)
rename app/images/icons/{icon-lock-circle-filled.svg => lock-circle.svg} (79%)
create mode 100644 app/images/icons/lock-slash.svg
rename app/images/icons/{icon-lock-filled.svg => lock.svg} (82%)
rename app/images/icons/{icon-login-outline.svg => login.svg} (82%)
create mode 100644 app/images/icons/logout.svg
rename app/images/icons/{icon-menu-outline.svg => menu.svg} (74%)
rename app/images/icons/{icon-message-question-filled.svg => message-question.svg} (80%)
rename app/images/icons/{icon-messages-filled.svg => messages.svg} (78%)
rename app/images/icons/{icon-minus-square-filled.svg => minus-square.svg} (68%)
rename app/images/icons/{icon-minus-outline.svg => minus.svg} (53%)
rename app/images/icons/{icon-mobile-filled.svg => mobile.svg} (74%)
rename app/images/icons/{icon-money-filled.svg => money.svg} (85%)
rename app/images/icons/{icon-monitor-filled.svg => monitor.svg} (76%)
rename app/images/icons/{icon-more-horizontal-outline.svg => more-horizontal.svg} (80%)
rename app/images/icons/{icon-more-vertical-outline.svg => more-vertical.svg} (80%)
create mode 100644 app/images/icons/notification-circle.svg
rename app/images/icons/{icon-notification-filled.svg => notification.svg} (79%)
rename app/images/icons/{icon-password-check-filled.svg => password-check.svg} (84%)
rename app/images/icons/{icon-people-filled.svg => people.svg} (85%)
rename app/images/icons/{icon-programming-arrows-filled.svg => programming-arrows.svg} (85%)
rename app/images/icons/{icon-question-filled.svg => question.svg} (80%)
rename app/images/icons/{icon-received-outline.svg => received.svg} (75%)
rename app/images/icons/{icon-refresh.svg => refresh.svg} (85%)
rename app/images/icons/{icon-save.svg => save.svg} (62%)
rename app/images/icons/{icon-scan-barcode-filled.svg => scan-barcode.svg} (90%)
rename app/images/icons/{icon-scan-focus-outline.svg => scan-focus.svg} (84%)
rename app/images/icons/{icon-scan-filled.svg => scan.svg} (89%)
rename app/images/icons/{icon-scroll-filled.svg => scroll.svg} (79%)
rename app/images/icons/{icon-search-filled.svg => search.svg} (82%)
rename app/images/icons/{icon-security-card-filled.svg => security-card.svg} (84%)
rename app/images/icons/{icon-security-cross-filled.svg => security-cross.svg} (78%)
rename app/images/icons/{icon-security-key-filled.svg => security-key.svg} (74%)
rename app/images/icons/{icon-security-search-filled.svg => security-search.svg} (84%)
create mode 100644 app/images/icons/security-slash.svg
rename app/images/icons/{icon-security-tick-filled.svg => security-tick.svg} (75%)
rename app/images/icons/{icon-security-time-filled.svg => security-time.svg} (81%)
rename app/images/icons/{icon-security-user-filled.svg => security-user.svg} (79%)
create mode 100644 app/images/icons/security.svg
rename app/images/icons/{icon-send-1-filled.svg => send-1.svg} (68%)
rename app/images/icons/{icon-send-2-outline.svg => send-2.svg} (76%)
rename app/images/icons/{icon-setting-filled.svg => setting.svg} (83%)
create mode 100644 app/images/icons/slash.svg
rename app/images/icons/{icon-snaps-mobile-filled.svg => snaps-mobile.svg} (83%)
rename app/images/icons/{icon-snaps-plus-filled.svg => snaps-plus.svg} (90%)
rename app/images/icons/{icon-snaps-filled.svg => snaps.svg} (84%)
rename app/images/icons/{icon-speedometer-filled.svg => speedometer.svg} (84%)
rename app/images/icons/{icon-star.svg => star.svg} (75%)
rename app/images/icons/{icon-student-filled.svg => student.svg} (79%)
rename app/images/icons/{icon-swap-horizontal-outline.svg => swap-horizontal.svg} (81%)
rename app/images/icons/{icon-swap-vertical-filled.svg => swap-vertical.svg} (81%)
rename app/images/icons/{icon-tag-filled.svg => tag.svg} (71%)
rename app/images/icons/{icon-tilde.svg => tilde.svg} (70%)
rename app/images/icons/{icon-timer-filled.svg => timer.svg} (80%)
rename app/images/icons/{icon-trash-filled.svg => trash.svg} (84%)
rename app/images/icons/{icon-trend-down-filled.svg => trend-down.svg} (79%)
rename app/images/icons/{icon-trend-up-filled.svg => trend-up.svg} (80%)
rename app/images/icons/{icon-user-circle-add-filled.svg => user-circle-add.svg} (92%)
rename app/images/icons/{icon-user-circle-filled.svg => user-circle.svg} (88%)
rename app/images/icons/{icon-user-filled.svg => user.svg} (67%)
rename app/images/icons/{icon-wallet-card-filled.svg => wallet-card.svg} (89%)
rename app/images/icons/{icon-wallet-money-filled.svg => wallet-money.svg} (92%)
rename app/images/icons/{icon-wallet-filled.svg => wallet.svg} (82%)
rename app/images/icons/{icon-warning-filled.svg => warning.svg} (80%)
diff --git a/app/images/icons/icon-add-square-filled.svg b/app/images/icons/add-square.svg
similarity index 77%
rename from app/images/icons/icon-add-square-filled.svg
rename to app/images/icons/add-square.svg
index a4e9dea81..c54a1923e 100644
--- a/app/images/icons/icon-add-square-filled.svg
+++ b/app/images/icons/add-square.svg
@@ -1,3 +1,3 @@
-
diff --git a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
index faad6d96a..a02237539 100644
--- a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
+++ b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
@@ -11,7 +11,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
>
}
/>
@@ -108,7 +108,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-lib
placeholder="Public address (0x), or ENS"
rightAccessory={
@@ -130,7 +130,7 @@ import { ButtonIcon, Icon, ICON_NAMES, TextFieldBase } from '../../component-lib
rightAccessory={
isAddressValid && (
)
@@ -217,7 +217,7 @@ const TextFieldCustomInput = (args) => (
size={SIZES.LG}
InputComponent={CustomInputComponent}
leftAccessory={
-
+
}
/>
);
diff --git a/ui/components/component-library/text-field-base/text-field-base.stories.js b/ui/components/component-library/text-field-base/text-field-base.stories.js
index 52128fd69..c04162de3 100644
--- a/ui/components/component-library/text-field-base/text-field-base.stories.js
+++ b/ui/components/component-library/text-field-base/text-field-base.stories.js
@@ -243,10 +243,7 @@ export const LeftAccessoryRightAccessory = (args) => {
name="search"
onChange={handleOnChange}
leftAccessory={
-
+
}
/>
{
onChange={handleOnChange}
rightAccessory={
@@ -317,10 +314,7 @@ export const LeftAccessoryRightAccessory = (args) => {
}
rightAccessory={
value.accountAddress.length === 42 && (
-
+
)
}
/>
@@ -470,7 +464,7 @@ export const InputComponent = (args) => (
size={SIZES.LG}
InputComponent={CustomInputComponent}
leftAccessory={
-
+
}
/>
);
diff --git a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
index cebcf32b5..c49d54b33 100644
--- a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
+++ b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
@@ -7,7 +7,7 @@ exports[`TextFieldSearch should render correctly 1`] = `
>
}
+ leftAccessory={}
showClearButton
clearButtonOnClick={clearButtonOnClick}
clearButtonProps={clearButtonProps}
diff --git a/ui/components/component-library/text-field/text-field.js b/ui/components/component-library/text-field/text-field.js
index 2f4386a91..cf2c8356e 100644
--- a/ui/components/component-library/text-field/text-field.js
+++ b/ui/components/component-library/text-field/text-field.js
@@ -30,7 +30,7 @@ export const TextField = ({