diff --git a/packages/calcite-components/src/components/tile-group/tile-group.stories.ts b/packages/calcite-components/src/components/tile-group/tile-group.stories.ts index b53f2e10745..b7a2e498945 100644 --- a/packages/calcite-components/src/components/tile-group/tile-group.stories.ts +++ b/packages/calcite-components/src/components/tile-group/tile-group.stories.ts @@ -1,5 +1,6 @@ import { select, boolean } from "../../../.storybook/fake-knobs"; import { html } from "../../../support/formatting"; +import { placeholderImage } from "../../../.storybook/placeholderImage"; export default { title: "Components/Tiles/Tile Group", @@ -38,7 +39,7 @@ export const simple = (): string => html` `; -export const allVariants = (): string => html` +export const allVariantsHorizontal = (): string => html`
@@ -1184,18 +1535,22 @@ export const allVariants = (): string => html`
@@ -1204,18 +1559,22 @@ export const allVariants = (): string => html` @@ -1224,18 +1583,22 @@ export const allVariants = (): string => html` @@ -1249,18 +1612,22 @@ export const allVariants = (): string => html` @@ -1269,18 +1636,22 @@ export const allVariants = (): string => html` @@ -1289,18 +1660,22 @@ export const allVariants = (): string => html` @@ -1314,18 +1689,22 @@ export const allVariants = (): string => html` @@ -1334,18 +1713,22 @@ export const allVariants = (): string => html` @@ -1354,18 +1737,22 @@ export const allVariants = (): string => html` @@ -1379,18 +1766,22 @@ export const allVariants = (): string => html` @@ -1399,18 +1790,22 @@ export const allVariants = (): string => html` @@ -1419,18 +1814,22 @@ export const allVariants = (): string => html` @@ -1444,18 +1843,22 @@ export const allVariants = (): string => html` @@ -1464,18 +1867,22 @@ export const allVariants = (): string => html` @@ -1484,18 +1891,22 @@ export const allVariants = (): string => html` @@ -1510,21 +1921,25 @@ export const allVariants = (): string => html` heading="Tile heading lorem ipsum" href="/" description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall." + icon="layers" > @@ -1534,21 +1949,25 @@ export const allVariants = (): string => html` heading="Tile heading lorem ipsum" href="/" description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall." + icon="layers" > @@ -1558,21 +1977,25 @@ export const allVariants = (): string => html` heading="Tile heading lorem ipsum" href="/" description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall." + icon="layers" > @@ -1586,18 +2009,22 @@ export const allVariants = (): string => html` @@ -1606,18 +2033,22 @@ export const allVariants = (): string => html` @@ -1626,18 +2057,22 @@ export const allVariants = (): string => html` @@ -1816,4 +2251,62 @@ export const allVariants = (): string => html` + + +
+
icon and heading (large visual)
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + +
+
icon and heading (large visual) links
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
`; diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss index 7837beffc90..bfc959a7290 100644 --- a/packages/calcite-components/src/components/tile/tile.scss +++ b/packages/calcite-components/src/components/tile/tile.scss @@ -250,3 +250,7 @@ } @include base-component(); + +::slotted(*) { + max-inline-size: 100%; +} diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts index 910cd0394f9..f6e676b2e1a 100644 --- a/packages/calcite-components/src/components/tile/tile.stories.ts +++ b/packages/calcite-components/src/components/tile/tile.stories.ts @@ -2,6 +2,7 @@ import { select, text } from "../../../.storybook/fake-knobs"; import { iconNames, boolean } from "../../../.storybook/helpers"; import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { placeholderImage } from "../../../.storybook/placeholderImage"; export default { title: "Components/Tiles/Tile", @@ -347,26 +348,17 @@ export const allVariants = (): string => html`
- +
- +
- +
@@ -377,26 +369,17 @@ export const allVariants = (): string => html`
- +
- +
- +
@@ -407,38 +390,20 @@ export const allVariants = (): string => html`
- - + +
- - + +
- - + +
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html index 013d7016acf..c139d6c1fe3 100644 --- a/packages/calcite-components/src/demos/tile-group.html +++ b/packages/calcite-components/src/demos/tile-group.html @@ -1277,6 +1277,321 @@ + +
+
content-top slotted images
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + +
+
content-bottom slotted images
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + +
+
slotted images in both slots
+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+
diff --git a/packages/calcite-components/src/demos/tile.html b/packages/calcite-components/src/demos/tile.html index 4a50cd1b5b8..af2fb2c7c92 100644 --- a/packages/calcite-components/src/demos/tile.html +++ b/packages/calcite-components/src/demos/tile.html @@ -334,7 +334,7 @@
@@ -342,7 +342,7 @@
@@ -350,7 +350,7 @@
@@ -364,7 +364,7 @@
@@ -372,7 +372,7 @@
@@ -380,7 +380,7 @@
@@ -394,11 +394,11 @@
@@ -406,11 +406,11 @@
@@ -418,11 +418,11 @@