v1.0.0 Roadmap

[theetrain]

Carbon, as you know it, is an open design system funded and built by IBM. It follows a set of guiding principles to help steer it into being a fantastic option for building user interfaces.

carbon-components-svelte is a community-maintained UI library that builds on top of the terrific designs and user research backing the core Carbon design system, but for Svelte teams and developers. At the time of this writing, carbon-components-svelte is being built by contributors like you, and maintained part-time by non-IBM employees: @metonym and @theetrain.

v1.0.0 Goals

As a community-led project built with Svelte, we want to achieve the following goals with carbon-components-svelte v1.0.0:

1. Feature parity with Carbon v11, specifically with regards to styles, tokens, theming, component features, and layout tools.
2. Documentation improvements: show common examples to help get started with Carbon quickly, and include SvelteKit usage examples; and have better integration with the official Carbon docs.
3. Improve styling ergonomics: having components styled and themed without the need for large stylesheet imports or preprocessing; leading to easier setup, and fewer bytes shipped to users.
4. Progressive enhancement: support interactions when client-side JS is disabled and components are server-rendered.
5. Typescript improvements: add brief documentation to every component and display their self-defined props first from within your editor, how to import types, and colocate types with components.

Now let’s highlight some of those upcoming changes:

Styling improvements

Carbon v11

Arguably the biggest change will be adopting Carbon v11 SCSS styles. We’ll strive to improve the consumption workflow of carbon-components-svelte by including SCSS styles needed by components as they are imported; that way you won’t have to import corresponding component styles separately each time. As a consequence, Svelte projects consuming carbon-components-svelte will need to include SCSS preprocessors. To help with SCSS integrations and initial setup, we would like to create a svelte-add tool for carbon-components-svelte.

Theming will be achievable with SCSS variables, and corresponding documentation will be provided.

Managed layouts

When consuming common components such as UIShell and Form, it’s sometimes a bit of extra work to consult the correct spacing tokens for in-page elements. For this, we are looking to provide a ‘managed’ stylesheet that you can import once to provide sensible default spacing between all elements that you can easily override. Depending on scope, this may be implemented after the launch of carbon-components-svelte v1.0.0.

SvelteKit support

Within our documentation, we will provide a ‘getting started with SvelteKit’ section because we believe the majority of carbon-components-svelte users will use SvelteKit when building applications, and we want to provide common patterns that comply with Carbon designs to get you up and running with little decision work.

Progressive Enhancement

The majority of Carbon components only work with JS, but what if JS isn’t available to end users? Components such as Tabs and DataTable will expose props that allow you to pass an href prop or form actions, allowing your application to remain interactive even when JS is disabled or if hydration fails. This will be particularly useful when developing with SvelteKit.

---

How will we get there?

Carbon-components-svelte will graduate to v1.0.0 once the following items are complete:

1. Adopt Carbon v11 styles
2. Ensure all major components from Carbon v11 core are available in carbon-components-svelte
3. Documentation includes:
   1. Integration with official Carbon docs that includes getting started, links to repositories, contributing, links from components docs
   2. Notes for SCSS usage
   3. Notes for accessibility and progressive enhancement for all components where needed, and a link to official supplementary Carbon usage docs
   4. New categorization of components in Carbon Svelte docs for easier discoverability
   5. SvelteKit usage patterns

Are there anticipated breaking changes?

Yes, as we make incremental releases before 1.0.0, the following functionality will likely break:

1. As part of the Carbon v11 adoption, only SCSS styles will be used. Many optimizations were made to the Carbon v11 SCSS styles, so build performance should improve over Carbon’s v10 SCSS.
2. Pre-built CSS files such as all.css will be removed.
3. Some component props may be renamed or removed for reasons related to Carbon v11, accessibility, and consistency.
4. Component class names will change. If you were targeting Carbon class names with custom CSS, then you may have to review your CSS selectors when Carbon v11 styles get adopted.
5. Behaviours and names of dispatched events may change for several components, to follow a unified and consistent convention.
6. Gray 80 theme will be removed.
7. Some components such as Popover will be redone. We will perform an audit and share back details here.
8. No more pre-packaged CJS or ES bundles. Since modern builders used with Svelte such as Vite or Rollup are commonly used, we'll ship source code and users can build them with their apps. This is also necessary in order for custom token theming to work as expected.
9. We may no longer support webpack since the de facto standard for Svelte and SvelteKit development is with Vite. If you have a good reason to be using webpack over Vite, please let us know.

As always, we recommend referencing the changelog and review breaking changes before making upgrades. You can also subscribe to release notifications by toggling the “watch > custom > releases” option above in this repository.

To help with migration and setup, we will provide scripts to make it easier to add carbon-components-svelte to your projects.

What happens after v1.0.0?

After [email protected] releases, we will commit to a semantic-versioned package with a preference to deprecate and continue maintaining legacy features for a few months before eventually dropping them as necessary breaking changes are released. The timing and necessity of these breaking changes may coincide with breaking changes in Carbon, Svelte, SvelteKit, or Node.js.

What is out of scope?

The following artifacts will have separate roadmaps and discussions:

1. carbon-icons-svelte will be reviewed. Along with carbon-pictograms-svelte, we would like to ensure the end-user experience is optimized either by shipping inline SVGs, or statically referenced within <img />.
2. carbon-charts-svelte is being actively maintained by the core Carbon team: https://github.com/carbon-design-system/carbon-charts/tree/8ccbaeddbcc17234d0e1ed64b08a6b241eb23716/packages/svelte

---

Please offer your feedback and suggestions to this discussion!

[eltigerchino]

Thanks for the hard work. Is there a more detailed todo list for people who want to contribute to this effort?

[theetrain]

Thank you as well for your contributions 😄

We're going to prioritize some tickets and add them to this milestone https://github.com/carbon-design-system/carbon-components-svelte/milestone/1 and then will follow up here once there are some ready. I think the first priority is adopting v11 styles, while also addressing some still-open PRs. Once we're past that major change, we can focus on auditing components and addressing the goals in the above roadmap.

[tay1orjones]

This all sounds amazing 👏 Cheers to making such a thorough plan and communicating it so well.

[gregorw]

Great initiative, thanks. When it comes to style imports from within the components I have written down some thoughts in #1496 (comment).

[dummdidumm]

Awesome! One thing I'd like to add (which is a breaking change because it requires a higher minimum Svelte version) is to switch to using svelte/elements for the type definitions. Last time I checked they used the svelte.JSX namespace to say "this component enhances the html typings if X".

[theetrain]

Thanks for letting us know! This improvement will be tracked here: #1616

[malinowskip]

Thank you for the excellent write-up and all the work! The roadmap addresses all the major pain points I have encountered with carbon-components-svelte. I look forward to the upcoming changes.

[Smilefounder]

Amazing! Thanks for the hard work! Looking forward to see v1 release!

Btw, any plan for drag & drop functional for components would be great.
#605

[theetrain]

Hello, are you referring to a file drop container like this, https://carbon-components-svelte.onrender.com/components/FileUploader#drop-container

Or some other form of drag and drop?

[Smilefounder]

Please see #605 for more details. I have added the ticket before.

[theetrain]

Sorry for mis-reading, it looks like the core set of Carbon Components do not support a drag and drop list nor reordering of Table rows, as described in #605. The component you found is for an IBM-specific IOT interface that is outside the scope of Carbon core components, of which carbon-components-svelte is derived.

I'm not sure if you want reordering of lists, or DataTable rows. If you'd like to see a core drag and drop list component, I suggest opening a ticket in https://github.com/carbon-design-system/carbon

[Smilefounder]

Yes, actually it is not support even inside the Carbon System. And not quite sure the system can be missing drag and drop feature.

[jorgebv]

Regarding the line item:

Some components such as Popover will be redone. We will perform an audit and share back details here.

The line includes a disclaimer that there is some research to be done but do you have some early concept of what you want to target or improve? I happen to be using the Popover component so am interested in its future.

[theetrain]

Hi, we haven't gotten to Popover yet, but you can have an early glimpse in the flagship design system here: https://carbondesignsystem.com/components/popover/usage/#live-demo

See how that differs from carbon-components-svelte. At a glance, it's likely different only in aesthetics. The prop interface as seen in the React demo is largely the same: https://react.carbondesignsystem.com/?path=/story/components-popover--playground

[Smilefounder]

Hi @theetrain May I check on the progress of "SvelteKit support"? And also the SSR enhancement is the most important for SEO to spread more website project with Svelte Carbon.

[theetrain]

Hello, carbon-components-svelte already works well with SvelteKit and SSR today. The aspiration for "SvelteKit support" is mainly about documentation, where we wish to include an up-to-date real-world example made with SvelteKit, as well as usage documentation for major components such as UIShell, Theme, and Modal.

I don't believe there is an SEO impact today, but the "progressive enhancement" goal mainly addresses usability since most Carbon components such as ComboBox are not interactive without JS. Initial SSR will still render your content for SEO, but the interaction piece is what's missing. I don't have a timeline, but I intend to provide an update on this Discussion here soon: the immediate priority is adopting v11 styles; and we may phase in v11 styles one component at a time rather than refactor the entire library in one go.

[Smilefounder]

Thanks for your swift response.

[theetrain]

There's a new discussion up detailing our prerelease plan for integrating Carbon v11 CSS: #1872

[theetrain]

We made our first prerelease; see #1872 for more details.