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>

Author: 3 people

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;

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 {

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),
   }),

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>