adding new color property in Text and Link component (#2619)

Co-authored-by: Josh Wooding <[email protected]>
jpmorganchase · May 8, 2024 · 2cd9de7 · 2cd9de7
1 parent d972d20
commit 2cd9de7
Show file tree

Hide file tree

Showing 18 changed files with 107 additions and 27 deletions.
diff --git a/packages/core/src/link/Link.tsx b/packages/core/src/link/Link.tsx
@@ -27,6 +27,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
     className,
     children,
     variant = "primary",
+    color = "primary",
     target = "_self",
     ...rest
   },
@@ -47,6 +48,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
       ref={ref}
       target={target}
       variant={variant}
+      color={color}
       {...rest}
     >
       {children}

diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css
@@ -1,3 +1,7 @@
+.saltText {
+  --text-color: currentColor;
+}
+
 /* Main css class. Style for body text */
 .saltText {
   color: var(--saltText-color, var(--text-color));

diff --git a/packages/core/src/text/Text.tsx b/packages/core/src/text/Text.tsx
@@ -38,8 +38,13 @@ export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<
       | "code";
     /**
      * Change text color palette
+     * @deprecated Use `color` instead
      */
     variant?: "primary" | "secondary";
+    /*
+     * The color of the text. Defaults to "primary".
+     */
+    color?: "inherit" | "primary" | "secondary";
   }
 >;
 
@@ -59,7 +64,8 @@ export const Text: TextComponent = forwardRef(
       maxRows,
       style,
       styleAs,
-      variant = "primary",
+      variant,
+      color: colorProp,
       ...restProps
     }: TextProps<T>,
     ref?: PolymorphicRef<T>
@@ -71,19 +77,21 @@ export const Text: TextComponent = forwardRef(
       window: targetWindow,
     });
 
-    const Component = as || "div";
+    const Component = as ?? "div";
 
     const textStyles = { "--text-max-rows": maxRows, ...style };
 
+    const color = variant ?? colorProp ?? "primary";
+
     return (
       <Component
         className={clsx(
           withBaseName(),
           {
             [withBaseName("disabled")]: disabled,
             [withBaseName("lineClamp")]: maxRows,
-            [withBaseName(styleAs || "")]: styleAs,
-            [withBaseName(variant)]: variant,
+            [withBaseName(styleAs as string)]: styleAs,
+            [withBaseName(color)]: color !== "inherit",
           },
           className
         )}

diff --git a/packages/core/stories/link/link.qa.stories.tsx b/packages/core/stories/link/link.qa.stories.tsx
@@ -23,14 +23,14 @@ export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
-    <Link href="https://www.google.com" variant="secondary">
+    <Link href="https://www.google.com" color="secondary">
       Secondary Link
     </Link>
-    <Link href="https://www.google.com" variant="secondary" target="_blank">
+    <Link href="https://www.google.com" color="secondary" target="_blank">
       Secondary Link target blank
     </Link>
     <div style={{ width: 150 }}>
-      <Link href="https://www.google.com" maxRows={1} variant="secondary">
+      <Link href="https://www.google.com" maxRows={1} color="secondary">
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
@@ -54,14 +54,14 @@ export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
-    <Link href="https://www.google.com" variant="secondary">
+    <Link href="https://www.google.com" color="secondary">
       Secondary Link
     </Link>
-    <Link href="https://www.google.com" variant="secondary" target="_blank">
+    <Link href="https://www.google.com" color="secondary" target="_blank">
       Secondary Link target blank
     </Link>
     <div style={{ width: 150 }}>
-      <Link href="https://www.google.com" maxRows={1} variant="secondary">
+      <Link href="https://www.google.com" maxRows={1} color="secondary">
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>

diff --git a/packages/core/stories/link/link.stories.tsx b/packages/core/stories/link/link.stories.tsx
@@ -13,7 +13,15 @@ export const Primary: StoryFn<typeof Link> = () => {
 
 export const Secondary: StoryFn<typeof Link> = () => {
   return (
-    <Link variant="secondary" href="https://www.google.com">
+    <Link color="secondary" href="https://www.google.com">
+      Link to URL
+    </Link>
+  );
+};
+
+export const InheritColor: StoryFn<typeof Link> = () => {
+  return (
+    <Link color="inherit" href="https://www.google.com">
       Link to URL
     </Link>
   );

diff --git a/packages/core/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx
@@ -33,10 +33,10 @@ export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
     <Text disabled>
       Primary disabled <strong>strong</strong> and <small>small</small> text
     </Text>
-    <Text variant="secondary">
+    <Text color="secondary">
       Secondary <strong>strong</strong> and <small>small</small> text
     </Text>
-    <Text variant="secondary" disabled>
+    <Text color="secondary" disabled>
       Secondary disabled <strong>strong</strong> and <small>small</small> text
     </Text>
     <Display1>

diff --git a/packages/core/stories/text/text.stories.tsx b/packages/core/stories/text/text.stories.tsx
@@ -31,14 +31,18 @@ export const Primary: StoryFn<typeof Text> = () => {
 };
 
 export const Secondary: StoryFn<typeof Text> = () => {
-  return <Text variant="secondary">This is a secondary text example</Text>;
+  return <Text color="secondary">This is a secondary text example</Text>;
+};
+
+export const InheritColor: StoryFn<typeof Text> = () => {
+  return <Text color="inherit">This is a secondary text example</Text>;
 };
 
 export const Disabled: StoryFn<typeof Text> = () => {
   return (
     <div>
       <Text disabled>This is a disabled primary text example</Text>
-      <Text variant="secondary" disabled>
+      <Text color="secondary" disabled>
         This is a disabled secondary text example
       </Text>
     </div>

diff --git a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx
@@ -6,7 +6,7 @@ import { useContactDetailsContext } from "./internal";
 const withBaseName = makePrefixer("saltContactPrimaryInfo");
 
 export interface ContactPrimaryInfoProps
-  extends HTMLAttributes<HTMLDivElement> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
   text: string;
 }
 

diff --git a/packages/lab/src/contact-details/ContactSecondaryInfo.tsx b/packages/lab/src/contact-details/ContactSecondaryInfo.tsx
@@ -8,7 +8,7 @@ import { ValueComponentProps } from "./types";
 const withBaseName = makePrefixer("saltContactSecondaryInfo");
 
 export interface ContactSecondaryInfoProps
-  extends HTMLAttributes<HTMLDivElement> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
   icon?: ComponentType<IconProps>;
   text: string;
   ValueComponent?: ComponentType<ValueComponentProps>;

diff --git a/packages/lab/src/contact-details/ContactTertiaryInfo.tsx b/packages/lab/src/contact-details/ContactTertiaryInfo.tsx
@@ -7,7 +7,7 @@ import { useContactDetailsContext } from "./internal";
 const withBaseName = makePrefixer("saltContactTertiaryInfo");
 
 export interface ContactTertiaryInfoProps
-  extends HTMLAttributes<HTMLDivElement> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
   icon?: ComponentType<IconProps>;
   text: string;
 }

diff --git a/packages/lab/src/contact-details/types.ts b/packages/lab/src/contact-details/types.ts
@@ -1,5 +1,6 @@
 import { HTMLAttributes } from "react";
 
-export interface ValueComponentProps extends HTMLAttributes<HTMLSpanElement> {
+export interface ValueComponentProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
   value?: string;
 }
diff --git a/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx b/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx
@@ -1,14 +1,14 @@
-import { forwardRef, ComponentPropsWithoutRef, ReactNode } from "react";
+import { forwardRef, ReactNode } from "react";
 import { clsx } from "clsx";
-import { makePrefixer, Label } from "@salt-ds/core";
+import { makePrefixer, Label, TextProps } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 
 import stepLabelCss from "./StepLabel.css";
 
 const withBaseName = makePrefixer("saltStepLabel");
 
-export interface StepLabelProps extends ComponentPropsWithoutRef<"label"> {
+export interface StepLabelProps extends TextProps<"label"> {
   /**
    * The content of Step Label
    */

diff --git a/site/docs/components/link/examples.mdx b/site/docs/components/link/examples.mdx
@@ -36,13 +36,13 @@ When linking to third party content, we recommended setting `rel=”noopener”`
 
   </LivePreview>
 
-  <LivePreview componentName="link" exampleName="Variant">
+  <LivePreview componentName="link" exampleName="Color">
 
-## Variant
+## Color
 
-To help create a visual hierarchy using a link, use the `variant` prop.
+To help create a visual hierarchy using a link, use the `color` prop.
 
-The default variant is `primary`.
+The default color is `primary`.
 
   </LivePreview>
 
@@ -54,4 +54,16 @@ Links change color after a user clicks on them. This tells the user which links
 
   </LivePreview>
 
+  <LivePreview componentName="link" exampleName="Variant" displayName="Variant - Deprecated">
+
+## Variant
+
+**Note:** This prop is deprecated. Use the `color` prop instead.
+
+To help create a visual hierarchy using a link, use the `variant` prop.
+
+The default variant is `primary`.
+
+  </LivePreview>
+
 </LivePreviewControls>
diff --git a/site/docs/components/text/examples.mdx b/site/docs/components/text/examples.mdx
@@ -60,10 +60,22 @@ Using the `styleAs` prop, you can maintain the correct HTML hierarchy and the ap
 
 </LivePreview>
 
-<LivePreview componentName="text" exampleName="Variant">
+<LivePreview componentName="text" exampleName="Color">
+
+## Color
+
+Use the `color` prop to adjust the foreground color of any nested text. Use the `primary` color most of the time, the `secondary` color for supporting text or to create visual hierarchy, and `inherit` to inherit text color from the parent element.
+
+Read our [guidance on how to use text color](/salt/foundations/typography#color).
+
+</LivePreview>
+
+<LivePreview componentName="text" exampleName="Variant" displayName="Variant - Deprecated">
 
 ## Variant
 
+**Note:** This prop is deprecated. Use the `color` prop instead.
+
 Use the `variant` prop to adjust the foreground color of any nested text. Use the `primary` variant most often, and the `secondary` variant for supporting text or creating a visual hierarchy.
 
 Read our [guidance on how to use text color](/salt/foundations/typography#color).

diff --git a/site/src/examples/link/Color.tsx b/site/src/examples/link/Color.tsx
@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { Link, StackLayout } from "@salt-ds/core";
+import styles from "./index.module.css";
+
+export const Color = (): ReactElement => (
+  <StackLayout>
+    <Link href="#" color="primary" className={styles.linkExample}>
+      Primary Link color
+    </Link>
+    <Link href="#" color="secondary" className={styles.linkExample}>
+      Secondary Link color
+    </Link>
+    <Link href="#" color="inherit" className={styles.linkExample}>
+      Inherit Link color
+    </Link>
+  </StackLayout>
+);
diff --git a/site/src/examples/link/index.ts b/site/src/examples/link/index.ts
@@ -1,4 +1,5 @@
 export * from "./Default";
 export * from "./OpenInANewTab";
 export * from "./Variant";
+export * from "./Color";
 export * from "./Visited";
diff --git a/site/src/examples/text/Color.tsx b/site/src/examples/text/Color.tsx
@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+import { Text, StackLayout } from "@salt-ds/core";
+
+export const Color = (): ReactElement => (
+  <StackLayout>
+    <Text color="primary">This is primary color of Text</Text>
+    <Text color="secondary">This is secondary color of Text</Text>
+    <Text color="inherit">This is inherited color of Text</Text>
+  </StackLayout>
+);
diff --git a/site/src/examples/text/index.ts b/site/src/examples/text/index.ts
@@ -2,3 +2,4 @@ export * from "./Styles";
 export * from "./Styling";
 export * from "./Truncation";
 export * from "./Variant";
+export * from "./Color";