shared(BannerBase): centralize isTextContent/hasContent in @metamask/design-system-shared and use in React & RN; rn(BannerBase): add self-start to close button for consistent alignment

cursoragent · cursoragent · commit 4f2bc1c17eb4 · 2026-03-04T23:51:05.000Z
diff --git a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx
@@ -1,3 +1,4 @@
+import { hasContent, isTextContent } from '@metamask/design-system-shared';
 import React from 'react';
 import { GestureResponderEvent } from 'react-native';
 
@@ -18,12 +19,6 @@ import { Text } from '../Text';
 
 import type { BannerBaseProps } from './BannerBase.types';
 
-const isTextContent = (content: React.ReactNode): content is string | number =>
-  typeof content === 'string' || typeof content === 'number';
-
-const hasContent = (content: React.ReactNode) =>
-  content !== null && content !== undefined;
-
 export const BannerBase: React.FC<BannerBaseProps> = ({
   title,
   titleProps,
@@ -64,8 +59,8 @@ export const BannerBase: React.FC<BannerBaseProps> = ({
       : undefined;
 
   const mergedCloseButtonTwClassName = closeButtonTwClassName
-    ? `ml-3 ${closeButtonTwClassName}`
-    : 'ml-3';
+    ? `ml-3 self-start ${closeButtonTwClassName}`
+    : 'ml-3 self-start';
 
   return (
     <Box
diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx
@@ -1,3 +1,4 @@
+import { hasContent, isTextContent } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
 import {
@@ -18,12 +19,6 @@ import { Text } from '../Text';
 
 import type { BannerBaseProps } from './BannerBase.types';
 
-const isTextContent = (content: React.ReactNode): content is string | number =>
-  typeof content === 'string' || typeof content === 'number';
-
-const hasContent = (content: React.ReactNode) =>
-  content !== null && content !== undefined;
-
 export const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(
   (
     {
diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts
@@ -6,6 +6,9 @@ export {
   generateIconSeed,
 } from './utils/caip-address';
 
+// BannerBase utils (ADR-0004)
+export { isTextContent, hasContent } from './utils/banner-base';
+
 // BadgeCount types (ADR-0003 + ADR-0004)
 export { BadgeCountSize, type BadgeCountPropsShared } from './types/BadgeCount';
 
diff --git a/packages/design-system-shared/src/utils/banner-base.ts b/packages/design-system-shared/src/utils/banner-base.ts
@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Returns true when the provided ReactNode is plain text content that should be
+ * wrapped with a Text component for consistent typography.
+ */
+/**
+ * @param content - The ReactNode to test.
+ * @returns True if content is a string or number (textual), false otherwise.
+ */
+export const isTextContent = (
+  content: ReactNode,
+): content is string | number => {
+  return typeof content === 'string' || typeof content === 'number';
+};
+
+/**
+ * Returns true when the provided ReactNode is present (not null/undefined).
+ * This intentionally allows values like 0 or empty string, which are valid content.
+ */
+/**
+ * @param content - The ReactNode to test for presence.
+ * @returns True if content is neither null nor undefined.
+ */
+export const hasContent = (content: ReactNode): boolean => {
+  return content !== null && content !== undefined;
+};

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { hasContent, isTextContent } from '@metamask/design-system-shared';`
`1`	`2`	`import React, { forwardRef } from 'react';`
`2`	`3`
`3`	`4`	`import {`
`@@ -18,12 +19,6 @@ import { Text } from '../Text';`
`18`	`19`
`19`	`20`	`import type { BannerBaseProps } from './BannerBase.types';`
`20`	`21`
`21`		`-const isTextContent = (content: React.ReactNode): content is string \| number =>`
`22`		`- typeof content === 'string' \|\| typeof content === 'number';`
`23`		`-`
`24`		`-const hasContent = (content: React.ReactNode) =>`
`25`		`- content !== null && content !== undefined;`
`26`		`-`
`27`	`22`	`export const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(`
`28`	`23`	`(`
`29`	`24`	`{`