{"action":"created","issue":{"url":"https://api.github.com/repos/segmentio/evergreen/issues/2","repository_url":"https://api.github.com/repos/segmentio/evergreen","labels_url":"https://api.github.com/repos/segmentio/evergreen/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/segmentio/evergreen/issues/2/comments","events_url":"https://api.github.com/repos/segmentio/evergreen/issues/2/events","html_url":"https://github.com/segmentio/evergreen/issues/2","id":251470254,"number":2,"title":"evergreen-typography outline","user":{"login":"jeroenransijn","id":564463,"avatar_url":"https://avatars1.githubusercontent.com/u/564463?v=4","gravatar_id":"","url":"https://api.github.com/users/jeroenransijn","html_url":"https://github.com/jeroenransijn","followers_url":"https://api.github.com/users/jeroenransijn/followers","following_url":"https://api.github.com/users/jeroenransijn/following{/other_user}","gists_url":"https://api.github.com/users/jeroenransijn/gists{/gist_id}","starred_url":"https://api.github.com/users/jeroenransijn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeroenransijn/subscriptions","organizations_url":"https://api.github.com/users/jeroenransijn/orgs","repos_url":"https://api.github.com/users/jeroenransijn/repos","events_url":"https://api.github.com/users/jeroenransijn/events{/privacy}","received_events_url":"https://api.github.com/users/jeroenransijn/received_events","type":"User","site_admin":false},"labels":[{"id":672425914,"url":"https://api.github.com/repos/segmentio/evergreen/labels/Priority:%20High","name":"Priority: High","color":"EC601E","default":false},{"id":672425038,"url":"https://api.github.com/repos/segmentio/evergreen/labels/Status:%20Proposal","name":"Status: Proposal","color":"E7F3FF","default":false},{"id":672428884,"url":"https://api.github.com/repos/segmentio/evergreen/labels/Type:%20New%20Package","name":"Type: New Package","color":"47B881","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-08-20T06:35:33Z","updated_at":"2017-08-20T07:30:14Z","closed_at":null,"body":"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.\r\n\r\n## Usage\r\n\r\n```js\r\nimport {\r\n  Text, // Primitive\r\n  Paragraph,\r\n  Heading,\r\n  Code,\r\n  Pre,\r\n  Label,\r\n  Small,\r\n  Strong\r\n}  from 'evergreen-typography'\r\n```\r\n\r\n## Text component primitive\r\n\r\nThe `<Text />` component is the primitive for all other text components.\r\nIt should implement a Box from `ui-box`.\r\n\r\n### Working example\r\n\r\n```js\r\nimport React from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport { Text } from 'evergreen-typography'\r\n\r\nReactDOM.render(<Text size={400} />, document.getElementById('root'))\r\n```\r\n\r\n### The `size` prop\r\n\r\nThe Text component has a `size` prop that uses city blocks naming convention:\r\n`100, 200, 300, 400, 500, 600, 700, 800, 900`.\r\n\r\nThe default size is `500` for a Text component.\r\n\r\n\r\n## Text implementation\r\n\r\nI am thinking something like the following.\r\n\r\n```js\r\nimport React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport Box from 'ui-box'\r\nimport TextStyles from './text-styles'\r\n\r\nconst Text = ({ size, ...props }) => {\r\n  return <Box {...TextStyles.get(size)} {...props} />\r\n}\r\n\r\nText.defaultProps = {\r\n  is: 'p' // not sure if this should be a `p` or a `span`\r\n}\r\n\r\nexport default Text\r\n```\r\n\r\n## Potential API's\r\n\r\nFor the most part I don't you should have to configure Text outside of properties already supported by Box. The following come to mind:\r\n\r\n```\r\n<Text textAlign='center' color='white' />\r\n```\r\n\r\n### Dedicated API for color options\r\n\r\nThis begs the question if text styles should be implemented with a color.\r\nIt might be nice to have somewhat of a dedicated API for color. Here are some options I am thinking of:\r\n\r\n```\r\n<Text muted />\r\n<Text color='muted' />\r\n<Text color={TextColors.muted} />\r\n<MutedText />\r\n```\r\n\r\n### `<Text muted />` option\r\n\r\nThis is the implementation used inside of the React UI Library (current internal Segment UI framework).\r\n\r\n* Short and clean\r\n* Allows a value to be passed\r\n* Pain to cancel out\r\n* Priority conflicts when used with color\r\n\r\n```\r\n<Text muted={null} />\r\n```\r\n\r\n### `<Text color='muted' />` option\r\n\r\nThis 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.\r\n\r\n* This API also allows easy composition\r\n* Still compact API\r\n* Minimizes naming conflicts\r\n* Prevents priority conflicts when used with color\r\n\r\n```\r\nconst TextColors = {\r\n    dark: '',\r\n    default: '', \r\n    muted: '',\r\n    extraMuted: '',\r\n}\r\n\r\nconst Text = ({ color, ...props }) => {\r\n  return <Box {...props} color={TextColors[color] || color} />\r\n}\r\n```\r\n\r\n### `<Text color={TextColors.muted} />` option\r\n\r\nThis options is to most powerful but also the most verbose.\r\n\r\n* Most powerful and understandable\r\n* More verbose\r\n* More to import \r\n\r\n### `<MutedText />` option\r\n\r\n* Most powerful and understandable\r\n* Limited composability\r\n* More to import \r\n\r\n## Text based components\r\n\r\nThe following components can be fairly simply implemented on top of Text.\r\n\r\n```\r\nParagraph, // => increases line height\r\nHeading, // => increased font weight\r\nCode, // => different font\r\nPre, // => styles added\r\nLabel, // => more semantic (I don't think different styling)\r\nSmall, // => decreased size\r\nStrong // => sets font weight\r\n```\r\n\r\nSome might not be as useful, but it doesn't break anything either. I have experienced some engineers prefer this instead.\r\n\r\n## Potentially split up in two packages\r\n\r\nIt might be beneficial to split up the React components from the actual type styles.\r\nThis would potentially mean another package: `evergreen-type-styles`. This might is useful in the case of using `react-sketchapp`, or CSS generation tools.\r\n\r\n## What I have in Sketch so far\r\n\r\nThe text styles I have in Sketch so far are. Although I don't think we need to be that explicit up front.\r\nI generated this today and don't think we should mirror this API.\r\n\r\n```\r\nText\r\nMuted Text\r\nWhite Text\r\nHeading\r\nMuted Heading\r\nWhite Heading\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/segmentio/evergreen/issues/comments/323568953","html_url":"https://github.com/segmentio/evergreen/issues/2#issuecomment-323568953","issue_url":"https://api.github.com/repos/segmentio/evergreen/issues/2","id":323568953,"user":{"login":"nettofarah","id":270688,"avatar_url":"https://avatars1.githubusercontent.com/u/270688?v=4","gravatar_id":"","url":"https://api.github.com/users/nettofarah","html_url":"https://github.com/nettofarah","followers_url":"https://api.github.com/users/nettofarah/followers","following_url":"https://api.github.com/users/nettofarah/following{/other_user}","gists_url":"https://api.github.com/users/nettofarah/gists{/gist_id}","starred_url":"https://api.github.com/users/nettofarah/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nettofarah/subscriptions","organizations_url":"https://api.github.com/users/nettofarah/orgs","repos_url":"https://api.github.com/users/nettofarah/repos","events_url":"https://api.github.com/users/nettofarah/events{/privacy}","received_events_url":"https://api.github.com/users/nettofarah/received_events","type":"User","site_admin":false},"created_at":"2017-08-20T07:30:14Z","updated_at":"2017-08-20T07:30:14Z","body":"Oh, and there's also the fact that Text wouldn't create those unexpected line breaks we see in the current UI lib"}}
{"actor":{"display_login":"nettofarah"}}