diff --git a/package-lock.json b/package-lock.json index b1be5b47536..41e139b3cba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42050,7 +42050,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "2.4.1-next.0", + "version": "2.5.0-next.0", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.6.1", @@ -46128,10 +46128,10 @@ }, "packages/calcite-components-angular/projects/component-library": { "name": "@esri/calcite-components-angular", - "version": "2.4.1-next.0", + "version": "2.5.0-next.0", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.4.1-next.0", + "@esri/calcite-components": "^2.5.0-next.0", "tslib": "2.6.2" }, "peerDependencies": { @@ -46141,10 +46141,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "2.4.1-next.0", + "version": "2.5.0-next.0", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.4.1-next.0" + "@esri/calcite-components": "^2.5.0-next.0" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index d873cd9c80d..575843dadff 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.5.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.4.1-next.1...@esri/calcite-components-angular@2.5.0-next.0) (2024-02-09) + +**Note:** Version bump only for package @esri/calcite-components-angular + +## [2.4.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.4.1-next.0...@esri/calcite-components-angular@2.4.1-next.1) (2024-02-09) + +**Note:** Version bump only for package @esri/calcite-components-angular + ## [2.4.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.4.0...@esri/calcite-components-angular@2.4.1-next.0) (2024-02-07) **Note:** Version bump only for package @esri/calcite-components-angular diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index 9c25dd05f42..e12b1fdf654 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-angular", - "version": "2.4.1-next.0", + "version": "2.5.0-next.0", "sideEffects": false, "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "A set of Angular components that wrap Esri's Calcite Components.", @@ -20,7 +20,7 @@ "@angular/core": ">=16.0.0" }, "dependencies": { - "@esri/calcite-components": "^2.4.1-next.0", + "@esri/calcite-components": "^2.5.0-next.0", "tslib": "2.6.2" }, "lerna": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 648914c679b..04b29311919 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/packages/calcite-components-react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.5.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.4.1-next.1...@esri/calcite-components-react@2.5.0-next.0) (2024-02-09) + +**Note:** Version bump only for package @esri/calcite-components-react + +## [2.4.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.4.1-next.0...@esri/calcite-components-react@2.4.1-next.1) (2024-02-09) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [2.4.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.4.0...@esri/calcite-components-react@2.4.1-next.0) (2024-02-07) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 2a9dd122cda..ab12d3107c6 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "2.4.1-next.0", + "version": "2.5.0-next.0", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", @@ -23,7 +23,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "^2.4.1-next.0" + "@esri/calcite-components": "^2.5.0-next.0" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index 948d341979f..3145bbaed54 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.5.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.4.1-next.1...@esri/calcite-components@2.5.0-next.0) (2024-02-09) + +### Features + +- **tile:** add responsive layout features ([#8691](https://github.com/Esri/calcite-design-system/issues/8691)) ([f4f872e](https://github.com/Esri/calcite-design-system/commit/f4f872eeba08f1063457b97889f823d5c09d8974)), closes [#6690](https://github.com/Esri/calcite-design-system/issues/6690) [#6662](https://github.com/Esri/calcite-design-system/issues/6662) + +## [2.4.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.4.1-next.0...@esri/calcite-components@2.4.1-next.1) (2024-02-09) + +### Bug Fixes + +- **color-picker:** alpha-channel slider scope updates to reflect current opacity ([#8700](https://github.com/Esri/calcite-design-system/issues/8700)) ([cd0b532](https://github.com/Esri/calcite-design-system/commit/cd0b5328a902ae2a909ecb8ec2648bb7541b95d2)), closes [#7761](https://github.com/Esri/calcite-design-system/issues/7761) +- **combobox:** avoid inline-start padding on combobox label when icon is displayed ([#8672](https://github.com/Esri/calcite-design-system/issues/8672)) ([9eb680a](https://github.com/Esri/calcite-design-system/commit/9eb680a5045e142d6db4c1d971c69961a73a44ee)), closes [#8396](https://github.com/Esri/calcite-design-system/issues/8396) +- **list-item:** Fix slotted list border styling. ([#8712](https://github.com/Esri/calcite-design-system/issues/8712)) ([855f98d](https://github.com/Esri/calcite-design-system/commit/855f98d897e2158e58bb56d6e694d9bd08e4dbac)), closes [#8684](https://github.com/Esri/calcite-design-system/issues/8684) +- **loader:** optimize animation performance ([#8714](https://github.com/Esri/calcite-design-system/issues/8714)) ([1ed8a01](https://github.com/Esri/calcite-design-system/commit/1ed8a01cb4d187afe374044b03b7fe5851c9a135)), closes [#8709](https://github.com/Esri/calcite-design-system/issues/8709) +- **preset:** add back legacy token for calcite-ui-focus-color ([#8694](https://github.com/Esri/calcite-design-system/issues/8694)) ([1d1b933](https://github.com/Esri/calcite-design-system/commit/1d1b933eafb8e9c3b8058aa1acaa9c0c990bd84b)), closes [#8548](https://github.com/Esri/calcite-design-system/issues/8548) + ## [2.4.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.4.0...@esri/calcite-components@2.4.1-next.0) (2024-02-07) ### Bug Fixes diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts index 59c4493fc6f..e89a48531ff 100644 --- a/packages/calcite-components/calcite-preset.ts +++ b/packages/calcite-components/calcite-preset.ts @@ -258,14 +258,17 @@ export default { "outline-color": "transparent", }, ".focus-normal": { - outline: "2px solid var(--calcite-color-brand-hover, var(--calcite--color-brand))", + outline: + "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))", }, ".focus-outset": { - outline: "2px solid var(--calcite-color-brand)", + outline: + "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))", "outline-offset": invert("2px", "--calcite-offset-invert-focus"), }, ".focus-inset": { - outline: "2px solid var(--calcite-color-brand)", + outline: + "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)))", "outline-offset": invert("-2px", "--calcite-offset-invert-focus"), }, ".focus-outset-danger": { diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 8d6758c83e2..2eae3c67b92 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "2.4.1-next.0", + "version": "2.5.0-next.0", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 2ac3aa8b583..273ff7865fd 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4935,6 +4935,10 @@ export namespace Components { * When `true`, the component is active. */ "active": boolean; + /** + * Specifies the alignment of the Tile's content. + */ + "alignment": Exclude; /** * A description for the component, which displays below the heading. */ @@ -12427,6 +12431,10 @@ declare namespace LocalJSX { * When `true`, the component is active. */ "active"?: boolean; + /** + * Specifies the alignment of the Tile's content. + */ + "alignment"?: Exclude; /** * A description for the component, which displays below the heading. */ diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index 5a267902bf0..e12d1c8c840 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -1382,7 +1382,7 @@ export class ColorPicker this.colorFieldScopeTop = y; }); - this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor); + this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor, false); } private drawThumb( @@ -1391,6 +1391,7 @@ export class ColorPicker x: number, y: number, color: Color, + applyAlpha: boolean, ): void { const startAngle = 0; const endAngle = 2 * Math.PI; @@ -1400,14 +1401,28 @@ export class ColorPicker context.arc(x, y, radius, startAngle, endAngle); context.fillStyle = "#fff"; context.fill(); + context.strokeStyle = "rgba(0,0,0,0.3)"; context.lineWidth = outlineWidth; context.stroke(); + if (applyAlpha && color.alpha() < 1) { + const pattern = context.createPattern(this.getCheckeredBackgroundPattern(), "repeat"); + context.beginPath(); + context.arc(x, y, radius - 3, startAngle, endAngle); + context.fillStyle = pattern; + context.fill(); + } + + context.globalCompositeOperation = "source-atop"; + context.beginPath(); context.arc(x, y, radius - 3, startAngle, endAngle); - context.fillStyle = color.rgb().alpha(1).string(); + const alpha = applyAlpha ? color.alpha() : 1; + context.fillStyle = color.rgb().alpha(alpha).string(); context.fill(); + + context.globalCompositeOperation = "source-over"; } private drawActiveHueSliderColor(): void { @@ -1434,7 +1449,7 @@ export class ColorPicker this.hueScopeLeft = sliderBoundX; }); - this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor); + this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor, false); } private drawHueSlider(): void { @@ -1589,7 +1604,7 @@ export class ColorPicker this.opacityScopeLeft = sliderBoundX; }); - this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor); + this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor, true); } private getSliderBoundX(x: number, width: number, radius: number): number { diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index bbe513cda45..753c3386b0a 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -1632,7 +1632,7 @@ export class Combobox return ( this.showingInlineIcon && ( - + + {!singleSelectionMode && !singleSelectionDisplay && this.renderChips()} diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss index aee5b7569e0..0bcca595fed 100755 --- a/packages/calcite-components/src/components/list-item/list-item.scss +++ b/packages/calcite-components/src/components/list-item/list-item.scss @@ -201,7 +201,8 @@ td:focus { } } -::slotted(calcite-list-item) { +::slotted(calcite-list-item), +::slotted(calcite-list) { @apply border-solid border-0 border-t border-color-3; } diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts index 5e4458ea756..2682ab042b8 100644 --- a/packages/calcite-components/src/components/list/list.stories.ts +++ b/packages/calcite-components/src/components/list/list.stories.ts @@ -934,3 +934,23 @@ export const filteredListItemsNoResults_TestOnly = (): string =>
Try a different fruit?
`; + +export const nestingLists_TestOnly = (): string => html`

Nesting List Items

+ + + + + + + +
+

Nesting Lists

+ + + + + + + + + `; diff --git a/packages/calcite-components/src/components/loader/loader.scss b/packages/calcite-components/src/components/loader/loader.scss index 6b1b17ee789..58da4bcb141 100644 --- a/packages/calcite-components/src/components/loader/loader.scss +++ b/packages/calcite-components/src/components/loader/loader.scss @@ -32,6 +32,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; animation: loader-color-shift scaleDuration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite linear; padding-block: var(--calcite-loader-padding, theme("spacing.16")); + will-change: contents; } :host([scale="s"]) { diff --git a/packages/calcite-components/src/components/tile/readme.md b/packages/calcite-components/src/components/tile/readme.md index 0bb5971e3d4..0b597965088 100644 --- a/packages/calcite-components/src/components/tile/readme.md +++ b/packages/calcite-components/src/components/tile/readme.md @@ -17,18 +17,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | ------------------- | ----------- | -| `active` | `active` | When `true`, the component is active. | `boolean` | `false` | -| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | -| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | -| `embed` | `embed` | The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean` | `false` | -| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | -| `hidden` | `hidden` | When `true`, the component is not displayed and is not focusable. | `boolean` | `false` | -| `href` | `href` | When embed is `"false"`, the URL for the component. | `string` | `undefined` | -| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | -| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | -| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| Property | Attribute | Description | Type | Default | +| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | +| `active` | `active` | When `true`, the component is active. | `boolean` | `false` | +| `alignment` | `alignment` | Specifies the alignment of the Tile's content. | `"center" \| "start"` | `"start"` | +| `description` | `description` | A description for the component, which displays below the heading. | `string` | `undefined` | +| `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | +| `embed` | `embed` | The component's embed mode. When `true`, renders without a border and padding for use by other components. | `boolean` | `false` | +| `heading` | `heading` | The component header text, which displays between the icon and description. | `string` | `undefined` | +| `href` | `href` | When embed is `"false"`, the URL for the component. | `string` | `undefined` | +| `icon` | `icon` | Specifies an icon to display. | `string` | `undefined` | +| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | ## Slots @@ -37,6 +37,15 @@ | `"content-end"` | A slot for adding non-actionable elements after the component's content. | | `"content-start"` | A slot for adding non-actionable elements before the component's content. | +## CSS Custom Properties + +| Name | Description | +| --------------------------------------- | ------------------------------------------------------ | +| `--calcite-tile-background-color` | Specifies the background color of the component. | +| `--calcite-tile-border-color` | Specifies the border color of the component. | +| `--calcite-tile-description-text-color` | Specifies the description text color of the component. | +| `--calcite-tile-heading-text-color` | Specifies the heading text color of the component. | + ## Dependencies ### Depends on diff --git a/packages/calcite-components/src/components/tile/resources.ts b/packages/calcite-components/src/components/tile/resources.ts index 4a7d0ec1dc3..09613e65cb1 100644 --- a/packages/calcite-components/src/components/tile/resources.ts +++ b/packages/calcite-components/src/components/tile/resources.ts @@ -1,3 +1,13 @@ +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", contentEnd: "content-end", diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts index d73f3af3702..b5182e1f7d0 100644 --- a/packages/calcite-components/src/components/tile/tile.e2e.ts +++ b/packages/calcite-components/src/components/tile/tile.e2e.ts @@ -11,16 +11,19 @@ describe("calcite-tile", () => { hidden("calcite-tile"); }); - describe("accessible", () => { + describe("accessible.", () => { accessible(``); }); describe("defaults", () => { defaults("calcite-tile", [ + { propertyName: "alignment", defaultValue: "start" }, { propertyName: "disabled", defaultValue: false }, { propertyName: "embed", defaultValue: false }, { propertyName: "focused", defaultValue: false }, { propertyName: "hidden", defaultValue: false }, + { propertyName: "iconFlipRtl", defaultValue: false }, + { propertyName: "scale", defaultValue: "m" }, ]); }); @@ -31,11 +34,15 @@ describe("calcite-tile", () => { describe("reflects", () => { reflects("calcite-tile", [ { propertyName: "active", value: true }, + { propertyName: "alignment", value: "center" }, + { propertyName: "description", value: "My test description" }, { propertyName: "disabled", value: true }, { propertyName: "embed", value: true }, { propertyName: "focused", value: true }, + { propertyName: "heading", value: "My test heading" }, { propertyName: "href", value: "http://www.esri.com" }, { propertyName: "icon", value: "layers" }, + { propertyName: "scale", value: "s" }, ]); }); diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss index b293f9b4be2..dfc87da2ad8 100644 --- a/packages/calcite-components/src/components/tile/tile.scss +++ b/packages/calcite-components/src/components/tile/tile.scss @@ -1,39 +1,49 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-tile-background-color: Specifies the background color of the component. + * @prop --calcite-tile-border-color: Specifies the border color of the component. + * @prop --calcite-tile-description-text-color: Specifies the description text color of the component. + * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component. + */ + :host { - @apply bg-foreground-1 - text-color-3 - box-border - inline-block - select-none - duration-150 - ease-in-out; + --calcite-tile-background-color: var(--calcite-color-foreground-1); + --calcite-tile-border-color: var(--calcite-color-border-2); + --calcite-tile-description-text-color: var(--calcite-color-text-3); + --calcite-tile-heading-text-color: var(--calcite-color-text-2); + + box-sizing: border-box; + display: inline-block; + max-inline-size: 460px; + min-inline-size: 140px; .container { - @apply pointer-events-none - grid - grid-cols-1; + background-color: var(--calcite-tile-background-color); + block-size: var(--calcite-container-size-content-fluid); + box-sizing: border-box; + display: flex; + flex-direction: column; gap: var(--calcite-spacing-md); - } - - .content { - @apply flex - flex-auto - flex-col - justify-center; - inline-size: 10%; + inline-size: var(--calcite-container-size-content-fluid); + pointer-events: none; + transition-duration: 150ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + user-select: none; } .content-container { - @apply focus-base - text-color-2 - flex - w-full - flex-auto - items-stretch - p-0; + display: flex; + outline-color: transparent; + padding: 0; + inline-size: 100%; } .content-slot-container { - @apply flex items-center; + align-items: center; + display: flex; &:first-child { padding-inline: 0 0.75rem; @@ -45,38 +55,45 @@ } .heading { - @apply pointer-events-none - break-words; - color: var(--calcite-color-text-2); + color: var(--calcite-tile-heading-text-color); font-size: var(--calcite-font-size--1); - font-weight: 500; + font-weight: var(--calcite-font-weight-medium); line-height: 1.20313rem; + overflow-wrap: break-word; } .large-visual { - @apply items-center - text-center; - min-block-size: theme("spacing.48"); + align-items: center; + justify-content: center; + min-block-size: 12rem; + text-align: center; + calcite-icon { - align-self: self-end; block-size: 64px; inline-size: 64px; - justify-self: center; } .content-container { - @apply self-center; + justify-content: center; } } .description { - @apply break-words - pointer-events-none; - color: var(--calcite-color-text-3); + color: var(--calcite-tile-description-text-color); font-size: var(--calcite-font-size--2); - font-weight: 400; + font-weight: var(--calcite-font-weight-regular); line-height: 1.03125rem; + overflow-wrap: break-word; + } +} + +:host([alignment="center"]) { + .container { + align-items: center; + text-align: center; } } :host([scale="s"]) { + max-inline-size: 400px; + min-inline-size: 100px; .container { gap: var(--calcite-spacing-sm); } @@ -91,6 +108,8 @@ } :host([scale="l"]) { + max-inline-size: 520px; + min-inline-size: 160px; .container { gap: var(--calcite-spacing-xl); } @@ -105,49 +124,52 @@ } :host(:not([href])) { - calcite-icon { - color: var(--calcite-color-text-3); - } + --calcite-ui-icon-color: var(--calcite-color-text-3); } :host([href]), :host([href]:hover) { + --calcite-tile-heading-text-color: var(--calcite-color-text-link); .heading { - @apply underline; - color: var(--calcite-color-text-link); + text-decoration-line: underline; } } :host(:not([embed])) { - box-shadow: 0 0 0 1px var(--calcite-color-border-2); - padding: var(--calcite-spacing-md); + .container { + box-shadow: 0 0 0 1px var(--calcite-tile-border-color); + padding: var(--calcite-spacing-md); + } } :host(:not([embed])[scale="s"]) { - padding: var(--calcite-spacing-sm); + .container { + padding: var(--calcite-spacing-sm); + } } :host(:not([embed])[scale="l"]) { - padding: var(--calcite-spacing-xl); + .container { + padding: var(--calcite-spacing-xl); + } } :host(:not([embed])[href]:hover) { - @apply cursor-pointer; - box-shadow: 0 0 0 2px var(--calcite-color-brand); + --calcite-tile-border-color: var(--calcite-color-brand); + .container { + box-shadow: 0 0 0 2px var(--calcite-tile-border-color); + cursor: pointer; + } } :host(:not([embed])[href]:active) { - box-shadow: 0 0 0 3px var(--calcite-color-brand); -} -:host([icon][heading]:not([description]):not([embed])) { - padding: 0px; + --calcite-tile-border-color: var(--calcite-color-brand); + .container { + box-shadow: 0 0 0 3px var(--calcite-tile-border-color); + } } @include disabled(); :host(:hover), :host([active]) { - .heading { - color: var(--calcite-color-text-1); - } - .description { - color: var(--calcite-color-text-2); - } + --calcite-tile-description-text-color: var(--calcite-color-text-2); + --calcite-tile-heading-text-color: var(--calcite-color-text-1); } @include base-component(); diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts index 51dc566c06e..29fdb543588 100644 --- a/packages/calcite-components/src/components/tile/tile.stories.ts +++ b/packages/calcite-components/src/components/tile/tile.stories.ts @@ -1,6 +1,6 @@ import { select, text } from "@storybook/addon-knobs"; import { iconNames, boolean, storyFilters } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils"; import readme from "./readme.md"; import { html } from "../../../support/formatting"; @@ -29,10 +29,75 @@ export const simple = (): string => html` `; -export const scales = (): string => html` -
- small +export const allVariants_NoTest = (): string => html` + +
+
scale
+
small
+
medium
+
large
+
+ + +
+
heading only
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
heading only with link
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
basic
+ +
html` scale="s" > - - medium +
+
html` scale="m" > - - large +
+
html` scale="l" > - +
-`; -export const largeTile = (): string => html` - - + +
+
link
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
slots
+ +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ +
+
links with slots
+ +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + +
+
large visual
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
large visual with link
+ +
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
heading only centered
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
heading only with link centered
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
basic centered
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
link centered
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
slots centered
+ +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + +
+
links with slots centered
+ +
+ + + + +
+
+ + + + +
+
+ + + + +
+
`; export const darkModeRTL_TestOnly = (): string => html` @@ -131,3 +522,13 @@ export const disabled_TestOnly = (): string => html` > `; + +export const widthSetToBreakpoints_TestOnly = (): string => + createBreakpointStories( + html` `, + ); diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx index 9a6b414ee87..98ae5b84510 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -1,10 +1,4 @@ -import { Component, Element, h, Prop, VNode } from "@stencil/core"; -import { - ConditionalSlotComponent, - connectConditionalSlotComponent, - disconnectConditionalSlotComponent, -} from "../../utils/conditionalSlot"; -import { getSlotted } from "../../utils/dom"; +import { Component, Element, h, Prop, State, VNode } from "@stencil/core"; import { connectInteractive, disconnectInteractive, @@ -12,8 +6,9 @@ import { InteractiveContainer, updateHostInteraction, } from "../../utils/interactive"; -import { SLOTS } from "./resources"; -import { Scale } from "../interfaces"; +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. @@ -24,7 +19,7 @@ import { Scale } from "../interfaces"; styleUrl: "tile.scss", shadow: true, }) -export class Tile implements ConditionalSlotComponent, InteractiveComponent { +export class Tile implements InteractiveComponent { //-------------------------------------------------------------------------- // // Properties @@ -36,6 +31,11 @@ export class Tile implements ConditionalSlotComponent, InteractiveComponent { */ @Prop({ reflect: true }) active = false; + /** + * Specifies the alignment of the Tile's content. + */ + @Prop({ reflect: true }) alignment: Exclude = "start"; + /** * A description for the component, which displays below the heading. */ @@ -86,6 +86,24 @@ export class Tile implements ConditionalSlotComponent, 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 @@ -93,12 +111,10 @@ export class Tile implements ConditionalSlotComponent, InteractiveComponent { // -------------------------------------------------------------------------- connectedCallback(): void { - connectConditionalSlotComponent(this); connectInteractive(this); } disconnectedCallback(): void { - disconnectConditionalSlotComponent(this); disconnectInteractive(this); } @@ -113,27 +129,23 @@ export class Tile implements ConditionalSlotComponent, InteractiveComponent { // -------------------------------------------------------------------------- renderTile(): VNode { - const { icon, el, heading, description, iconFlipRtl } = this; + const { icon, hasContentStart, hasContentEnd, heading, description, iconFlipRtl } = this; const isLargeVisual = heading && icon && !description; return ( -
+
{icon && } -
- {getSlotted(el, SLOTS.contentStart) ? ( -
- -
- ) : null} -
- {heading &&
{heading}
} - {description &&
{description}
} +
+
+ +
+
+ {heading &&
{heading}
} + {description &&
{description}
} +
+
+
- {getSlotted(el, SLOTS.contentEnd) ? ( -
- -
- ) : null}
); diff --git a/packages/calcite-components/src/demos/tile.html b/packages/calcite-components/src/demos/tile.html index 51dc1e33ff5..52516553121 100644 --- a/packages/calcite-components/src/demos/tile.html +++ b/packages/calcite-components/src/demos/tile.html @@ -43,7 +43,6 @@
small
medium
large
-
@@ -59,7 +58,6 @@
-
@@ -75,7 +73,6 @@
-
@@ -109,7 +106,6 @@ >
-
@@ -146,7 +142,6 @@ > -
@@ -186,7 +181,6 @@ -
@@ -228,7 +222,6 @@
-
@@ -244,7 +237,6 @@
-
@@ -260,7 +252,201 @@
-
+ + +
+ + +
+
heading only centered
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
heading only with link centered
+ +
+ +
+
+ +
+
+ +
+
+ + +
+
basic centered
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
link centered
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
slots centered
+ +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + +
+
links with slots centered
+ +
+ + + + +
+
+ + + + +
+
+ + + + +