Which UI Elements Should be Turned Into React Components?

[00:00 - 00:11] Using the concepts from the previous lesson, it's possible to find shared components and even the most complex code bases. Let's walk through an advanced UI example and identify the different elements of atomic design.

[00:12 - 00:25] So here is the UX from the Azure database portal. There are a lot of different elements going on here and it can be pretty complex, but to simplify it, let's break it down into the individual elements of atomic design.

[00:26 - 00:56] So starting with atoms, we can see some shared elements, including the shared color palette between componentry, font and typography, that's consistent, spacing values that are the same within elements as well as between them, and an iconography that shared across different areas of the page. One step above that, we can find molecules, which is where most shared componentry is going to live, and we can see things like icon buttons that are used across the header, and within the page.

[00:57 - 01:08] We can see removable pills that are reused in several areas. And then elements like buttons and these selects would be great examples of molecules that could be reused in many areas.

[01:09 - 01:23] If we look at another page, we can see some more consistent usages of things like organisms, templates and page layouts. Within this course, we're also going to be providing a demo code base.

[01:24 - 01:38] This code base is going to be a showcase for components that are used in common application experiences, and it's going to include custom styling but with SAS that we'll be migrating to our shared component library. These components will include things like buttons, inputs and text areas.

[01:39 - 01:58] It's built on top of Create React app, TypeScript and SAS, and we're going to be using this example to help identify some of the consistent styling and features that will want to include in the final component library. So to start out, download the code from the link provided, unsymphec contents, and then open it in your editor of choice.

[01:59 - 02:15] I'll be using VS Code for this. So once you have it open, you can run npm install to install the dependencies, and then we can run npm start to start Create React app locally and view the demo code base.

[02:16 - 02:24] So once that's running, you should see a page like this. So this demo code base shows a few different elements.

[02:25 - 02:45] We have buttons, which include some different style variants, and then we have inputs and text areas. The code base is split into a pretty common layout where we have, in our root, we have a single app component, and this app component is importing in a few different layout components, which includes buttons and field controls.

[02:46 - 03:02] So if we were to open up buttons, you can see some native HTML buttons being used, and then with custom styling applied through SAS. So this styling and componentry is what we're going to abstract into our shared components later on.

[03:03 - 03:20] So there is quite a bit of styling in this page, and we're basing a lot of it off of bootstrap. And one of the hardest questions when you're separating components is what is a global styling versus component styling. So not all page styling should be abstracted into these shared components, and that's just to make them as flexible as possible.

[03:21 - 03:32] So we want to avoid any styling that applies margin, or other positioning constraints outside of our component. We want to avoid anything that overrides nested content styling, and anything that enforces layout.

[03:33 - 03:41] So in this demo style guide, we have a mobile responsive grid provided by boot strap. So we don't want to apply any of that styling within the component.

[03:42 - 03:54] The typography and global spacing and resets are provided by bootstrap, so we don't want to include any styling from that either. Some examples of component styling that are things that we want to include would be the internal padding within the buttons.

[03:55 - 04:17] Any colors or states around the different style of variants, we have like danger, primary, secondary, the sizing, whether it's full with or not, and the pseudo states like disabled, focused, and hover. And then some other global styling that we would want to avoid would be anything around typography or external spacing.

[04:18 - 04:28] So global styling isn't necessarily a bad thing to include in a component library, but it can cause issues with flexible and res later on. So we're going to be avoiding it in this course.