-
Notifications
You must be signed in to change notification settings - Fork 77
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(tile-group): add Tile Group component (#8806)
**Related Issues:** #8615 #6691 #6662 ## Summary This PR adds the new `calcite-tile-group` component. It includes these responsiveness features that address #6691: - Wrapped Tiles match width of Tiles above - Wrapped Tiles match height of tallest Tile in the group The changes in this PR were extracted from and depend on the changes in #8681. --------- Co-authored-by: Erik Harper <[email protected]>
- Loading branch information
1 parent
802ccf2
commit 4f65bdd
Showing
11 changed files
with
2,209 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
packages/calcite-components/src/components/tile-group/interfaces.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export type TileGroupLayout = "vertical" | "horizontal"; |
21 changes: 21 additions & 0 deletions
21
packages/calcite-components/src/components/tile-group/readme.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| # calcite-tile-group | ||
|
|
||
| <!-- Auto Generated Below --> | ||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Attribute | Description | Type | Default | | ||
| | ---------- | ---------- | ------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- | | ||
| | `disabled` | `disabled` | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean` | `false` | | ||
| | `layout` | `layout` | Defines the layout of the component. Use `"horizontal"` for rows, and `"vertical"` for a single column. | `"horizontal" \| "vertical"` | `"horizontal"` | | ||
| | `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | | ||
|
|
||
| ## Slots | ||
|
|
||
| | Slot | Description | | ||
| | ---- | ------------------------------------------ | | ||
| | | A slot for adding `calcite-tile` elements. | | ||
|
|
||
| --- | ||
|
|
||
| *Built with [StencilJS](https://stenciljs.com/)* |
3 changes: 3 additions & 0 deletions
3
packages/calcite-components/src/components/tile-group/resources.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export const CSS = { | ||
| tileGroup: "tile-group", | ||
| }; |
96 changes: 96 additions & 0 deletions
96
packages/calcite-components/src/components/tile-group/tile-group.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { newE2EPage } from "@stencil/core/testing"; | ||
| import { accessible, defaults, disabled, reflects, renders, hidden } from "../../tests/commonTests"; | ||
| import { html } from "../../../support/formatting"; | ||
|
|
||
| describe("calcite-tile-group", () => { | ||
| describe("renders", () => { | ||
| renders("calcite-tile-group", { display: "inline-block" }); | ||
| }); | ||
|
|
||
| describe("honors hidden attribute.", () => { | ||
| hidden("calcite-tile-group"); | ||
| }); | ||
|
|
||
| describe("accessible", () => { | ||
| accessible(`<calcite-tile-group></calcite-tile-group>`); | ||
| }); | ||
|
|
||
| describe("defaults", () => { | ||
| defaults("calcite-tile-group", [ | ||
| { propertyName: "layout", defaultValue: "horizontal" }, | ||
| { propertyName: "scale", defaultValue: "m" }, | ||
| ]); | ||
| }); | ||
|
|
||
| describe("reflects", () => { | ||
| reflects("calcite-tile-group", [ | ||
| { propertyName: "layout", value: "horizontal" }, | ||
| { propertyName: "scale", value: "m" }, | ||
| ]); | ||
| }); | ||
|
|
||
| describe("disabled", () => { | ||
| disabled( | ||
| html`<calcite-tile-group> | ||
| <calcite-tile></calcite-tile> | ||
| <calcite-tile></calcite-tile> | ||
| <calcite-tile></calcite-tile> | ||
| </calcite-tile-group>`, | ||
| { focusTarget: "none" }, | ||
| ); | ||
| }); | ||
|
|
||
| describe("disabled with link tiles", () => { | ||
| disabled( | ||
| html`<calcite-tile-group> | ||
| <calcite-tile | ||
| 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" | ||
| ></calcite-tile> | ||
| <calcite-tile | ||
| 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" | ||
| ></calcite-tile> | ||
| <calcite-tile | ||
| 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" | ||
| ></calcite-tile> | ||
| </calcite-tile-group>`, | ||
| { focusTarget: "child" }, | ||
| ); | ||
| }); | ||
|
|
||
| describe("prop passing", () => { | ||
| it("tiles receive parent scale prop on initial load and when scale attribute is mutated", async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent(html` | ||
| <calcite-tile-group scale="s"> | ||
| <calcite-tile></calcite-tile> | ||
| <calcite-tile></calcite-tile> | ||
| <calcite-tile></calcite-tile> | ||
| </calcite-tile-group> | ||
| `); | ||
|
|
||
| let tiles = await page.findAll("calcite-tile"); | ||
| tiles.forEach((tile) => { | ||
| expect(tile.getAttribute("scale")).toBe("s"); | ||
| }); | ||
|
|
||
| await page.$eval("calcite-tile-group", (element: HTMLCalciteTileGroupElement) => | ||
| element.setAttribute("scale", "l"), | ||
| ); | ||
| await page.waitForChanges(); | ||
|
|
||
| tiles = await page.findAll("calcite-tile"); | ||
| tiles.forEach((tile) => { | ||
| expect(tile.getAttribute("scale")).toBe("l"); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
40 changes: 40 additions & 0 deletions
40
packages/calcite-components/src/components/tile-group/tile-group.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| :host { | ||
| 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); | ||
| } | ||
| } | ||
|
|
||
| :host([scale="s"]) { | ||
| .tile-group { | ||
| grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); | ||
| } | ||
| } | ||
| :host([scale="m"]) { | ||
| .tile-group { | ||
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | ||
| } | ||
| } | ||
| :host([scale="l"]) { | ||
| .tile-group { | ||
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | ||
| } | ||
| } | ||
|
|
||
| :host([layout="vertical"]) { | ||
| .tile-group { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| } | ||
|
|
||
| @include disabled(); | ||
| @include base-component(); |
Oops, something went wrong.