Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(tile): add responsive layout features #8681

Closed
wants to merge 24 commits into from
Closed

feat(tile): add responsive layout features #8681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
e74892d
feat(tile-group): calcite-tile-group component, intial scaffold
eriklharper Jan 17, 2024
4440d24
adding layout property, improving demo page to show scales and both l…
eriklharper Jan 18, 2024
653a8c9
passing scale props to tiles, adding e2e test
eriklharper Jan 18, 2024
a010549
adding scale mutation test and removing mutation observer since the w…
eriklharper Jan 18, 2024
9c58ec2
adding a disabled row to the demo page
eriklharper Jan 18, 2024
e1f1a8d
removing deprecated ConditionalSlotComponent interface
eriklharper Jan 19, 2024
3aba53b
refactoring tile dom structure to encapsulate themeable css propertie…
eriklharper Jan 20, 2024
7937f98
adding a bunch more theming tokens
eriklharper Jan 20, 2024
b4c49e8
adding alignment prop
eriklharper Jan 23, 2024
42a1d3b
adding min and max inline-size per Figma spec
eriklharper Jan 24, 2024
88c3079
using border-box sizing on the shadowed tile div along with a 100% wi…
eriklharper Jan 24, 2024
3a84c48
refactoring tile css to use flex instead of grid to be more intuitive…
eriklharper Jan 31, 2024
6f3515f
removing ineffective style
eriklharper Jan 31, 2024
2d39baf
completing responsive changes by getting implicit rows to match heigh…
eriklharper Feb 1, 2024
290fe79
Merge branch 'main' into eriklharper/6662-tile-redesign
eriklharper Feb 1, 2024
eda4989
tile/tile-group readmes
eriklharper Feb 1, 2024
3db5fcf
adding styles for all variants story
eriklharper Feb 1, 2024
0a206dc
adding all variants story to Tile
eriklharper Feb 1, 2024
a105ef9
fixing tile group render test
eriklharper Feb 1, 2024
fa4054f
trying a 1s delay in tile group story
eriklharper Feb 1, 2024
1cc1e20
reverting unintentional demo page change
eriklharper Feb 1, 2024
a19a002
Merge branch 'main' into eriklharper/6662-tile-redesign
eriklharper Feb 1, 2024
0b84755
adding onslotchange to update tiles when they're added to the group
eriklharper Feb 1, 2024
d4d4867
removing tile-group in favor of #8687
eriklharper Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<Alignment, "end">;
/**
* A description for the component, which displays below the heading.
*/
Expand Down Expand Up @@ -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<Alignment, "end">;
/**
* A description for the component, which displays below the heading.
*/
Expand Down
38 changes: 26 additions & 12 deletions packages/calcite-components/src/components/tile/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -37,6 +37,20 @@
| `"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-border-color-active` | Specifies the border color of the component when in an active state. |
| `--calcite-tile-border-color-hover` | Specifies the border color of the component when in a hover state. |
| `--calcite-tile-description-text-color` | Specifies the description text color of the component. |
| `--calcite-tile-description-text-color-hover` | Specifies the description text color of the component when in an active or hover state. |
| `--calcite-tile-heading-text-color` | Specifies the heading text color of the component. |
| `--calcite-tile-heading-text-color-hover` | Specifies the heading text color of the component when in an active or hover state. |
| `--calcite-tile-icon-color` | Specifies the icon color of the component. |

## Dependencies

### Depends on
Expand Down
5 changes: 5 additions & 0 deletions packages/calcite-components/src/components/tile/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
export const CSS = {
contentSlotContainer: "content-slot-container",
tile: "tile",
};

export const SLOTS = {
contentStart: "content-start",
contentEnd: "content-end",
Expand Down
148 changes: 92 additions & 56 deletions packages/calcite-components/src/components/tile/tile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,59 @@
/**
* 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-border-color-active: Specifies the border color of the component when in an active state.
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-tile-border-color-hover: Specifies the border color of the component when in a hover state.
* @prop --calcite-tile-description-text-color: Specifies the description text color of the component.
* @prop --calcite-tile-description-text-color-hover: Specifies the description text color of the component when in an active or hover state.
* @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
* @prop --calcite-tile-heading-text-color-hover: Specifies the heading text color of the component when in an active or hover state.
* @prop --calcite-tile-icon-color: Specifies the icon color of the component.
*/

:host {
@apply bg-foreground-1
text-color-3
box-border
inline-block
select-none
duration-150
ease-in-out;

.container {
@apply pointer-events-none
grid
grid-cols-1;
gap: var(--calcite-spacing-md);
}
--calcite-tile-background-color: var(--calcite-color-foreground-1);
--calcite-tile-border-color: var(--calcite-color-border-2);
--calcite-tile-border-color-active: var(--calcite-color-brand);
--calcite-tile-border-color-hover: var(--calcite-color-brand);
--calcite-tile-description-text-color: var(--calcite-color-text-3);
--calcite-tile-description-text-color-hover: var(--calcite-color-text-2);
--calcite-tile-heading-text-color: var(--calcite-color-text-2);
--calcite-tile-heading-text-color-hover: var(--calcite-color-text-1);
--calcite-tile-icon-color: var(--calcite-color-text-3);
eriklharper marked this conversation as resolved.
Show resolved Hide resolved

box-sizing: border-box;
display: inline-block;
max-inline-size: 460px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where are these pixel sizes coming from?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the Figma specs:

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SkyeSeitz should these be container tokens or based off container tokens?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alisonailea great question. The ones highlighted in blue below are the only values with something close in our container tokens. Do you think we should add the rest as container tokens?

image

min-inline-size: 140px;

.content {
@apply flex
flex-auto
flex-col
justify-center;
inline-size: 10%;
.tile {
background-color: var(--calcite-tile-background-color);
block-size: 100%;
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--calcite-spacing-md);
inline-size: 100%;
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
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: 0px;
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
inline-size: 100%;
}

.content-slot-container {
@apply flex items-center;
align-items: center;
display: flex;

&:first-child {
padding-inline: 0 0.75rem;
Expand All @@ -45,39 +65,46 @@
}

.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;
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
line-height: 1.20313rem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where is this line height coming from?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also from the Figma file. These are copied verbatim from the styles panel of the corresponding text elements:

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SkyeSeitz we haven't set Semantic Tokens in Tile Component yet right? I think this needs to be replaced with a semantic line-height token. Pick the one closest to this value.

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;
eriklharper marked this conversation as resolved.
Show resolved Hide resolved
line-height: 1.03125rem;
overflow-wrap: break-word;
}
}

:host([alignment="center"]) {
.tile {
align-items: center;
text-align: center;
}
}

:host([scale="s"]) {
.container {
max-inline-size: 400px;
min-inline-size: 100px;
.tile {
gap: var(--calcite-spacing-sm);
}
.heading {
Expand All @@ -91,7 +118,9 @@
}

:host([scale="l"]) {
.container {
max-inline-size: 520px;
min-inline-size: 160px;
.tile {
gap: var(--calcite-spacing-xl);
}
.heading {
Expand All @@ -106,47 +135,54 @@

:host(:not([href])) {
calcite-icon {
color: var(--calcite-color-text-3);
color: var(--calcite-tile-icon-color);
}
}

:host([href]),
:host([href]:hover) {
.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);
.tile {
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);
.tile {
padding: var(--calcite-spacing-sm);
}
}
:host(:not([embed])[scale="l"]) {
padding: var(--calcite-spacing-xl);
.tile {
padding: var(--calcite-spacing-xl);
}
}
:host(:not([embed])[href]:hover) {
@apply cursor-pointer;
box-shadow: 0 0 0 2px var(--calcite-color-brand);
.tile {
box-shadow: 0 0 0 2px var(--calcite-tile-border-color-hover);
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;
.tile {
box-shadow: 0 0 0 3px var(--calcite-tile-border-color-active);
}
}

@include disabled();

:host(:hover),
:host([active]) {
.heading {
color: var(--calcite-color-text-1);
color: var(--calcite-tile-heading-text-color-hover);
}
.description {
color: var(--calcite-color-text-2);
color: var(--calcite-tile-description-text-color-hover);
}
}

Expand Down
Loading
Loading