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

breaking(header-action): use SlideParams to type transition prop (#1163)

Browse source
This commit is contained in:
metonym 2022-03-12 14:35:59 -08:00 • committed by GitHub
commit 47866b1d51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

14
COMPONENT_INDEX.md
View file

@ -1608,26 +1608,16 @@ None.
## `HeaderAction` ## `HeaderAction`
### Types
```ts
export interface HeaderActionSlideTransition {
delay?: number;
duration?: number;
easing?: (t: number) => number;
}
```
### 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>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render |
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open | | closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the icon to render when the action panel is open |
| text | <code>let</code> | No | <code>string</code> | <code>undefined</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> | <code>undefined</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; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
### Slots ### Slots

12
docs/src/COMPONENT_API.json
View file

@ -4517,8 +4517,8 @@
{ {
"name": "transition", "name": "transition",
"kind": "let", "kind": "let",
"description": "Customize the panel transition (i.e., `transition:slide`)\nSet to `false` to disable the transition", "description": "Customize the panel transition (i.e., `transition:slide`).\nSet to `false` to disable the transition",
"type": "false | HeaderActionSlideTransition", "type": "false | import(\"svelte/transition\").SlideParams",
"value": "{ duration: 200 }", "value": "{ duration: 200 }",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4539,13 +4539,7 @@
{ "type": "forwarded", "name": "click", "element": "button" }, { "type": "forwarded", "name": "click", "element": "button" },
{ "type": "dispatched", "name": "close" } { "type": "dispatched", "name": "close" }
], ],
"typedefs": [ "typedefs": [],
{
"type": "{ delay?: number; duration?: number; easing?: (t: number) => number; }",
"name": "HeaderActionSlideTransition",
"ts": "interface HeaderActionSlideTransition { delay?: number; duration?: number; easing?: (t: number) => number; }"
}
],
"rest_props": { "type": "Element", "name": "button" } "rest_props": { "type": "Element", "name": "button" }
}, },
{ {

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

@ -1,8 +1,4 @@
<script> <script>
/**
* @typedef {{ delay?: number; duration?: number; easing?: (t: number) => number; }} HeaderActionSlideTransition
*/
/** Set to `true` to open the panel */ /** Set to `true` to open the panel */
export let isOpen = false; export let isOpen = false;
@ -29,9 +25,9 @@
export let ref = null; export let ref = null;
/** /**
* Customize the panel transition (i.e., `transition:slide`) * Customize the panel transition (i.e., `transition:slide`).
* Set to `false` to disable the transition * Set to `false` to disable the transition
* @type {false | HeaderActionSlideTransition} * @type {false | import("svelte/transition").SlideParams}
*/ */
export let transition = { duration: 200 }; export let transition = { duration: 200 };

10
types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts vendored
View file

@ -1,12 +1,6 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte"; import { SvelteComponentTyped } from "svelte";
export interface HeaderActionSlideTransition {
delay?: number;
duration?: number;
easing?: (t: number) => number;
}
export interface HeaderActionProps export interface HeaderActionProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/** /**
@ -41,11 +35,11 @@ export interface HeaderActionProps
ref?: null | HTMLButtonElement; ref?: null | HTMLButtonElement;
/** /**
* Customize the panel transition (i.e., `transition:slide`) * Customize the panel transition (i.e., `transition:slide`).
* Set to `false` to disable the transition * Set to `false` to disable the transition
* @default { duration: 200 } * @default { duration: 200 }
*/ */
transition?: false | HeaderActionSlideTransition; transition?: false | import("svelte/transition").SlideParams;
} }
export default class HeaderAction extends SvelteComponentTyped< export default class HeaderAction extends SvelteComponentTyped<