refactor(tile-group): add review suggestions (#8828)

**Related Issue:** #8806

## Summary

This is a follow-up for #8806, addressing comments in the review. No
changes to functionality.

---------

Co-authored-by: Erik Harper <eriklharper@pm.me>

Author: eriklharper

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

@@ -84,7 +84,6 @@ import { TableMessages } from "./components/table/assets/table/t9n";
 import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
 import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
 import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
-import { TileGroupLayout } from "./components/tile-group/interfaces";
 import { TileSelectType } from "./components/tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
 import { TipMessages } from "./components/tip/assets/tip/t9n";
@@ -171,7 +170,6 @@ export { TableMessages } from "./components/table/assets/table/t9n";
 export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
 export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
 export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
-export { TileGroupLayout } from "./components/tile-group/interfaces";
 export { TileSelectType } from "./components/tile-select/interfaces";
 export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
 export { TipMessages } from "./components/tip/assets/tip/t9n";
@@ -4995,7 +4993,7 @@ export namespace Components {
         /**
           * Defines the layout of the component.  Use `"horizontal"` for rows, and `"vertical"` for a single column.
          */
-        "layout": TileGroupLayout;
+        "layout": Exclude<Layout, "grid">;
         /**
           * Specifies the size of the component.
          */
@@ -12521,7 +12519,7 @@ declare namespace LocalJSX {
         /**
           * Defines the layout of the component.  Use `"horizontal"` for rows, and `"vertical"` for a single column.
          */
-        "layout"?: TileGroupLayout;
+        "layout"?: Exclude<Layout, "grid">;
         /**
           * Specifies the size of the component.
          */

packages/calcite-components/src/components/tile-group/interfaces.ts

@@ -1,3 +1,3 @@
 export const CSS = {
-  tileGroup: "tile-group",
+  container: "container",
 };

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

@@ -2,35 +2,32 @@
   box-sizing: border-box;
   display: inline-block;
 
-  .tile-group {
-    display: grid;
-    grid-auto-rows: minmax(auto, 1fr);
-  }
-
   ::slotted(calcite-tile) {
     margin-block-end: var(--calcite-spacing-px);
     margin-inline-end: var(--calcite-spacing-px);
   }
 }
-
+.container {
+  display: grid;
+  grid-auto-rows: minmax(auto, 1fr);
+}
 :host([scale="s"]) {
-  .tile-group {
+  .container {
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   }
 }
 :host([scale="m"]) {
-  .tile-group {
+  .container {
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   }
 }
 :host([scale="l"]) {
-  .tile-group {
+  .container {
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   }
 }
-
 :host([layout="vertical"]) {
-  .tile-group {
+  .container {
     display: flex;
     flex-direction: column;
   }

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

@@ -12,7 +12,7 @@ export default {
   ...storyFilters(),
 };
 
-export const playground = (): string => html`
+export const simple = (): string => html`
   <calcite-tile-group
     dir="${select("dir", ["ltr", "rtl"], "ltr", "Tile Group")}"
     ${boolean("disabled", false)}

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

@@ -6,8 +6,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import { TileGroupLayout } from "./interfaces";
-import { Scale } from "../interfaces";
+import { Layout, Scale } from "../interfaces";
 import { CSS } from "./resources";
 
 /**
@@ -33,7 +32,7 @@ export class TileGroup implements InteractiveComponent {
    *
    * Use `"horizontal"` for rows, and `"vertical"` for a single column.
    */
-  @Prop({ reflect: true }) layout: TileGroupLayout = "horizontal";
+  @Prop({ reflect: true }) layout: Exclude<Layout, "grid"> = "horizontal";
 
   /**
    * Specifies the size of the component.
@@ -85,7 +84,7 @@ export class TileGroup implements InteractiveComponent {
   render(): VNode {
     return (
       <InteractiveContainer disabled={this.disabled}>
-        <div class={CSS.tileGroup}>
+        <div class={CSS.container}>
           <slot onSlotchange={this.updateTiles} />
         </div>
       </InteractiveContainer>

packages/calcite-components/src/components/tile-group/tile-group.tsx

@@ -78,6 +78,7 @@ export const create: () => Config = () => ({
     { components: ["calcite-tab", "calcite-tab-title", "calcite-tab-nav", "calcite-tabs"] },
     { components: ["calcite-text-area"] },
     { components: ["calcite-tile"] },
+    { components: ["calcite-tile-group"] },
     { components: ["calcite-tile-select-group", "calcite-tile-select"] },
     { components: ["calcite-tip", "calcite-tip-group", "calcite-tip-manager"] },
     { components: ["calcite-tooltip"] },