feat(tile): add content-top and content-bottom slots, deprecate content-start and content-end slots (#8984)

**Related Issue:** #3462 

## Summary

This PR adds 2 new slots `content-top` and `content-bottom` to replace
the now deprecated `content-start` and `content-end` slots.

---------

Co-authored-by: Erik Harper <[email protected]>

Author: eriklharper

packages/calcite-components/src/components.d.ts

@@ -5007,6 +5007,10 @@ export namespace Components {
          */
         "wrap": "soft" | "hard";
     }
+    /**
+     * @deprecated use `content-top` slot instead
+     * @deprecated use `content-bottom` slot instead
+     */
     interface CalciteTile {
         /**
           * When `true`, the component is active.
@@ -7239,6 +7243,10 @@ declare global {
         prototype: HTMLCalciteTextAreaElement;
         new (): HTMLCalciteTextAreaElement;
     };
+    /**
+     * @deprecated use `content-top` slot instead
+     * @deprecated use `content-bottom` slot instead
+     */
     interface HTMLCalciteTileElement extends Components.CalciteTile, HTMLStencilElement {
     }
     var HTMLCalciteTileElement: {
@@ -12620,6 +12628,10 @@ declare namespace LocalJSX {
          */
         "wrap"?: "soft" | "hard";
     }
+    /**
+     * @deprecated use `content-top` slot instead
+     * @deprecated use `content-bottom` slot instead
+     */
     interface CalciteTile {
         /**
           * When `true`, the component is active.
@@ -13309,6 +13321,10 @@ declare module "@stencil/core" {
             "calcite-table-row": LocalJSX.CalciteTableRow & JSXBase.HTMLAttributes<HTMLCalciteTableRowElement>;
             "calcite-tabs": LocalJSX.CalciteTabs & JSXBase.HTMLAttributes<HTMLCalciteTabsElement>;
             "calcite-text-area": LocalJSX.CalciteTextArea & JSXBase.HTMLAttributes<HTMLCalciteTextAreaElement>;
+            /**
+             * @deprecated use `content-top` slot instead
+             * @deprecated use `content-bottom` slot instead
+             */
             "calcite-tile": LocalJSX.CalciteTile & JSXBase.HTMLAttributes<HTMLCalciteTileElement>;
             "calcite-tile-group": LocalJSX.CalciteTileGroup & JSXBase.HTMLAttributes<HTMLCalciteTileGroupElement>;
             "calcite-tile-select": LocalJSX.CalciteTileSelect & JSXBase.HTMLAttributes<HTMLCalciteTileSelectElement>;

packages/calcite-components/src/components/tile/resources.ts

@@ -2,13 +2,14 @@ export const CSS = {
   container: "container",
   content: "content",
   contentContainer: "content-container",
-  contentSlotContainer: "content-slot-container",
   description: "description",
   heading: "heading",
   largeVisual: "large-visual",
 };
 
 export const SLOTS = {
-  contentStart: "content-start",
+  contentBottom: "content-bottom",
   contentEnd: "content-end",
+  contentStart: "content-start",
+  contentTop: "content-top",
 };

packages/calcite-components/src/components/tile/tile.scss

@@ -21,6 +21,7 @@
   min-inline-size: 140px;
 
   .container {
+    align-items: flex-start;
     background-color: var(--calcite-tile-background-color);
     block-size: var(--calcite-container-size-content-fluid);
     box-sizing: border-box;
@@ -36,22 +37,15 @@
 
   .content-container {
     display: flex;
+    gap: var(--calcite-spacing-md);
+    inline-size: 100%;
     outline-color: transparent;
     padding: 0;
-    inline-size: 100%;
   }
 
-  .content-slot-container {
-    align-items: center;
+  .content {
     display: flex;
-
-    &:first-child {
-      padding-inline: 0 0.75rem;
-    }
-
-    &:last-child {
-      padding-inline: 0.75rem 0;
-    }
+    flex-direction: column;
   }
 
   .heading {
@@ -89,12 +83,17 @@
     align-items: center;
     text-align: center;
   }
+  slot[name="content-start"]::slotted(*),
+  slot[name="content-end"]::slotted(*) {
+    align-self: center;
+  }
 }
 
 :host([scale="s"]) {
   max-inline-size: 400px;
   min-inline-size: 100px;
-  .container {
+  .container,
+  .content-container {
     gap: var(--calcite-spacing-sm);
   }
   .heading {
@@ -110,7 +109,8 @@
 :host([scale="l"]) {
   max-inline-size: 520px;
   min-inline-size: 160px;
-  .container {
+  .container,
+  .content-container {
     gap: var(--calcite-spacing-xl);
   }
   .heading {

packages/calcite-components/src/components/tile/tile.stories.ts

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, State, VNode } from "@stencil/core";
+import { Component, Element, h, Prop, VNode } from "@stencil/core";
 import {
   connectInteractive,
   disconnectInteractive,
@@ -8,11 +8,12 @@ import {
 } from "../../utils/interactive";
 import { CSS, SLOTS } from "./resources";
 import { Alignment, Scale } from "../interfaces";
-import { slotChangeHasAssignedElement } from "../../utils/dom";
 
 /**
- * @slot content-start - A slot for adding non-actionable elements before the component's content.
- * @slot content-end - A slot for adding non-actionable elements after the component's content.
+ * @slot content-top - A slot for adding non-actionable elements above the component's content.  Content slotted here will render in place of the `icon` property.
+ * @slot content-bottom - A slot for adding non-actionable elements below the component's content.
+ * @slot content-start - [Deprecated] use `content-top` slot instead.  A slot for adding non-actionable elements before the component's content.
+ * @slot content-end - [Deprecated] use `content-bottom` slot instead. A slot for adding non-actionable elements after the component's content.
  */
 @Component({
   tag: "calcite-tile",
@@ -88,24 +89,6 @@ export class Tile implements InteractiveComponent {
 
   @Element() el: HTMLCalciteTileElement;
 
-  @State() hasContentStart = false;
-
-  @State() hasContentEnd = false;
-
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-
-  private handleContentStartSlotChange = (event: Event): void => {
-    this.hasContentStart = slotChangeHasAssignedElement(event);
-  };
-
-  private handleContentEndSlotChange = (event: Event): void => {
-    this.hasContentEnd = slotChangeHasAssignedElement(event);
-  };
-
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -131,24 +114,22 @@ export class Tile implements InteractiveComponent {
   // --------------------------------------------------------------------------
 
   renderTile(): VNode {
-    const { icon, hasContentStart, hasContentEnd, heading, description, iconFlipRtl } = this;
+    const { icon, heading, description, iconFlipRtl } = this;
     const isLargeVisual = heading && icon && !description;
 
     return (
       <div class={{ [CSS.container]: true, [CSS.largeVisual]: isLargeVisual }}>
+        <slot name={SLOTS.contentTop} />
         {icon && <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale="l" />}
         <div class={CSS.contentContainer}>
-          <div class={{ [CSS.contentSlotContainer]: hasContentStart }}>
-            <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />
-          </div>
+          <slot name={SLOTS.contentStart} />
           <div class={CSS.content}>
             {heading && <div class={CSS.heading}>{heading}</div>}
             {description && <div class={CSS.description}>{description}</div>}
           </div>
-          <div class={{ [CSS.contentSlotContainer]: hasContentEnd }}>
-            <slot name={SLOTS.contentEnd} onSlotchange={this.handleContentEndSlotChange} />
-          </div>
+          <slot name={SLOTS.contentEnd} />
         </div>
+        <slot name={SLOTS.contentBottom} />
       </div>
     );
   }