From 524b5080a6514e5ba6344887d5e97d799f854a29 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 22 Jan 2021 13:39:44 -0800 Subject: [PATCH] feat(tile): add optional expand/collapse icon labels to ExpandableTile --- COMPONENT_INDEX.md | 24 +++++----- docs/src/COMPONENT_API.json | 34 ++++++++++++--- docs/src/pages/components/ExpandableTile.svx | 7 +++ src/Tile/ExpandableTile.svelte | 46 ++++++++------------ tests/ExpandableTile.test.svelte | 6 ++- types/Tile/ExpandableTile.d.ts | 16 ++++++- 6 files changed, 83 insertions(+), 50 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 263c27ba..1587b43e 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1023,17 +1023,19 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level element | -| tilePadding | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) | -| tileMaxHeight | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) | -| expanded | let | Yes | boolean | false | Set to `true` to expand the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| tileCollapsedIconText | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile | -| tileExpandedIconText | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile | -| tabindex | let | No | string | "0" | Specify the tabindex | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the top-level element | +| tilePadding | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) | +| tileMaxHeight | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) | +| expanded | let | Yes | boolean | false | Set to `true` to expand the tile | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| tileCollapsedIconText | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile | +| tileExpandedIconText | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile | +| tileExpandedLabel | let | No | string | "" | Specify the icon label of the expanded tile | +| tileCollapsedLabel | let | No | string | "" | Specify the icon label of the collapsed tile | +| tabindex | let | No | string | "0" | Specify the tabindex | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 787022ad..d54605c9 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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", diff --git a/docs/src/pages/components/ExpandableTile.svx b/docs/src/pages/components/ExpandableTile.svx index 53da6317..b1c127c3 100644 --- a/docs/src/pages/components/ExpandableTile.svx +++ b/docs/src/pages/components/ExpandableTile.svx @@ -26,4 +26,11 @@ source: Tile/ExpandableTile.svelte
Above the fold content here
Below the fold content here
+ + +### With icon labels + + +
Above the fold content here
+
Below the fold content here
 \ No newline at end of file diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte index ee5a2349..ca514a10 100644 --- a/src/Tile/ExpandableTile.svelte +++ b/src/Tile/ExpandableTile.svelte @@ -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 @@ }); -
- +
- +
- +
- + diff --git a/tests/ExpandableTile.test.svelte b/tests/ExpandableTile.test.svelte index a0353959..53c60474 100644 --- a/tests/ExpandableTile.test.svelte +++ b/tests/ExpandableTile.test.svelte @@ -12,7 +12,11 @@
Below the fold content here
- +
Above the fold content here
Below the fold content here
 diff --git a/types/Tile/ExpandableTile.d.ts b/types/Tile/ExpandableTile.d.ts index c5ffb7c0..334243cd 100644 --- a/types/Tile/ExpandableTile.d.ts +++ b/types/Tile/ExpandableTile.d.ts @@ -1,6 +1,6 @@ /// -export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes { +export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes { /** * Set to `true` to expand the tile * @default false @@ -37,6 +37,18 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes