-
Notifications
You must be signed in to change notification settings - Fork 831
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
evergreen-typography outline #2
Comments
This is a great start! |
Oh, and there's also the fact that Text wouldn't create those unexpected line breaks we see in the current UI lib |
I vote for keeping this one package, exporting both react components and the type styles, as they are so tightly coupled. |
Additional Text StylesI have added the components and styles described below in #7. I realized it makes sense to also cover I would say these are nice to haves and require a new issue. |
🙌
…On Tue, Aug 29, 2017 at 9:55 AM Jeroen Ransijn ***@***.***> wrote:
Closed #2 <#2>.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#2 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AEa0JInc155ohY9tRj6Ra3WD0zOA00_Wks5sdEJagaJpZM4O8iJR>
.
|
The
evergreen-typography
is a package exporting React components and text styles. I am not sure yet about some of the API design. Any input is appreciated.Usage
Text component primitive
The
<Text />
component is the primitive for all other text components.It should implement a Box from
ui-box
.Working example
The
size
propThe Text component has a
size
prop that uses city blocks naming convention:100, 200, 300, 400, 500, 600, 700, 800, 900
.The default size is
500
for a Text component.Text implementation
I am thinking something like the following.
Potential API's
For the most part I don't you should have to configure Text outside of properties already supported by Box. The following come to mind:
Dedicated API for color options
This begs the question if text styles should be implemented with a color.
It might be nice to have somewhat of a dedicated API for color. Here are some options I am thinking of:
<Text muted />
optionThis is the implementation used inside of the React UI Library (current internal Segment UI framework).
<Text color='muted' />
optionThis option might be powerful to use as a standard across components. I have experienced that key/value props end up the most easiest to understand.
<Text color={TextColors.muted} />
optionThis options is to most powerful but also the most verbose.
<MutedText />
optionText based components
The following components can be fairly simply implemented on top of Text.
Some might not be as useful, but it doesn't break anything either. I have experienced some engineers prefer this instead.
Potentially split up in two packages
It might be beneficial to split up the React components from the actual type styles.
This would potentially mean another package:
evergreen-type-styles
. This might is useful in the case of usingreact-sketchapp
, or CSS generation tools.What I have in Sketch so far
The text styles I have in Sketch so far are. Although I don't think we need to be that explicit up front.
I generated this today and don't think we should mirror this API.
Text styles we should use
Still unsure if we should base everything from one set of text styles. But in my react-sketchapp generator I am using the following two objects:
heading-styles.js
text-styles.js
The text was updated successfully, but these errors were encountered: