From d45f4661dbaf9278c193f35bff29754a2a59692f Mon Sep 17 00:00:00 2001
From: "Ryan O. Mackey" <ryan.o.mackey@gmail.com>
Date: Tue, 19 Jan 2021 14:05:22 -0600
Subject: [PATCH] feat(Tile): add optional expand/collapse labels for chevron
 (#7199)

* feat(Tile): add optional expand/collapse labels for chevron

* Update packages/react/src/components/Tile/Tile.js

Co-authored-by: emyarod <emyarod@users.noreply.github.com>

* fix(Tile): remove default props

* style(Tile): adjust positioning of chevron

* test(Tile): update PublicAPI snapshot

* style(Tile): remove flex-direction property

Co-authored-by: emyarod <emyarod@users.noreply.github.com>
Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
---
 .../components/src/components/tile/_tile.scss   |  7 +++++--
 .../__snapshots__/PublicAPI-test.js.snap        |  6 ++++++
 .../react/src/components/Tile/Tile-story.js     |  2 ++
 packages/react/src/components/Tile/Tile.js      | 17 +++++++++++++++--
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
index 6c5e48b046e0..0679fa0d7862 100644
--- a/packages/components/src/components/tile/_tile.scss
+++ b/packages/components/src/components/tile/_tile.scss
@@ -105,11 +105,14 @@
 
   .#{$prefix}--tile__chevron {
     position: absolute;
-    right: 0.5rem;
-    bottom: 0.5rem;
+    right: $carbon--spacing-05;
+    bottom: $carbon--spacing-05;
+    display: flex;
+    align-items: flex-end;
     height: 1rem;
 
     svg {
+      margin-left: $carbon--spacing-03;
       transform-origin: center;
       transition: $duration--fast-02 motion(standard, productive);
       fill: $ui-05;
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 05722820b224..bd2dbf2bce1c 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5748,9 +5748,15 @@ Map {
       "tileCollapsedIconText": Object {
         "type": "string",
       },
+      "tileCollapsedLabel": Object {
+        "type": "string",
+      },
       "tileExpandedIconText": Object {
         "type": "string",
       },
+      "tileExpandedLabel": Object {
+        "type": "string",
+      },
     },
   },
   "TileAboveTheFoldContent" => Object {
diff --git a/packages/react/src/components/Tile/Tile-story.js b/packages/react/src/components/Tile/Tile-story.js
index bdfd22cafc8f..67094457a2e9 100644
--- a/packages/react/src/components/Tile/Tile-story.js
+++ b/packages/react/src/components/Tile/Tile-story.js
@@ -73,6 +73,8 @@ const props = {
       'Collapsed icon text (tileExpandedIconText)',
       'Interact to Collapse tile'
     ),
+    tileCollapsedLabel: text('Collapsed icon text (tileCollapsedLabel)'),
+    tileExpandedLabel: text('Collapsed icon text (tileExpandedLabel)'),
     handleClick: action('handleClick'),
     light: boolean('Light variant (light)', false),
   }),
diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js
index 0f3313698667..e28a0591fd14 100644
--- a/packages/react/src/components/Tile/Tile.js
+++ b/packages/react/src/components/Tile/Tile.js
@@ -428,10 +428,20 @@ export class ExpandableTile extends Component {
      */
     tileCollapsedIconText: PropTypes.string,
 
+    /**
+     * When "collapsed", a label to appear next to the chevron (e.g., "View more").
+     */
+    tileCollapsedLabel: PropTypes.string,
+
     /**
      * The description of the "expanded" icon that can be read by screen readers.
      */
     tileExpandedIconText: PropTypes.string,
+
+    /**
+     * When "expanded", a label to appear next to the chevron (e.g., "View less").
+     */
+    tileExpandedLabel: PropTypes.string,
   };
 
   static defaultProps = {
@@ -546,8 +556,10 @@ export class ExpandableTile extends Component {
       tileMaxHeight, // eslint-disable-line
       tilePadding, // eslint-disable-line
       handleClick, // eslint-disable-line
-      tileCollapsedIconText, // eslint-disable-line
-      tileExpandedIconText, // eslint-disable-line
+      tileCollapsedIconText,
+      tileExpandedIconText,
+      tileCollapsedLabel,
+      tileExpandedLabel,
       onBeforeClick, // eslint-disable-line
       light,
       ...other
@@ -599,6 +611,7 @@ export class ExpandableTile extends Component {
             {childrenAsArray[0]}
           </div>
           <div className={`${prefix}--tile__chevron`}>
+            <span>{isExpanded ? tileExpandedLabel : tileCollapsedLabel}</span>
             <ChevronDown16 />
           </div>
           <div className={`${prefix}--tile-content`}>{childrenAsArray[1]}</div>