From 2cd9de799f261d0f8f45774f57efcd2086f09f9e Mon Sep 17 00:00:00 2001 From: tejas nikam 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(function Link( className, children, variant = "primary", + color = "primary", target = "_self", ...rest }, @@ -47,6 +48,7 @@ export const Link = forwardRef(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 = 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, ref?: PolymorphicRef @@ -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 ( = (props) => ( Strong and small truncation example - + Secondary Link - + Secondary Link target blank
- + Strong and small truncation example
@@ -54,14 +54,14 @@ export const NoStyleInjectionGrid: StoryFn = ( Strong and small truncation example - + Secondary Link - + Secondary Link target blank
- + Strong and small truncation example
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 = () => { export const Secondary: StoryFn = () => { return ( - + + Link to URL + + ); +}; + +export const InheritColor: StoryFn = () => { + return ( + Link to URL ); 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 = (props) => ( Primary disabled strong and small text - + Secondary strong and small text - + Secondary disabled strong and small text 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 = () => { }; export const Secondary: StoryFn = () => { - return This is a secondary text example; + return This is a secondary text example; +}; + +export const InheritColor: StoryFn = () => { + return This is a secondary text example; }; export const Disabled: StoryFn = () => { return (
This is a disabled primary text example - + This is a disabled secondary text example
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 { + extends Omit, "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 { + extends Omit, "color"> { icon?: ComponentType; text: string; ValueComponent?: ComponentType; 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 { + extends Omit, "color"> { icon?: ComponentType; 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 { +export interface ValueComponentProps + extends Omit, "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”` - + -## 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`. @@ -54,4 +54,16 @@ Links change color after a user clicks on them. This tells the user which links + + +## 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`. + + + 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 - + + +## 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). + + + + ## 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 => ( + + + Primary Link color + + + Secondary Link color + + + Inherit Link color + + +); 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 => ( + + This is primary color of Text + This is secondary color of Text + This is inherited color of Text + +); 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";