Add min-width support to Box DS component; Fix Blockaid Security Aler…

…t overflow issue; Fix missing Box width-max breakpoint styles (#21317) ## **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** <img width="420" alt="Screenshot 2023-10-11 at 10 45 46 AM" src="https://github.com/MetaMask/metamask-extension/assets/20778143/f2051485-0d98-4b9b-819f-f2a710131c08"> ### **After** <img width="420" alt="Screenshot 2023-10-11 at 10 45 18 AM" src="https://github.com/MetaMask/metamask-extension/assets/20778143/98c52b93-c68d-4d41-88e0-969690e34d92"> ## **Related issues** Fixes #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.
MetaMask · Oct 13, 2023 · a3b78f0 · a3b78f0
1 parent b8c9f3f
commit a3b78f0
Show file tree

Hide file tree

Showing 22 changed files with 167 additions and 23 deletions.
diff --git a/...mponents/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap b/...mponents/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');"
         />
-        <div>
+        <div
+          class="mm-box mm-box--min-width-0"
+        >
           <div
             class="ledger-live-dialog"
           >

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
@@ -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');"
       />
-      <div>
+      <div
+        class="mm-box mm-box--min-width-0"
+      >
         If you've been asked to turn this setting on,
          you might be getting scammed
       </div>

diff --git a/.../security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/.../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');"
     />
-    <div>
+    <div
+      class="mm-box mm-box--min-width-0"
+    >
       <p
         class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >

diff --git a/...vider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/...vider-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');"
   />
-  <div>
+  <div
+    class="mm-box mm-box--min-width-0"
+  >
     <p
       class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
     >
@@ -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');"
   />
-  <div>
+  <div
+    class="mm-box mm-box--min-width-0"
+  >
     <p
       class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
     >
@@ -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');"
   />
-  <div>
+  <div
+    class="mm-box mm-box--min-width-0"
+  >
     <p
       class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
     >
@@ -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');"
     />
-    <div>
+    <div
+      class="mm-box mm-box--min-width-0"
+    >
       <p
         class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >
@@ -158,7 +166,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
             class="disclosure__content normal"
           >
             <ul
-              class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+              class="mm-box mm-text mm-text--body-md mm-text--overflow-wrap-break-word mm-box--color-text-default"
             >
               <li>
                 • 

diff --git a/...ponents/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js b/...ponents/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 ? (
-    <Text as="ul">
+    <Text as="ul" overflowWrap={OverflowWrap.BreakWord}>
       {features.map((feature, i) => (
         <li key={`blockaid-detail-${i}`}>• {feature}</li>
       ))}

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
@@ -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');"
     />
-    <div>
+    <div
+      class="mm-box mm-box--min-width-0"
+    >
       <p
         class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >

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
@@ -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"
   >
-    <div>
+    <div
+      class="mm-box mm-box--min-width-0"
+    >
       <p
         class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >

diff --git 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}</>}
 
-        <div>
+        {/* min-Width: 0 style is used to prevent grid/flex blowout */}
+        <Box minWidth={BlockSize.Zero}>
           {title && (
             <Text variant={TextVariant.bodyLgMedium} {...titleProps}>
               {title}
@@ -76,7 +78,8 @@ export const BannerBase: BannerBaseComponent = React.forwardRef(
               {actionButtonLabel}
             </ButtonLink>
           )}
-        </div>
+        </Box>
+
         {onClose && (
           <ButtonIcon
             className="mm-banner-base__close-button"

diff --git a/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.tsx.snap b/ui/components/component-library/banner-tip/__snapshots__/banner-tip.test.tsx.snap
@@ -15,7 +15,9 @@ exports[`BannerTip should render BannerTip element correctly 1`] = `
         src="images/fox-greeting.png"
       />
     </div>
-    <div>
+    <div
+      class="mm-box mm-box--min-width-0"
+    >
       <p
         class="mm-box mm-text mm-text--body-lg-medium mm-box--color-text-default"
       >

diff --git 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
@@ -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
@@ -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 width={BlockSize.Zero}>Box zero</Box>
+          <Box width={BlockSize.OneFourth}>Box one fourth</Box>
+          <Box width={BlockSize.Max}>Box max</Box>
+          <Box width={BlockSize.Min}>Box min</Box>
+        </>,
+      );
+      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
+          width={[
+            BlockSize.Zero,
+            BlockSize.OneFourth,
+            BlockSize.Screen,
+            BlockSize.Max,
+          ]}
+        >
+          Box content
+        </Box>,
+      );
+      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
@@ -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
@@ -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/...ponents/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap b/...ponents/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');"
     />
-    <div>
+    <div
+      class="mm-box mm-box--min-width-0"
+    >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
       >

diff --git 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
@@ -375,6 +375,7 @@ export const FRACTIONS = {
 };
 
 export enum BlockSize {
+  Zero = '0',
   Half = '1/2',
   OneThird = '1/3',
   TwoThirds = '2/3',