Skip to content

Commit

Permalink
fix(tile): center align contentTop and contentBottom slots when align…
Browse files Browse the repository at this point in the history 
…ment prop equals "center" (#9732)

**Related Issue:**
[#9540](#9540)

## Summary
This updates the `tile` component to center align `content-top` and
`content-bottom` slots when the `alignment` prop is equal to `"center"`
  • Loading branch information
@aPreciado88 @github-actions
aPreciado88 authored and github-actions[bot] committed Jul 30, 2024
1 parent ad71bdb commit 1a8393b
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 5 deletions.
12 changes: 7 additions & 5 deletions packages/calcite-components/src/components/tile/tile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
z-index: var(--calcite-z-index);
}
&:focus {
box-shadow: inset 0px 0px 0px 1px var(--calcite-color-brand);
box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
z-index: var(--calcite-z-index-sticky);
}
}
Expand Down Expand Up @@ -107,7 +107,9 @@
text-align: center;
}
slot[name="content-start"]::slotted(*),
slot[name="content-end"]::slotted(*) {
slot[name="content-end"]::slotted(*),
slot[name="content-top"]::slotted(*),
slot[name="content-bottom"]::slotted(*) {
align-self: center;
}
}
Expand Down Expand Up @@ -185,7 +187,7 @@
:host([selection-appearance="border"][layout="vertical"]) {
.container.selected:focus::before {
block-size: 100%;
box-shadow: inset 0px 0px 0px 1px var(--calcite-color-brand);
box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
content: "";
display: block;
inline-size: 100%;
Expand All @@ -197,13 +199,13 @@

:host([selection-appearance="border"][layout="horizontal"]) {
.container.selected {
box-shadow: inset 0px -4px 0px 0px var(--calcite-color-brand);
box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
}
}

:host([selection-appearance="border"][layout="vertical"]) {
.container.selected {
box-shadow: inset 4px 0px 0px 0px var(--calcite-color-brand);
box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
}
}

Expand Down
78 changes: 78 additions & 0 deletions packages/calcite-components/src/components/tile/tile.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -733,6 +733,84 @@ export const allVariants = (): string => html`
</div>
</div>
<!-- content-top slot centered -->
<div class="parent">
<div class="child right-aligned-text">content-top slot centered</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="s"
>
<calcite-chip class="new" kind="brand" slot="content-top" scale="s">New</calcite-chip>
</calcite-tile>
</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="m"
>
<calcite-chip class="new" kind="brand" slot="content-top">New</calcite-chip>
</calcite-tile>
</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="l"
>
<calcite-chip class="new" kind="brand" slot="content-top" scale="l">New</calcite-chip>
</calcite-tile>
</div>
</div>
<!-- content-bottom slot centered-->
<div class="parent">
<div class="child right-aligned-text">content-bottom slot centered</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="s"
>
<calcite-chip class="new" kind="brand" slot="content-bottom" scale="s">New</calcite-chip>
</calcite-tile>
</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="m"
>
<calcite-chip class="new" kind="brand" slot="content-bottom">New</calcite-chip>
</calcite-tile>
</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="l"
>
<calcite-chip class="new" kind="brand" slot="content-bottom" scale="l">New</calcite-chip>
</calcite-tile>
</div>
</div>
<!-- link centered -->
<div class="parent">
<div class="child right-aligned-text">link centered</div>
Expand Down
78 changes: 78 additions & 0 deletions packages/calcite-components/src/demos/tile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -729,6 +729,84 @@
</div>
</div>

<!-- content-top slot centered -->
<div class="parent">
<div class="child right-aligned-text">content-top slot centered</div>

<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="s"
>
<calcite-chip class="new" kind="brand" slot="content-top" scale="s">New</calcite-chip>
</calcite-tile>
</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="m"
>
<calcite-chip class="new" kind="brand" slot="content-top">New</calcite-chip>
</calcite-tile>
</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="l"
>
<calcite-chip class="new" kind="brand" slot="content-top" scale="l">New</calcite-chip>
</calcite-tile>
</div>
</div>

<!-- content-bottom slot centered -->
<div class="parent">
<div class="child right-aligned-text">content-bottom slot centered</div>

<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="s"
>
<calcite-chip class="new" kind="brand" slot="content-bottom" scale="s">New</calcite-chip>
</calcite-tile>
</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="m"
>
<calcite-chip class="new" kind="brand" slot="content-bottom">New</calcite-chip>
</calcite-tile>
</div>
<div class="child">
<calcite-tile
alignment="center"
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."
heading="Tile title lorem ipsum"
icon="layers"
scale="l"
>
<calcite-chip class="new" kind="brand" slot="content-bottom" scale="l">New</calcite-chip>
</calcite-tile>
</div>
</div>

<!-- link centered -->
<div class="parent">
<div class="child right-aligned-text">link centered</div>
Expand Down

0 comments on commit 1a8393b

Please sign in to comment.