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

Breaking: Move $$restProps in Select to <select>.

Browse source 
This aligns the component with others like `TextInput`, `NumberInput` or `TextArea` and allows adding not explicitly defined attributes to the "main" element of the component.

Other changes are from formatting by `lint` task.
(Prettier removes manual line breaks via `  ` from JSDoc strings; turned that into paragraph in `Header`.)
This commit is contained in:
brunnerh 2023-09-03 12:28:37 +02:00
commit 93961b106b
8 changed files with 21 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

4
COMPONENT_INDEX.md
View file

@ -1580,8 +1580,8 @@ None.
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default | | expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header | | uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute | | href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name. <br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) | | company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) |
| platformName | No | <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;`) | | platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br /><br />Alternatively, use the named slot "platform" (e.g., `&lt;span slot="platform"&gt;...&lt;/span&gt;`) |
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu | | persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 | | expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
| iconMenu | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;` | | iconMenu | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;` |

6
docs/src/COMPONENT_API.json
View file

@ -4788,7 +4788,7 @@
{ {
"name": "company", "name": "company",
"kind": "let", "kind": "let",
"description": "Specify the company name. \nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)", "description": "Specify the company name.\n\nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)",
"type": "string", "type": "string",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4799,7 +4799,7 @@
{ {
"name": "platformName", "name": "platformName",
"kind": "let", "kind": "let",
"description": "Specify the platform name.\nAlternatively, use the named slot \"platform\" (e.g., `<span slot=\"platform\">...</span>`)", "description": "Specify the platform name.\n\nAlternatively, use the named slot \"platform\" (e.g., `<span slot=\"platform\">...</span>`)",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -10367,7 +10367,7 @@
{ "type": "forwarded", "name": "blur", "element": "select" } { "type": "forwarded", "name": "blur", "element": "select" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "select" }
}, },
{ {
"moduleName": "SelectItem", "moduleName": "SelectItem",

6
src/ComboBox/ComboBox.svelte
View file

@ -224,9 +224,9 @@
class:bx--label="{true}" class:bx--label="{true}"
class:bx--label--disabled="{disabled}" class:bx--label--disabled="{disabled}"
> >
<slot name="titleText"> <slot name="titleText">
{titleText} {titleText}
</slot> </slot>
</label> </label>
{/if} {/if}
<ListBox <ListBox

6
src/MultiSelect/MultiSelect.svelte
View file

@ -300,9 +300,9 @@
class:bx--label--disabled="{disabled}" class:bx--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}" class:bx--visually-hidden="{hideLabel}"
> >
<slot name="titleText"> <slot name="titleText">
{titleText} {titleText}
</slot> </slot>
</label> </label>
{/if} {/if}
<ListBox <ListBox

4
src/Select/Select.svelte
View file

@ -124,7 +124,7 @@
$: selectedValue.set(selected ?? $defaultValue); $: selectedValue.set(selected ?? $defaultValue);
</script> </script>
<div class:bx--form-item="{true}" {...$$restProps}> <div class:bx--form-item="{true}">
<div <div
class:bx--select="{true}" class:bx--select="{true}"
class:bx--select--inline="{inline}" class:bx--select--inline="{inline}"
@ -162,6 +162,7 @@
class:bx--select-input="{true}" class:bx--select-input="{true}"
class:bx--select-input--sm="{size === 'sm'}" class:bx--select-input--sm="{size === 'sm'}"
class:bx--select-input--xl="{size === 'xl'}" class:bx--select-input--xl="{size === 'xl'}"
{...$$restProps}
on:change="{handleChange}" on:change="{handleChange}"
on:change on:change
on:input on:input
@ -206,6 +207,7 @@
class:bx--select-input="{true}" class:bx--select-input="{true}"
class:bx--select-input--sm="{size === 'sm'}" class:bx--select-input--sm="{size === 'sm'}"
class:bx--select-input--xl="{size === 'xl'}" class:bx--select-input--xl="{size === 'xl'}"
{...$$restProps}
on:change="{handleChange}" on:change="{handleChange}"
on:change on:change
on:input on:input

4
src/UIShell/Header.svelte
View file

@ -17,8 +17,9 @@
*/ */
export let href = undefined; export let href = undefined;
/** /**
* Specify the company name. * Specify the company name.
*
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
* @type {string} * @type {string}
*/ */
@ -26,6 +27,7 @@
/** /**
* Specify the platform name. * Specify the platform name.
*
* Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) * Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`)
*/ */
export let platformName = ""; export let platformName = "";

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

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

2
types/UIShell/Header.svelte.d.ts vendored
View file

@ -30,6 +30,7 @@ export interface HeaderProps extends RestProps {
/** /**
* Specify the company name. * Specify the company name.
*
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
* @default undefined * @default undefined
*/ */
@ -37,6 +38,7 @@ export interface HeaderProps extends RestProps {
/** /**
* Specify the platform name. * Specify the platform name.
*
* Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) * Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`)
* @default "" * @default ""
*/ */