IconTile - Visual update (#2555)

Co-authored-by: Andrew Gendel <[email protected]>
Co-authored-by: Majed <[email protected]>
Co-authored-by: Jory Tindall <[email protected]>
Co-authored-by: Kristin Bradley <[email protected]>

.changeset/sweet-penguins-shave.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`IconTile` - Updated visual design of `IconTile` to make it distinguishable from secondary `IconButton`.

packages/components/src/styles/components/icon-tile.scss

@@ -11,15 +11,13 @@ $hds-icon-tile-sizes: ( "small", "medium", "large" );
 $hds-icon-tile-types: ( "object","resource","logo" );
 $hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "vault-secrets", "vault-radar", "waypoint" );
 $hds-icon-tile-border-width: 1px;
-$hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
 
 
 .hds-icon-tile {
   position: relative;
   display: flex;
   border: $hds-icon-tile-border-width solid transparent;
   border-radius: 4px;
-  box-shadow: $hds-icon-tile-box-shadow;
 }
 
 .hds-icon-tile__icon,
@@ -36,7 +34,6 @@ $hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
   box-sizing: content-box; // the border is outside
   background-color: var(--token-color-surface-primary);
   border: 1px solid var(--token-color-border-primary);
-  box-shadow: $hds-icon-tile-box-shadow;
 }
 
 .hds-icon-tile__extra-icon {
@@ -63,9 +60,9 @@ $hds-icon-tile-size-props: (
     "border-radius": 6px,
     "icon-size": 1.5rem, // 24px
     "logo-size": 1.75rem, // 28px
-    "extra-size": 1.5rem, // 24px
+    "extra-size": 1.25rem, // 20px
     "extra-border-radius": 5px,
-    "extra-icon-size": 1rem,
+    "extra-icon-size": .75rem, // 12px
   ),
   "large": (
     "size": 3rem, // 48px
@@ -121,23 +118,20 @@ $hds-icon-tile-size-props: (
 .hds-icon-tile--icon {
   &.hds-icon-tile--color-neutral {
     color: var(--token-color-foreground-faint);
-    background-color: var(--token-color-surface-faint);
-    border-color: var(--token-color-border-primary);
+    background-color: var(--token-color-surface-strong);
   }
 
   @each $product in $hds-icon-tile-colors-products {
     @if ($product == "hcp") {
       // exception for HCP (we use neutral colors, we don't have specific product colors for foreground/background)
       &.hds-icon-tile--color-hcp {
         color: var(--token-color-palette-#{$product}-brand);
-        background-color: var(--token-color-surface-faint);
-        border-color: var(--token-color-border-primary);
+        background-color: var(--token-color-surface-strong);
       }
     } @else {
       &.hds-icon-tile--color-#{$product} {
         color: var(--token-color-#{$product}-foreground);
-        background: linear-gradient(135deg, var(--token-color-#{$product}-gradient-faint-start) 0%, var(--token-color-#{$product}-gradient-faint-stop) 100%);
-        border-color: var(--token-color-#{$product}-border);
+        background-color: var(--token-color-#{$product}-surface);
       }
     }
   }

website/docs/components/icon-tile/index.md

@@ -27,3 +27,7 @@ navigation:
 <section data-tab="Accessibility">
   @include "partials/accessibility/accessibility.md"
 </section>
+
+<section data-tab="Version history">
+  @include "partials/version-history/4.15.0.md"
+</section>

website/docs/components/icon-tile/partials/guidelines/guidelines.md

@@ -2,60 +2,50 @@
 
 ### When to use
 
-To represent an object or as part of a page title.
+- To represent an object or as part of a page title.
 
 ### When not to use
 
-Within a paragraph where an object is referred to.
+- When an interactive or clickable element is needed. Use a [Button](https://helios.hashicorp.design/components/button) instead.
 
 ## Color
 
 Use **Neutral** if the object or page is not a specific product feature but something universal. For example, for a “Dashboard” or “User” page.
 
-<Doc::Layout @spacing="16px">
-  <Hds::IconTile @color="neutral" @icon="dashboard" />
-</Doc::Layout>
+![Icon Tile with neutral color and dashboard icon](/assets/components/icon-tile/icon-tile.png)
+
 
 Use a **product-specific color** for objects or pages directly related to a product. For example:
 
 - For a page showing a “Consul cluster”
 - In a card or table row that represents a “Consul cluster”
 
-<Doc::Layout @spacing="12px">
-  <Hds::IconTile @color="neutral" @icon="user" />
-  <Hds::IconTile @color="boundary" @icon="crosshair" />
-  <Hds::IconTile @color="consul" @icon="server-cluster" />
-  <Hds::IconTile @color="nomad" @icon="briefcase" />
-  <Hds::IconTile @color="packer" @icon="layers" />
-  <Hds::IconTile @color="terraform" @icon="grid" />
-  <Hds::IconTile @color="vagrant" @icon="box" />
-  <Hds::IconTile @color="vault" @icon="key" />
-  <Hds::IconTile @color="vault-secrets" @icon="fingerprint" />
-  <Hds::IconTile @color="waypoint" @icon="cloud-upload" />
-</Doc::Layout>
+![Product specific Icon Tiles](/assets/components/icon-tile/icon-tiles-colors.png)
 
 <Doc::ImageCaption @text="Examples of product-specific Icon Tiles"/>
 
 ## Size
 
 Medium is the default size, but we recommend using the size that best fits the supporting text or UI. For example, don’t use large Icon Tiles in tables.
 
-<Doc::Layout @spacing="12px">
-  <Hds::IconTile @color="neutral" @icon="dashboard" @size="large" />
-  <Hds::IconTile @color="neutral" @icon="dashboard" @size="medium" />
-  <Hds::IconTile @color="neutral" @icon="dashboard" @size="small" />
-</Doc::Layout>
+![Icon Tile sizes](/assets/components/icon-tile/icon-tiles-sizes.png)
 
 ## Secondary icon
 
 A secondary icon can be added to provide additional context. For example, for an “Add user” page the “plus” icon indicates the action.
 
-<Doc::Layout @spacing="16px">
-  <Hds::IconTile @color="neutral" @icon="user" @size="large" @iconSecondary="plus"/>
-  <Hds::IconTile @color="neutral" @icon="user" @size="medium" @iconSecondary="plus"/>
-  <Hds::IconTile @color="neutral" @icon="user" @size="small" @iconSecondary="plus"/>
-</Doc::Layout>
+![Icon Tiles with secondary icon](/assets/components/icon-tile/icon-tiles-scondary-icon.png)
 
 ## Using with content
 
-Icon Tiles should not appear without accompanying content. Instead, they should be presented alongside a text label for the object or page they are being used to represent. We recommend thinking of them as an accessory.
+Use Icon Tiles as a decorative element or accessory next to a text label for the object or page they are being used to represent. Icon Tiles should not be used without accompanying content.
+
+## Using with interactive elements
+
+Avoid placing Icon Tiles immediately next to secondary icon only button variants. Even though they visually look different, their proximity can confuse users because they share similar characteristics. [Distinguishability](https://www.w3.org/WAI/WCAG21/Understanding/distinguishable), an accessibility standard, discourages interfaces from using elements that look alike but behave differently when in close visual proximity. 
+
+!!! Info
+
+For more information on making interactive and non-interactive elements easily distinguishable, refer to the [WCAG 2.1 Guideline 1.4: Distinguishable.](https://www.w3.org/WAI/WCAG21/Understanding/distinguishable)
+
+!!!

website/docs/components/icon-tile/partials/version-history/4.15.0.md

@@ -0,0 +1,5 @@
+## 4.15.0
+
+### Updated
+
+Updated visual design of `IconTile` to make it distinguishable from secondary `IconButton`.