Update Carbon to version 11 #1496
Conversation
gregorw
force-pushed
the
carbon-v11
branch
3 times, most recently
from
f6bd83b
to
7a6b31b
Compare
gregorw
force-pushed
the
carbon-v11
branch
2 times, most recently
from
7ffd4e0
to
18149ac
Compare
|
Hi @gregorw, thank you very much for taking the time to explore v11 style adoption! I have recently posted our v1 roadmap announcement here; #1614 please have a look. For v11 styles and tokens, we're considering to use SCSS directly in carbon-components-svelte, which would require consumers to have vitePreprocess installed so that when they import components such as Let us know your thoughts here or in the announcement above. |
|
Hi @theetrain, thanks for your comment and the roadmap write up. This sounds great! When it comes to using Carbon styles on a component basis instead of a global import I have tinkered with this here: https://github.com/gregorw/svelte-carbon-v11. In general, I like the idea and a first draft looks promising. At the same time, I believe it is required to load some global resets and styles anyways. Also, I’m not entirely sure how configuration works like this since a global configuration would need to be handed down into all individual components, e.g. Also, when including styles within the components, some warnings may come up like this: Since this is a Svelte warning it won’t be shown on a global SCSS import. I wonder what the benefit of a per-component style import really is. It seems to me that handing down global configuration into each component and dealing with a number of svelte warnings could be cumbersome, considering that the global import will probably still be required for resets. But it’s certainly worth trying. I may also be missing something since I have limited experience with Dart Sass. For some stats: Total bundle sizes of full Build duration is ~10s. |
See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop
See [@carbon/layout](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#carbonlayout) migration guide: $layout-01 Removed, use $spacing-05 instead $layout-02 Removed, use $spacing-06 instead $layout-03 Removed, use $spacing-07 instead $layout-04 Removed, use $spacing-09 instead $layout-05 Removed, use $spacing-10 instead $layout-06 Removed, use $spacing-12 instead $layout-07 Removed, use $spacing-13 instead
Upgrading to css-grid should be separate.
In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.
|
@theetrain I would suggest to rebase |
|
All good points. Right now I'm using the I could also move this conversation to #1253 since we have interested folks subscribed there already. |
|
@theetrain I’ll let you be in the lead. Let me know when I can help please. From my point of view the first step on the roadmap “Adopt Carbon v11 styles” is already quite involved. As far as I am concerned I would tackle this first before coming up with new proposals for better developer experience. In short, we should adopt |
This PR introduces v11 carbon styles. As a first step, I would make sure that all existing components still work, before introducing new components or altering existing ones.
Here’s the list of components that need to be verified (patches welcome):
The current state is deployed here: https://carbon-components-svelte-v11.onrender.com
The roadmap to 1.0 #1614 will defines later steps.
Fixes #1253.
—
Other resources and onsiderations
ActionableNotificationInlineNotificationPopoverTooltip: Refactor to use PopoverToggletipUIShellThemecomponent (see also fac78ee)Layercomponentlightvariants