We’re looking at creating different Libraries for our design system like Light/Dark/Wireframe but I’m wondering if you have separate Libraries can base components be updated for all Libraries if you update the base component in just one of the libraries? For instance if we make some kind of change to a base component like a button in say the Light library that it’s updated across all three libraries?
Are your Light/Dark/Wireframe libraries referencing the same base component? If so, they should all update if the base component is changed in any way (just be sure to hit the publish button after a change is made)
So we just have one Library built right now and it has some unpublished base components within that. I guess I’m wondering the best way to go about adding the new libraries, should we create a separate library for all our unpublished base components that all the libraries would share or can we just leave the base components in the one Library we have now and when we add the two new libraries just point them to those base components?
I just want to avoid having to update a base button component for instance in all three libraries if we can just update one base component that will update in all libraries at one time.
Either approach works; I oftentimes hear people make a library specifically for base components (if there’s a bunch of them) rather than having them live in the the same file as one of the libraries with components built off of it; however, it depends on what your team prefers and what form of organization makes the most sense to you.
I also want to clarify what you mean by “unpublished”. If you don’t publish a base component, you won’t be able to update components from other libraries built off of the base component if any changes were to be made to it. I’m guessing you want to hide the base component from the assets panel, in which case you can add a “.” or “_” at the beginning of the component name.
I think I misspoke, we just hide our base components using an underscore like you mentioned.
If we move the base components to a new library just to house our base components will that break the connection to components already using those base components?
Nope the connection should be retained
Ok, that’s what I thought but just wanted to make sure.
Thanks so much for all your help!
No problem! Happy to help
So I’ve setup three different libraries now, Dark, Light, Wireframe. The Dark library houses the base components which is shared by all three libraries. Ideally we want to keep the base components hidden from all three libraries. However I’ve realized now though that if we try to hide the base components in the Dark library and we make changes to them, like say the corner radius of the buttons it’s not going to get published to the rest of the libraries like Light and Wireframe correct?
As long as the base components are hidden, they will not appear in the other libraries, but any changes made to them should still influence any child components created from them once you publish updates.
Gotcha, then maybe I haven’t set it up correctly. I copied the main components from the Dark library to my other Light and Wireframe libraries. I then tested it by changing the border radius on the _button_base which did update the main Buttons component in the Dark library but it did not update the other libraries that use that same Button component. Is there something I’m missing?
Dark Library with base components:
Light Library using same Button component showing old corner radius:
Ah so looks like I was incorrect. Just checked with the team, and turns out that if a base component is private to a file, any changes made to it will not be passed on to child components in other libraries. It seems that you’ll have to make the base component public to get the behavior you’re looking for.
Ok, that’s kind of what I thought. Do you know if there’s a way to hide libraries from users but still have other libraries connected to it? I’m just wondering if we decide to create a separate library for all our base components if there was a way to hide it so people don’t try to use it and also to keep things more tidy.
You can set the base library permissions to be shared with only within your DS team and then have other libraries built off of that shareable with the rest of your org.
Ah ok, perfect. Thanks again for answering all my questions
Sorry, more questions. So I’ve been playing around with swapping between libraries and I wasn’t sure if there was a best practice around whether it’s better to swap components or colors? For instance if I’m swapping between a Dark and Light library. I also ask because I’ve noticed some things breaking like only some colors or components being swapped. Or also I noticed when I was just trying to swap using color styles only I had ‘Active’ state buttons for all libraries that were using a ‘Primary’ color and when I would swap between themes the buttons would actually change to use the ‘Active’ color instead of the ‘Primary’ button if that makes sense. Part of that is probably using better naming conventions but it’s still weird that it’s changing the color based on the selected state of the button to a matching color style.
I also noticed that unless you’re looking at the design there’s no other indicator to tell which library you’re currently using which would be helpful to know when you’re swapping to another library.
Hi, I just wanted to follow up and see if you could provide any more guidance on whether it’s best to swap both styles and components when switching between libraries like Dark and Light? It seems like you should only need to swap the styles since the only thing that’s changing are the colors but I also realized it could be cumbersome to uncheck all the components that are going to be swapped since there’s no uncheck all.
Just trying to see if there’s any kind of best practices around this yet so any advice is much appreciated.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.