[EuiTextColor] Opinionated: Remove classNames entirely

cee-chen · cee-chen · commit f20f1ce97fd0 · 2022-05-11T11:49:11.000-07:00
- since they're no longer setting CSS - we should convert Kibana usages to the component
diff --git a/src/components/text/__snapshots__/text_color.test.tsx.snap b/src/components/text/__snapshots__/text_color.test.tsx.snap
@@ -3,14 +3,14 @@
 exports[`EuiTextColor is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiTextColor euiTextColor--default testClass1 testClass2 css-7fidck-euiTextColor-default"
+  class="testClass1 testClass2 css-7fidck-euiTextColor-default"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiTextColor props color is rendered with custom color 1`] = `
 <span
-  class="euiTextColor euiTextColor--custom css-tseiet-euiTextColor"
+  class="css-tseiet-euiTextColor"
   style="color:#ff0000"
 >
   <p>
@@ -21,7 +21,7 @@ exports[`EuiTextColor props color is rendered with custom color 1`] = `
 
 exports[`EuiTextColor props color is rendered with named color 1`] = `
 <span
-  class="euiTextColor euiTextColor--warning css-1yjx65l-euiTextColor-warning"
+  class="css-1yjx65l-euiTextColor-warning"
 >
   <p>
     Content
diff --git a/src/components/text/text_color.tsx b/src/components/text/text_color.tsx
@@ -7,7 +7,6 @@
  */
 
 import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
-import classNames from 'classnames';
 import { CommonProps } from '../common';
 
 import { useEuiTheme } from '../../services';
@@ -43,11 +42,11 @@ export type EuiTextColorProps = CommonProps &
 export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
   children,
   color = 'default',
-  className,
   component = 'span',
   style,
   ...rest
 }) => {
+  const Component = component;
   const isNamedColor = COLORS.includes(color as TextColor);
 
   const euiTheme = useEuiTheme();
@@ -57,16 +56,6 @@ export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
     isNamedColor ? styles[color as TextColor] : undefined,
   ];
 
-  const classes = classNames(
-    'euiTextColor',
-    {
-      [`euiTextColor--${color}`]: isNamedColor,
-      'euiTextColor--custom': !isNamedColor,
-    },
-    className
-  );
-  const Component = component;
-
   // We're checking if is a custom color.
   // If it is a custom color we set the `color` of the `.euiTextColor` div to that custom color.
   // This way the children text elements can `inherit` that color and border and backgrounds can get that `currentColor`.
@@ -78,12 +67,7 @@ export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
     : { ...style };
 
   return (
-    <Component
-      css={cssStyles}
-      className={classes}
-      style={euiTextStyle}
-      {...rest}
-    >
+    <Component css={cssStyles} style={euiTextStyle} {...rest}>
       {children}
     </Component>
   );
