Avoiding the Pitfalls of Nested Components in a Design System

Avoiding the Pitfalls of Nested Components in a Design System

css-tricks.com css-tricks.com3 months ago in #Design Love59

When developing a component-based, front-end infrastructure, one of the largest ache issues I’ve in my opinion encountered is making elements which are each reusable and responsive when there are nested elements inside of elements. Take the following “name to motion” () ingredient, for instance: On smaller gadgets we wish it to seem like this: This is unassuming sufficient with elementary media queries. If we’re the use of flexbox, a media question can alternate the flex route and makes the button pass the complete width. But we run into a drawback once we get started nesting different elements in there. For instance, say we’re the use of a ingredient for the button and it already has a prop that makes it full-width. We are in fact duplicating the button’s styling when making use of a media question to the dad or mum ingredient. The nested button is already succesful of dealing with it! This is a small instance and it wouldn’t be that unhealthy of a drawback, however for different situations it will reason a lot of duplicated code to duplicate the styling. What if in the long term we would have liked to switch one thing about how full-width buttons are styled? We’d want to undergo and alter it in these kinds of other puts. We will have to be capable of alternate it in the button ingredient and feature that replace all over the place. Wouldn’t or not it’s great if lets transfer clear of media queries and feature extra regulate of the styling? We will have to be the use of a ingredient’s present props and be capable of move other values in accordance with the display screen width. Well, I’ve a means to try this and can display you the way I did it. I’m mindful that container queries can resolve a lot of those problems, but it surely’s nonetheless in early days and doesn’t resolve the factor with passing a selection of props in accordance with display screen width. Tracking the window width First, we want to monitor the present width of the web page and set a breakpoint. This can also be accomplished with any front-end framework, however I’m the use of a Vue composable right here as to display the concept: // composables/useBreakpoints.js import { readonly, ref } from “vue”; const bps = ref({ xs: 0, sm: 1, md: 2, lg: 3, xl: 4 }) const currentBreakpoint = ref(bps.xl); export default () ={ const updateBreakpoint = () ={ const windowWidth = window.innerWidth; if(windowWidth = 1200) { currentBreakpoint.price = bps.xl } else if(windowWidth = 992) { currentBreakpoint.price = bps.lg } else if(windowWidth = 768) { currentBreakpoint.price = bps.md } else if(windowWidth = 576) { currentBreakpoint.price = bps.sm } else { currentBreakpoint.price = bps.xs } } go back { currentBreakpoint: readonly(currentBreakpoint), bps: readonly(bps), updateBreakpoint, }; }; The explanation why we’re the use of numbers for the currentBreakpoint object will turn out to be transparent later. Now we will pay attention for window resize occasions and replace the present breakpoint the use of the composable in the primary App.vue document: // App.vue We most definitely need this to be debounced, however I’m holding issues easy for brevity. Styling elements We can replace the ingredient to just accept a new prop for the way it will have to be styled: // CTA.vue props: { displayMode: { kind: String, default: “default” } } The naming right here is completely arbitrary. You can use no matter names you’d like for every of the ingredient modes.  » Read More

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply