mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: make renderIcon/icon prop consistent (#496)

Browse source
This commit is contained in:
Eric Liu 2021-01-27 14:16:07 -08:00 • committed by GitHub
commit 63ef51209d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 67 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

18
COMPONENT_INDEX.md
View file

@ -1401,10 +1401,10 @@ export interface HeaderActionSlideTransition {
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | | :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel | | isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | <code>let</code> | No | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | -- | Specify the icon props | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) | | text | <code>let</code> | No | <code>string</code> | -- | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | <code>let</code> | No | <code>false &#124; HeaderActionSlideTransition</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition | | transition | <code>let</code> | No | <code>false &#124; HeaderActionSlideTransition</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition |
@ -1427,11 +1427,11 @@ export interface HeaderActionSlideTransition {
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| linkIsActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state | | linkIsActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute | | href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| icon | <code>let</code> | No | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | -- | Specify the icon props | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
### Slots ### Slots
@ -2207,7 +2207,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- | | :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- |
| notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification | | notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification |
| renderIcon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| title | <code>let</code> | No | <code>string</code> | -- | Specify the title of the icon | | title | <code>let</code> | No | <code>string</code> | -- | Specify the title of the icon |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon |
@ -2983,12 +2983,12 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link | | isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute | | href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text | | text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| icon | <code>let</code> | No | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | -- | Specify the icon props | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
### Slots ### Slots
@ -3005,11 +3005,11 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- | | :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text | | text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| icon | <code>let</code> | No | <code>{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }</code> | -- | Specify the icon props | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
### Slots ### Slots

18
docs/src/COMPONENT_API.json
View file

@ -5621,7 +5621,7 @@
"reactive": false "reactive": false
}, },
{ {
"name": "renderIcon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
@ -9828,8 +9828,8 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon props", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -9912,8 +9912,8 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon props", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -10230,8 +10230,8 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon props", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false
@ -10278,8 +10278,8 @@
{ {
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon props", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false

2
docs/src/pages/_layout.svelte
View file

@ -182,7 +182,7 @@
<HeaderUtilities> <HeaderUtilities>
<HeaderActionLink <HeaderActionLink
icon="{{ render: LogoGithub20 }}" icon="{LogoGithub20}"
href="https://github.com/IBM/carbon-components-svelte" href="https://github.com/IBM/carbon-components-svelte"
target="_blank" target="_blank"
/> />

4
src/Notification/NotificationButton.svelte
View file

@ -9,7 +9,7 @@
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/ */
export let renderIcon = Close20; export let icon = Close20;
/** /**
* Specify the title of the icon * Specify the title of the icon
@ -36,7 +36,7 @@
on:mouseleave on:mouseleave
> >
<svelte:component <svelte:component
this="{renderIcon}" this="{icon}"
title="{title}" title="{title}"
class="bx--{notificationType}-notification__close-icon" class="bx--{notificationType}-notification__close-icon"
/> />

12
src/UIShell/GlobalHeader/HeaderAction.svelte
View file

@ -7,8 +7,8 @@
export let isOpen = false; export let isOpen = false;
/** /**
* Specify the icon props * Specify the icon from `carbon-icons-svelte` to render
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }} * @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/ */
export let icon = undefined; export let icon = undefined;
@ -31,9 +31,9 @@
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import { slide } from "svelte/transition"; import { slide } from "svelte/transition";
import Close20 from "carbon-icons-svelte/lib/Close20"; import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20"; import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20/AppSwitcher20.svelte";
import { Icon } from "../../Icon"; import Icon from "../../Icon/Icon.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -79,7 +79,7 @@
dispatch(isOpen ? 'open' : 'close'); dispatch(isOpen ? 'open' : 'close');
}}" }}"
> >
<Icon render="{isOpen ? Close20 : AppSwitcher20}" {...icon} /> <Icon render="{icon || (isOpen ? Close20 : AppSwitcher20)}" />
<slot name="text"> <slot name="text">
{#if text}<span>{text}</span>{/if} {#if text}<span>{text}</span>{/if}
</slot> </slot>

8
src/UIShell/GlobalHeader/HeaderActionLink.svelte
View file

@ -9,15 +9,15 @@
export let href = undefined; export let href = undefined;
/** /**
* Specify the icon props * Specify the icon from `carbon-icons-svelte` to render
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }} * @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/ */
export let icon = undefined; export let icon = undefined;
/** Obtain a reference to the HTML anchor element */ /** Obtain a reference to the HTML anchor element */
export let ref = null; export let ref = null;
import { Icon } from "../../Icon"; import Icon from "../../Icon/Icon.svelte";
</script> </script>
<style> <style>
@ -39,5 +39,5 @@
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}" rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
{...$$restProps} {...$$restProps}
> >
<Icon {...icon} /> <Icon render="{icon}" />
</a> </a>

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

@ -15,15 +15,15 @@
export let text = undefined; export let text = undefined;
/** /**
* Specify the icon props * Specify the icon from `carbon-icons-svelte` to render
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }} * @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/ */
export let icon = undefined; export let icon = undefined;
/** Obtain a reference to the HTML anchor element */ /** Obtain a reference to the HTML anchor element */
export let ref = null; export let ref = null;
import { Icon } from "../../Icon"; import Icon from "../../Icon/Icon.svelte";
</script> </script>
<li class:bx--side-nav__item="{true}"> <li class:bx--side-nav__item="{true}">
@ -42,7 +42,7 @@
class:bx--side-nav__icon="{true}" class:bx--side-nav__icon="{true}"
class:bx--side-nav__icon--small="{true}" class:bx--side-nav__icon--small="{true}"
> >
<Icon {...icon} /> <Icon render="{icon}" />
</div> </div>
{/if} {/if}
<span class:bx--side-nav__link-text="{true}">{text}</span> <span class:bx--side-nav__link-text="{true}">{text}</span>

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

@ -9,16 +9,16 @@
export let text = undefined; export let text = undefined;
/** /**
* Specify the icon props * Specify the icon from `carbon-icons-svelte` to render
* @type {{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }} * @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/ */
export let icon = undefined; export let icon = undefined;
/** Obtain a reference to the HTML button element */ /** Obtain a reference to the HTML button element */
export let ref = null; export let ref = null;
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16"; import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
import { Icon } from "../../Icon"; import Icon from "../../Icon/Icon.svelte";
</script> </script>
<li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}"> <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@ -35,7 +35,7 @@
> >
{#if icon} {#if icon}
<div class:bx--side-nav__icon="{true}"> <div class:bx--side-nav__icon="{true}">
<Icon {...icon} /> <Icon render="{icon}" />
</div> </div>
{/if} {/if}
<span class:bx--side-nav__submenu-title="{true}">{text}</span> <span class:bx--side-nav__submenu-title="{true}">{text}</span>

2
types/Notification/NotificationButton.d.ts vendored
View file

@ -10,7 +10,7 @@ export interface NotificationButtonProps extends svelte.JSX.HTMLAttributes<HTMLE
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
renderIcon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Specify the title of the icon * Specify the title of the icon

4
types/UIShell/GlobalHeader/HeaderAction.d.ts vendored
View file

@ -14,9 +14,9 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElement
isOpen?: boolean; isOpen?: boolean;
/** /**
* Specify the icon props * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Specify the text * Specify the text

4
types/UIShell/GlobalHeader/HeaderActionLink.d.ts vendored
View file

@ -13,9 +13,9 @@ export interface HeaderActionLinkProps extends svelte.JSX.HTMLAttributes<HTMLEle
href?: string; href?: string;
/** /**
* Specify the icon props * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Obtain a reference to the HTML anchor element * Obtain a reference to the HTML anchor element

4
types/UIShell/SideNav/SideNavLink.d.ts vendored
View file

@ -18,9 +18,9 @@ export interface SideNavLinkProps extends svelte.JSX.HTMLAttributes<HTMLElementT
text?: string; text?: string;
/** /**
* Specify the icon props * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Obtain a reference to the HTML anchor element * Obtain a reference to the HTML anchor element

4
types/UIShell/SideNav/SideNavMenu.d.ts vendored
View file

@ -13,9 +13,9 @@ export interface SideNavMenuProps extends svelte.JSX.HTMLAttributes<HTMLElementT
text?: string; text?: string;
/** /**
* Specify the icon props * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean }; icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/** /**
* Obtain a reference to the HTML button element * Obtain a reference to the HTML button element