chore: v11 ExpandableTile

Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.
carbon-design-system · Mar 27, 2023 · 2d8b407 · 2d8b407
1 parent 974391a
commit 2d8b407
Show file tree

Hide file tree

Showing 6 changed files with 2 additions and 58 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -1223,8 +1223,6 @@ None.
 | light                 | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant             |
 | tileCollapsedIconText | No       | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to expand Tile"</code>           | Specify the icon text of the collapsed tile           |
 | tileExpandedIconText  | No       | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to collapse Tile"</code>         | Specify the icon text of the expanded tile            |
-| tileExpandedLabel     | No       | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the expanded tile           |
-| tileCollapsedLabel    | No       | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the collapsed tile          |
 | tabindex              | No       | <code>let</code> | No       | <code>string</code>                        | <code>"0"</code>                                 | Specify the tabindex                                  |
 | id                    | No       | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element               |
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -3636,30 +3636,6 @@
           "constant": false,
           "reactive": false
         },
-        {
-          "name": "tileExpandedLabel",
-          "kind": "let",
-          "description": "Specify the icon label of the expanded tile",
-          "type": "string",
-          "value": "\"\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "tileCollapsedLabel",
-          "kind": "let",
-          "description": "Specify the icon label of the collapsed tile",
-          "type": "string",
-          "value": "\"\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
         {
           "name": "tabindex",
           "kind": "let",

diff --git a/docs/src/pages/components/ExpandableTile.svx b/docs/src/pages/components/ExpandableTile.svx
@@ -24,18 +24,11 @@
   <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>
-
 ## With interactive content
 
 For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
 
-<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
+<ExpandableTile>
   <div slot="above" style="height: 10rem">
     <a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
       Native element

diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
@@ -17,12 +17,6 @@
   /** 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";
 
@@ -82,7 +76,6 @@
       </span>
     </div>
     <div class:bx--tile__chevron="{true}">
-      <span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
       <ChevronDown />
     </div>
     <div class:bx--tile-content="{true}">

diff --git a/tests/ExpandableTile.test.svelte b/tests/ExpandableTile.test.svelte
@@ -12,11 +12,7 @@
   <div slot="below" style="height: 10rem">Below the fold content here</div>
 </ExpandableTile>
 
-<ExpandableTile
-  light
-  tileExpandedLabel="View less"
-  tileCollapsedLabel="View more"
->
+<ExpandableTile light>
   <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>
diff --git a/types/Tile/ExpandableTile.svelte.d.ts b/types/Tile/ExpandableTile.svelte.d.ts
@@ -39,18 +39,6 @@ export interface ExpandableTileProps
    */
   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"