Skip to content

feat: migrate BadgeIcon to ADR-0004 shared types (DSYS-479) #1010

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
georgewrmarshall merged 4 commits into from
Apr 28, 2026
Merged

feat: migrate BadgeIcon to ADR-0004 shared types (DSYS-479) #1010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee7ed4d
feat: migrate BadgeIcon to ADR-0004 shared types (DSYS-479)
cursoragent Mar 29, 2026
d5890a9
fix: update BadgeIcon IconName ownership
georgewrmarshall Apr 27, 2026
2c38fba
refactor: use shared icon types in BadgeIcon
georgewrmarshall Apr 27, 2026
2263e67
Merge branch 'main' into cursor/enum-shared-type-migration-5ff7
georgewrmarshall Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
// import figma needs to remain as figma otherwise it breaks code connect
// eslint-disable-next-line import-x/no-named-as-default
import figma from '@figma/code-connect';
import { IconName } from '@metamask/design-system-shared';
import React from 'react';

import { IconName } from '../Icon';

import { BadgeIcon } from './BadgeIcon';

/**
Expand Down
3 changes: 1 addition & 2 deletions packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { IconName } from '@metamask/design-system-shared';
import type { Meta, StoryObj } from '@storybook/react-native';

import { IconName } from '../Icon';

import { BadgeIcon } from './BadgeIcon';
import type { BadgeIconProps } from './BadgeIcon.types';

Expand Down
2 changes: 1 addition & 1 deletion packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { IconColor, IconName, IconSize } 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 { IconName, IconColor, IconSize } from '../Icon';
import { Text } from '../Text';

import { BadgeIcon } from './BadgeIcon';
Expand Down
3 changes: 2 additions & 1 deletion packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { IconColor, IconSize } from '@metamask/design-system-shared';
import { useTailwind } from '@metamask/design-system-twrnc-preset';
import React from 'react';
import { View } from 'react-native';

import { Icon, IconSize, IconColor } from '../Icon';
import { Icon } from '../Icon';

import type { BadgeIconProps } from './BadgeIcon.types';

Expand Down
12 changes: 5 additions & 7 deletions packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import type { BadgeIconPropsShared } from '@metamask/design-system-shared';
import type { ViewProps } from 'react-native';

import type { IconName, IconProps } from '../Icon';
import type { IconProps } from '../Icon';

/**
* BadgeIcon component props.
* BadgeIcon component props (React Native platform-specific)
* Extends shared props from @metamask/design-system-shared with React Native specific platform concerns
*/
export type BadgeIconProps = {
/**
* Required prop to specify an icon to show
*/
iconName: IconName;
export type BadgeIconProps = BadgeIconPropsShared & {
/**
* Optional prop to pass additional properties to the icon
*/
Expand Down
3 changes: 1 addition & 2 deletions packages/design-system-react/src/components/BadgeIcon/BadgeIcon.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
// import figma needs to remain as figma otherwise it breaks code connect
// eslint-disable-next-line import-x/no-named-as-default
import figma from '@figma/code-connect';
import { IconName } from '@metamask/design-system-shared';
import React from 'react';

import { IconName } from '../Icon';

import { BadgeIcon } from './BadgeIcon';

/**
Expand Down
3 changes: 1 addition & 2 deletions packages/design-system-react/src/components/BadgeIcon/BadgeIcon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { IconName } from '@metamask/design-system-shared';
import type { Meta, StoryObj } from '@storybook/react-vite';
import React from 'react';

import { IconName } from '../Icon';

import { BadgeIcon } from './BadgeIcon';
import type { BadgeIconProps } from './BadgeIcon.types';
import README from './README.mdx';
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system-react/src/components/BadgeIcon/BadgeIcon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// BadgeIcon.test.tsx
import { IconColor, IconName } from '@metamask/design-system-shared';
import { render, screen } from '@testing-library/react';
import React, { createRef } from 'react';

import { IconName, IconColor } from '../Icon';
import { TWCLASSMAP_ICON_SIZE_DIMENSION } from '../Icon/Icon.constants';

import { BadgeIcon } from './BadgeIcon';
Expand Down
3 changes: 2 additions & 1 deletion packages/design-system-react/src/components/BadgeIcon/BadgeIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { IconSize } from '@metamask/design-system-shared';
import React, { forwardRef } from 'react';

import { twMerge } from '../../utils/tw-merge';
import { Icon, IconSize } from '../Icon';
import { Icon } from '../Icon';

import type { BadgeIconProps } from './BadgeIcon.types';

Expand Down
43 changes: 21 additions & 22 deletions packages/design-system-react/src/components/BadgeIcon/BadgeIcon.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
import type { BadgeIconPropsShared } from '@metamask/design-system-shared';
import type { ComponentProps } from 'react';

import type { IconName, IconProps } from '../Icon';
import type { IconProps } from '../Icon';

/**
* BadgeIcon component props.
* BadgeIcon component props (React platform-specific)
* Extends shared props from @metamask/design-system-shared with React-specific platform concerns
*/
export type BadgeIconProps = ComponentProps<'div'> & {
/**
* Required prop to specify an icon to show
*/
iconName: IconName;
/**
* Optional prop to pass additional properties to the icon
*/
iconProps?: Omit<IconProps, 'name'>;
/**
* Optional prop for additional CSS classes to be applied to the BadgeIcon component.
* These classes will be merged with the component's default classes using twMerge.
*/
className?: string;
/**
* Optional CSS styles to be applied to the component.
* Should be used sparingly and only for dynamic styles that can't be achieved with className.
*/
style?: React.CSSProperties;
};
export type BadgeIconProps = ComponentProps<'div'> &
BadgeIconPropsShared & {
/**
* Optional prop to pass additional properties to the icon
*/
iconProps?: Omit<IconProps, 'name'>;
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iconProps stays platform-local on purpose even after extracting iconName. The rendered Icon still has platform-specific props in each package, so this keeps only the shared API centralized and avoids pulling React-specific Icon props into the shared layer.

/**
* Optional prop for additional CSS classes to be applied to the BadgeIcon component.
* These classes will be merged with the component's default classes using twMerge.
*/
className?: string;
/**
* Optional CSS styles to be applied to the component.
* Should be used sparingly and only for dynamic styles that can't be achieved with className.
*/
style?: React.CSSProperties;
};
3 changes: 3 additions & 0 deletions packages/design-system-shared/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,9 @@ export {
type AvatarTokenPropsShared,
} from './types/AvatarToken';

// BadgeIcon types (ADR-0004)
export { type BadgeIconPropsShared } from './types/BadgeIcon';
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is only a type exported here with no const objects?

BadgeIcon has no variants, sizes, or other enum-like props — the only shared prop is iconName. Unlike BadgeStatus or BannerAlert, there are no ADR-0003 const objects to centralise. A type-only export is correct for this component.

Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This root export is what allows both platform packages to extend BadgeIconPropsShared from the shared package entrypoint instead of reaching into internal paths. It matches the ADR-0004 public export pattern already used by the other migrated shared component types.


// BannerAlert types (ADR-0003 + ADR-0004)
export {
BannerAlertSeverity,
Expand Down
13 changes: 13 additions & 0 deletions packages/design-system-shared/src/types/BadgeIcon/BadgeIcon.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { IconName } from '../Icon';

/**
* BadgeIcon component shared props (ADR-0004)
* Platform-independent properties shared across React and React Native
*/
export type BadgeIconPropsShared = {
/**
* Required prop to specify an icon to show.
* Uses shared IconName because the shared package owns icon names.
*/
iconName: IconName;
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iconName is the only prop moved into shared because it is part of the design-system API surface rather than platform behavior. IconName now lives in design-system-shared after #1042, so BadgeIcon should consume that shared source of truth directly.

};
1 change: 1 addition & 0 deletions packages/design-system-shared/src/types/BadgeIcon/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { type BadgeIconPropsShared } from './BadgeIcon.types';
Loading