Usage of Modals and Tabs

[pietz]

Hey team,

I really enjoy using skeleton so far! Everything seems to be very straight forward but two components seem a little more awkward to use than necessary: Modal and Tabs/Tab

The Tabs component uses a store to define its content. Why isn't the usage similar to the Accordion component? I mean it's also used in similar ways. It just seems so much more logical to define the content of the tabs in slots within the Tab component instead of dealing with stores.

In the Modal component this seems even more apparent. Why not simply define the content of a Modal by putting content in its default slot? all this custom store format makes it just really complicated to deal with modals.

Am I overlooking some bigger picture here?

[endigo9740]

Hey @pietz thanks for reaching out. There's multiple questions raised here so I'll do my best to answer each of these below.

The Tabs component uses a store to define its content. Why isn't the usage similar to the Accordion component?

Keep in mind we "dogfood" most of the components in the library within the Skeleton documentation. We've found a number of technical benefits to using writable stores for features that share state between parent/child components. Given Svelte Context API data flow is one way (down), using a store allows data to go upwards in the tree. This is the official way to handle this - per discussion with Svelte contributors such as Conduitry (the second highest contributor after Rich Harris).

Additionally, in practice, this allows us to persist tab selection using Skeleton's Local Storage Store:
https://www.skeleton.dev/utilities/local-storage-stores

To see this in action, visit any of of our documentation Guide sections and choose a framework tab option. Note that not only does it persist selection through a page refresh, it also keeps the selection as you navigate from page to page due to our centralized store:
https://www.skeleton.dev/guides/install

It just seems so much more logical to define the content of the tabs in slots within the Tab component instead of dealing with stores.

There has been discussion of introducing tab "panels", which house the content of tabs well. See the post below. A user mentioned he was going to send a PR for this feature, but unfortunately we've yet to see this. Note that this will still continue using stores for the benefits mentioned above.

• Properly implement the WAI accessibility standard for tabs #516

In the Modal component this seems even more apparent. Why not simply define the content of a Modal by putting content in its default slot?

The default slot is not available for most pages when you implement the modals correctly. Modal and Toast components should be centralized and defined once in global scope, which typically means the component lives in the root layout. That means the slots are well out of reach for your individual pages. By using the Store, we can keep this singular instance in place but communicate with it from anywhere via the store. This is called a Singleton Pattern in development. It's used widely for game development, to ensure there's only one instance of certain game state - such as a score.

if every page had to re-implement the modal system, that would be a lot of work for a system typically used for global notifications.

To give you a real world use case - on a previous project I had a modal system implemented like this, as well as a "HTTP service", which was a general handler for any HTTP network calls (get, post, put, delete, etc). I then hooked the error handler for that service into my global modal system, so no matter where in the app an HTTP originated, if a call failed it could provide a toast or modal dialog informing the user when something went wrong. The alternative would have been to implement that over and over again per each and every page and HTTP call - which would be a nightmare for a large app!

Let me know if this helps make things clear.

EDIT

Also be aware, I know some of these more complex usage patterns may not be obvious from the Usage instruction per each component. Please be aware our next release will introduce a new Blog section on the doc site, where we hope to provided deep-dives and tutorials for particular subjects. Perhaps a post discussing the benefits of the stores, another walking through proper implementation of modals, etc might be useful. So I'll keep this in mind!

[pietz]

Really appreciate your detailed answer! Thank you.

[endigo9740]

No problem, glad to help. Let us know if we can talk through anything else, but also keep an eye out for the new blog. Hopefully we can get those deep dive posts up soon. The first tutorial is in progress now and it will cover creating a responsive sidebar and drawer for navigation!