From 3437d7161ff352ab2a757bca21876bfeb1ac1263 Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Thu, 23 Feb 2023 04:15:07 +0530 Subject: [PATCH] UX Icon: updated fas-question icon (#17828) * updated fas-question icon * removed as property from Box * fallback prop for heading --- .../custom-spending-cap/custom-spending-cap-tooltip.js | 3 ++- ui/components/ui/form-field/form-field.js | 9 +++++++++ ui/components/ui/form-field/form-field.stories.js | 6 ++++-- ui/components/ui/form-field/index.scss | 6 ------ ui/components/ui/new-network-info/index.scss | 1 - ui/components/ui/new-network-info/new-network-info.js | 7 ++++++- .../ui/new-network-info/new-network-info.test.js | 2 +- .../ui/review-spending-cap/review-spending-cap.js | 9 +++++++-- 8 files changed, 29 insertions(+), 14 deletions(-) diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js index 966d874a8..ac63f4785 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js @@ -8,6 +8,7 @@ import { DISPLAY, TypographyVariant, } from '../../../helpers/constants/design-system'; +import { Icon, ICON_NAMES } from '../../component-library'; export const CustomSpendingCapTooltip = ({ tooltipContentText, @@ -31,7 +32,7 @@ export const CustomSpendingCapTooltip = ({ {tooltipIcon ? ( ) : ( - tooltipIcon !== '' && + tooltipIcon !== '' && )} diff --git a/ui/components/ui/form-field/form-field.js b/ui/components/ui/form-field/form-field.js index 5dc1e863f..c9173d87d 100644 --- a/ui/components/ui/form-field/form-field.js +++ b/ui/components/ui/form-field/form-field.js @@ -26,6 +26,7 @@ export default function FormField({ TooltipCustomComponent, titleDetail = '', titleDetailWrapperProps, + titleHeadingWrapperProps, error, onChange = undefined, value = 0, @@ -55,6 +56,7 @@ export default function FormField({ className="form-field__heading-title" display={DISPLAY.FLEX} alignItems={AlignItems.baseline} + {...titleHeadingWrapperProps} > {TitleTextCustomComponent || (titleText && ( @@ -210,6 +212,13 @@ FormField.propTypes = { titleDetailWrapperProps: PropTypes.shape({ ...Box.propTypes, }), + /** + * Props to pass to wrapping Box component of the titleHeading component + * Accepts all props of the Box component + */ + titleHeadingWrapperProps: PropTypes.shape({ + ...Box.propTypes, + }), /** * Show error message */ diff --git a/ui/components/ui/form-field/form-field.stories.js b/ui/components/ui/form-field/form-field.stories.js index 6c352d776..f570350ea 100644 --- a/ui/components/ui/form-field/form-field.stories.js +++ b/ui/components/ui/form-field/form-field.stories.js @@ -3,8 +3,9 @@ import React, { useState } from 'react'; import Typography from '../typography'; import Tooltip from '../tooltip'; -import Box from '../box'; +import { Icon, ICON_NAMES } from '../../component-library'; +import { AlignItems } from '../../../helpers/constants/design-system'; import README from './README.mdx'; import FormField from '.'; @@ -94,6 +95,7 @@ export const CustomComponents = (args) => {
TitleTextCustomComponent } @@ -106,7 +108,7 @@ export const CustomComponents = (args) => { position="top" html={Custom tooltip} > - + } titleDetail={TitleDetail} diff --git a/ui/components/ui/form-field/index.scss b/ui/components/ui/form-field/index.scss index a1c267285..9d6e615a1 100644 --- a/ui/components/ui/form-field/index.scss +++ b/ui/components/ui/form-field/index.scss @@ -36,12 +36,6 @@ color: var(--color-text-default); } - i { - color: var(--color-icon-default); - font-size: $font-size-h7; - margin-bottom: 10px; - } - &__input { width: 100%; padding: 10px; diff --git a/ui/components/ui/new-network-info/index.scss b/ui/components/ui/new-network-info/index.scss index 6dafff60f..d5aa9696d 100644 --- a/ui/components/ui/new-network-info/index.scss +++ b/ui/components/ui/new-network-info/index.scss @@ -11,7 +11,6 @@ padding-bottom: 1px; } - .fa-question-circle, .popover-header__button { color: var(--color-icon-default); } diff --git a/ui/components/ui/new-network-info/new-network-info.js b/ui/components/ui/new-network-info/new-network-info.js index 8ad2bca56..8fbcd5102 100644 --- a/ui/components/ui/new-network-info/new-network-info.js +++ b/ui/components/ui/new-network-info/new-network-info.js @@ -26,6 +26,7 @@ import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes'; import Chip from '../chip/chip'; import { setFirstTimeUsedNetwork } from '../../../store/actions'; import { NETWORK_TYPES } from '../../../../shared/constants/network'; +import { Icon, ICON_NAMES } from '../../component-library'; const NewNetworkInfo = () => { const t = useContext(I18nContext); @@ -103,7 +104,11 @@ const NewNetworkInfo = () => { primaryTokenImage ? ( ) : ( - + ) } /> diff --git a/ui/components/ui/new-network-info/new-network-info.test.js b/ui/components/ui/new-network-info/new-network-info.test.js index 01fde0e8c..fdf90aa11 100644 --- a/ui/components/ui/new-network-info/new-network-info.test.js +++ b/ui/components/ui/new-network-info/new-network-info.test.js @@ -65,7 +65,7 @@ describe('NewNetworkInfo', () => { updateTokenDetectionSupportStatus, ); const { container } = renderWithProvider(, store); - const questionMark = container.querySelector('.fa fa-question-circle'); + const questionMark = container.querySelector('.question'); expect(questionMark).toBeDefined(); }); diff --git a/ui/components/ui/review-spending-cap/review-spending-cap.js b/ui/components/ui/review-spending-cap/review-spending-cap.js index eb134b7c8..e8a454f8f 100644 --- a/ui/components/ui/review-spending-cap/review-spending-cap.js +++ b/ui/components/ui/review-spending-cap/review-spending-cap.js @@ -4,7 +4,7 @@ import { I18nContext } from '../../../contexts/i18n'; import Box from '../box'; import Tooltip from '../tooltip'; import Typography from '../typography'; -import { ButtonLink } from '../../component-library'; +import { ButtonLink, Icon, ICON_NAMES } from '../../component-library'; import { AlignItems, DISPLAY, @@ -15,6 +15,7 @@ import { Size, BackgroundColor, TextColor, + Color, } from '../../../helpers/constants/design-system'; import { Numeric } from '../../../../shared/modules/Numeric'; @@ -92,7 +93,11 @@ export default function ReviewSpendingCap({ )} {Number(tokenValue) === 0 && ( - + )}