fix(scss notation): fix & notation for tiles (#4995)

Co-authored-by: Alexis Córdova <[email protected]>

Author: kflournoy-sf

RELEASENOTES.md

@@ -19,6 +19,10 @@
 #### Changed
 - Removed `@noflip` annotation from nubbins to make RTL behavior consistent
 
+### [Tiles](https://www.lightningdesignsystem.com/components/tiles)
+#### Added
+- Added annotations for tile board CSS classes.
+
 ## Release 2.17.3 - January 27, 2022
 
 ## Components

ui/components/tiles/RELEASENOTES.md

@@ -4,4 +4,8 @@
 
 <!-- ## [Unreleased] -->
 
-<!-- ## [VERSION] -->
+## 2.18.0
+
+### Added
+
+- Added annotations for tile board CSS classes.

ui/components/tiles/_doc.scss

@@ -7,7 +7,7 @@
  *
  * @base
  * @name tiles
- * @selector .slds-tile
+ * @selector .slds-tile, .slds-tile_board
  * @support dev-ready
  * @category structure
  * @type data-display

ui/components/tiles/base/_index.scss

@@ -15,36 +15,37 @@
   + .slds-tile {
     margin-top: $spacing-x-small;
   }
+}
 
-  /**
-   * @selector .slds-tile__detail
-   * @restrict .slds-tile div
-   */
-  &__detail {
-    position: relative;
-  }
+/**
+  * @selector .slds-tile__detail
+  * @restrict .slds-tile div
+  */
+.slds-tile__detail {
+  position: relative;
+}
 
-  /**
-   * @selector .slds-tile__meta
-   * @restrict .slds-tile div
-   */
-  &__meta {
-    color: $color-text-default;
-  }
+/**
+  * @selector .slds-tile__meta
+  * @restrict .slds-tile div
+  */
+.slds-tile__meta {
+  color: $color-text-default;
 }
 
 .slds-tile_board,
 .slds-tile--board {
   position: relative;
 
-  &__icon {
-    @include square($square-icon-medium-content);
-    position: absolute;
-    bottom: $spacing-xx-small;
-    right: $spacing-xx-small;
-  }
-
   .slds-has-alert {
     padding-right: $spacing-large;
   }
 }
+
+.slds-tile_board__icon,
+.slds-tile--board__icon {
+  @include square($square-icon-medium-content);
+  position: absolute;
+  bottom: $spacing-xx-small;
+  right: $spacing-xx-small;
+}

ui/components/tiles/board/_index.scss

@@ -1,18 +1,34 @@
 // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
+/**
+ * @summary Initializes tile board
+ *
+ * @name tile-board
+ * @selector .slds-tile_board
+ * @restrict article
+ * @support dev-ready
+ * @variant
+*/
+
 .slds-tile_board,
 .slds-tile--board {
   position: relative;
 
-  &__icon {
-    @include square($square-icon-medium-content);
-    position: absolute;
-    bottom: $spacing-xx-small;
-    right: $spacing-xx-small;
-  }
-
   .slds-has-alert {
     padding-right: $spacing-large;
   }
 }
+
+/**
+  * @summary Tile board icon
+  * @selector .slds-tile_board__icon
+  * @restrict .slds-tile_board span
+*/
+.slds-tile_board__icon,
+.slds-tile--board__icon {
+  @include square($square-icon-medium-content);
+  position: absolute;
+  bottom: $spacing-xx-small;
+  right: $spacing-xx-small;
+}