Skip to content

Commit

Permalink
feat(Text): add preset typography prop
Browse files Browse the repository at this point in the history 
- support all the tier 2 and tier 3 typography tokens
- mark other ways to modify type as deprecated (but kept)
- add utility types to support typography types
  • Loading branch information
@booc0mtaco
booc0mtaco committed Oct 30, 2023
1 parent 2d6d7c3 commit 4422e8e
Show file tree
Hide file tree
Showing 4 changed files with 297 additions and 35 deletions.
3 changes: 2 additions & 1 deletion src/components/Heading/Heading.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@

/**
* Heading sizes, correlate to similar numerically named typography token.
* deprecated in favor of only using the typography presets
*/
.heading--size-h1 {
font: var(--eds-theme-typography-headline-lg);
Expand Down Expand Up @@ -93,7 +94,7 @@
}

/**
* Color variants
* Color variants - deprecated in favor of using utility classes
*/
.heading--error {
color: var(--eds-theme-color-text-utility-error);
Expand Down
211 changes: 197 additions & 14 deletions src/components/Text/Text.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
\*------------------------------------*/

/**
* Sizes
* Sizes - deprecated in favor of using the full set of typography tokens
*/
.text--body,
.text--md {
Expand All @@ -18,22 +18,13 @@
.text--xs {
font: var(--eds-theme-typography-body-xs);
}
.text--caption, .text--caption-md {
.text--caption,
.text--caption-md {
font: var(--eds-theme-typography-caption-md);
}
.text--caption-lg {
font: var(--eds-theme-typography-caption-lg);
}
.text--overline {
font: var(--eds-theme-typography-overline);
text-transform: uppercase;
}
.text--callout {
font: var(--eds-theme-typography-callout);
}

/**
* Variant
* Variant - deprecated in favor of using the tokens/utility classes for color
*/
.text--error {
color: var(--eds-theme-color-text-utility-error);
Expand Down Expand Up @@ -68,11 +59,203 @@
}

/**
* Weights
* Weights - deprecated in favor of using the full set of typography tokens
*/
.text--normal-weight {
font-weight: var(--eds-font-weight-light);
}
.text--bold-weight {
font-weight: var(--eds-font-weight-bold);
}

/**
* Map the component preset names to the defined typography tokens
* TODO-AH: This should always match the generated tokens so find a
* way to generate this.
*/
.text--headline-lg {
font: var(--eds-theme-typography-headline-lg);
}
.text--headline-lg-bold {
font: var(--eds-theme-typography-headline-lg-bold);
}
.text--headline-lg-bold-mobile {
font: var(--eds-theme-typography-headline-lg-bold-mobile);
}
.text--headline-lg-mobile {
font: var(--eds-theme-typography-headline-lg-mobile);
}
.text--headline-md {
font: var(--eds-theme-typography-headline-md);
}
.text--headline-md-bold {
font: var(--eds-theme-typography-headline-md-bold);
}
.text--headline-md-bold-mobile {
font: var(--eds-theme-typography-headline-md-bold-mobile);
}
.text--headline-md-mobile {
font: var(--eds-theme-typography-headline-md-mobile);
}
.text--headline-sm {
font: var(--eds-theme-typography-headline-sm);
}
.text--headline-sm-bold {
font: var(--eds-theme-typography-headline-sm-bold);
}
.text--headline-sm-bold-mobile {
font: var(--eds-theme-typography-headline-sm-bold-mobile);
}
.text--headline-sm-mobile {
font: var(--eds-theme-typography-headline-sm-mobile);
}
.text--headline-secondary-lg {
font: var(--eds-theme-typography-headline-secondary-lg);
}
.text--headline-secondary-lg-bold {
font: var(--eds-theme-typography-headline-secondary-lg-bold);
}
.text--headline-secondary-md {
font: var(--eds-theme-typography-headline-secondary-md);
}
.text--headline-secondary-md-bold {
font: var(--eds-theme-typography-headline-secondary-md-bold);
}
.text--headline-secondary-sm {
font: var(--eds-theme-typography-headline-secondary-sm);
}
.text--headline-secondary-sm-bold {
font: var(--eds-theme-typography-headline-secondary-sm-bold);
}
.text--title-lg {
font: var(--eds-theme-typography-title-lg);
}
.text--title-lg-bold {
font: var(--eds-theme-typography-title-lg-bold);
}
.text--title-md {
font: var(--eds-theme-typography-title-md);
}
.text--title-md-bold {
font: var(--eds-theme-typography-title-md-bold);
}
.text--title-sm {
font: var(--eds-theme-typography-title-sm);
}
.text--title-sm-bold {
font: var(--eds-theme-typography-title-sm-bold);
}
.text--title-xs {
font: var(--eds-theme-typography-title-xs);
}
.text--title-xs-bold {
font: var(--eds-theme-typography-title-xs-bold);
}
.text--label-lg-subtle {
font: var(--eds-theme-typography-label-lg-subtle);
}
.text--label-md {
font: var(--eds-theme-typography-label-md);
}
.text--label-md-subtle {
font: var(--eds-theme-typography-label-md-subtle);
}
.text--label-sm {
font: var(--eds-theme-typography-label-sm);
}
.text--body-xl {
font: var(--eds-theme-typography-body-xl);
}
.text--body-lg {
font: var(--eds-theme-typography-body-lg);
}
.text--body-md {
font: var(--eds-theme-typography-body-md);
}
.text--body-sm {
font: var(--eds-theme-typography-body-sm);
}
.text--body-xs {
font: var(--eds-theme-typography-body-xs);
}
.text--caption-lg {
font: var(--eds-theme-typography-caption-lg);
}
.text--caption-lg-bold {
font: var(--eds-theme-typography-caption-lg-bold);
}
.text--caption-md {
font: var(--eds-theme-typography-caption-md);
}
.text--caption-md-bold {
font: var(--eds-theme-typography-caption-md-bold);
}
.text--caption-sm {
font: var(--eds-theme-typography-caption-sm);
}
.text--caption-sm-bold {
font: var(--eds-theme-typography-caption-sm-bold);
}
.text--overline {
font: var(--eds-theme-typography-overline);
text-transform: uppercase;
}
.text--overline-md {
font: var(--eds-theme-typography-overline-md);
text-transform: uppercase;
}
.text--overline-sm {
font: var(--eds-theme-typography-overline-sm);
text-transform: uppercase;
}
.text--callout {
font: var(--eds-theme-typography-callout);
}
.text--breadcrumb {
font: var(--eds-theme-typography-breadcrumb);
}
.text--button-lg {
font: var(--eds-theme-typography-button-lg);
}
.text--button-md {
font: var(--eds-theme-typography-button-md);
}
.text--button-label {
font: var(--eds-theme-typography-button-label);
}
.text--button-label-sm {
font: var(--eds-theme-typography-button-label-sm);
}
.text--form-label {
font: var(--eds-theme-typography-form-label);
}
.text--form-input {
font: var(--eds-theme-typography-form-input);
}
.text--link-lg {
font: var(--eds-theme-typography-link-lg);
}
.text--link-md {
font: var(--eds-theme-typography-link-md);
}
.text--link-sm {
font: var(--eds-theme-typography-link-sm);
}
.text--link-xs {
font: var(--eds-theme-typography-link-xs);
}
.text--tab-lg {
font: var(--eds-theme-typography-tab-lg);
}
.text--tab-lg-active {
font: var(--eds-theme-typography-tab-lg-active);
}
.text--tab-sm {
font: var(--eds-theme-typography-tab-sm);
}
.text--tab-sm-active {
font: var(--eds-theme-typography-tab-sm-active);
}
.text--tag {
font: var(--eds-theme-typography-tag);
}
44 changes: 24 additions & 20 deletions src/components/Text/Text.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import clsx from 'clsx';
import type { ForwardedRef } from 'react';
import React, { forwardRef } from 'react';

import type { Preset } from '../../util/variant-types';

import styles from './Text.module.css';

/** @deprecated */
export type Size =
| 'body'
| 'sm'
Expand All @@ -19,6 +23,7 @@ export type Size =
*/
export type DeprecatedSize = 'caption';

/** @deprecated */
export type Variant =
| 'inherit'
| 'neutral-subtle'
Expand All @@ -35,53 +40,51 @@ export type Variant =
*/
export type DeprecatedVariant = 'info';

export type Props = {
export type TextProps = {
/**
* Controls whether to render text inline (defaults to "p").
* Controls which component to use when rendering copy: `p` or `span` (defaults to `"p"`).
*/
as?: 'p' | 'span';
children: React.ReactNode;
className?: string;
/** @deprecated */
variant?: Variant | DeprecatedVariant;
/** @deprecated */
size?: Size | DeprecatedSize;
tabIndex?: number;
/** @deprecated */
weight?: 'bold' | 'normal' | null;
/**
* Key name for matching typography presets (Tier-2/Tier-3)
*/
preset?: Preset;
} & React.HTMLAttributes<HTMLElement>;

/**
* `import {Text} from "@chanzuckerberg/eds";`
*
* The Text component decorates `<p>` and `<span>` with thematic variants.
* Defaults to `<p>` and should pass `as="span"` to set as `<span>`.
* The Text component decorates `<p>` and `<span>` with thematic variants. Use
* typography presets to style the text via `preset`.
*
* Example usage:
*
* ```tsx
* <Text>
* Text paragraph copy
* </Text>
*
* <Text as="span">
* Text inline copy
* </Text>
* ```
* For headers, please use `Heading`.
*/
export const Text = forwardRef(
(
{
as: TagName = 'p',
children,
className,
variant,
preset,
size = 'body',
variant,
weight,
/**
* Components that wrap typography sometimes requires props such as event handlers
* to be passed down into the element. One example is the tooltip component. It
* attaches a onHover and onFocus event to the element to determine when to
* trigger the overlay.
*/ ...other
}: Props,
}: TextProps,
ref: ForwardedRef<HTMLParagraphElement>, // Setting as HTMLParagraphElement to satisfy TS, but unit test covers both span and p cases for sanity
) => {
if (variant === 'info' && process.env.NODE_ENV !== 'production') {
Expand All @@ -91,9 +94,10 @@ export const Text = forwardRef(
}
const componentClassName = clsx(
styles['text'],
styles[`text--${size}`],
variant && styles[`text--${variant}`],
weight && styles[`text--${weight}-weight`],
!preset && size && styles[`text--${size}`],
!preset && variant && styles[`text--${variant}`],
!preset && weight && styles[`text--${weight}-weight`],
preset && styles[`text--${preset}`],
className,
);
return (
Expand Down
Loading

0 comments on commit 4422e8e

Please sign in to comment.