Make UI Shell HeaderAction panel transition configurable (#419)

* fix(ui-shell): remove fly transition from hamburger menu

* feat(header-action): make panel transition configurable

* chore: rebuild types, docs

* docs(ui-shell): document transition prop in Header app switcher example
This commit is contained in:
Eric Liu 2020-11-26 17:14:07 -08:00 committed by GitHub
commit f4c940d5ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 244 additions and 160 deletions

View file

@ -191,7 +191,7 @@
{
"name": "title",
"kind": "let",
"description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g. <div slot=\"title\">...</div>)",
"description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g., <div slot=\"title\">...</div>)",
"type": "string",
"value": "\"title\"",
"isFunction": false,
@ -583,7 +583,7 @@
{
"name": "as",
"kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -906,7 +906,7 @@
{
"name": "text",
"kind": "let",
"description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g. <span slot=\"text\">...</span>)",
"description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g., <span slot=\"text\">...</span>)",
"type": "string",
"value": "\"Provide text\"",
"isFunction": false,
@ -1918,7 +1918,7 @@
{
"name": "code",
"kind": "let",
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)",
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)",
"type": "string",
"isFunction": false,
"constant": false,
@ -4595,7 +4595,7 @@
{
"name": "as",
"kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -4681,7 +4681,7 @@
{
"name": "as",
"kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -4757,7 +4757,7 @@
{
"name": "as",
"kind": "let",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)",
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -7494,7 +7494,7 @@
{
"name": "label",
"kind": "let",
"description": "Specify the tab label\nAlternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)",
"description": "Specify the tab label\nAlternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)",
"type": "string",
"value": "\"\"",
"isFunction": false,
@ -9283,7 +9283,7 @@
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g. `Add16`, `Task16`)",
"description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
@ -9593,7 +9593,7 @@
{
"name": "platformName",
"kind": "let",
"description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g. <span slot=\"platform\">...</span>)",
"description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g., <span slot=\"platform\">...</span>)",
"type": "string",
"value": "\"\"",
"isFunction": false,
@ -9661,7 +9661,7 @@
{
"name": "text",
"kind": "let",
"description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g. <div slot=\"text\">...</div>)",
"description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g., <div slot=\"text\">...</div>)",
"type": "string",
"isFunction": false,
"constant": false,
@ -9676,6 +9676,16 @@
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "transition",
"kind": "let",
"description": "Customize the panel transition (i.e., `transition:slide`)\nSet to `false` to disable the transition",
"type": "false | HeaderActionSlideTransition",
"value": "{ duration: 200 }",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [
@ -9691,7 +9701,13 @@
{ "type": "forwarded", "name": "click", "element": "button" },
{ "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" }
},
{