feat(shared): migrate Box to ADR-0003 and ADR-0004 shared types (DSYS-482)

packages/design-system-react-native/MIGRATION.md

@@ -99,6 +99,30 @@ If TypeScript now flags props you were previously passing to `Icon`, those props
 </View>
 ```
 
+#### Box: Type imports moved to `@metamask/design-system-shared`
+
+`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` are now defined in `@metamask/design-system-shared` and re-exported from `@metamask/design-system-react-native`. All existing import paths through `@metamask/design-system-react-native` continue to work without change.
+
+```tsx
+// Both of these work — shared is the source of truth
+import { BoxBackgroundColor } from '@metamask/design-system-react-native';
+import { BoxBackgroundColor } from '@metamask/design-system-shared';
+```
+
+#### Box: Removed stale `-alternative` color tokens
+
+The following `BoxBackgroundColor` and `BoxBorderColor` entries have been removed. These tokens were removed from `@metamask/design-tokens` in v4.0.0 but were incorrectly carried over into the Box const objects:
+
+| Removed Entry                           | Replacement                         |
+| --------------------------------------- | ----------------------------------- |
+| `BoxBackgroundColor.WarningAlternative` | `BoxBackgroundColor.WarningDefault` |
+| `BoxBackgroundColor.SuccessAlternative` | `BoxBackgroundColor.SuccessDefault` |
+| `BoxBorderColor.WarningAlternative`     | `BoxBorderColor.WarningDefault`     |
+| `BoxBorderColor.SuccessAlternative`     | `BoxBorderColor.SuccessDefault`     |
+| `BoxBorderColor.InfoAlternative`        | `BoxBorderColor.InfoDefault`        |
+
+These tokens had no backing CSS custom property, so any usage was already producing no visible style. Replace with `-default` or `-muted` as appropriate.
+
 ---
 
 ### From version 0.16.0 to 0.17.0

packages/design-system-react-native/src/components/BannerAlert/BannerAlert.constants.ts

@@ -1,11 +1,10 @@
-import { BannerAlertSeverity } from '@metamask/design-system-shared';
-
 import {
+  BannerAlertSeverity,
   BoxBackgroundColor,
   BoxBorderColor,
-  IconColor,
-  IconName,
-} from '../../types';
+} from '@metamask/design-system-shared';
+
+import { IconColor, IconName } from '../../types';
 
 export const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<
   (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],

packages/design-system-react-native/src/components/BannerAlert/BannerAlert.test.tsx

@@ -1,8 +1,9 @@
+import { BoxBackgroundColor } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 
-import { BoxBackgroundColor, IconColor, IconName } from '../../types';
+import { IconColor, IconName } from '../../types';
 import { BannerBase } from '../BannerBase';
 
 import { BannerAlert } from './BannerAlert';

packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx

@@ -1,15 +1,14 @@
-import { FontWeight, TextVariant } from '@metamask/design-system-shared';
-import React from 'react';
-import { GestureResponderEvent } from 'react-native';
-
 import {
   BoxAlignItems,
   BoxBackgroundColor,
-  ButtonIconSize,
-  ButtonSize,
   BoxFlexDirection,
-  IconName,
-} from '../../types';
+  FontWeight,
+  TextVariant,
+} from '@metamask/design-system-shared';
+import React from 'react';
+import { GestureResponderEvent } from 'react-native';
+
+import { ButtonIconSize, ButtonSize, IconName } from '../../types';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { ButtonIcon } from '../ButtonIcon';

packages/design-system-react-native/src/components/Box/Box.constants.ts

@@ -1,4 +1,7 @@
-import type { BoxSpacing, BoxBorderWidth } from '../../types';
+import type {
+  BoxSpacing,
+  BoxBorderWidth,
+} from '@metamask/design-system-shared';
 
 export const TWCLASSMAP_BOX_GAP: Record<BoxSpacing, string> = {
   0: 'gap-0',

packages/design-system-react-native/src/components/Box/Box.stories.tsx

@@ -1,16 +1,16 @@
-import { TextColor } from '@metamask/design-system-shared';
-import type { Meta, StoryObj } from '@storybook/react-native';
-import React from 'react';
-import { ScrollView } from 'react-native';
-
 import {
-  BoxFlexDirection,
-  BoxFlexWrap,
   BoxAlignItems,
-  BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-} from '../../types';
+  BoxFlexDirection,
+  BoxFlexWrap,
+  BoxJustifyContent,
+  TextColor,
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React from 'react';
+import { ScrollView } from 'react-native';
+
 import { Text } from '../Text';
 
 import { Box } from './Box';
@@ -949,15 +949,6 @@ export const BorderColor: Story = {
         >
           <Text>WarningDefault</Text>
         </Box>
-        <Box
-          {...args}
-          padding={3}
-          backgroundColor={BoxBackgroundColor.WarningMuted}
-          borderColor={BoxBorderColor.WarningAlternative}
-          borderWidth={2}
-        >
-          <Text>WarningAlternative</Text>
-        </Box>
         <Box
           {...args}
           padding={3}
@@ -987,15 +978,6 @@ export const BorderColor: Story = {
         >
           <Text>SuccessDefault</Text>
         </Box>
-        <Box
-          {...args}
-          padding={3}
-          backgroundColor={BoxBackgroundColor.SuccessMuted}
-          borderColor={BoxBorderColor.SuccessAlternative}
-          borderWidth={2}
-        >
-          <Text>SuccessAlternative</Text>
-        </Box>
         <Box
           {...args}
           padding={3}
@@ -1025,15 +1007,6 @@ export const BorderColor: Story = {
         >
           <Text>InfoDefault</Text>
         </Box>
-        <Box
-          {...args}
-          padding={3}
-          backgroundColor={BoxBackgroundColor.InfoMuted}
-          borderColor={BoxBorderColor.InfoAlternative}
-          borderWidth={2}
-        >
-          <Text>InfoAlternative</Text>
-        </Box>
         <Box
           {...args}
           padding={3}
@@ -1263,15 +1236,6 @@ export const BackgroundColor: Story = {
         >
           <Text>WarningDefault</Text>
         </Box>
-        <Box
-          {...args}
-          padding={3}
-          backgroundColor={BoxBackgroundColor.WarningAlternative}
-          borderColor={BoxBorderColor.WarningDefault}
-          borderWidth={1}
-        >
-          <Text>WarningAlternative</Text>
-        </Box>
         <Box
           {...args}
           padding={3}
@@ -1301,15 +1265,6 @@ export const BackgroundColor: Story = {
         >
           <Text>SuccessDefault</Text>
         </Box>
-        <Box
-          {...args}
-          padding={3}
-          backgroundColor={BoxBackgroundColor.SuccessAlternative}
-          borderColor={BoxBorderColor.SuccessDefault}
-          borderWidth={1}
-        >
-          <Text>SuccessAlternative</Text>
-        </Box>
         <Box
           {...args}
           padding={3}

packages/design-system-react-native/src/components/Box/Box.test.tsx

@@ -1,18 +1,17 @@
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { renderHook } from '@testing-library/react-hooks';
-import { render } from '@testing-library/react-native';
-import React from 'react';
-import { Text } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-
 import {
   BoxFlexDirection,
   BoxFlexWrap,
   BoxAlignItems,
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-} from '../../types';
+} from '@metamask/design-system-shared';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { renderHook } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { Text } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import { Box } from './Box';
 import {

packages/design-system-react-native/src/components/Box/Box.types.ts

@@ -1,123 +1,10 @@
+import type { BoxPropsShared } from '@metamask/design-system-shared';
 import type { ViewProps } from 'react-native';
 
-import type {
-  BoxFlexDirection,
-  BoxFlexWrap,
-  BoxSpacing,
-  BoxBorderWidth,
-  BoxAlignItems,
-  BoxJustifyContent,
-  BoxBackgroundColor,
-  BoxBorderColor,
-} from '../../types';
-
-export type BoxProps = {
-  /**
-   * The flexDirection style of the component.
-   */
-  flexDirection?: BoxFlexDirection;
-  /**
-   * The flexWrap style of the component.
-   */
-  flexWrap?: BoxFlexWrap;
-  /**
-   * The gap between the component's children.
-   * Use 1-12 for a gap of 4px-48px.
-   */
-  gap?: BoxSpacing;
-  /**
-   * The alignItems style of the component.
-   */
-  alignItems?: BoxAlignItems;
-  /**
-   * The justifyContent style of the component.
-   */
-  justifyContent?: BoxJustifyContent;
-  /**
-   * The margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  margin?: BoxSpacing;
-  /**
-   * The top margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginTop?: BoxSpacing;
-  /**
-   * The right margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginRight?: BoxSpacing;
-  /**
-   * The bottom margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginBottom?: BoxSpacing;
-  /**
-   * The left margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginLeft?: BoxSpacing;
-  /**
-   * The horizontal margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginHorizontal?: BoxSpacing;
-  /**
-   * The vertical margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginVertical?: BoxSpacing;
-  /**
-   * The padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  padding?: BoxSpacing;
-  /**
-   * The top padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingTop?: BoxSpacing;
-  /**
-   * The right padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingRight?: BoxSpacing;
-  /**
-   * The bottom padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingBottom?: BoxSpacing;
-  /**
-   * The left padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingLeft?: BoxSpacing;
-  /**
-   * The horizontal padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingHorizontal?: BoxSpacing;
-  /**
-   * The vertical padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingVertical?: BoxSpacing;
-  /**
-   * The border width of the component.
-   * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.
-   */
-  borderWidth?: BoxBorderWidth;
-  /**
-   * The border color of the component.
-   */
-  borderColor?: BoxBorderColor;
-  /**
-   * The background color of the component.
-   */
-  backgroundColor?: BoxBackgroundColor;
-  /**
-   * Optional prop to add twrnc overriding classNames.
-   */
-  twClassName?: string;
-} & ViewProps;
+export type BoxProps = BoxPropsShared &
+  ViewProps & {
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+  };

packages/design-system-react-native/src/components/Box/index.ts

@@ -5,7 +5,8 @@ export {
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-} from '../../types';
-export type { BoxSpacing, BoxBorderWidth } from '../../types';
+  type BoxSpacing,
+  type BoxBorderWidth,
+} from '@metamask/design-system-shared';
 export { Box } from './Box';
 export type { BoxProps } from './Box.types';

packages/design-system-react-native/src/components/BoxColumn/BoxColumn.tsx

@@ -1,6 +1,6 @@
+import { BoxFlexDirection } from '@metamask/design-system-shared';
 import React from 'react';
 
-import { BoxFlexDirection } from '../../types';
 import { Box } from '../Box';
 import { TextOrChildren } from '../temp-components/TextOrChildren';
 

packages/design-system-react-native/src/components/BoxRow/BoxRow.tsx

@@ -1,6 +1,9 @@
+import {
+  BoxAlignItems,
+  BoxFlexDirection,
+} from '@metamask/design-system-shared';
 import React from 'react';
 
-import { BoxAlignItems, BoxFlexDirection } from '../../types';
 import { Box } from '../Box';
 import { TextOrChildren } from '../temp-components/TextOrChildren';
 

packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx

@@ -1,6 +1,7 @@
+import { BoxFlexDirection } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 
-import { BoxFlexDirection, ButtonBaseSize } from '../../types';
+import { ButtonBaseSize } from '../../types';
 import { Box } from '../Box';
 import { IconName } from '../Icon';