DEV Community: Victor Gonzalez

Component System with Material UI: Button

Victor Gonzalez — Mon, 17 Jan 2022 15:30:24 +0000

This is another post from a series, where I'll be using Material UI (now mui) for creating a Component System that maps an already created Design System: VTEX Design Sistem

In this post I'll be setting the styles for the Button component using the createTheme mui API. For that I'll be overriding the defaults style values and also creating new variants.

You can see the Button style guide within Figma here

Buttons are a core component for any web application, users interacts and trigger action from these, so it's important to transmit the user what are the buttons hierarchy.

Mui defines 3 different button variants and 3 different sizes for each of them, this is how mui defines and separates the hierarchy between Buttons.

contained: this is the button with higher emphasis, it is meant to be used for primary actions. This is what you want your users to click on.
outlined: are buttons with medium emphasis, this variant is mostly used on "secondary" actions, those which are important, but it's not the main action in an specific context.
text: a variant with low emphasis, this variant is used for those actions that doesn't affect the main goal of your application. Also are mostly used on cards, dialogs/modals, and snackbars.

Here is how the VTEX Design Sistem buttons guide looks implemented using the theme api from mui.

As you can see on the gist above, I'm overriding the sizeSmall, sizeMedium and sizeLarge styles from the createTheme mui function to set the correct paddings and font-size for those states.

I'm also creating a new color danger and defining the main and contrastText so that, I can create the danger buttons displayed on the codesandbox as example.

I said at the beginning of the post in order to create the VTEX Button styles I will be overriding the default values for the mui buttons, and also creating new ones. But there was no need for create new variants, since mui handles very well the abstraction of the color palette and the color prop on its components.

I'll be creating some variants just to demonstrate how it can be done with mui.

As you can see on the example above, I've created 2 variants called: leftRounded and dashed.

For this I had to add a new property called variants (Array) to the MuiButton object. Each object in this array represents a single variant.

For naming a variant you can use the props: { variant: "name_of_your_variant" } and then, use the styles property on the same object to set the css styles.

Conclusion

When it comes to Buttons, most of the time there is no reason for creating new variants, unless the design system you're using contains more than the default 3 variants mui provides, or buttons with weird shapes and animations.

With a correct definition of colors you can use the color prop to define which set of "background color" and "color text" to use on each button.

Some references here

Component System with Material UI: Typography

Victor Gonzalez — Tue, 11 Jan 2022 16:01:48 +0000

This is the second post from a series which will attempt to create a Component System that maps an already created Design System: VTEX Design Sistem

In this post I'll be creating the code needed to map the Typography style from the design system into the project. For that I'll be overriding the defaults style values and also creating new variants.

You can check the Typography configuration within Figma here

A Typography is a component to render text into a React App, Mui has an already pre-defined set of variant values for this component, here is the documentation for it.

Setting variants styles

In the code example above I'm using the typography: {...} property to set the correct styling for the already pre-defined typography variants, and also create new ones, like: bodyBold, small, smallBold.

Also, at the same level than typography:{...} there is another property called components:{...}, in here I'm using MuiTypography to specify which html node should be rendered when any of the new variants are being called (variantMapping).

If I don't set this variantMapping, when I use a Typography with variant "small", for example, a span will be rendered.

Here is how the code above looks on a React application:

Customizing Typographies on the flight

The idea of creating and setting variants on Mui is to write more maintainable and clean code, most of the time you only need the default version of Typography but when you need specific changes like the color of the text, you can pass it as a property.

For that you can pass a color prop to a Typography component to use any defined color on the theme.

You can see more examples of this on the codesandbox above.

Conclusion

Set all your typographies styles needed on your application, create some custom variants if need it and use the Typography component so you don't need to set the correct styles on each text you need to display.

Also take advantage of the color prop to customize the color in case you need it.

Component System with Material UI: Theme API

Victor Gonzalez — Mon, 03 Jan 2022 16:44:58 +0000

Material UI (now Mui) provides an arrange of React components ready to be used on any project, but the true power of Mui comes when creating a Component System that maps any Design System using the theme api.

This is the first post from a series which will attempt to create a Component System that maps an already created Design System: VTEX Design Sistem

There is something more than just the ability to create components system on top of the already created mui components that makes Material UI an awesome library to work with: High standards on how components works, and accessibility

I have taken the path to create a components system from scratch using any other styling method, and there is a point where some components are using some props and some others are using kind of the same ones, but slightly different, and this is a problem.

Since Mui has a well defined way on how components should work and what props they should receive, you don't have to worry about maintaining the components abstraction.

In order to create a component system first I'll explain some definitions that will help understand how it works…

Variant: A variant is an UI representation for a specific component state. For example: the already existing Mui Button variants:
createTheme: is a function Mui provides to overrides and create variants for the Mui components.

How to setup a theme in Mui

Mui provides a createTheme function and a <ThemeProvider />component, which allows us to wrap our React app with the ThemeProvider component and pass it down a prop called theme={createTheme({})}, so that way, any Mui component rendered within this ThemeProvider is going to use the styles set before on the theme.

The createTheme receives an object where you can override/create the styles for the already existing component variants or, create new ones.

The <ThemeProdiver /> is a React component which wraps the whole application so all Mui children components can access the theme and therefore use the theme styling.

Here is an example:

You can see in the example above the object passed to the createTheme function has a well defined structure. It has a component property where you can list all supported Mui component with a "Mui" prefix.

Then, the stylesOverrides and variants is where (how the name suggests) you can override the styles and create new variants.

I'm going to explain how to override each Mui components and create new variants on the next posts. For now, I'm just going to set the colors and spacing…

Setting the color palette 👨🏻‍🎨

Understanding the color configuration is crucial for styling correctly the Mui components. But anyway, remember you can always override that configuration for each Mui component later.

Mui has a default set of colors, you can check more info about this in here.

I'm creating the next example to add the Design System color guide into the Mui theme api.

In the example above I'm overriding all Mui defaults color values, and also I'm creating a new one: "newColor". You can see how it would be applied to the buttons components on the example below.

Also, you can manage the color configuration for the light and dark mode in this palette object. But I'll dig more on that on another post.

Conclusion

Use the <ThemeProvider theme={createTheme({...})} /> to set the color values Mui components are going to use when they are rendered.

Override and create more color palette values to set the design system color guide into the Mui component system.