feat: add Text component #2408
feat: add Text component #2408
Conversation
🔍 Visual review for your branch is published 🔍Here are the links to: |
| import { textVariants } from "./variants" | ||
|
|
||
| export type AsAllowedList = | ||
| | "div" |
There was a problem hiding this comment.
Why would we want to have a text as a div? 🤔
There was a problem hiding this comment.
I've seen it used a lot for generic layouts, but it's probably bad for accessibility, given that we have plenty of other tags that suit text better. I can remove it if we feel it doesn't fit there 👍
There was a problem hiding this comment.
div is a way to render the text as block element.
Maybe we can remove span and div and use the prop block or inline to render them block or inline
| import { textVariants } from "./variants" | ||
|
|
||
| export type AsAllowedList = | ||
| | "div" |
There was a problem hiding this comment.
div is a way to render the text as block element.
Maybe we can remove span and div and use the prop block or inline to render them block or inline
| | "p" | ||
| | "label" | ||
| | "span" | ||
| | "h1" |
There was a problem hiding this comment.
I wondering If makes sense to create an specific component F0Heading for the headings, its a way to control what is a heading or not, visually can be similar to text, but semantic are diferent
Coverage Report for packages/react
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
size-limit report 📦
|
Description
Text is a typography component that handles styling of different semantic usages of texts across Factorial. It features:
heading, it will render ah2, but if you usebody, it will render ap. Optionally, the user can choose a different element to render, through theasprop.Screenshots
Implementation details
className) and private variants, only used inside the design system, but not in Factorial.OneEllipsis(component used for the ellipsis) andF0Text, there's a prop to choose in which HTML element is the text rendered. I've added that option toOneEllipsis.