mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 19:01:05 +00:00
feat!: initial pre-release - Carbon v11 styles (#1881)
**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>
This commit is contained in:
Enrico Sacchetti
Eric Liu
parent
b3a4590872
commit
4dabb827ee
186 changed files with 7886 additions and 5628 deletions
|
|
@ -5,9 +5,9 @@
|
|||
|
||||
/**
|
||||
* Specify the toggle size
|
||||
* @type {"default" | "sm"}
|
||||
* @type {"md" | "sm"}
|
||||
*/
|
||||
export let size = "default";
|
||||
export let size = "md";
|
||||
|
||||
/** Set to `true` to toggle the checkbox input */
|
||||
export let toggled = false;
|
||||
|
|
@ -41,6 +41,8 @@
|
|||
const dispatch = createEventDispatcher();
|
||||
|
||||
$: dispatch("toggle", { toggled });
|
||||
$: sideLabel = toggled ? labelB : labelA;
|
||||
$: isSm = size === "sm";
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
|
|
@ -48,6 +50,8 @@
|
|||
<div
|
||||
class:bx--form-item="{true}"
|
||||
style:user-select="none"
|
||||
class:bx--toggle="{true}"
|
||||
class:bx--toggle--disabled="{disabled}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -58,8 +62,7 @@
|
|||
<input
|
||||
role="switch"
|
||||
type="checkbox"
|
||||
class:bx--toggle-input="{true}"
|
||||
class:bx--toggle-input--small="{size === 'sm'}"
|
||||
class:bx--toggle__button="{true}"
|
||||
checked="{toggled}"
|
||||
on:change="{() => {
|
||||
toggled = !toggled;
|
||||
|
|
@ -81,27 +84,40 @@
|
|||
<label
|
||||
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
|
||||
for="{id}"
|
||||
class:bx--toggle-input__label="{true}"
|
||||
class:bx--toggle__label="{true}"
|
||||
>
|
||||
<span class:bx--visually-hidden="{hideLabel}">
|
||||
<span
|
||||
class:bx--toggle__label-text="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
</slot>
|
||||
</span>
|
||||
<span
|
||||
class:bx--toggle__switch="{true}"
|
||||
style:margin-top="{hideLabel ? 0 : undefined}"
|
||||
<div
|
||||
class:bx--toggle__appearance="{true}"
|
||||
class:bx--toggle__appearance--sm="{isSm}"
|
||||
style="{hideLabel && 'margin-top: 0'}"
|
||||
>
|
||||
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
|
||||
<slot name="labelA">
|
||||
{labelA}
|
||||
</slot>
|
||||
</span>
|
||||
<span aria-hidden="true" class:bx--toggle__text--on="{true}">
|
||||
<slot name="labelB">
|
||||
{labelB}
|
||||
</slot>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class:bx--toggle__switch="{true}"
|
||||
class:bx--toggle__switch--checked="{toggled}"
|
||||
>
|
||||
{#if isSm}
|
||||
<svg
|
||||
class:bx--toggle__check="{true}"
|
||||
width="6px"
|
||||
height="5px"
|
||||
viewBox="0 0 6 5"
|
||||
>
|
||||
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
<span class:bx--toggle__text="{true}" aria-hidden="{true}"
|
||||
>{sideLabel}</span
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
export { default as Toggle } from "./Toggle.svelte";
|
||||
export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue