diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 0cb35ed0e3c..15f6a6fa26f 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/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; "calcite-tabs": LocalJSX.CalciteTabs & JSXBase.HTMLAttributes; "calcite-text-area": LocalJSX.CalciteTextArea & JSXBase.HTMLAttributes; + /** + * @deprecated use `content-top` slot instead + * @deprecated use `content-bottom` slot instead + */ "calcite-tile": LocalJSX.CalciteTile & JSXBase.HTMLAttributes; "calcite-tile-group": LocalJSX.CalciteTileGroup & JSXBase.HTMLAttributes; "calcite-tile-select": LocalJSX.CalciteTileSelect & JSXBase.HTMLAttributes; diff --git a/packages/calcite-components/src/components/tile/resources.ts b/packages/calcite-components/src/components/tile/resources.ts index 09613e65cb1..ea9d3d028b6 100644 --- a/packages/calcite-components/src/components/tile/resources.ts +++ b/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", }; diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss index c1324d4e007..b23cfc38094 100644 --- a/packages/calcite-components/src/components/tile/tile.scss +++ b/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 { diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts index 29fdb543588..534158f2a64 100644 --- a/packages/calcite-components/src/components/tile/tile.stories.ts +++ b/packages/calcite-components/src/components/tile/tile.stories.ts @@ -55,6 +55,10 @@ export const allVariants_NoTest = (): string => html` margin: 25px 0; border-top: 1px solid var(--calcite-color-border-2); } + calcite-chip.new { + background-color: #d8efda; + color: #13631f; + }
scale
@@ -162,9 +166,39 @@ export const allVariants_NoTest = (): string => html`
- + +
+
large visual
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
link large visual
+ +
+ +
+
+ +
+
+ +
+
+ +
-
slots
+
content-top slot
html` icon="layers" scale="s" > - - + New
@@ -184,25 +217,204 @@ export const allVariants_NoTest = (): string => html` icon="layers" scale="m" > - - + New + +
+
+ + New + +
+
+ + +
+
content-bottom slot
+ +
+ + New + +
+
+ + New + +
+
+ + New + +
+
+ + +
+
link with content-top slot
+ +
+ + New + +
+
+ + New + +
+
+ + New + +
+
+ + +
+
link with content-bottom slot
+ +
+ + New + +
+
+ + New
+ New + +
+
+ + +
+
only content-top slot
+ +
+ + + +
+
+ + + +
+
+ + + +
+
+ + +
+
content-start slot (deprecated)
+ +
+ + + +
+
+ - + +
+
+ +
+
-
links with slots
+
link with content-start slot (deprecated)
html` href="/" icon="layers" scale="s" + > + + +
+
+ + +
+
+ + + +
+
+ + +
+
content-end slot (deprecated)
+ +
+ + + +
+
+
+
+ + + +
+
+ + +
+
link with content-end slot (deprecated)
+ +
+ + + +
html` icon="layers" scale="m" > -
@@ -236,39 +521,89 @@ export const allVariants_NoTest = (): string => html` icon="layers" scale="l" > - - +
- +
-
large visual
+
content-start & content-end slots (deprecated)
- + + + +
- + + + +
- + + + +
- +
-
large visual with link
+
link with content-start & content-end slots (deprecated)
- + + + +
- + + + +
- + + + +
@@ -380,9 +715,9 @@ export const allVariants_NoTest = (): string => html` - +
-
slots centered
+
content-start & content-end slot centered (deprecated)
html` icon="layers" scale="s" > - - + +
@@ -404,7 +739,6 @@ export const allVariants_NoTest = (): string => html` icon="layers" scale="m" > -
@@ -416,15 +750,15 @@ export const allVariants_NoTest = (): string => html` icon="layers" scale="l" > - - + +
- +
-
links with slots centered
+
link with content-start & content-end slot centered (deprecated)
html` icon="layers" scale="s" > - - + +
@@ -448,7 +782,6 @@ export const allVariants_NoTest = (): string => html` icon="layers" scale="m" > -
@@ -461,8 +794,8 @@ export const allVariants_NoTest = (): string => html` icon="layers" scale="l" > - - + +
@@ -487,6 +820,17 @@ export const darkModeRTL_TestOnly = (): string => html` `; darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault }; +export const contentTopBotton_TestOnly = (): string => html` + + + + +`; + export const contentStartRTL_TestOnly = (): string => html` { - 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 (
+ {icon && }
-
- -
+
{heading &&
{heading}
} {description &&
{description}
}
-
- -
+
+
); } diff --git a/packages/calcite-components/src/demos/tile.html b/packages/calcite-components/src/demos/tile.html index 52516553121..bb73d695ea8 100644 --- a/packages/calcite-components/src/demos/tile.html +++ b/packages/calcite-components/src/demos/tile.html @@ -26,7 +26,10 @@ flex: 0 0 21%; align-self: center; } - + calcite-chip.new { + background-color: #d8efda; + color: #13631f; + } hr { margin: 25px 0; border-top: 1px solid var(--calcite-color-border-2); @@ -144,9 +147,39 @@ - + +
+
large visual
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
link large visual
+ +
+ +
+
+ +
+
+ +
+
+ +
-
slots
+
content-top slot
- - + New
@@ -166,8 +198,7 @@ icon="layers" scale="m" > - - + New
@@ -176,15 +207,195 @@ heading="Tile title lorem ipsum" icon="layers" scale="l" + > + New + +
+
+ + +
+
content-bottom slot
+ +
+ + New + +
+
+ + New + +
+
+ + New + +
+
+ + +
+
link with content-top slot
+ +
+ + New + +
+
+ + New + +
+
+ + New + +
+
+ + +
+
link with content-bottom slot
+ +
+ + New + +
+
+ + New + +
+
+ + New + +
+
+ + +
+
only content-top slot
+ +
+ + + +
+
+ + + +
+
+ + + +
+
+ + +
+
content-start slot (deprecated)
+ +
+ + + +
+
+ - + +
+
+ +
+
-
links with slots
+
link with content-start slot (deprecated)
+ + +
+
+ + +
+
+ + + +
+
+ + +
+
content-end slot (deprecated)
+ +
+ + + +
+
+
+
+ + + +
+
+ + +
+
link with content-end slot (deprecated)
+ +
+ + + +
-
@@ -218,39 +502,89 @@ icon="layers" scale="l" > - - +
- +
-
large visual
+
content-start & content-end slots (deprecated)
- + + + +
- + + + +
- + + + +
- +
-
large visual with link
+
link with content-start & content-end slots (deprecated)
- + + + +
- + + + +
- + + + +
@@ -362,9 +696,9 @@ - +
-
slots centered
+
content-start & content-end slot centered (deprecated)
- - + +
@@ -386,7 +720,6 @@ icon="layers" scale="m" > -
@@ -398,15 +731,15 @@ icon="layers" scale="l" > - - + +
- +
-
links with slots centered
+
link with content-start & content-end slot centered (deprecated)
- - + +
@@ -430,7 +763,6 @@ icon="layers" scale="m" > -
@@ -443,8 +775,8 @@ icon="layers" scale="l" > - - + +