mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11: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
parent
f1cafd4959
commit
c0d037dfca
188 changed files with 7815 additions and 5523 deletions
|
|
@ -95,6 +95,7 @@
|
|||
- [`PaginationSkeleton`](#paginationskeleton)
|
||||
- [`PasswordInput`](#passwordinput)
|
||||
- [`Popover`](#popover)
|
||||
- [`PopoverContent`](#popovercontent)
|
||||
- [`ProgressBar`](#progressbar)
|
||||
- [`ProgressIndicator`](#progressindicator)
|
||||
- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
|
||||
|
|
@ -155,7 +156,6 @@
|
|||
- [`TimePickerSelect`](#timepickerselect)
|
||||
- [`ToastNotification`](#toastnotification)
|
||||
- [`Toggle`](#toggle)
|
||||
- [`ToggleSkeleton`](#toggleskeleton)
|
||||
- [`Toolbar`](#toolbar)
|
||||
- [`ToolbarBatchActions`](#toolbarbatchactions)
|
||||
- [`ToolbarContent`](#toolbarcontent)
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
|
||||
| align | No | <code>let</code> | No | <code>"start" | "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the accordion |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Specify the size of the accordion |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion |
|
||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
|
||||
|
|
@ -372,23 +372,23 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | No | <code>let</code> | No | <code>"default" | "field" | "small" | "lg" | "xl"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
||||
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
||||
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
|
||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLAnchorElement | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
|
||||
| kind | No | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg" | "xl" | "2xl"</code> | <code>"lg"</code> | Specify the size of button |
|
||||
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
|
||||
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | No | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
|
||||
| tooltipPosition | No | <code>let</code> | No | <code>"top" | "right" | "bottom" | "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
|
||||
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) |
|
||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
|
||||
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
|
||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| type | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `type` attribute for the button element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -666,7 +666,7 @@ export interface ComboBoxItem {
|
|||
| items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
|
||||
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
||||
| direction | No | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" </code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
|
|
@ -760,10 +760,10 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :------- | :--------------- | :------- | ----------------------------- | ---------------------- | ----------------------------------------- |
|
||||
| selectedIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Set the selected index of the switch item |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the content switcher |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | ----------------------------------------- |
|
||||
| selectedIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Set the selected index of the switch item |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" </code> | <code>undefined</code> | Specify the size of the content switcher |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -1086,7 +1086,7 @@ None.
|
|||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| type | No | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the input type |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the input placeholder text |
|
||||
| pattern | No | <code>let</code> | No | <code>string</code> | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code> | Specify the Regular Expression for the input value |
|
||||
|
|
@ -1167,7 +1167,7 @@ export interface DropdownItem {
|
|||
| itemToString | No | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a dropdown item |
|
||||
| type | No | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
|
||||
| direction | No | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" </code> | <code>undefined</code> | Specify the size of the dropdown field |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
||||
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
||||
|
|
@ -1367,7 +1367,7 @@ None.
|
|||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
|
||||
| status | No | <code>let</code> | No | <code>"uploading" | "edit" | "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
|
||||
| size | No | <code>let</code> | No | <code>"default" | "field" | "small"</code> | <code>"default"</code> | Specify the size of button skeleton |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg"</code> | <code>"lg"</code> | Specify the size of button skeleton |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label used for the status icons |
|
||||
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| errorSubject | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the error subject text |
|
||||
|
|
@ -1995,7 +1995,7 @@ None.
|
|||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the list box |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" </code> | <code>undefined</code> | Set the size of the list box |
|
||||
| type | No | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Set the type of the list box |
|
||||
| open | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to open the list box |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
|
|
@ -2372,7 +2372,7 @@ export interface MultiSelectItem {
|
|||
| items | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItem></code> | <code>[]</code> | Set the multiselect items |
|
||||
| itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text || item.id</code> | Override the display of a multiselect item |
|
||||
| itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }</code> | <code>(item) => {}</code> | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| type | No | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
|
||||
| direction | No | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
|
||||
| selectionFeedback | No | <code>let</code> | No | <code>"top" | "fixed" | "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items |
|
||||
|
|
@ -2493,7 +2493,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
|
|||
| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | No | <code>let</code> | Yes | <code>null | number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
|
||||
| max | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value |
|
||||
| min | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |
|
||||
|
|
@ -2614,7 +2614,7 @@ None.
|
|||
| buttonRef | No | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
|
||||
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `<OverflowMenuVertical />` |
|
||||
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Specify the size of the overflow menu |
|
||||
| direction | No | <code>let</code> | No | <code>"top" | "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
|
||||
|
|
@ -2760,7 +2760,7 @@ None.
|
|||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| type | No | <code>let</code> | Yes | <code>"text" | "password"</code> | <code>"password"</code> | Set to `"text"` to toggle the password visibility |
|
||||
| value | No | <code>let</code> | Yes | <code>number | string</code> | <code>""</code> | Specify the input value |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| hidePasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Hide password"</code> | Specify the hide password label text |
|
||||
| showPasswordLabel | No | <code>let</code> | No | <code>string</code> | <code>"Show password"</code> | Specify the show password label text |
|
||||
|
|
@ -2827,6 +2827,24 @@ None.
|
|||
| :------------ | :--------- | :------------------------------------ |
|
||||
| click:outside | dispatched | <code>{ target: HTMLElement; }</code> |
|
||||
|
||||
## `PopoverContent`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ---- | ----------------- | ----------- |
|
||||
| className | No | <code>let</code> | No | -- | <code>null</code> | -- |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| -- | Yes | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
None.
|
||||
|
||||
## `ProgressBar`
|
||||
|
||||
### Props
|
||||
|
|
@ -3107,7 +3125,7 @@ None.
|
|||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
|
||||
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg"</code> | <code>"md"</code> | Specify the size of the search input |
|
||||
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
|
||||
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
|
|
@ -3152,7 +3170,7 @@ None.
|
|||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "lg"</code> | <code>"md"</code> | Specify the size of the search input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3175,7 +3193,7 @@ None.
|
|||
| :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLSelectElement</code> | <code>null</code> | Obtain a reference to the select HTML element |
|
||||
| selected | No | <code>let</code> | Yes | <code>string | number</code> | <code>undefined</code> | Specify the selected item value |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the select input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Set the size of the select input |
|
||||
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the select element |
|
||||
|
|
@ -3949,13 +3967,11 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- |
|
||||
| selected | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected tab index |
|
||||
| type | No | <code>let</code> | No | <code>"default" | "container"</code> | <code>"default"</code> | Specify the type of tabs |
|
||||
| autoWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to have an auto-width |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon |
|
||||
| triggerHref | No | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the tab trigger href attribute |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------------- |
|
||||
| selected | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected tab index |
|
||||
| contained | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to be contained |
|
||||
| autoWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to have an auto-width |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3968,8 +3984,6 @@ None.
|
|||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :----- |
|
||||
| keypress | forwarded | -- |
|
||||
| click | forwarded | -- |
|
||||
| change | dispatched | -- |
|
||||
|
||||
## `TabsSkeleton`
|
||||
|
|
@ -4057,7 +4071,7 @@ None.
|
|||
| ref | No | <code>let</code> | Yes | <code>null | HTMLTextAreaElement</code> | <code>null</code> | Obtain a reference to the textarea HTML element |
|
||||
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the textarea value |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| cols | No | <code>let</code> | No | <code>number</code> | <code>50</code> | Specify the number of cols |
|
||||
| cols | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the number of cols |
|
||||
| rows | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of rows |
|
||||
| maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the max character count |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
|
|
@ -4122,7 +4136,7 @@ None.
|
|||
| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | No | <code>let</code> | Yes | <code>null | number | string</code> | <code>""</code> | Specify the input value.<br /><br />`value` will be set to `null` if type="number"<br />and the value is empty. |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
|
|
@ -4187,7 +4201,7 @@ None.
|
|||
### Types
|
||||
|
||||
```ts
|
||||
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
||||
export type CarbonTheme = "white" | "g10" | "g90" | "g100";
|
||||
```
|
||||
|
||||
### Props
|
||||
|
|
@ -4269,7 +4283,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the input value |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Specify the size of the input |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "lg"</code> | <code>undefined</code> | Specify the size of the input |
|
||||
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"hh:mm"</code> | Specify the input placeholder text |
|
||||
| pattern | No | <code>let</code> | No | <code>string</code> | <code>"(1[012]|[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element |
|
||||
| maxlength | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the `maxlength` input attribute |
|
||||
|
|
@ -4376,24 +4390,22 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
|
||||
| toggled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the checkbox input |
|
||||
| size | No | <code>let</code> | No | <code>"default" | "sm"</code> | <code>"default"</code> | Specify the toggle size |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable checkbox input |
|
||||
| labelA | No | <code>let</code> | No | <code>string</code> | <code>"Off"</code> | Specify the label for the untoggled state |
|
||||
| labelB | No | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the checkbox input |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ----------------------------- | ------------------------------------------------ | ----------------------------------------------- |
|
||||
| toggled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the checkbox input |
|
||||
| size | No | <code>let</code> | No | <code>"md" | "sm"</code> | <code>"md"</code> | Specify the toggle size |
|
||||
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable checkbox input |
|
||||
| labelA | No | <code>let</code> | No | <code>string</code> | <code>"Off"</code> | Specify the label for the untoggled state |
|
||||
| labelB | No | <code>let</code> | No | <code>string</code> | <code>"On"</code> | Specify the label for the toggled state |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the checkbox input |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :----------------------- |
|
||||
| labelA | No | -- | <code>{labelA}</code> |
|
||||
| labelB | No | -- | <code>{labelB}</code> |
|
||||
| labelText | No | -- | <code>{labelText}</code> |
|
||||
|
||||
### Events
|
||||
|
|
@ -4410,31 +4422,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
|
||||
## `ToggleSkeleton`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- |
|
||||
| size | No | <code>let</code> | No | <code>"default" | "sm"</code> | <code>"default"</code> | Specify the toggle size |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :----------------------- |
|
||||
| labelText | No | -- | <code>{labelText}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
|
||||
## `Toolbar`
|
||||
|
||||
### Props
|
||||
|
|
@ -4701,7 +4688,7 @@ export interface TreeNode {
|
|||
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected |
|
||||
| activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
|
||||
| children | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of children nodes to render |
|
||||
| size | No | <code>let</code> | No | <code>"default" | "compact"</code> | <code>"default"</code> | Specify the TreeView size |
|
||||
| size | No | <code>let</code> | No | <code>"xs" | "sm"</code> | <code>"sm"</code> | Specify the TreeView size |
|
||||
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</code> | Programmatically expand all nodes |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue