mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat!: initial pre-release - Carbon v11 styles (#1881)

Browse source 
**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 2024-01-12 11:33:59 -05:00 • committed by Eric Liu
commit 4dabb827ee
186 changed files with 7886 additions and 5628 deletions
Download patch file Download diff file Expand all files Collapse all files

2
types/Accordion/Accordion.svelte.d.ts vendored
View file

@ -12,7 +12,7 @@ export interface AccordionProps extends AccordionSkeletonProps {
* Specify the size of the accordion
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Set to `true` to disable the accordion

8
types/Button/Button.svelte.d.ts vendored
View file

@ -18,14 +18,14 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
| "tertiary"
| "ghost"
| "danger"
| "danger-tertiary"
| "danger-ghost";
| "danger--tertiary"
| "danger--ghost";
/**
* Specify the size of button
* @default "default"
* @default "lg"
*/
size?: "default" | "field" | "small" | "lg" | "xl";
size?: "sm" | "md" | "lg" | "xl" | "2xl";
/**
* Set to `true` to use Carbon's expressive typesetting

2
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -46,7 +46,7 @@ export interface ComboBoxProps extends RestProps {
* Set the size of the combobox
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Set to `true` to disable the combobox

2
types/ContentSwitcher/ContentSwitcher.svelte.d.ts vendored
View file

@ -14,7 +14,7 @@ export interface ContentSwitcherProps extends RestProps {
* Specify the size of the content switcher
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
[key: `data-${string}`]: any;
}

2
types/DatePicker/DatePickerInput.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface DatePickerInputProps extends RestProps {
* Set the size of the input
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Specify the input type

2
types/Dropdown/Dropdown.svelte.d.ts vendored
View file

@ -48,7 +48,7 @@ export interface DropdownProps extends RestProps {
* Specify the size of the dropdown field
* @default undefined
*/
size?: "sm" | "lg" | "xl";
size?: "sm" | "lg";
/**
* Set to `true` to open the dropdown

4
types/FileUploader/FileUploaderItem.svelte.d.ts vendored
View file

@ -12,9 +12,9 @@ export interface FileUploaderItemProps extends RestProps {
/**
* Specify the size of button skeleton
* @default "default"
* @default "lg"
*/
size?: "default" | "field" | "small";
size?: "sm" | "md" | "lg";
/**
* Specify the ARIA label used for the status icons

2
types/ListBox/ListBox.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface ListBoxProps extends RestProps {
* Set the size of the list box
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Set the type of the list box

2
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -53,7 +53,7 @@ export interface MultiSelectProps extends RestProps {
* Set the size of the combobox
* @default undefined
*/
size?: "sm" | "lg" | "xl";
size?: "sm" | "lg";
/**
* Specify the type of multiselect

2
types/NumberInput/NumberInput.svelte.d.ts vendored
View file

@ -10,7 +10,7 @@ export interface NumberInputProps extends RestProps {
* Set the size of the input
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Specify the input value.

2
types/OverflowMenu/OverflowMenu.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface OverflowMenuProps extends RestProps {
* Specify the size of the overflow menu
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Specify the direction of the overflow menu relative to the button

19
types/Popover/PopoverContent.svelte.d.ts vendored Normal file
View file

@ -0,0 +1,19 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["span"];
export interface PopoverContentProps extends RestProps {
/**
* @default null
*/
className?: undefined;
[key: `data-${string}`]: any;
}
export default class PopoverContent extends SvelteComponentTyped<
PopoverContentProps,
Record<string, any>,
{ default: {} }
> {}

4
types/Search/Search.svelte.d.ts vendored
View file

@ -12,9 +12,9 @@ export interface SearchProps extends RestProps {
/**
* Specify the size of the search input
* @default "xl"
* @default "md"
*/
size?: "sm" | "lg" | "xl";
size?: "sm" | "md" | "lg";
/**
* Specify the class name passed to the outer div element

4
types/Search/SearchSkeleton.svelte.d.ts vendored
View file

@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["div"];
export interface SearchSkeletonProps extends RestProps {
/**
* Specify the size of the search input
* @default "xl"
* @default "md"
*/
size?: "sm" | "lg" | "xl";
size?: "sm" | "md" | "lg";
[key: `data-${string}`]: any;
}

2
types/Select/Select.svelte.d.ts vendored
View file

@ -14,7 +14,7 @@ export interface SelectProps extends RestProps {
* Set the size of the select input
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Set to `true` to use the inline variant

2
types/Tabs/Tab.svelte.d.ts vendored
View file

@ -1,7 +1,7 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["li"];
type RestProps = SvelteHTMLElements["a"];
export interface TabProps extends RestProps {
/**

24
types/Tabs/Tabs.svelte.d.ts vendored
View file

@ -11,10 +11,10 @@ export interface TabsProps extends RestProps {
selected?: number;
/**
* Specify the type of tabs
* @default "default"
* Set to `true` for tabs to be contained
* @default false
*/
type?: "default" | "container";
contained?: boolean;
/**
* Set to `true` for tabs to have an auto-width
@ -22,27 +22,11 @@ export interface TabsProps extends RestProps {
*/
autoWidth?: boolean;
/**
* Specify the ARIA label for the chevron icon
* @default "Show menu options"
*/
iconDescription?: string;
/**
* Specify the tab trigger href attribute
* @default "#"
*/
triggerHref?: string;
[key: `data-${string}`]: any;
}
export default class Tabs extends SvelteComponentTyped<
TabsProps,
{
change: CustomEvent<number>;
keypress: WindowEventMap["keypress"];
click: WindowEventMap["click"];
},
{ change: CustomEvent<any> },
{ default: {}; content: {} }
> {}

2
types/TextArea/TextArea.svelte.d.ts vendored
View file

@ -18,7 +18,7 @@ export interface TextAreaProps extends RestProps {
/**
* Specify the number of cols
* @default 50
* @default undefined
*/
cols?: number;

2
types/TextInput/PasswordInput.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface PasswordInputProps extends RestProps {
* Set the size of the input
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Specify the input value

2
types/TextInput/TextInput.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface TextInputProps extends RestProps {
* Set the size of the input
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Specify the input value.

2
types/Theme/Theme.svelte.d.ts vendored
View file

@ -1,6 +1,6 @@
import type { SvelteComponentTyped } from "svelte";
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
export type CarbonTheme = "white" | "g10" | "g90" | "g100";
export interface ThemeProps {
/**

2
types/TimePicker/TimePicker.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface TimePickerProps extends RestProps {
* Specify the size of the input
* @default undefined
*/
size?: "sm" | "xl";
size?: "sm" | "lg";
/**
* Specify the input value

6
types/Toggle/Toggle.svelte.d.ts vendored
View file

@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["div"];
export interface ToggleProps extends RestProps {
/**
* Specify the toggle size
* @default "default"
* @default "md"
*/
size?: "default" | "sm";
size?: "md" | "sm";
/**
* Set to `true` to toggle the checkbox input
@ -74,5 +74,5 @@ export default class Toggle extends SvelteComponentTyped<
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
},
{ labelA: {}; labelB: {}; labelText: {} }
{ labelText: {} }
> {}

37
types/Toggle/ToggleSkeleton.svelte.d.ts vendored
View file

@ -1,37 +0,0 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["div"];
export interface ToggleSkeletonProps extends RestProps {
/**
* Specify the toggle size
* @default "default"
*/
size?: "default" | "sm";
/**
* Specify the label text
* @default ""
*/
labelText?: string;
/**
* Set an id for the input element
* @default "ccs-" + Math.random().toString(36)
*/
id?: string;
[key: `data-${string}`]: any;
}
export default class ToggleSkeleton extends SvelteComponentTyped<
ToggleSkeletonProps,
{
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
},
{ labelText: {} }
> {}

4
types/TreeView/TreeView.svelte.d.ts vendored
View file

@ -41,9 +41,9 @@ export interface TreeViewProps extends RestProps {
/**
* Specify the TreeView size
* @default "default"
* @default "sm"
*/
size?: "default" | "compact";
size?: "xs" | "sm";
/**
* Specify the label text

2
types/index.d.ts vendored
View file

@ -91,6 +91,7 @@ export { default as Pagination } from "./Pagination/Pagination.svelte";
export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton.svelte";
export { default as PaginationNav } from "./PaginationNav/PaginationNav.svelte";
export { default as Popover } from "./Popover/Popover.svelte";
export { default as PopoverContent } from "./Popover/PopoverContent.svelte";
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator.svelte";
export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton.svelte";
@ -137,7 +138,6 @@ export { default as TileGroup } from "./Tile/TileGroup.svelte";
export { default as TimePicker } from "./TimePicker/TimePicker.svelte";
export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect.svelte";
export { default as Toggle } from "./Toggle/Toggle.svelte";
export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton.svelte";
export { default as Tooltip } from "./Tooltip/Tooltip.svelte";
export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte";
export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";