mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 03:01:25 +00:00
Alignment with Carbon version 10.30 (#559)
* feat(toolbar): forward "clear" event in ToolbarSearch
* docs(search): add on:clear example
* fix(ui-shell): set aria-hidden in SideNav
Ref c2b4f1f00
* chore(deps-dev): upgrade carbon-components to v10.30.0
* fix(text-input): use bx--text-input class for TextInputSkeleton
* fix(radio-button): only render span if labelText is truthy
* docs(password-input): add custom tooltip example
* feat(button): add isSelected prop for icon-only, ghost buttons
* feat(radio-button): add legendText prop to RadioButtonGroup
* docs(tag): add filterable (disabled) variant
* feat(tag): add interactive prop
* chore(number-input): deprecate the mobile variant
Mobile variant styles will no longer work.
* feat(button): set aria-pressed attribute if icon-only, ghost button is selected
* fix(multi-select): type dispatched select event
* fix(button): remove redundant "button" role
* feat(icon): deprecate Icon, IconSkeleton
* feat(ui-shell): make SideNavMenuItem text slottable
* fix(list-box): update styles for ListBoxSelection
* fix(list-box): temporarily apply override styles to ListBoxMenuIcon for chevron
* fix(tag): set disabled prop on interactive tag
* docs(button): extract selected, icon-only button example
* feat(tooltip): elevate z-index of tooltip when open
* feat: forward restProps to input element
* fix(types): fix TimePicker test to pass svelte-check
* feat: add ImageLoader component
* test: add ImageLoader
* feat: add LocalStorage component
* test(local-storage): fix invalid file
* chore(docs): use green tag type
This commit is contained in:
Eric Liu
GitHub
parent
08249d6764
commit
1b234ca2e3
68 changed files with 1079 additions and 217 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# Component Index
|
||||
|
||||
> 158 components exported from carbon-components-svelte@0.29.2.
|
||||
> 160 components exported from carbon-components-svelte@0.29.2.
|
||||
|
||||
## Components
|
||||
|
||||
|
|
@ -61,6 +61,7 @@
|
|||
- [`HeaderUtilities`](#headerutilities)
|
||||
- [`Icon`](#icon)
|
||||
- [`IconSkeleton`](#iconskeleton)
|
||||
- [`ImageLoader`](#imageloader)
|
||||
- [`InlineLoading`](#inlineloading)
|
||||
- [`InlineNotification`](#inlinenotification)
|
||||
- [`Link`](#link)
|
||||
|
|
@ -72,6 +73,7 @@
|
|||
- [`ListBoxSelection`](#listboxselection)
|
||||
- [`ListItem`](#listitem)
|
||||
- [`Loading`](#loading)
|
||||
- [`LocalStorage`](#localstorage)
|
||||
- [`Modal`](#modal)
|
||||
- [`ModalBody`](#modalbody)
|
||||
- [`ModalFooter`](#modalfooter)
|
||||
|
|
@ -342,6 +344,7 @@ None.
|
|||
| hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
|
||||
| kind | <code>let</code> | No | <code>"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
|
||||
| size | <code>let</code> | No | <code>"default" | "field" | "small"</code> | <code>"default"</code> | Specify the size of button |
|
||||
| isSelected | <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 | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
|
||||
| tooltipAlignment | <code>let</code> | No | <code>"start" | "center" | "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true` |
|
||||
|
|
@ -1723,6 +1726,35 @@ None.
|
|||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
|
||||
## `ImageLoader`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :----------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
|
||||
| error | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image |
|
||||
| loaded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded |
|
||||
| loading | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false |
|
||||
| src | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source |
|
||||
| alt | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text |
|
||||
| ratio | <code>let</code> | No | <code>"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"</code> | -- | Specify the aspect ratio for the image wrapper |
|
||||
| fadeIn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
|
||||
| loadImage | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| error | No | -- | -- |
|
||||
| loading | No | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :--------------- |
|
||||
| load | dispatched | <code>any</code> |
|
||||
| error | dispatched | <code>any</code> |
|
||||
|
||||
## `InlineLoading`
|
||||
|
||||
### Props
|
||||
|
|
@ -1957,7 +1989,7 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
|
||||
| selectionCount | <code>let</code> | No | <code>any</code> | -- | Specify the number of selected items |
|
||||
| selectionCount | <code>let</code> | No | <code>number</code> | -- | Specify the number of selected items |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box selection |
|
||||
| translationIds | <code>const</code> | No | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | Default translation ids |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: ListBoxSelectionTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
|
||||
|
|
@ -2013,6 +2045,26 @@ None.
|
|||
|
||||
None.
|
||||
|
||||
## `LocalStorage`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :------------------ | -------------------------------- | ----------------------------- |
|
||||
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Provide a value to persist |
|
||||
| key | <code>let</code> | No | <code>string</code> | <code>"local-storage-key"</code> | Specify the local storage key |
|
||||
|
||||
### Slots
|
||||
|
||||
None.
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :------------------------------------------- |
|
||||
| save | dispatched | <code>any</code> |
|
||||
| update | dispatched | <code>{ prevValue: any; value: any; }</code> |
|
||||
|
||||
## `Modal`
|
||||
|
||||
### Props
|
||||
|
|
@ -2183,13 +2235,13 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :----- |
|
||||
| clear | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| select | dispatched | -- |
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :-------------------------------------------------------------------------------------------------- |
|
||||
| select | dispatched | <code>{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
|
||||
| clear | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
|
||||
## `NotificationActionButton`
|
||||
|
||||
|
|
@ -2694,15 +2746,17 @@ None.
|
|||
| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- |
|
||||
| selected | <code>let</code> | Yes | <code>string</code> | -- | Set the selected radio button value |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
|
||||
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
|
||||
| labelPosition | <code>let</code> | No | <code>"right" | "left"</code> | <code>"right"</code> | Specify the label position |
|
||||
| orientation | <code>let</code> | No | <code>"horizontal" | "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
|
||||
| id | <code>let</code> | No | <code>string</code> | -- | Set an id for the container div element |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| -- | Yes | -- | -- |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :--------- | :------ | :---- | :------------------------ |
|
||||
| -- | Yes | -- | -- |
|
||||
| legendText | No | -- | <code>{legendText}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
@ -3083,7 +3137,9 @@ None.
|
|||
|
||||
### Slots
|
||||
|
||||
None.
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------------------ |
|
||||
| -- | Yes | -- | <code>{text}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
@ -3647,16 +3703,17 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------ |
|
||||
| type | <code>let</code> | No | <code>"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"</code> | -- | Specify the type of tag |
|
||||
| size | <code>let</code> | No | <code>"sm" | "default"</code> | <code>"default"</code> | -- |
|
||||
| filter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use filterable variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable a filterable tag |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
|
||||
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
|
||||
| type | <code>let</code> | No | <code>"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"</code> | -- | Specify the type of tag |
|
||||
| size | <code>let</code> | No | <code>"sm" | "default"</code> | <code>"default"</code> | -- |
|
||||
| filter | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use filterable variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable a filterable tag |
|
||||
| interactive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
|
||||
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4183,6 +4240,7 @@ None.
|
|||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| clear | forwarded | -- |
|
||||
| change | forwarded | -- |
|
||||
| input | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue