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
| 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 |
| 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;) |
| 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
| 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 |
| 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 |
| 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
@ -2207,7 +2207,7 @@ None.
| 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 |
| 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 |
| 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
| 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 |
| 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 |
| 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
@ -3005,11 +3005,11 @@ None.
### Props
| 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 |
| 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 |
| 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

18
docs/src/COMPONENT_API.json
View file

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

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

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

4
src/Notification/NotificationButton.svelte
View file

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

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

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

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

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

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

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

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

@ -13,9 +13,9 @@ export interface HeaderActionLinkProps extends svelte.JSX.HTMLAttributes<HTMLEle
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

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

@ -18,9 +18,9 @@ export interface SideNavLinkProps extends svelte.JSX.HTMLAttributes<HTMLElementT
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

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

@ -13,9 +13,9 @@ export interface SideNavMenuProps extends svelte.JSX.HTMLAttributes<HTMLElementT
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