From a3b78f0f4f37b53e7125fb0ca05d043016113264 Mon Sep 17 00:00:00 2001 From: Ariella Vu <20778143+digiwand@users.noreply.github.com> Date: Fri, 13 Oct 2023 16:36:38 +0200 Subject: [PATCH] Add min-width support to Box DS component; Fix Blockaid Security Alert overflow issue; Fix missing Box width-max breakpoint styles (#21317) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** - Fix Blockaid Security Alert Overflow Issue - Fix missing ".mm-box--width-max" breakpoint styles. Discovered while adding min-width styles - Add min-width support to Box DS component to support fix - Add 0 value to $fractions ## **Manual testing steps** One way to test this: 1. yarn storybook 2. go to Blockaid Security Alert page 3. update "Features" value with the example or another long text. example: > "The address 0x07Be9763a718C0539017E2Ab6fC42853b4aEeb6B is malicious" ## **Screenshots/Recordings** ### **Before** Screenshot 2023-10-11 at 10 45 46 AM ### **After** Screenshot 2023-10-11 at 10 45 18 AM ## **Related issues** Fixes https://github.com/MetaMask/metamask-extension/issues/21316 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained: - [ ] What problem this PR is solving. - [ ] How this problem was solved. - [ ] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [ ] I’ve included tests if applicable. - [ ] I’ve documented any added code. - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../ledger-instruction-field.test.js.snap | 4 +- .../__snapshots__/eth-sign-modal.test.js.snap | 4 +- ...ecurity-provider-banner-alert.test.js.snap | 4 +- .../blockaid-banner-alert.test.js.snap | 18 ++++-- .../blockaid-banner-alert.js | 7 ++- .../__snapshots__/banner-alert.test.tsx.snap | 4 +- .../__snapshots__/banner-base.test.tsx.snap | 4 +- .../banner-base/banner-base.tsx | 7 ++- .../__snapshots__/banner-tip.test.tsx.snap | 4 +- ui/components/component-library/box/box.scss | 59 ++++++++++++++++++- .../component-library/box/box.stories.tsx | 6 ++ .../component-library/box/box.test.tsx | 33 +++++++++++ ui/components/component-library/box/box.tsx | 2 + .../component-library/box/box.types.ts | 7 +++ .../detected-token-banner.test.js.snap | 4 +- ui/css/design-system/attributes.scss | 1 + ui/helpers/constants/design-system.ts | 1 + .../confirm-add-suggested-nft.js | 1 + .../confirm-send-ether.test.js.snap | 8 ++- .../confirm-transaction-base.test.js.snap | 4 +- .../remove-snap-account.test.js.snap | 4 +- .../__snapshots__/reveal-seed.test.js.snap | 4 +- 22 files changed, 167 insertions(+), 23 deletions(-) diff --git a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap index 046b5f148a47..d8fb129be817 100644 --- a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap +++ b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap @@ -13,7 +13,9 @@ exports[`LedgerInstructionField Component rendering should render properly with class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default" style="mask-image: url('./images/icons/info.svg');" /> -
+
diff --git a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap index 15ec6ad35b0f..c82d870b2466 100644 --- a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap +++ b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap @@ -47,7 +47,9 @@ exports[`Eth Sign Modal should match snapshot 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default" style="mask-image: url('./images/icons/danger.svg');" /> -
+
If you've been asked to turn this setting on, you might be getting scammed
diff --git a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap index 84815da0dc0b..277990b592da 100644 --- a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap +++ b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap @@ -10,7 +10,9 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default" style="mask-image: url('./images/icons/danger.svg');" /> -
+

diff --git a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap index 3234ac02be94..dc6765ba143f 100644 --- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap +++ b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap @@ -9,7 +9,9 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default" style="mask-image: url('./images/icons/danger.svg');" /> -

+

@@ -55,7 +57,9 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default" style="mask-image: url('./images/icons/danger.svg');" /> -

+

@@ -79,7 +83,9 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default" style="mask-image: url('./images/icons/danger.svg');" /> -

+

@@ -126,7 +132,9 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default" style="mask-image: url('./images/icons/danger.svg');" /> -

+

@@ -158,7 +166,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = ` class="disclosure__content normal" >

  • • diff --git a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js index a7901097c02d..f17d30222b71 100644 --- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js +++ b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js @@ -3,7 +3,10 @@ import PropTypes from 'prop-types'; import { captureException } from '@sentry/browser'; import { Text } from '../../../component-library'; -import { Severity } from '../../../../helpers/constants/design-system'; +import { + OverflowWrap, + Severity, +} from '../../../../helpers/constants/design-system'; import { I18nContext } from '../../../../contexts/i18n'; import { @@ -64,7 +67,7 @@ function BlockaidBannerAlert({ securityAlertResponse, ...props }) { const description = t(REASON_TO_DESCRIPTION_TKEY[reason] || 'other'); const details = features?.length ? ( - + {features.map((feature, i) => (
  • • {feature}
    • ))} diff --git a/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.tsx.snap b/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.tsx.snap index 2224365dfb01..bbc92e6ecbfe 100644 --- a/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.tsx.snap +++ b/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.tsx.snap @@ -10,7 +10,9 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default" style="mask-image: url('./images/icons/info.svg');" /> -
    +

    diff --git a/ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap index b7186d2acafa..07bfb167b90d 100644 --- a/ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap +++ b/ui/components/component-library/banner-base/__snapshots__/banner-base.test.tsx.snap @@ -6,7 +6,9 @@ exports[`BannerBase should render BannerBase element correctly 1`] = ` class="mm-box mm-banner-base mm-box--padding-3 mm-box--display-flex mm-box--gap-2 mm-box--background-color-background-default mm-box--rounded-sm" data-testid="banner-base" > -

    +

    diff --git a/ui/components/component-library/banner-base/banner-base.tsx b/ui/components/component-library/banner-base/banner-base.tsx index 9947d7a6e001..1dc0369b3025 100644 --- a/ui/components/component-library/banner-base/banner-base.tsx +++ b/ui/components/component-library/banner-base/banner-base.tsx @@ -4,6 +4,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { BackgroundColor, + BlockSize, BorderRadius, Display, TextVariant, @@ -55,7 +56,8 @@ export const BannerBase: BannerBaseComponent = React.forwardRef( > {startAccessory && <>{startAccessory}} -

    + {/* min-Width: 0 style is used to prevent grid/flex blowout */} + {title && ( {title} @@ -76,7 +78,8 @@ export const BannerBase: BannerBaseComponent = React.forwardRef( {actionButtonLabel} )} -
    + + {onClose && (
    -
    +

    diff --git a/ui/components/component-library/box/box.scss b/ui/components/component-library/box/box.scss index 841afe88c6b9..b7b08040cc50 100644 --- a/ui/components/component-library/box/box.scss +++ b/ui/components/component-library/box/box.scss @@ -231,6 +231,9 @@ $attributesToApplyExtraProperties: margin; width: 100%; } + &--min-width-full { + min-width: 100%; + } &--height-full { height: 100%; @@ -241,6 +244,10 @@ $attributesToApplyExtraProperties: margin; width: $value; } + &--min-width-#{$fraction} { + min-width: $value; + } + &--height-#{$fraction} { height: $value; } @@ -252,6 +259,10 @@ $attributesToApplyExtraProperties: margin; &--#{$breakpoint}\:width-#{$fraction} { width: $value; } + &--#{$breakpoint}\:min-width-#{$fraction} { + min-width: $value; + } + &--#{$breakpoint}\:height-#{$fraction} { height: $value; } @@ -268,6 +279,14 @@ $attributesToApplyExtraProperties: margin; } } + @each $breakpoint, $min-width in $screen-sizes-map { + @media screen and (min-width: $min-width) { + &--#{$breakpoint}\:min-width-full { + min-width: 100%; + } + } + } + // breakpoint classes @each $breakpoint, $min-width in $screen-sizes-map { @media screen and (min-width: $min-width) { @@ -301,6 +320,18 @@ $attributesToApplyExtraProperties: margin; } } + &--min-width-screen { + min-width: 100vw; + } + // breakpoint classes + @each $breakpoint, $min-width in $screen-sizes-map { + @media screen and (min-width: $min-width) { + &--#{$breakpoint}\:min-width-screen { + min-width: 100vw; + } + } + } + &--height-max { height: max-content; } @@ -319,8 +350,20 @@ $attributesToApplyExtraProperties: margin; // breakpoint classes @each $breakpoint, $min-width in $screen-sizes-map { @media screen and (min-width: $min-width) { - &--#{$breakpoint}\:height-max { - height: max-content; + &--#{$breakpoint}\:width-max { + width: max-content; + } + } + } + + &--min-width-max { + min-width: max-content; + } + // breakpoint classes + @each $breakpoint, $min-width in $screen-sizes-map { + @media screen and (min-width: $min-width) { + &--#{$breakpoint}\:min-width-max { + min-width: max-content; } } } @@ -349,6 +392,18 @@ $attributesToApplyExtraProperties: margin; } } + &--min-width-min { + min-width: min-content; + } + // breakpoint classes + @each $breakpoint, $min-width in $screen-sizes-map { + @media screen and (min-width: $min-width) { + &--#{$breakpoint}\:min-width-min { + min-width: min-content; + } + } + } + // text @each $alignment in design-system.$text-align { &--text-align-#{$alignment} { diff --git a/ui/components/component-library/box/box.stories.tsx b/ui/components/component-library/box/box.stories.tsx index c9d14bc4af31..cb51a2dfce95 100644 --- a/ui/components/component-library/box/box.stories.tsx +++ b/ui/components/component-library/box/box.stories.tsx @@ -62,6 +62,11 @@ export default { control: 'multi-select', table: { category: 'display' }, }, + minWidth: { + options: Object.values(BlockSize), + control: 'multi-select', + table: { category: 'display' }, + }, height: { options: Object.values(BlockSize), control: 'select', @@ -224,6 +229,7 @@ BoxDefaultStory.args = { display: Display.Flex, justifyContent: JustifyContent.center, alignItems: AlignItems.center, + minWidth: BlockSize.Zero, width: BlockSize.Half, height: BlockSize.Half, borderColor: BorderColor.borderDefault, diff --git a/ui/components/component-library/box/box.test.tsx b/ui/components/component-library/box/box.test.tsx index e49eddcff02d..a8b9354b23e3 100644 --- a/ui/components/component-library/box/box.test.tsx +++ b/ui/components/component-library/box/box.test.tsx @@ -1964,6 +1964,39 @@ describe('Box', () => { expect(getByText('Box content')).toHaveClass('mm-box--md:width-max'); expect(getByText('Box content')).toHaveClass('mm-box--lg:width-min'); }); + it('should render the Box with the min-width class', () => { + const { getByText } = render( + <> + Box zero + Box one fourth + Box max + Box min + , + ); + expect(getByText('Box zero')).toHaveClass('mm-box--width-0'); + expect(getByText('Box one fourth')).toHaveClass('mm-box--width-1/4'); + expect(getByText('Box max')).toHaveClass('mm-box--width-max'); + expect(getByText('Box min')).toHaveClass('mm-box--width-min'); + }); + it('should render the Box with the responsive min-width classes', () => { + const { getByText } = render( + + Box content + , + ); + const boxElement = getByText('Box content'); + expect(boxElement).toHaveClass('mm-box--width-0'); + expect(boxElement).toHaveClass('mm-box--sm:width-1/4'); + expect(boxElement).toHaveClass('mm-box--md:width-screen'); + expect(boxElement).toHaveClass('mm-box--lg:width-max'); + }); it('should render the Box with the height class', () => { const { getByText } = render( <> diff --git a/ui/components/component-library/box/box.tsx b/ui/components/component-library/box/box.tsx index d09d0a6d6bed..4a41d638c997 100644 --- a/ui/components/component-library/box/box.tsx +++ b/ui/components/component-library/box/box.tsx @@ -165,6 +165,7 @@ export const Box: BoxComponent = React.forwardRef( gap, display, width, + minWidth, height, children, className = '', @@ -208,6 +209,7 @@ export const Box: BoxComponent = React.forwardRef( generateClassNames('align-items', alignItems, isValidString), generateClassNames('text-align', textAlign, isValidString), generateClassNames('width', width, isValidString), + generateClassNames('min-width', minWidth, isValidString), generateClassNames('height', height, isValidString), generateClassNames('color', color, isValidString), generateClassNames('background-color', backgroundColor, isValidString), diff --git a/ui/components/component-library/box/box.types.ts b/ui/components/component-library/box/box.types.ts index 46fa1404d05c..90afd917e8a3 100644 --- a/ui/components/component-library/box/box.types.ts +++ b/ui/components/component-library/box/box.types.ts @@ -42,6 +42,7 @@ export type StyleDeclarationType = | 'align-items' | 'text-align' | 'width' + | 'min-width' | 'height' | 'color' | 'background-color' @@ -391,6 +392,12 @@ export interface StyleUtilityProps { * Accepts responsive props in the form of an array. */ width?: BlockSize | BlockSizeArray; + /** + * The min-width of the component. + * Use BlockSize enum from '../../../helpers/constants/design-system'; + * Accepts responsive props in the form of an array. + */ + minWidth?: BlockSize | BlockSizeArray; /** * The height of the component. * Use BlockSize enum from '../../../helpers/constants/design-system'; diff --git a/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap index 014cd0d77b3c..bfbe77c65282 100644 --- a/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap +++ b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap @@ -10,7 +10,9 @@ exports[`DetectedTokensBanner should render correctly 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-primary-default" style="mask-image: url('./images/icons/info.svg');" /> -

    +

    diff --git a/ui/css/design-system/attributes.scss b/ui/css/design-system/attributes.scss index c3b4f43edf67..de019701b1e7 100644 --- a/ui/css/design-system/attributes.scss +++ b/ui/css/design-system/attributes.scss @@ -8,6 +8,7 @@ $flex-direction: row, row-reverse, column, column-reverse; $flex-wrap: wrap, wrap-reverse, nowrap; $fractions: ( + 0: 0, 1\/2: 50%, 1\/3: 33.333333%, 2\/3: 66.666667%, diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts index 881d4bea9232..7fcc7acc44b0 100644 --- a/ui/helpers/constants/design-system.ts +++ b/ui/helpers/constants/design-system.ts @@ -375,6 +375,7 @@ export const FRACTIONS = { }; export enum BlockSize { + Zero = '0', Half = '1/2', OneThird = '1/3', TwoThirds = '2/3', diff --git a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js index 21cb9ad1cac6..a6a0c9dfdfef 100644 --- a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js +++ b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js @@ -240,6 +240,7 @@ const ConfirmAddSuggestedNFT = () => { return ( -

    +

    @@ -338,7 +340,9 @@ exports[`ConfirmSendEther should render correct information for for confirm send class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default" style="mask-image: url('./images/icons/danger.svg');" /> -

    +

    diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap index 344a28ff4714..28f7c6d7c711 100644 --- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap +++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap @@ -487,7 +487,9 @@ exports[`Confirm Transaction Base should match snapshot 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default" style="mask-image: url('./images/icons/danger.svg');" /> -

    +

    diff --git a/ui/pages/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap index 6081dc41ab4e..7115a4fca692 100644 --- a/ui/pages/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap +++ b/ui/pages/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap @@ -173,7 +173,9 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default" style="mask-image: url('./images/icons/danger.svg');" /> -

    +

    diff --git a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap index 92fce9dedec0..f63efe24911e 100644 --- a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap +++ b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap @@ -60,7 +60,9 @@ exports[`Reveal Seed Page should match snapshot 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default" style="mask-image: url('./images/icons/danger.svg');" /> -

    +