From 2cd9de799f261d0f8f45774f57efcd2086f09f9e Mon Sep 17 00:00:00 2001 From: tejas nikam <tnikam2@gmail.com> Date: Wed, 8 May 2024 19:38:22 +0530 Subject: [PATCH] adding new color property in Text and Link component (#2619) Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com> --- packages/core/src/link/Link.tsx | 2 ++ packages/core/src/text/Text.css | 4 ++++ packages/core/src/text/Text.tsx | 16 +++++++++++---- .../core/stories/link/link.qa.stories.tsx | 12 +++++------ packages/core/stories/link/link.stories.tsx | 10 +++++++++- .../core/stories/text/text.qa.stories.tsx | 4 ++-- packages/core/stories/text/text.stories.tsx | 8 ++++++-- .../contact-details/ContactPrimaryInfo.tsx | 2 +- .../contact-details/ContactSecondaryInfo.tsx | 2 +- .../contact-details/ContactTertiaryInfo.tsx | 2 +- packages/lab/src/contact-details/types.ts | 3 ++- .../stepped-tracker/StepLabel/StepLabel.tsx | 6 +++--- site/docs/components/link/examples.mdx | 20 +++++++++++++++---- site/docs/components/text/examples.mdx | 14 ++++++++++++- site/src/examples/link/Color.tsx | 17 ++++++++++++++++ site/src/examples/link/index.ts | 1 + site/src/examples/text/Color.tsx | 10 ++++++++++ site/src/examples/text/index.ts | 1 + 18 files changed, 107 insertions(+), 27 deletions(-) create mode 100644 site/src/examples/link/Color.tsx create mode 100644 site/src/examples/text/Color.tsx diff --git a/packages/core/src/link/Link.tsx b/packages/core/src/link/Link.tsx index 6d081074268..06bf030951b 100644 --- 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 index 1a599a39975..5f8a35440c5 100644 --- 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 index 15cbe5ef73f..fef7f6355b5 100644 --- 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,10 +77,12 @@ 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( @@ -82,8 +90,8 @@ export const Text: TextComponent = forwardRef( { [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 index 8438b2898a2..63951bbac29 100644 --- 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 index da8e06742cc..49218d903e4 100644 --- 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 index 9c0120513bf..1aed88db028 100644 --- 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 index 9a56c645dcf..9f4ff9e0162 100644 --- 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 index b068d09d0be..49d5bf4bf47 100644 --- 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 index 131c681d846..8b4027b88c8 100644 --- 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 index 33be19745a4..15393f23e54 100644 --- 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 index 9c59707192e..3198fbb9d28 100644 --- 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 index c278edaab85..9dd7a71a291 100644 --- a/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx +++ b/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx @@ -1,6 +1,6 @@ -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"; @@ -8,7 +8,7 @@ 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 index d38d4b09b5f..810454d9437 100644 --- 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 index ad70fbe2bbd..100eb78038d 100644 --- 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 new file mode 100644 index 00000000000..90e8e8d5dfc --- /dev/null +++ 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 index cb0945eb1cd..8a3cedda73b 100644 --- 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 new file mode 100644 index 00000000000..6634284edc8 --- /dev/null +++ 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 index dcd0e2da48f..a924ced1780 100644 --- 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";