{"id":316298,"date":"2020-07-08T07:46:38","date_gmt":"2020-07-08T14:46:38","guid":{"rendered":"https:\/\/css-tricks.com\/?p=316298"},"modified":"2020-07-08T07:46:40","modified_gmt":"2020-07-08T14:46:40","slug":"how-to-make-a-list-component-with-emotion","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-make-a-list-component-with-emotion\/","title":{"rendered":"How to Make a List Component with Emotion"},"content":{"rendered":"\n

I\u2019ve been doing a bit of refactoring this week at Sentry<\/a> and I noticed that we didn\u2019t have a generic List component that we could use across projects and features. So, I started one, but here\u2019s the rub: we style things at Sentry using Emotion<\/a>, which I have only passing experience with and is described in the docs as\u2026<\/p>\n\n\n\n

[\u2026] a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.<\/p><\/blockquote>\n\n\n\n

If you\u2019ve never heard of Emotion, the general idea is this: when we\u2019re working on big codebases with lots of components, we want to ensure that we can control the cascade of our CSS. So, let\u2019s say you have an .active<\/code> class in one file and you want to make sure that doesn\u2019t impact the styles of a completely separate component in another file that also has a class of.active<\/code>.<\/p>\n\n\n\n\n\n\n\n

Emotion tackles this problem by adding custom strings to your classnames so they don\u2019t conflict with other components. Here\u2019s an example of the HTML it might output:<\/p>\n\n\n\n

<div class=\"css-1tfy8g7-List e13k4qzl9\"><\/div><\/code><\/pre>\n\n\n\n
Pretty neat, huh? There\u2019s lots of other tools and workflows out there though that do something very similar, such as CSS Modules<\/a>.<\/p>\n\n\n\n
To get started making the component, we first need to install Emotion<\/a> into our project. I\u2019m not going to walkthrough that stuff because it\u2019s going to be different depending on your environment and setup. But once that\u2019s complete we can go ahead and create a new component like this:<\/p>\n\n\n\n
import React from 'react';\nimport styled from '@emotion\/styled';\n\nexport const List = styled('ul')`\n  list-style: none;\n  padding: 0;\n`;<\/code><\/pre>\n\n\n\n
This looks pretty weird to me because, not only are we writing styles for the <ul><\/code> element, but we\u2019re defining that the component should render a <ul><\/code>, too. Combining both the markup and the styles in one place feels odd but I do like how simple it is. It just sort of messes with my mental model and the separation of concerns between HTML, CSS, and JavaScript.<\/p>\n\n\n\n
In another component, we can import this <List><\/code> and use it like this:<\/p>\n\n\n\n
import List from 'components\/list';\n\n<List>This is a list item.<\/List><\/code><\/pre>\n\n\n\n
The styles we added to our list component will then be turned into a classname, like .oefioaueg<\/code>, and then added to the <ul><\/code> element we defined in the component.<\/p>\n\n\n\n
But we\u2019re not done yet! With the list design, I needed to be able to render a <ul><\/code> and an <ol><\/code> with the same component. I also needed a version that allows me to place an icon within each list item. Just like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The cool (and also kind of weird<\/em>) thing about Emotion is that we can use the as<\/code> attribute to select which HTML element we\u2019d like to render when we import our component. We can use this attribute to create our <ol><\/code> variant without having to make a custom type<\/code> property or something. And that happens to look just like this:<\/p>\n\n\n\n
<List>This will render a ul.<\/List>\n<List as=\"ol\">This will render an ol.<\/List><\/code><\/pre>\n\n\n\n
That\u2019s not just weird to me, right? It\u2019s super neat, however, because it means that we don\u2019t have to do any bizarro logic in the component itself just to change the markup.<\/p>\n\n\n\n
It was at this point that I started to jot down what the perfect API for this component might look like though because then we can work our way back from there. This is what I imagined:<\/p>\n\n\n\n
<List>\n  <ListItem>Item 1<\/ListItem>\n  <ListItem>Item 2<\/ListItem>\n  <ListItem>Item 3<\/ListItem>\n<\/List>\n\n<List>\n  <ListItem icon={<IconBusiness color=\"orange400\" size=\"sm\" \/>}>Item 1<\/ListItem>\n  <ListItem icon={<IconBusiness color=\"orange400\" size=\"sm\" \/>}>Item 2<\/ListItem>\n  <ListItem icon={<IconBusiness color=\"orange400\" size=\"sm\" \/>}>Item 3<\/ListItem>\n<\/List>\n\n<List as=\"ol\">\n  <ListItem>Item 1<\/ListItem>\n  <ListItem>Item 2<\/ListItem>\n  <ListItem>Item 3<\/ListItem>\n<\/List><\/code><\/pre>\n\n\n\n
So after making this sketch I knew we\u2019d need two components, along with the ability to nest icon subcomponents within the <ListItem><\/code>. We can start like this:<\/p>\n\n\n\n
import React from 'react';\nimport styled from '@emotion\/styled';\n\nexport const List = styled('ul')`\n  list-style: none;\n  padding: 0;\n  margin-bottom: 20px;\n\n  ol& {\n    counter-reset: numberedList;\n  }\n`;<\/code><\/pre>\n\n\n\n
That peculiar ol&<\/code> syntax is how we tell emotion that these styles only apply to an element when it\u2019s rendered as an <ol><\/code>. It\u2019s often a good idea to just add a background: red;<\/code> to this element to make sure your component is rendering things correctly.<\/p>\n\n\n\n
Next up is our subcomponent, the <ListItem><\/code>. It\u2019s important to note that at Sentry we also use TypeScript, so before we define our <ListItem><\/code> component, we\u2019ll need to set our props up first:<\/p>\n\n\n\n
type ListItemProps = {\n  icon?: React.ReactNode;\n  children?: string | React.ReactNode;\n  className?: string;\n};<\/code><\/pre>\n\n\n\n
Now we can add our <IconWrapper><\/code> component that will size an <Icon><\/code> component within the ListItem<\/code>. If you remember from the example above, I wanted it to look something like this:<\/p>\n\n\n\n
<List>\n  <ListItem icon={<IconBusiness color=\"orange400\" size=\"sm\" \/>}>Item 1<\/ListItem>\n  <ListItem icon={<IconBusiness color=\"orange400\" size=\"sm\" \/>}>Item 2<\/ListItem>\n  <ListItem icon={<IconBusiness color=\"orange400\" size=\"sm\" \/>}>Item 3<\/ListItem>\n<\/List><\/code><\/pre>\n\n\n\n
That IconBusiness<\/code> component is a preexisting component and we want to wrap it in a span so that we can style it. Thankfully, we\u2019ll need just a tiny bit of CSS to align the icon properly with the text and the <IconWrapper><\/code> can handle all of that for us:<\/p>\n\n\n\n
type ListItemProps = {\n  icon?: React.ReactNode;\n  children?: string | React.ReactNode;\n  className?: string;\n};\n\nconst IconWrapper = styled('span')`\n  display: flex;\n  margin-right: 15px;\n  height: 16px;\n  align-items: center;\n`;<\/code><\/pre>\n\n\n\n
Once we\u2019ve done this we can finally add our <ListItem><\/code> component beneath these two, although it is considerably more complex. We\u2019ll need to add the props, then we can render the <IconWrapper><\/code> above when the icon<\/code> prop exists, and render the icon component that\u2019s passed into it as well. I\u2019ve also added all the styles below so you can see how I\u2019m styling each of these variants:<\/p>\n\n\n\n
export const ListItem = styled(({icon, className, children}: ListItemProps) => (\n  <li className={className}>\n    {icon && (\n      <IconWrapper>\n        {icon}\n      <\/IconWrapper>\n    )}\n    {children}\n  <\/li>\n))<ListItemProps>`\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding-left: 34px;\n  margin-bottom: 20px;\n\t\n  \/* Tiny circle and icon positioning *\/\n  &:before,\n\t& > ${IconWrapper} {\n    position: absolute;\n    left: 0;\n  }\n\n  ul & {\n    color: #aaa;\n    \/* This pseudo is the tiny circle for ul items *\/ \n    &:before {\n      content: '';\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      margin-right: 15px;\n      border: 1px solid #aaa;\n      background-color: transparent;\n      left: 5px;\n      top: 10px;\n    }\n\t\t\n    \/* Icon styles *\/\n    ${p =>\n      p.icon &&\n      `\n      span {\n        top: 4px;\n      }\n      \/* Removes tiny circle pseudo if icon is present *\/\n      &:before {\n        content: none;\n      }\n    `}\n  }\n  \/* When the list is rendered as an <ol> *\/\n  ol & {\n    &:before {\n      counter-increment: numberedList;\n      content: counter(numberedList);\n      top: 3px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      width: 18px;\n      height: 18px;\n      font-size: 10px;\n      font-weight: 600;\n      border: 1px solid #aaa;\n      border-radius: 50%;\n      background-color: transparent;\n      margin-right: 20px;\n    }\n  }\n`;<\/code><\/pre>\n\n\n\n
And there you have it! A relatively simple <List><\/code> component built with Emotion. Although, after going through this exercise I\u2019m still not sure that I like the syntax. I reckon it sort of makes the simple stuff really<\/em> simple but the medium-sized components much<\/em> more complicated than they should be. Plus, it could be pretty darn confusing to a newcomer and that worries me a bit.<\/p>\n\n\n\n
But everything is a learning experience, I guess. Either way, I\u2019m glad I had the opportunity to work on this tiny component because it taught me a few good things about TypeScript, React, and trying to make our styles somewhat readable.<\/p>\n","protected":false},"excerpt":{"rendered":"
I\u2019ve been doing a bit of refactoring this week at Sentry and I noticed that we didn\u2019t have a generic List component that we could use across projects and features. So, I started one, but here\u2019s the rub: we style things at Sentry using Emotion, which I have only passing experience with and is described […]<\/p>\n","protected":false},"author":223806,"featured_media":316310,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[844,1555,969],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/emotion-lists.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":284354,"url":"https:\/\/css-tricks.com\/web-standards-meet-user-land-using-css-in-js-to-style-custom-elements\/","url_meta":{"origin":316298,"position":0},"title":"Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements","date":"March 15, 2019","format":false,"excerpt":"The popularity of CSS-in-JS has mostly come from the React community, and indeed many CSS-in-JS libraries are React-specific. However, Emotion, the most popular library in terms of npm downloads, is framework agnostic. Using the shadow DOM is common when creating custom elements, but there\u2019s no requirement to do so. Not\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/shadow-dom.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":280335,"url":"https:\/\/css-tricks.com\/the-fragmented-but-evolving-state-of-css-in-js\/","url_meta":{"origin":316298,"position":1},"title":"The Fragmented, But Evolving State of CSS-in-JS","date":"December 20, 2018","format":false,"excerpt":"TLDR: The CSS-in-JS community has converged on a consistent API. Not so long ago, a Facebook engineer compiled a list of the available CSS-in-JS methodologies. It wasn\u2019t short: aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style, bloody-react-styled, classy, csjs, css-constructor, css-light, css-loader, css-ns, cssobj, cssx-loader, cxs, electron-css, emotion, es-css-modules, freestyler, glamor, glamorous, hiccup-css, hyperstyles, i-css,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/css-in-js.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353318,"url":"https:\/\/css-tricks.com\/the-css-in-react-landscape\/","url_meta":{"origin":316298,"position":2},"title":"The CSS-in-React Landscape","date":"October 21, 2021","format":false,"excerpt":"I only half-jokingly refer to the CSS-in-JS world as CSS-in-React. Many of the libraries listed below theoretically work in non-React situations \u2014 they generally call that \"framework-agnostic\") \u2014 but I'd guess the vast majority of their usage is on React projects. That's because React, despite being a UI-focused library, has\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/css-in-js.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350070,"url":"https:\/\/css-tricks.com\/mars-theme-a-deep-look-at-frontitys-headless-wordpress-theme\/","url_meta":{"origin":316298,"position":3},"title":"Mars Theme: A Deep Look at Frontity\u2019s Headless WordPress Theme","date":"September 9, 2021","format":false,"excerpt":"Frontity is a framework for creating de-coupled (or \"headless\") WordPress sites. In this article, we dive into the process of spinning up such a site, with a detailed overview of the building blocks provided by Frontity and its flagship theme, Mars.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/frontity-wordpress.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340705,"url":"https:\/\/css-tricks.com\/a-thorough-analysis-of-css-in-js\/","url_meta":{"origin":316298,"position":4},"title":"A Thorough Analysis of CSS-in-JS","date":"May 26, 2021","format":false,"excerpt":"Wondering what\u2019s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than 50 libraries out there, each of them offering a unique set of features. We tested 10 different libraries, which are listed here in no particular order: Styled\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/kwyuFPAdFlkMaYo7vYFufdUG3WP4mp7_bbAsQnU7sVCnGH31dDmSgYp5KHqX4tQQR60KfzWV890kBXDPC68H4rLuYvMeVEhItg_oBFt59mCJmsN8giiB6HogBD9F7h6p2aMbs7Q.png?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297067,"url":"https:\/\/css-tricks.com\/what-i-like-about-writing-styles-with-svelte\/","url_meta":{"origin":316298,"position":5},"title":"What I Like About Writing Styles with Svelte","date":"October 23, 2019","format":false,"excerpt":"There\u2019s been a lot of well-deserved hype around Svelte recently, with the project accumulating over 24,000 GitHub stars. Arguably the simplest JavaScript framework out there, Svelte was written by Rich Harris, the developer behind Rollup. There\u2019s a lot to like about Svelte (performance, built-in state management, writing proper markup rather\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/svelte-logo-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/316298"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=316298"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/316298\/revisions"}],"predecessor-version":[{"id":316802,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/316298\/revisions\/316802"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/316310"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=316298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=316298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=316298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}