List: remove color override in Text node (#3907)

pinterest · Dec 5, 2024 · 6b0e961 · 6b0e961
1 parent acfaab4
commit 6b0e961
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 34 deletions.
diff --git a/packages/gestalt/src/List/Message.tsx b/packages/gestalt/src/List/Message.tsx
@@ -1,6 +1,4 @@
 import { Children, cloneElement, ReactElement } from 'react';
-import { useColorScheme } from '../contexts/ColorSchemeProvider';
-import styles from '../List.css';
 import Text from '../Text';
 
 type Size = '100' | '200' | '300' | '400' | '500' | '600';
@@ -11,8 +9,6 @@ type Props = {
 };
 
 export default function ListText({ size, text }: Props) {
-  const { colorSchemeName } = useColorScheme();
-
   // Flow shuold catch if text is missing. In case Flow is not enabled and text is missing, the errors are not that helpful. This surfaces the problem more explicitly.
   if (!text) {
     throw new Error(`Gestalt List is missing \`label\` prop or a \`text\` prop within List.Item.`);
@@ -22,20 +18,14 @@ export default function ListText({ size, text }: Props) {
     return <Text size={size || undefined}>{text}</Text>;
   }
 
-  // If `text` is a Text component, we need to override any text colors within to ensure they all match
-  // @ts-expect-error - TS2339
-  if (typeof text !== 'string' && Children.only<ReactElement>(text)?.type.displayName === 'Text') {
-    const isDarkMode = colorSchemeName === 'darkMode';
-
-    const textColorOverrideStyles = isDarkMode
-      ? styles.textColorOverrideLight
-      : styles.textColorOverrideDark;
-
-    return (
-      <span className={textColorOverrideStyles}>
-        {cloneElement(text, { size: size || undefined })}
-      </span>
-    );
+  // If `text` is a Text component, we need to override any text size within to ensure they all match
+  if (
+    text &&
+    typeof text !== 'string' &&
+    // @ts-expect-error - TS2339
+    Children.only<ReactElement>(text)?.type.displayName === 'Text'
+  ) {
+    return cloneElement(text, { size: size || undefined });
   }
 
   throw new Error(

diff --git a/packages/gestalt/src/__snapshots__/List.test.tsx.snap b/packages/gestalt/src/__snapshots__/List.test.tsx.snap
@@ -204,15 +204,11 @@ exports[`List renders an list item with custom text 1`] = `
           }
         }
       >
-        <span
-          className="textColorOverrideDark"
+        <div
+          className="default alignStart breakWord Text fontSize300 fontWeightSemiBold"
         >
-          <div
-            className="default alignStart breakWord Text fontSize300 fontWeightSemiBold"
-          >
-            List item text
-          </div>
-        </span>
+          List item text
+        </div>
       </li>
     </ol>
   </div>
@@ -227,15 +223,11 @@ exports[`List renders an list with a custom label 1`] = `
     className="box marginBottom400 xsDisplayBlock"
     id=":rm:"
   >
-    <span
-      className="textColorOverrideDark"
+    <div
+      className="default alignStart breakWord Text fontSize300 fontWeightSemiBold"
     >
-      <div
-        className="default alignStart breakWord Text fontSize300 fontWeightSemiBold"
-      >
-        label test
-      </div>
-    </span>
+      label test
+    </div>
   </div>
   <div
     className="default alignStart breakWord Text fontSize300 fontWeightNormal"