mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Alignment with Carbon version 10.32 (#588)
* feat(code-snippet): add copy functionality - docs: add custom feedback copy text example * feat(tile): support disabled state for SelectableTile, RadioTile Closes #539 * build(rollup): add clipboard-copy to globals * feat(copy-button): add copy functionality * feat(content-switcher): deprecate the light prop - docs: remove the light variant example * fix(toolbar-search): remove outer div * feat(search): add searchClass prop * fix(composed-modal): set hasScrollingContent class on ModalBody * docs(data-table): add expandable size examples * feat(tooltip): add TooltipFooter component * fix(time-picker): correctly display invalidText * feat(breadcrumb): support overflow menu * feat(multi-select): export inputRef prop * chore(deps-dev): upgrade carbon-components to v10.32.0 * feat(form): add noMargin prop to FormGroup * docs(tooltip): document TooltipFooter * feat(context-menu): support danger kind for ContextMenuOption * feat(data-table): support rendering empty table header in skeleton * refactor(types): use shorter import path in DataTableSkeleton * feat(data-table): allow sorting to be disabled for a specific header * docs(data-table): update example to desort the Protocol header As an example, it makes more sense because all the values ("http") are the same. * fix(context-menu): set initial y offset of context menu based on window height #577 * fix(context-menu): render submenu based on viewport constraints #577
This commit is contained in:
Eric Liu
GitHub
parent
f13e3b100e
commit
fa9b90cd79
61 changed files with 825 additions and 233 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# Component Index
|
||||
|
||||
> 166 components exported from carbon-components-svelte@0.31.1.
|
||||
> 167 components exported from carbon-components-svelte@0.31.1.
|
||||
|
||||
## Components
|
||||
|
||||
|
|
@ -167,6 +167,7 @@
|
|||
- [`ToolbarSearch`](#toolbarsearch)
|
||||
- [`Tooltip`](#tooltip)
|
||||
- [`TooltipDefinition`](#tooltipdefinition)
|
||||
- [`TooltipFooter`](#tooltipfooter)
|
||||
- [`TooltipIcon`](#tooltipicon)
|
||||
- [`Truncate`](#truncate)
|
||||
- [`UnorderedList`](#unorderedlist)
|
||||
|
|
@ -500,25 +501,25 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
|
||||
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
|
||||
| type | <code>let</code> | No | <code>"single" | "inline" | "multi"</code> | <code>"single"</code> | Set the type of code snippet |
|
||||
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) |
|
||||
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
|
||||
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
|
||||
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
|
||||
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
|
||||
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
|
||||
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
|
||||
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
|
||||
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
|
||||
| type | <code>let</code> | No | <code>"single" | "inline" | "multi"</code> | <code>"single"</code> | Set the type of code snippet |
|
||||
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)<br />You must use the `code` prop to copy the code |
|
||||
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
|
||||
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
|
||||
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
|
||||
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
|
||||
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
|
||||
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
|
||||
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -528,13 +529,14 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :----------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| animationend | forwarded | -- |
|
||||
| Event name | Type | Detail |
|
||||
| :----------- | :--------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| animationend | forwarded | -- |
|
||||
| copy | dispatched | -- |
|
||||
|
||||
## `CodeSnippetSkeleton`
|
||||
|
||||
|
|
@ -798,6 +800,7 @@ None.
|
|||
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
|
||||
| icon | <code>let</code> | Yes | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text |
|
||||
| indented | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
|
||||
| kind | <code>let</code> | No | <code>"default" | "danger"</code> | <code>"default"</code> | Specify the kind of option |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text<br />Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) |
|
||||
| shortcutText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text<br />Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) |
|
||||
|
|
@ -869,6 +872,7 @@ None.
|
|||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
|
||||
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text to copy |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -876,10 +880,11 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :----------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| animationend | forwarded | -- |
|
||||
| Event name | Type | Detail |
|
||||
| :----------- | :--------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| animationend | forwarded | -- |
|
||||
| copy | dispatched | -- |
|
||||
|
||||
## `DataTable`
|
||||
|
||||
|
|
@ -894,7 +899,7 @@ export interface DataTableEmptyHeader {
|
|||
key: DataTableKey;
|
||||
empty: boolean;
|
||||
display?: (item: Value) => DataTableValue;
|
||||
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
|
||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
|
||||
columnMenu?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -902,7 +907,7 @@ export interface DataTableNonEmptyHeader {
|
|||
key: DataTableKey;
|
||||
value: DataTableValue;
|
||||
display?: (item: Value) => DataTableValue;
|
||||
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
|
||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
|
||||
columnMenu?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -952,16 +957,16 @@ export interface DataTableCell {
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------- |
|
||||
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> |
|
||||
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
|
||||
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }</code> |
|
||||
| click:row | dispatched | <code>DataTableRow</code> |
|
||||
| mouseenter:row | dispatched | <code>DataTableRow</code> |
|
||||
| mouseleave:row | dispatched | <code>DataTableRow</code> |
|
||||
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> |
|
||||
| click:cell | dispatched | <code>DataTableCell</code> |
|
||||
| Event name | Type | Detail |
|
||||
| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
|
||||
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> |
|
||||
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
|
||||
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }</code> |
|
||||
| click:row | dispatched | <code>DataTableRow</code> |
|
||||
| mouseenter:row | dispatched | <code>DataTableRow</code> |
|
||||
| mouseleave:row | dispatched | <code>DataTableRow</code> |
|
||||
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> |
|
||||
| click:cell | dispatched | <code>DataTableCell</code> |
|
||||
|
||||
## `DataTableSkeleton`
|
||||
|
||||
|
|
@ -1402,12 +1407,13 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| message | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement |
|
||||
| messageText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the message text |
|
||||
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| message | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement |
|
||||
| noMargin | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
|
||||
| messageText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the message text |
|
||||
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2323,6 +2329,7 @@ export interface MultiSelectItem {
|
|||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|
||||
| inputRef | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
|
||||
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
|
||||
|
|
@ -2576,13 +2583,13 @@ None.
|
|||
| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
|
||||
| menuRef | <code>let</code> | Yes | <code>null | HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
|
||||
| buttonRef | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
|
||||
| icon | <code>let</code> | Yes | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Specify the size of the overflow menu |
|
||||
| direction | <code>let</code> | No | <code>"top" | "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
|
||||
| menuOptionsClass | <code>let</code> | No | <code>string</code> | -- | Specify the menu options class |
|
||||
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
|
||||
| iconClass | <code>let</code> | No | <code>string</code> | -- | Specify the icon class |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
|
||||
|
|
@ -2945,6 +2952,7 @@ None.
|
|||
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
|
||||
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
|
||||
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Tile checkmark"</code> | Specify the ARIA label for the radio tile checkmark icon |
|
||||
|
|
@ -3002,6 +3010,7 @@ None.
|
|||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input |
|
||||
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
|
||||
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
|
||||
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
|
||||
|
|
@ -3158,6 +3167,7 @@ None.
|
|||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to select the tile |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
|
||||
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
|
||||
| value | <code>let</code> | No | <code>string</code> | <code>"value"</code> | Specify the value of the selectable tile |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
|
|
@ -3762,11 +3772,12 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------ |
|
||||
| scope | <code>let</code> | No | <code>string</code> | <code>"col"</code> | Specify the `scope` attribute |
|
||||
| translateWithId | <code>let</code> | No | <code>() => string</code> | <code>() => ""</code> | Override the default id translations |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------------------------ |
|
||||
| disableSorting | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable sorting on this specific cell |
|
||||
| scope | <code>let</code> | No | <code>string</code> | <code>"col"</code> | Specify the `scope` attribute |
|
||||
| translateWithId | <code>let</code> | No | <code>() => string</code> | <code>() => ""</code> | Override the default id translations |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -4464,6 +4475,24 @@ None.
|
|||
| mouseleave | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
|
||||
## `TooltipFooter`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------------- | :--------------- | :------- | :------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- |
|
||||
| selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"a[href], button:not([disabled])"</code> | Specify a selector to be focused inside the footer when opening the tooltip |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| -- | Yes | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
None.
|
||||
|
||||
## `TooltipIcon`
|
||||
|
||||
### Props
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue