fix(Tile): update outline-offset (#8258)

* fix(Tile): update outline-offset

* fix(Tile): update outline-offset

* fix(tile): need to confirm visual on Multi

* fix(tile): need to confirm visual on 2px border

* fix(tile): fix offset styling bug

* fix(tile): fix multiselect tile double border

* fix(tile): fix multiselect tile double border

* fix(tile): prevent text from bouncing

* Update _tile.scss

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: andreancardona

packages/components/src/components/tile/_tile.scss

@@ -96,6 +96,7 @@
 
   .#{$prefix}--tile--selectable {
     padding-right: $carbon--spacing-09;
+    border: 1px solid transparent;
   }
 
   .#{$prefix}--tile__checkmark,
@@ -201,8 +202,7 @@
   }
 
   .#{$prefix}--tile--is-selected {
-    outline: 1px solid $ui-05;
-    outline-offset: -1px;
+    border: 1px solid $ui-05;
   }
 
   .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark {
@@ -220,6 +220,22 @@
     }
   }
 
+  // Fix double border
+  .#{$prefix}--tile-input--checked + .#{$prefix}--tile--is-selected {
+    border-top: 1px solid $ui-01;
+  }
+
+  .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected)
+    + .#{$prefix}--tile-input--checked
+    + .#{$prefix}--tile--is-selected {
+    border-top: 1px solid $ui-05;
+  }
+
+  .#{$prefix}--tile-input--checked:first-of-type
+    + .#{$prefix}--tile--is-selected {
+    border-top: 1px solid $ui-05;
+  }
+
   .#{$prefix}--tile-content {
     width: 100%;
     height: 100%;

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

@@ -341,6 +341,10 @@ export class SelectableTile extends Component {
       ...other
     } = this.props;
 
+    const inputClasses = classNames(`${prefix}--tile-input`, {
+      [`${prefix}--tile-input--checked`]: this.state.selected,
+    });
+
     const classes = classNames(
       `${prefix}--tile`,
       `${prefix}--tile--selectable`,
@@ -360,7 +364,7 @@ export class SelectableTile extends Component {
           }}
           tabIndex={-1}
           id={id}
-          className={`${prefix}--tile-input`}
+          className={inputClasses}
           value={value}
           onChange={!disabled ? this.handleOnChange : null}
           type="checkbox"