Carbon v11 style integration (component checklist) #1629
Comments
theetrain
added
enhancement
|
@metonym some good progress so far (see notes above). Here's a TypeScript follow up to #1628 (comment) import type { HTMLLabelAttributes } from "svelte/elements";
export let labelAttributes: HTMLLabelAttributes = {};This will produce HTML types for the respective element. This will probably improve DX when adding props to components because you'll see the Carbon props as well as We can add Try this locally:
Once I'm finished evaluating and setting up the new project structure with Let me know if you have any feedback. |
|
@theetrain proof-of-concept LGTM |
Use rollup-plugin-bundle-fonts [1] to download fonts locally on build and not rely on a CDN on production. [1] https://github.com/mgreminger/rollup-plugin-bundle-fonts Fixes #58 while carbon-design-system/carbon-components-svelte#1629 is not finished.
|
We made the first prerelease: v1.0.0-next.0 Updated the ticket body above, as well as the related discussion. For those following, see the contribution guide: #1872 |
theetrain
changed the title
|
I've been playing around today getting used to how to contribute for this. I have been working on |
|
@theetrain if you have the time and energy to setup a few more issues for v11 components that are unlikely to have dependencies on other components, I've got a bit of time and motivation at the moment to hammer some out (so long as you're okay with a pile of PRs sitting in the queue haha). |
|
New Components
|
|
I've deployed this branch as a static site preview here: https://next-carbon-components-svelte.onrender.com/ I'm using it to visually compare between the |
📣 Status: implementing. Contributions are welcome! See #1872 for details and contribution guide.
This is a placeholder ticket to track the integration of Carbon v11 styles into carbon-components-svelte. Adopting Carbon v11 styles is our highest priority, but shipping components with
<style lang="sass">is currently problematic with Vite as discussed in #1561.Prior research
I'm currently evaluating
@sveltejs/packagein thecarbon-v11branch in order to accomodate these aspirational goals:<script lang="ts">to distribute as JS Svelte components and companion*.svelte.d.tsfiles for TypeScript users. See guide on adding types to components(works well!)
(yes, but needs enhancements to read in types from
svelte/elements)<style lang="sass">@use ...</style>and rely on@sveltejs/packageto compile styles into scoped CSS(yes, SCSS builds as scoped CSS)
(yes, compiled SCSS ships with CSS variables and default values)
(it's good because components are precompiled)
If the above goals turn out to be favourable, we'll proceed to implement Carbon v11 styles into every component. Special thanks to @gregorw for early exploration in #1496.
Later, or out of scope:
<Stack />(Stack component request #1384) to provide custom spacing or sectioningChecklist
TextArearesize ifcolsis specified #1661bxtocdsto match flagshipNew components
The text was updated successfully, but these errors were encountered: