feat(tile): add responsive layout features #8681
Conversation
…ayout options with all possible variants
…s in the shadowRoot to force using css variables to override themeable settings. Removing tailwind usage, and adding a couple component tokens to get things started
…dth just to make sure the entire tile conforms to size of whatever is calculated on the host
… when used inside tile group. Adding more tile-group css to control the layout per design spec. Got tiles to match height in row tracks, just need to figure out a way to make them match on wrapped rows
…t of largest tile. adding tile group story file to start
eriklharper
added
pr ready for visual snapshots
eriklharper
added
the
pr ready for visual snapshots
packages/calcite-components/src/components/tile-group/tile-group.scss
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/tile-group/tile-group.scss
Outdated
Show resolved
Hide resolved
|
|
||
| box-sizing: border-box; | ||
| display: inline-block; | ||
| max-inline-size: 460px; |
There was a problem hiding this comment.
where are these pixel sizes coming from?
There was a problem hiding this comment.
From the Figma specs:
There was a problem hiding this comment.
@SkyeSeitz should these be container tokens or based off container tokens?
There was a problem hiding this comment.
@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?
| @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; | ||
| line-height: 1.20313rem; |
There was a problem hiding this comment.
where is this line height coming from?
There was a problem hiding this comment.
Also from the Figma file. These are copied verbatim from the styles panel of the corresponding text elements:
There was a problem hiding this comment.
@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.
packages/calcite-components/src/components/tile-group/tile-group.tsx
Outdated
Show resolved
Hide resolved
|
I'm going to split this PR in two and make a separate one just for adding Tile Group on its own. |
eriklharper
removed
the
pr ready for visual snapshots
eriklharper
changed the title
packages/calcite-components/src/components/tile-group/tile-group.scss
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
I have some minor comments, but once @alisonailea's token comments have been addressed, this should be good to merge!
|
@eriklharper Also, can you update your PR title to be a sentence vs noun phrase? This will better align with the Ionic commit message format guidelines we follow (per our contributing guidelines). |
eriklharper
changed the title
|
Changed the branch name, closing this in favor of: #8691 |
**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]>
**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]>
Related Issues: #6662 #6690
Summary
This PR adds responsive layout features and some design improvements to the Tile component, including:
minandmaxinline-size (width) for all 3 scalesalignmentproperty, supportingstartandcenterOther improvements include refactoring Tile to remove the deprecated
ConditionalSlotComponentinterface and improving style encapsulation to allow more defined control of theming with css custom properties.