{"action":"created","issue":{"url":"https://api.github.com/repos/contiamo/operational-ui/issues/755","repository_url":"https://api.github.com/repos/contiamo/operational-ui","labels_url":"https://api.github.com/repos/contiamo/operational-ui/issues/755/labels{/name}","comments_url":"https://api.github.com/repos/contiamo/operational-ui/issues/755/comments","events_url":"https://api.github.com/repos/contiamo/operational-ui/issues/755/events","html_url":"https://github.com/contiamo/operational-ui/issues/755","id":363021014,"node_id":"MDU6SXNzdWUzNjMwMjEwMTQ=","number":755,"title":"[Proposal] Typography Component","user":{"login":"adeelibr","id":16651811,"node_id":"MDQ6VXNlcjE2NjUxODEx","avatar_url":"https://avatars0.githubusercontent.com/u/16651811?v=4","gravatar_id":"","url":"https://api.github.com/users/adeelibr","html_url":"https://github.com/adeelibr","followers_url":"https://api.github.com/users/adeelibr/followers","following_url":"https://api.github.com/users/adeelibr/following{/other_user}","gists_url":"https://api.github.com/users/adeelibr/gists{/gist_id}","starred_url":"https://api.github.com/users/adeelibr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adeelibr/subscriptions","organizations_url":"https://api.github.com/users/adeelibr/orgs","repos_url":"https://api.github.com/users/adeelibr/repos","events_url":"https://api.github.com/users/adeelibr/events{/privacy}","received_events_url":"https://api.github.com/users/adeelibr/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-09-24T05:49:08Z","updated_at":"2018-10-08T09:54:30Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"Have in our `theme` a `typography` object which has the following styles defined. Then if there is `<Typography />` component. It can take in a `type` prop which can be of the following types\r\n\r\n```\r\nclassNames applied {\r\n    root: /* a generic wrapper class for the root element */\r\n    display1: /* extends theme.typography.display1 from theme passes */\r\n    display2: /* extends theme.typography.display2 from theme passes */\r\n    display3: /* extends theme.typography.display3 from theme passes */\r\n    heading: /* extends theme.typography.heading from theme passes */\r\n    title: /* extends theme.typography.title from theme passes */\r\n    subheading: /* extends theme.typography.subheading from theme passes */\r\n    body1: /* extends theme.typography.body1 from theme passes */\r\n    body2: /* extends theme.typography.body2 from theme passes */\r\n    alignLeft: /* applied if align=\"left\" */\r\n    alignRight: /* applied if align=\"right\" */\r\n    alignJusitfy: /* applied if align=\"justify\" */\r\n    color: /* for color props, by default this will default theme.*/\r\n}\r\n```\r\n\r\nSo something on the lines like these \r\n\r\n```\r\n<Typography variant=\"body1\" color=\"inherit\" align=\"right\" />\r\n```\r\n\r\nThen the way this component will be build\r\n\r\n```\r\nconst headlineMapping = {\r\n    display4: 'h1',\r\n    display3: 'h1',\r\n    display2: 'h1',\r\n    display1: 'h1',\r\n    headline: 'h1',\r\n    title: 'h2',\r\n    subheading: 'h3',\r\n    body2: 'aside',\r\n    body1: 'p',\r\n};\r\nconst Component = headlineMapping[variant]) || 'p'\r\nreturn (\r\n  <Component className={css`${root} ${variant} ${align} ${color}`} />\r\n);\r\n```\r\n\r\nAnd if no prop provided, **variant** defaults to `body` and **color** defaults to `theme primary.color` **align** defaults to `left`\r\n\r\nThings I Studied For This:\r\nReference: Composition in React Emotion https://emotion.sh/docs/composition\r\n\r\nInspiration Taken From React Material UI. I chose this composition technique, because it is really elegant and this way you can build on top of things in a very elegant way.\r\n\r\nI would really love your feedback on this \r\n@TejasQ @peterszerzo :)"},"comment":{"url":"https://api.github.com/repos/contiamo/operational-ui/issues/comments/427778134","html_url":"https://github.com/contiamo/operational-ui/issues/755#issuecomment-427778134","issue_url":"https://api.github.com/repos/contiamo/operational-ui/issues/755","id":427778134,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNzc3ODEzNA==","user":{"login":"fabien0102","id":1761469,"node_id":"MDQ6VXNlcjE3NjE0Njk=","avatar_url":"https://avatars1.githubusercontent.com/u/1761469?v=4","gravatar_id":"","url":"https://api.github.com/users/fabien0102","html_url":"https://github.com/fabien0102","followers_url":"https://api.github.com/users/fabien0102/followers","following_url":"https://api.github.com/users/fabien0102/following{/other_user}","gists_url":"https://api.github.com/users/fabien0102/gists{/gist_id}","starred_url":"https://api.github.com/users/fabien0102/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fabien0102/subscriptions","organizations_url":"https://api.github.com/users/fabien0102/orgs","repos_url":"https://api.github.com/users/fabien0102/repos","events_url":"https://api.github.com/users/fabien0102/events{/privacy}","received_events_url":"https://api.github.com/users/fabien0102/received_events","type":"User","site_admin":false},"created_at":"2018-10-08T09:54:30Z","updated_at":"2018-10-08T09:54:30Z","author_association":"CONTRIBUTOR","body":"We already have `<Title1/ >`, `<Body />`, I'm more in favor to add more components and props when if have the need instead of this very generic `Typography` component.\r\n\r\nAnd I definitely prefer this kind of code:\r\n\r\n```jsx\r\n<Title1>My Title</Title1>\r\n<Body>Hello</Body>\r\n```\r\ninstead of this:\r\n```jsx\r\n<Typography variant=\"title\">My Title</Typography>\r\n<Typography varient=\"body\">Hello</Typography>\r\n```\r\n\r\nI will ideally go to `<H1 />` and `<P />`, because it feel a bit more natural when I'm writing some formatted text (and it's shorter, and yes, I'm lazy 😃 )"}}
{"actor":{"display_login":"fabien0102"}}