mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
feat(tile): add optional expand/collapse icon labels to ExpandableTile
This commit is contained in:
Eric Liu
parent
b2560a21ac
commit
524b5080a6
6 changed files with 83 additions and 50 deletions
|
|
@ -1023,17 +1023,19 @@ None.
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level element |
|
||||
| tilePadding | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the padding of the tile (number of pixels) |
|
||||
| tileMaxHeight | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the max height of the tile (number of pixels) |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand the tile |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| tileCollapsedIconText | <code>let</code> | No | <code>string</code> | <code>"Interact to expand Tile"</code> | Specify the icon text of the collapsed tile |
|
||||
| tileExpandedIconText | <code>let</code> | No | <code>string</code> | <code>"Interact to collapse Tile"</code> | Specify the icon text of the expanded tile |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the top-level element |
|
||||
| tilePadding | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the padding of the tile (number of pixels) |
|
||||
| tileMaxHeight | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the max height of the tile (number of pixels) |
|
||||
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand the tile |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| tileCollapsedIconText | <code>let</code> | No | <code>string</code> | <code>"Interact to expand Tile"</code> | Specify the icon text of the collapsed tile |
|
||||
| tileExpandedIconText | <code>let</code> | No | <code>string</code> | <code>"Interact to collapse Tile"</code> | Specify the icon text of the expanded tile |
|
||||
| tileExpandedLabel | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon label of the expanded tile |
|
||||
| tileCollapsedLabel | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon label of the collapsed tile |
|
||||
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -8492,6 +8492,26 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "tileExpandedLabel",
|
||||
"kind": "let",
|
||||
"description": "Specify the icon label of the expanded tile",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "tileCollapsedLabel",
|
||||
"kind": "let",
|
||||
"description": "Specify the icon label of the collapsed tile",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "tabindex",
|
||||
"kind": "let",
|
||||
|
|
@ -8516,7 +8536,7 @@
|
|||
"name": "ref",
|
||||
"kind": "let",
|
||||
"description": "Obtain a reference to the top-level element",
|
||||
"type": "null | HTMLDivElement",
|
||||
"type": "null | HTMLButtonElement",
|
||||
"value": "null",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
|
|
@ -8528,14 +8548,14 @@
|
|||
{ "name": "below", "default": false, "slot_props": "{}" }
|
||||
],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "keypress", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
|
||||
{ "type": "forwarded", "name": "click", "element": "button" },
|
||||
{ "type": "forwarded", "name": "keypress", "element": "button" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "button" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "button" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "button" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
"rest_props": { "type": "Element", "name": "button" }
|
||||
},
|
||||
{
|
||||
"moduleName": "SelectableTile",
|
||||
|
|
|
|||
|
|
@ -27,3 +27,10 @@ source: Tile/ExpandableTile.svelte
|
|||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
|
||||
### With icon labels
|
||||
|
||||
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
|
|
@ -17,6 +17,12 @@
|
|||
/** Specify the icon text of the expanded tile */
|
||||
export let tileExpandedIconText = "Interact to collapse Tile";
|
||||
|
||||
/** Specify the icon label of the expanded tile */
|
||||
export let tileExpandedLabel = "";
|
||||
|
||||
/** Specify the icon label of the collapsed tile */
|
||||
export let tileCollapsedLabel = "";
|
||||
|
||||
/** Specify the tabindex */
|
||||
export let tabindex = "0";
|
||||
|
||||
|
|
@ -27,7 +33,7 @@
|
|||
export let ref = null;
|
||||
|
||||
import { afterUpdate } from "svelte";
|
||||
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
|
||||
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
|
||||
|
||||
let refContent = null;
|
||||
let refAbove = null;
|
||||
|
|
@ -45,10 +51,13 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
<button
|
||||
bind:this="{ref}"
|
||||
type="button"
|
||||
id="{id}"
|
||||
aria-expanded="{expanded}"
|
||||
tabindex="{tabindex}"
|
||||
title="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
|
||||
class:bx--tile="{true}"
|
||||
class:bx--tile--expandable="{true}"
|
||||
class:bx--tile--is-expanded="{expanded}"
|
||||
|
|
@ -60,45 +69,24 @@
|
|||
expanded = !expanded;
|
||||
}}"
|
||||
on:keypress
|
||||
on:keypress="{(e) => {
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
expanded = !expanded;
|
||||
}
|
||||
}}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<div bind:this="{refContent}">
|
||||
<div bind:this="{refAbove}" class:bx--tile-content="{true}">
|
||||
<span
|
||||
class:bx--tile-content__above-the-fold="{true}"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<span class:bx--tile-content__above-the-fold="{true}">
|
||||
<slot name="above" />
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
aria-expanded="{expanded}"
|
||||
aria-label="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
|
||||
class:bx--tile__chevron="{true}"
|
||||
>
|
||||
<div class:bx--tile__chevron="{true}">
|
||||
<span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
|
||||
<ChevronDown16 />
|
||||
</button>
|
||||
</div>
|
||||
<div class:bx--tile-content="{true}">
|
||||
<span
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
class:bx--tile-content__below-the-fold="{true}"
|
||||
>
|
||||
<span class:bx--tile-content__below-the-fold="{true}">
|
||||
<slot name="below" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,11 @@
|
|||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
|
||||
<ExpandableTile light>
|
||||
<ExpandableTile
|
||||
light
|
||||
tileExpandedLabel="View less"
|
||||
tileCollapsedLabel="View more"
|
||||
>
|
||||
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
||||
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
||||
</ExpandableTile>
|
||||
|
|
|
|||
16
types/Tile/ExpandableTile.d.ts
vendored
16
types/Tile/ExpandableTile.d.ts
vendored
|
|
@ -1,6 +1,6 @@
|
|||
/// <reference types="svelte" />
|
||||
|
||||
export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
|
||||
/**
|
||||
* Set to `true` to expand the tile
|
||||
* @default false
|
||||
|
|
@ -37,6 +37,18 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLEleme
|
|||
*/
|
||||
tileExpandedIconText?: string;
|
||||
|
||||
/**
|
||||
* Specify the icon label of the expanded tile
|
||||
* @default ""
|
||||
*/
|
||||
tileExpandedLabel?: string;
|
||||
|
||||
/**
|
||||
* Specify the icon label of the collapsed tile
|
||||
* @default ""
|
||||
*/
|
||||
tileCollapsedLabel?: string;
|
||||
|
||||
/**
|
||||
* Specify the tabindex
|
||||
* @default "0"
|
||||
|
|
@ -53,7 +65,7 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLEleme
|
|||
* Obtain a reference to the top-level element
|
||||
* @default null
|
||||
*/
|
||||
ref?: null | HTMLDivElement;
|
||||
ref?: null | HTMLButtonElement;
|
||||
}
|
||||
|
||||
export default class ExpandableTile {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue