Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI v2] feat: Simplifies typography by introducing a simple typography component #16231

Merged
merged 1 commit into from
Dec 5, 2024

Conversation

devinvillarosa
Copy link
Contributor

@devinvillarosa devinvillarosa commented Dec 5, 2024

When rebuilding UI pages, the typography can get confusing with the abundance of options provided with Tailwind.

This PR:

  1. Introduces a simple Typography component to help simplify text when re-writing the platform. We can add stricter styling to each variant as we move forward, but this should help bring some consistency. Additionally this should help provide semantic HTML
  2. Adds story to Typography component story

Screenshot 2024-12-05 at 8 25 35 AM

Checklist

  • This pull request references any related issue by including "closes <link to issue>"
    • If no issue exists and your change is not a small fix, please create an issue first.
  • If this pull request adds new functionality, it includes unit tests that cover the changes
  • If this pull request removes docs files, it includes redirect settings in mint.json.
  • If this pull request adds functions or classes, it includes helpful docstrings.

Related to #15512

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could probably do this a bit more streamline in the future with createElement feature

@devinvillarosa devinvillarosa force-pushed the common-typography-component branch from ca2c1b9 to 936a5d9 Compare December 5, 2024 16:33
@devinvillarosa devinvillarosa marked this pull request as ready for review December 5, 2024 17:06
@devinvillarosa devinvillarosa force-pushed the common-typography-component branch from 936a5d9 to fe7cb4c Compare December 5, 2024 22:33
@devinvillarosa devinvillarosa enabled auto-merge (squash) December 5, 2024 22:33
import { cn } from "@/lib/utils";
import { forwardRef } from "react";

type Variant = "h1" | "h2" | "h3" | "h4" | "bodyLarge" | "body" | "bodySmall";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be cool to follow a variant structure similar to Button using cva.

Copy link
Contributor Author

@devinvillarosa devinvillarosa Dec 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can look into it in a followup PR. Didn't know we had a library like that

@devinvillarosa devinvillarosa merged commit 41ec634 into main Dec 5, 2024
5 checks passed
@devinvillarosa devinvillarosa deleted the common-typography-component branch December 5, 2024 22:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants