mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Align v10.34 (#621)

Browse source 
* feat(theme): add g80 theme

* docs(data-table): use link with icon variant

* feat(search): support expandable variant

* fix(file-uploaded): use semantic p element instead of strong

* feat(side-nav): dispatch open, close, click:overlay events

* refactor(ui-shell): remove usage of deprecated Icon component

* feat(ui-shell): allow custom hamburger menu icons

* feat(button): support xl size

* fix(code-snippet): wrap code element with pre

* refactor(button): use button specific tooltip class for icon-only variant

* feat(password-input): support warning, inline props

* feat(data-table): support medium size
This commit is contained in:
Eric Liu 2021-06-25 03:45:30 -07:00 • committed by GitHub
commit f9909827d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 572 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

111
COMPONENT_INDEX.md
View file

@ -350,7 +350,7 @@ None.
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| 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" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "xl"</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 |
@ -930,23 +930,23 @@ export interface DataTableCell {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
| selectedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
| expandedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
| expandable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
| rows | <code>let</code> | Yes | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| headers | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the data table |
| title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
| description | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| batchExpansion | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
| radio | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
| selectedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
| expandedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
| expandable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
| rows | <code>let</code> | Yes | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| headers | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | -- | Set the size of the data table |
| title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
| description | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| batchExpansion | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
| radio | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
### Slots
@ -1505,16 +1505,18 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) |
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
| platformName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;) |
| persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| iconMenu | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20` |
| iconClose | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20` |
### Slots
@ -2745,6 +2747,9 @@ None.
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the text for the invalid state |
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use inline version |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
@ -3011,12 +3016,14 @@ None.
| :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "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 |
| expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the `type` attribute of the search input |
| placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
@ -3031,18 +3038,20 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
| clear | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :--------------- |
| expand | dispatched | <code>any</code> |
| collapse | dispatched | <code>any</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
| clear | dispatched | -- |
## `SearchSkeleton`
@ -3212,7 +3221,11 @@ None.
### Events
None.
| Event name | Type | Detail |
| :------------ | :--------- | :--------------- |
| open | dispatched | <code>any</code> |
| close | dispatched | <code>any</code> |
| click:overlay | dispatched | <code>any</code> |
## `SideNavDivider`
@ -3674,14 +3687,14 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | --------------------------------------- |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| shouldShowBorder | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the bordered variant |
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | --------------------------------------- |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | -- | Set the size of the table |
| zebra | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| shouldShowBorder | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the bordered variant |
| sortable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
### Slots

4
README.md
View file

@ -89,6 +89,7 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
- **white.css**: Default Carbon theme (light)
- **g10.css**: Gray 10 theme (light)
- **g80.css**: Gray 80 theme (dark)
- **g90.css**: Gray 90 theme (dark)
- **g100.css**: Gray 100 theme (dark)
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
@ -99,6 +100,7 @@ The compiled CSS is generated from the following `.scss` files:
- [css/white.scss](css/white.scss)
- [css/g10.scss](css/g10.scss)
- [css/g80.scss](css/g80.scss)
- [css/g90.scss](css/g90.scss)
- [css/g100.scss](css/g100.scss)
- [css/all.scss](css/all.scss)
@ -157,7 +159,7 @@ Using JavaScript:
```svelte
<script>
/** @type {"white" | "g10" | "g90" | "g100"} */
/** @type {"white" | "g10" | "g80" | "g90" | "g100"} */
let theme = "white";
$: document.documentElement.setAttribute("theme", theme);

32
css/g80.scss Normal file
View file

@ -0,0 +1,32 @@
$feature-flags: (
ui-shell: true,
grid-columns-16: true
);
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
// Use the "g80" (Gray 80) Carbon theme
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
@import "carbon-components/scss/globals/scss/component-tokens";
@import "carbon-components/src/components/tag/tag";
@import "carbon-components/src/components/notification/inline-notification";
@import "carbon-components/src/components/notification/toast-notification";
$carbon--theme: $carbon--theme--g80;
@include carbon--theme();
@import "carbon-components/scss/globals/scss/_css--reset";
@import "carbon-components/scss/globals/scss/_css--font-face";
@import "carbon-components/scss/globals/scss/_css--helpers";
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";

2
docs/package.json
View file

@ -11,7 +11,7 @@
"devDependencies": {
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.2.3",
"carbon-components": "10.33.0",
"carbon-components": "10.34.0",
"carbon-components-svelte": "../",
"mdsvex": "^0.8.8",
"npm-run-all": "^4.1.5",

9
docs/src/App.svelte
View file

@ -48,6 +48,15 @@
}
}
// Set the <html> theme attribute to "g80" to use the Gray 90 theme
// <html theme="g80">
:root[theme="g80"] {
@include carbon--theme($carbon--theme--g80, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
// <html theme="g90">
:root[theme="g90"] {

82
docs/src/COMPONENT_API.json
View file

@ -362,7 +362,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button",
"type": "\"default\" | \"field\" | \"small\"",
"type": "\"default\" | \"field\" | \"small\" | \"xl\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,
@ -1931,7 +1931,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"tall\"",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -3787,6 +3787,24 @@
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "iconMenu",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "iconClose",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [
@ -7040,6 +7058,36 @@
"constant": false,
"reactive": false
},
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "inline",
"kind": "let",
"description": "Set to `true` to use inline version",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
@ -7801,6 +7849,26 @@
"constant": false,
"reactive": false
},
{
"name": "expandable",
"kind": "let",
"description": "Set to `true` to enable the expandable variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "expanded",
"kind": "let",
"description": "Set to `true to expand the search input",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "value",
"kind": "let",
@ -7894,6 +7962,8 @@
],
"slots": [],
"events": [
{ "type": "dispatched", "name": "expand", "detail": "any" },
{ "type": "dispatched", "name": "collapse", "detail": "any" },
{ "type": "forwarded", "name": "click", "element": "SearchSkeleton" },
{
"type": "forwarded",
@ -8379,7 +8449,11 @@
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"events": [
{ "type": "dispatched", "name": "open", "detail": "any" },
{ "type": "dispatched", "name": "close", "detail": "any" },
{ "type": "dispatched", "name": "click:overlay", "detail": "any" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "nav" }
},
@ -9318,7 +9392,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the table",
"type": "\"compact\" | \"short\" | \"tall\"",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false

2
docs/src/components/Theme.svelte
View file

@ -1,7 +1,7 @@
<script>
export let persist = false;
export let persistKey = "carbon-theme";
export const themes = ["white", "g10", "g90", "g100"];
export const themes = ["white", "g10", "g80", "g90", "g100"];
import { onMount, afterUpdate } from "svelte";
import { theme } from "../store";

1
docs/src/layouts/ComponentLayout.svelte
View file

@ -62,6 +62,7 @@
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>

8
docs/src/pages/components/Button.svx
View file

@ -94,6 +94,14 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="small" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button>
### Extra-large button
<Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</Button>
<Button size="xl" kind="danger">Danger</Button>
### Disabled button
<Button disabled>Disabled button</Button>

57
docs/src/pages/components/DataTable.svx
View file

@ -132,7 +132,7 @@ The slot name for the table header cells is `"cell-header"`.
</span>
<span slot="cell" let:row let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'}
<Link inline href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value} <Launch16 /></Link>
<Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
{:else}
{cell.value}
{/if}
@ -438,6 +438,61 @@ The slot name for the table header cells is `"cell-header"`.
]}"
/>
### Medium rows
<DataTable size="medium"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### Short rows
<DataTable size="short"

8
docs/src/pages/components/PasswordInput.svx
View file

@ -27,6 +27,10 @@ Set prop `type` to `"text"` to toggle password visibility.
<PasswordInput light labelText="Password" placeholder="Enter password..." />
### Inline
<PasswordInput inline labelText="Password" placeholder="Enter password..." />
### Extra-large size
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
@ -39,6 +43,10 @@ Set prop `type` to `"text"` to toggle password visibility.
<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
### Warning state
<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
### Disabled state
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />

6
docs/src/pages/components/Search.svx
View file

@ -23,6 +23,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
### Expandable variant
<Search expandable on:expand on:collapse />
### Light variant
<Search light />
@ -35,7 +39,7 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search size="sm" />
### Disabled
### Disabled state
<Search disabled />

13
docs/src/pages/components/Select.svx
View file

@ -12,15 +12,17 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Helper text
<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -30,6 +32,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select hideLabel labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -43,6 +46,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g10" text="Gray 10" />
</SelectItemGroup>
<SelectItemGroup label="Dark theme">
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</SelectItemGroup>
@ -53,6 +57,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select light labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -62,6 +67,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -71,6 +77,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select size="xl" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -80,6 +87,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select size="sm" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -89,6 +97,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -98,6 +107,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -107,6 +117,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>

10
docs/yarn.lock
View file

@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../:
version "0.32.2"
version "0.33.0"
dependencies:
carbon-icons-svelte "^10.27.0"
clipboard-copy "3.2.0"
flatpickr "4.6.9"
carbon-components@10.33.0:
version "10.33.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5"
integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw==
carbon-components@10.34.0:
version "10.34.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8"
integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"

2
package.json
View file

@ -32,7 +32,7 @@
"@rollup/plugin-node-resolve": "^11.1.1",
"@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^10.2.4",
"carbon-components": "10.33.0",
"carbon-components": "10.34.0",
"gh-pages": "^3.1.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",

7
src/Button/Button.svelte
View file

@ -13,7 +13,7 @@
/**
* Specify the size of button
* @type {"default" | "field" | "small"}
* @type {"default" | "field" | "small" | "xl"}
*/
export let size = "default";
@ -100,12 +100,15 @@
"bx--btn",
size === "field" && "bx--btn--field",
size === "small" && "bx--btn--sm",
size === "xl" && "bx--btn--xl",
kind && `bx--btn--${kind}`,
disabled && "bx--btn--disabled",
hasIconOnly && "bx--btn--icon-only",
hasIconOnly && "bx--tooltip__trigger",
hasIconOnly && "bx--tooltip--a11y",
hasIconOnly && tooltipPosition && `bx--tooltip--${tooltipPosition}`,
hasIconOnly &&
tooltipPosition &&
`bx--btn--icon-only--${tooltipPosition}`,
hasIconOnly &&
tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`,

9
src/CodeSnippet/CodeSnippet.svelte
View file

@ -179,11 +179,10 @@
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
class:bx--snippet-container="{true}"
>
<code>
<pre bind:this="{ref}">
<slot>{code}</slot>
</pre>
</code>
<pre
bind:this="{ref}">
<code><slot>{code}</slot></code>
</pre>
</div>
{#if !hideCopyButton}
<CopyButton

2
src/DataTable/DataTable.svelte
View file

@ -37,7 +37,7 @@
/**
* Set the size of the data table
* @type {"compact" | "short" | "tall"}
* @type {"compact" | "short" | "medium" | "tall"}
*/
export let size = undefined;

4
src/DataTable/Table.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Set the size of the table
* @type {"compact" | "short" | "tall"}
* @type {"compact" | "short" | "medium" | "tall"}
*/
export let size = undefined;
@ -28,6 +28,7 @@
class:bx--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}"
class:bx--data-table--md="{size === 'medium'}"
class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"
@ -43,6 +44,7 @@
class:bx--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}"
class:bx--data-table--md="{size === 'medium'}"
class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"

2
src/FileUploader/FileUploader.svelte
View file

@ -84,7 +84,7 @@
on:mouseenter
on:mouseleave
>
<strong class:bx--file--label="{true}">{labelTitle}</strong>
<p class:bx--file--label="{true}">{labelTitle}</p>
<p class:bx--label-description="{true}">{labelDescription}</p>
<FileUploaderButton
disableLabelChanges

65
src/Search/Search.svelte
View file

@ -1,8 +1,12 @@
<script>
/**
* @event {any} expand
* @event {any} collapse
*/
/**
* @deprecated this prop will be removed in the next major release
* Use size="sm" instead
* @type {boolean} [small=false]
*/
export let small = false;
@ -15,40 +19,28 @@
/** Specify the class name passed to the outer div element */
export let searchClass = "";
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
*/
/** Set to `true` to display the skeleton state */
export let skeleton = false;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
/** Set to `true` to enable the light variant */
export let light = false;
/**
* Set to `true` to disable the search input
* @type {boolean} [disabled=false]
*/
/** Set to `true` to disable the search input */
export let disabled = false;
/**
* Specify the value of the search input
* @type {string} [value=""]
*/
/** Set to `true` to enable the expandable variant */
export let expandable = false;
/** Set to `true to expand the search input */
export let expanded = false;
/** Specify the value of the search input */
export let value = "";
/**
* Specify the `type` attribute of the search input
* @type {string} [type="text"]
*/
/** Specify the `type` attribute of the search input */
export let type = "text";
/**
* Specify the `placeholder` attribute of the search input
* @type {string} [placeholder="Search..."]
*/
/** Specify the `placeholder` attribute of the search input */
export let placeholder = "Search...";
/**
@ -79,6 +71,11 @@
import SearchSkeleton from "./SearchSkeleton.svelte";
const dispatch = createEventDispatcher();
let searchRef = null;
$: if (expanded && ref) ref.focus();
$: dispatch(expanded ? "expand" : "collapse");
</script>
{#if skeleton}
@ -101,9 +98,17 @@
class:bx--search--sm="{size === 'sm' || small}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
class:bx--search--expandable="{expandable}"
class:bx--search--expanded="{expanded}"
class="{searchClass}"
>
<div class:bx--search-magnifier="{true}">
<div
bind:this="{searchRef}"
class:bx--search-magnifier="{true}"
on:click="{() => {
if (expandable) expanded = true;
}}"
>
<Search16 class="bx--search-magnifier-icon" />
</div>
<label id="{id}-search" for="{id}" class:bx--label="{true}"
@ -128,7 +133,15 @@
value = target.value;
}}"
on:focus
on:focus="{() => {
if (expandable) expanded = true;
}}"
on:blur
on:blur="{() => {
if (expanded && value.trim().length === 0) {
expanded = false;
}
}}"
on:keydown
on:keydown="{({ key }) => {
if (key === 'Escape') {

198
src/TextInput/PasswordInput.svelte
View file

@ -59,6 +59,15 @@
/** Specify the text for the invalid state */
export let invalidText = "";
/** Set to `true` to indicate an warning state */
export let warn = false;
/** Specify the warning state text */
export let warnText = "";
/** Set to `true` to use inline version */
export let inline = false;
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
@ -73,6 +82,7 @@
import { getContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
import View16 from "carbon-icons-svelte/lib/View16/View16.svelte";
import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16/ViewOff16.svelte";
@ -80,100 +90,146 @@
$: isFluid = !!ctx && ctx.isFluid;
$: errorId = `error-${id}`;
$: warnId = `warn-${id}`;
</script>
<div
class:bx--form-item="{true}"
class:bx--text-input-wrapper="{true}"
class:bx--password-input-wrapper="{!isFluid}"
class:bx--text-input-wrapper--light="{light}"
class:bx--text-input-wrapper--inline="{inline}"
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
{#if labelText}
{#if inline}
<label
for="{id}"
class:bx--label="{true}"
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
class:bx--label--inline="{inline}"
class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}"
>
{labelText}
</label>
{#if !isFluid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}"
>
{helperText}
</div>
{/if}
{:else}
<label
for="{id}"
class:bx--label="{true}"
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}"
class:bx--label--inline="{inline}"
class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}"
>
{labelText}
</label>
{/if}
<div
class:bx--text-input__field-wrapper="{true}"
data-invalid="{invalid || undefined}"
class:bx--text-input__field-outer-wrapper="{true}"
class:bx--text-input__field-outer-wrapper--inline="{inline}"
>
{#if invalid}
<WarningFilled16 class="bx--text-input__invalid-icon" />
{/if}
<input
bind:this="{ref}"
data-invalid="{invalid || undefined}"
aria-invalid="{invalid || undefined}"
aria-describedby="{invalid ? errorId : undefined}"
id="{id}"
name="{name}"
placeholder="{placeholder}"
type="{type}"
value="{value}"
disabled="{disabled}"
class:bx--text-input="{true}"
class:bx--password-input="{true}"
class:bx--text-input--light="{light}"
class:bx--text-input--invalid="{invalid}"
{...$$restProps}
class="{size && `bx--text-input--${size}`}"
on:change
on:input
on:input="{({ target }) => {
value = target.value;
}}"
on:keydown
on:focus
on:blur
/>
<button
type="button"
disabled="{disabled}"
class:bx--text-input--password__visibility__toggle="{true}"
class:bx--btn="{true}"
class:bx--btn--icon-only="{true}"
class:bx--btn--disabled="{disabled}"
class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}"
class="{tooltipPosition &&
`bx--tooltip--${tooltipPosition}`}
{tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`}"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}"
>
{#if !disabled}
<span class:bx--assistive-text="{true}">
{#if type === "text"}
{hidePasswordLabel}
{:else}{showPasswordLabel}{/if}
</span>
{/if}
{#if type === "text"}
<ViewOff16 class="bx--icon-visibility-off" />
{:else}
<View16 class="bx--icon-visibility-on" />
{/if}
</button>
</div>
{#if !invalid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
class:bx--text-input__field-wrapper="{true}"
class:bx--text-input__field-wrapper--warning="{warn}"
data-invalid="{invalid || undefined}"
>
{helperText}
{#if invalid}
<WarningFilled16 class="bx--text-input__invalid-icon" />
{/if}
{#if !invalid && warn}
<WarningAltFilled16
class="bx--text-input__invalid-icon
bx--text-input__invalid-icon--warning"
/>
{/if}
<input
bind:this="{ref}"
data-invalid="{invalid || undefined}"
aria-invalid="{invalid || undefined}"
aria-describedby="{invalid ? errorId : warn ? warnId : undefined}"
id="{id}"
name="{name}"
placeholder="{placeholder}"
type="{type}"
value="{value}"
disabled="{disabled}"
class:bx--text-input="{true}"
class:bx--password-input="{true}"
class:bx--text-input--light="{light}"
class:bx--text-input--invalid="{invalid}"
class:bx--text-input--warning="{warn}"
{...$$restProps}
class="{size && `bx--text-input--${size}`}"
on:change
on:input
on:input="{({ target }) => {
value = target.value;
}}"
on:keydown
on:focus
on:blur
/>
<button
type="button"
disabled="{disabled}"
class:bx--text-input--password__visibility__toggle="{true}"
class:bx--btn="{true}"
class:bx--btn--icon-only="{true}"
class:bx--btn--disabled="{disabled}"
class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}"
class="{tooltipPosition &&
`bx--tooltip--${tooltipPosition}`}
{tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`}"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}"
>
{#if !disabled}
<span class:bx--assistive-text="{true}">
{#if type === "text"}
{hidePasswordLabel}
{:else}{showPasswordLabel}{/if}
</span>
{/if}
{#if type === "text"}
<ViewOff16 class="bx--icon-visibility-off" />
{:else}
<View16 class="bx--icon-visibility-on" />
{/if}
</button>
</div>
{/if}
{#if invalid}
<div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
{/if}
{#if !isFluid && invalid}
<div class:bx--form-requirement="{true}" id="{errorId}">
{invalidText}
</div>
{/if}
{#if !invalid && !warn && !isFluid && !inline}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}"
class:bx--form__helper-text--inline="{inline}"
>
{helperText}
</div>
{/if}
{#if !isFluid && !invalid && warn}
<div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
{/if}
</div>
</div>

22
src/UIShell/GlobalHeader/Header.svelte
View file

@ -35,6 +35,22 @@
/** Obtain a reference to the HTML anchor element */
export let ref = null;
/**
* Specify the icon from `carbon-icons-svelte` to render for the closed state
* Defaults to `Menu20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let iconMenu = Menu20;
/**
* Specify the icon from `carbon-icons-svelte` to render for the opened state
* Defaults to `Close20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let iconClose = Close20;
import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
import { shouldRenderHamburgerMenu } from "../navStore";
import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
@ -52,7 +68,11 @@
<header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
<slot name="skip-to-content" />
{#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu}
<HamburgerMenu bind:isOpen="{isSideNavOpen}" />
<HamburgerMenu
bind:isOpen="{isSideNavOpen}"
iconClose="{iconClose}"
iconMenu="{iconMenu}"
/>
{/if}
<a
href="{href}"

5
src/UIShell/GlobalHeader/HeaderActionSearch.svelte
View file

@ -15,7 +15,6 @@
import { createEventDispatcher } from "svelte";
import Close20 from "carbon-icons-svelte/lib/Close20";
import Search20 from "carbon-icons-svelte/lib/Search20";
import { Icon } from "../../Icon";
import searchStore from "../searchStore";
const dispatch = createEventDispatcher();
@ -96,7 +95,7 @@
}
}}"
>
<Icon title="Search" tabindex="0" render="{Search20}" />
<svelte:component this="{Search20}" title="Search" tabindex="0" />
</button>
<input
bind:this="{elInput}"
@ -130,7 +129,7 @@
}
}}"
>
<Icon title="Close" tabindex="0" render="{Close20}" />
<svelte:component this="{Close20}" title="Close" tabindex="0" />
</button>
</div>
</div>

22
src/UIShell/SideNav/HamburgerMenu.svelte
View file

@ -8,18 +8,31 @@
/** Set to `true` to toggle the open state */
export let isOpen = false;
/**
* Specify the icon from `carbon-icons-svelte` to render for the closed state
* Defaults to `Menu20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let iconMenu = Menu20;
/**
* Specify the icon from `carbon-icons-svelte` to render for the opened state
* Defaults to `Close20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let iconClose = Close20;
/** Obtain a reference to the HTML button element */
export let ref = null;
import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
import { Icon } from "../../Icon";
</script>
<button
bind:this="{ref}"
type="button"
title="Open menu"
title="{ariaLabel}"
aria-label="{ariaLabel}"
class:bx--header__action="{true}"
class:bx--header__menu-trigger="{true}"
@ -28,8 +41,5 @@
on:click
on:click="{() => (isOpen = !isOpen)}"
>
<Icon
title="{isOpen ? 'Close' : 'Open Menu'}"
render="{isOpen ? Close20 : Menu20}"
/>
<svelte:component this="{isOpen ? iconClose : iconMenu}" />
</button>

13
src/UIShell/SideNav/SideNav.svelte
View file

@ -1,4 +1,10 @@
<script>
/**
* @event {any} open
* @event {any} close
* @event {any} click:overlay
*/
/** Set to `true` to use the fixed variant */
export let fixed = false;
@ -11,9 +17,13 @@
/** Set to `true` to toggle the expanded state */
export let isOpen = false;
import { onMount } from "svelte";
import { onMount, createEventDispatcher } from "svelte";
import { shouldRenderHamburgerMenu } from "../navStore";
const dispatch = createEventDispatcher();
$: dispatch(isOpen ? "open" : "close");
onMount(() => {
shouldRenderHamburgerMenu.set(true);
return () => shouldRenderHamburgerMenu.set(false);
@ -23,6 +33,7 @@
{#if !fixed}
<div
on:click="{() => {
dispatch('click:overlay');
isOpen = false;
}}"
class:bx--side-nav__overlay="{true}"

4
src/UIShell/SideNav/SideNavLink.svelte
View file

@ -22,8 +22,6 @@
/** Obtain a reference to the HTML anchor element */
export let ref = null;
import Icon from "../../Icon/Icon.svelte";
</script>
<li class:bx--side-nav__item="{true}">
@ -42,7 +40,7 @@
class:bx--side-nav__icon="{true}"
class:bx--side-nav__icon--small="{true}"
>
<Icon render="{icon}" />
<svelte:component this="{icon}" />
</div>
{/if}
<span class:bx--side-nav__link-text="{true}">{text}</span>

5
src/UIShell/SideNav/SideNavMenu.svelte
View file

@ -18,7 +18,6 @@
export let ref = null;
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
import Icon from "../../Icon/Icon.svelte";
</script>
<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@ -35,7 +34,7 @@
>
{#if icon}
<div class:bx--side-nav__icon="{true}">
<Icon render="{icon}" />
<svelte:component this="{icon}" />
</div>
{/if}
<span class:bx--side-nav__submenu-title="{true}">{text}</span>
@ -44,7 +43,7 @@
class:bx--side-nav__icon--small="{true}"
class:bx--side-nav__submenu-chevron="{true}"
>
<Icon title="Open Menu" tabindex="0" render="{ChevronDown16}" />
<svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" />
</div>
</button>
<ul role="menu" class:bx--side-nav__menu="{true}">

2
types/Button/Button.d.ts vendored
View file

@ -24,7 +24,7 @@ export interface ButtonProps
* Specify the size of button
* @default "default"
*/
size?: "default" | "field" | "small";
size?: "default" | "field" | "small" | "xl";
/**
* Set to `true` to enable the selected state for an icon-only, ghost button

2
types/DataTable/DataTable.d.ts vendored
View file

@ -54,7 +54,7 @@ export interface DataTableProps
/**
* Set the size of the data table
*/
size?: "compact" | "short" | "tall";
size?: "compact" | "short" | "medium" | "tall";
/**
* Specify the title of the data table

2
types/DataTable/Table.d.ts vendored
View file

@ -6,7 +6,7 @@ export interface TableProps
/**
* Set the size of the table
*/
size?: "compact" | "short" | "tall";
size?: "compact" | "short" | "medium" | "tall";
/**
* Set to `true` to use zebra styles

14
types/Search/Search.d.ts vendored
View file

@ -37,6 +37,18 @@ export interface SearchProps {
*/
disabled?: boolean;
/**
* Set to `true` to enable the expandable variant
* @default false
*/
expandable?: boolean;
/**
* Set to `true to expand the search input
* @default false
*/
expanded?: boolean;
/**
* Specify the value of the search input
* @default ""
@ -95,6 +107,8 @@ export interface SearchProps {
export default class Search extends SvelteComponentTyped<
SearchProps,
{
expand: CustomEvent<any>;
collapse: CustomEvent<any>;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];

18
types/TextInput/PasswordInput.d.ts vendored
View file

@ -92,6 +92,24 @@ export interface PasswordInputProps
*/
invalidText?: string;
/**
* Set to `true` to indicate an warning state
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
/**
* Set to `true` to use inline version
* @default false
*/
inline?: boolean;
/**
* Set an id for the input element
* @default "ccs-" + Math.random().toString(36)

12
types/UIShell/GlobalHeader/Header.d.ts vendored
View file

@ -48,6 +48,18 @@ export interface HeaderProps
* @default null
*/
ref?: null | HTMLAnchorElement;
/**
* Specify the icon from `carbon-icons-svelte` to render for the closed state
* Defaults to `Menu20`
*/
iconMenu?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Specify the icon from `carbon-icons-svelte` to render for the opened state
* Defaults to `Close20`
*/
iconClose?: typeof import("carbon-icons-svelte").CarbonIcon;
}
export default class Header extends SvelteComponentTyped<

6
types/UIShell/SideNav/SideNav.d.ts vendored
View file

@ -23,6 +23,10 @@ export interface SideNavProps
export default class SideNav extends SvelteComponentTyped<
SideNavProps,
{},
{
open: CustomEvent<any>;
close: CustomEvent<any>;
["click:overlay"]: CustomEvent<any>;
},
{ default: {} }
> {}

8
yarn.lock
View file

@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
carbon-components@10.33.0:
version "10.33.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5"
integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw==
carbon-components@10.34.0:
version "10.34.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.34.0.tgz#38a8bc4e03193e09459b22caf0fe2c72a64a63e8"
integrity sha512-KgWIFvJv5lg0puFsjXwIqv99ew8u1gUnrjN6/0vmyz2T/sJxGkDuiGAUlZsjmpsF+z2weK9pDu4cutjHYId2Sg==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"