Add min-width support to Box DS component; Fix Blockaid Security Alert overflow issue; Fix missing Box width-max breakpoint styles

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');"
         />
-        <div>
+        <div
+          class="mm-box mm-box--min-width-0"
+        >
           <div
             class="ledger-live-dialog"
           >

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');"
     />
-    <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"
       >

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');"
   />
-  <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>
                 • 

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 ? (
-    <Text as="ul">
+    <Text as="ul" overflowWrap={OverflowWrap.BreakWord}>
       {features.map((feature, i) => (
         <li key={`blockaid-detail-${i}`}>• {feature}</li>
       ))}

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"
       >

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"
       >

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"

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"
       >

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} {

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,

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(
         <>

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),

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';

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');"
     />
-    <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"
       >

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%,

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',

ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
-{
+Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div