mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
c0d037dfca
**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**
Breaking changes
- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.
Components
- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme
CSS
- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists
General
- Codebase uses npm instead of yarn
--- Commit notes
* chore: depend on @carbon/styles instead of carbon-components
See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop
* chore: use v11 styles for docs
* chore: stick to `bx` instead of `cds` class prefix
* chore: migrate layout spacing to v11
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
* chore: migrate type tokens to v11
See https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens
* chore: keep flex-grid instead of css grid for the moment
Upgrading to css-grid should be separate.
* chore: v11 Tabs
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.
* chore: use @ibm/plex fonts
* chore: v11 Button
* dependency: @carbon/styles update
* chore: v11 ComboBox
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 ContentSwitcher
For better compatibility with existing code bases size `xl` is still supported.
* chore: remove legacy v10 css files
Note that further work is needed here in order to make theming work again.
Also documentation needs updating.
* chore: v11 DatePicker
For better compatibility with existing codebases size xl is still supported.
* chore: v11 Dropdown
For better compatibility with existing codebases size xl is still supported.
* chore: v11 ExpandableTile
Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.
* chore: v11 FileUploader
For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.
* chore: v11 Toggle
This removes legacy `ToggleSkeleton`.
* chore: v11 MultiSelect
Size `xl` changed to `lg`.
* chore: v11 NumberInput
For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 OverflowMenu
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 PasswordInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 Search
* chore: v11 Select
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 AspectRatio
The `bx--aspect-ratio--object` class is gone and needs to be replaced manually.
* chore: v11 TextArea
`cols` no longer has a defaults to 50 but remains at 100% width by default.
* chore: v11 TextInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TimePicker
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TreeView
Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.
* chore: remove Truncate since it does not exist in Carbon v11
* chore: v11 UIShell
* chore: v11 Accordion
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* tmp: v11 PopoverContent
* Revert "chore: remove Truncate since it does not exist in Carbon v11"
This reverts commit 5833536199.
* chore: use truncate mixins
* docs: add truncate mixins
* chore: use `cds` class prefix in v11 styles
* build: switch to npm
* chore: set up all component styles, fonts, and themes
- Adapt documentation to new styles
* chore: add individual theme css
* feat: migrate Theme component to v11
- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places
* chore: use bx css prefixes for now
* chore: resolve peerDependencies
- Leaving out latest prettier for now
- Ignoring Sveld warnings for now
* chore: fix type errors and tests
---------
Co-authored-by: Gregor Wassmann <gregor.wassmann@gmail.com>
174 lines
7.4 KiB
Text
174 lines
7.4 KiB
Text
---
|
|
components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import {
|
|
Accordion,
|
|
AccordionItem,
|
|
} from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default
|
|
|
|
<Accordion>
|
|
<AccordionItem title="Natural Language Classifier">
|
|
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Natural Language Understanding">
|
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Language Translator">
|
|
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## Left-aligned chevron
|
|
|
|
<Accordion align="start">
|
|
<AccordionItem title="Natural Language Classifier">
|
|
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Natural Language Understanding">
|
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Language Translator">
|
|
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## Custom title slot
|
|
|
|
<Accordion>
|
|
<AccordionItem>
|
|
<svelte:fragment slot="title">
|
|
<h5>Natural Language Classifier</h5>
|
|
<div>AI / Machine Learning</div>
|
|
</svelte:fragment>
|
|
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem>
|
|
<svelte:fragment slot="title">
|
|
<h5>Natural Language Understanding</h5>
|
|
<div>AI / Machine Learning</div>
|
|
</svelte:fragment>
|
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
|
</AccordionItem>
|
|
<AccordionItem>
|
|
<svelte:fragment slot="title">
|
|
<h5>Language Translator</h5>
|
|
<div>AI / Machine Learning</div>
|
|
</svelte:fragment>
|
|
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## First item open
|
|
|
|
<Accordion>
|
|
<AccordionItem open title="Natural Language Classifier">
|
|
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Natural Language Understanding">
|
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Language Translator">
|
|
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## Programmatic example
|
|
|
|
This example demonstrates how a list of items can be programmatically expanded and collapsed.
|
|
|
|
<FileSource src="/framed/Accordion/ExpandableAccordion" />
|
|
|
|
## Large size
|
|
|
|
<Accordion size="lg">
|
|
<AccordionItem title="Natural Language Classifier">
|
|
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Natural Language Understanding">
|
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Language Translator">
|
|
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## Small size
|
|
|
|
<Accordion size="sm">
|
|
<AccordionItem title="Natural Language Classifier">
|
|
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Natural Language Understanding">
|
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Language Translator">
|
|
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## Disabled
|
|
|
|
<Accordion disabled>
|
|
<AccordionItem title="Natural Language Classifier">
|
|
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Natural Language Understanding">
|
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Language Translator">
|
|
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## Disabled (item)
|
|
|
|
<Accordion>
|
|
<AccordionItem disabled title="Natural Language Classifier">
|
|
<p>Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Natural Language Understanding">
|
|
<p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Language Translator">
|
|
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
## Skeleton
|
|
|
|
<Accordion skeleton />
|
|
|
|
## Skeleton (left-aligned chevron)
|
|
|
|
<Accordion skeleton align="start" />
|
|
|
|
## Skeleton (custom count)
|
|
|
|
<Accordion skeleton count={3} />
|
|
|
|
## Skeleton (closed)
|
|
|
|
<Accordion skeleton open={false} />
|
|
|
|
## Skeleton (extra-large)
|
|
|
|
<Accordion skeleton size="xl" />
|
|
|
|
## Skeleton (small)
|
|
|
|
<Accordion skeleton size="sm" />
|
|
|