Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 0041b82

Browse files
agligaagliga
authored
feat(item-tile-group): add default layouts inside item-tile-group (#2621)
1 parent 71cfa81 commit 0041b82

File tree

5 files changed

+92
-64
lines changed

5 files changed

+92
-64
lines changed

‎.changeset/moody-pumas-wear.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": minor
3+
---
4+
5+
feat(item-tile-group): add default layouts inside item-tile-group

‎dist/item-tile-group/item-tile-group.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,27 @@
1+
.layout-grid.item-tile-group {
2+
--layout-grid-columns-min: 2;
3+
--layout-grid-columns-xs: 2;
4+
--layout-grid-columns-sm: 2;
5+
--layout-grid-columns-md: 3;
6+
--layout-grid-columns-lg: 4;
7+
--layout-grid-columns-xl: 5;
8+
--layout-grid-columns-xl2: 5;
9+
--layout-grid-columns-xl3: 5;
10+
--layout-grid-columns-xl4: 5;
11+
}
12+
13+
.layout-grid.item-tile-group--list-view {
14+
--layout-grid-columns-min: 1;
15+
--layout-grid-columns-xs: 1;
16+
--layout-grid-columns-sm: 1;
17+
--layout-grid-columns-md: 1;
18+
--layout-grid-columns-lg: 1;
19+
--layout-grid-columns-xl: 2;
20+
--layout-grid-columns-xl2: 2;
21+
--layout-grid-columns-xl3: 2;
22+
--layout-grid-columns-xl4: 2;
23+
}
24+
125
.item-tile-group .item-tile__title {
226
-webkit-line-clamp: 3;
327
}

‎src/routes/_index/component/item-tile-group/+page.marko‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
<p>A standalone item tile on its own wouldn't be very useful. You'd typically use multiple item tiles inside a layout. Here's an example of a list of item tiles using the <highlight>layout-grid</highlight> component. The responsive display rules are set on the <highlight>layout-grid</highlight> using the specific breakpoint hooks using the various breakpoint attributes.</p>
66

77
<demo>
8-
<div class="item-tile-group layout-grid"
9-
data-columns-min="2"
10-
data-columns-md="3"
11-
data-columns-lg="4"
12-
data-columns-xl="5"
13-
>
8+
<div class="item-tile-group layout-grid">
149
<ul aria-label="Items for sale">
1510
<li>
1611
<div class="item-tile">
@@ -50,7 +45,7 @@
5045
</div>
5146
<div class="item-tile__section-tertiary">
5247
<p>
53-
$29.99
48+
$29.99
5449
<span class="clipped">Was: </span>
5550
<s class="item-tile__list-price">$68.99</s>
5651
</p>
@@ -99,7 +94,7 @@
9994
</div>
10095
<div class="item-tile__section-tertiary">
10196
<p>
102-
$29.99
97+
$29.99
10398
<span class="clipped">Was: </span>
10499
<s class="item-tile__list-price">$68.99</s>
105100
</p>
@@ -148,7 +143,7 @@
148143
</div>
149144
<div class="item-tile__section-tertiary">
150145
<p>
151-
$29.99
146+
$29.99
152147
<span class="clipped">Was: </span>
153148
<s class="item-tile__list-price">$68.99</s>
154149
</p>
@@ -197,7 +192,7 @@
197192
</div>
198193
<div class="item-tile__section-tertiary">
199194
<p>
200-
$29.99
195+
$29.99
201196
<span class="clipped">Was: </span>
202197
<s class="item-tile__list-price">$68.99</s>
203198
</p>
@@ -213,12 +208,7 @@
213208
</demo>
214209

215210
<highlight-code type="html">
216-
<div class="item-tile-group layout-grid"
217-
data-columns-min="2"
218-
data-columns-md="3"
219-
data-columns-lg="4"
220-
data-columns-xl="5"
221-
>
211+
<div class="item-tile-group layout-grid">
222212
<ul aria-label="Items for sale">
223213
<li>
224214
<div class="item-tile">
@@ -258,7 +248,7 @@
258248
</div>
259249
<div class="item-tile__section-tertiary">
260250
<p>
261-
$29.99
251+
$29.99
262252
<span class="clipped">Was: </span>
263253
<s class="item-tile__list-price">$68.99</s>
264254
</p>
@@ -279,10 +269,7 @@
279269
<p>To use a set of List Layout Item Tiles in a layout, you can use the <highlight>layout-grid</highlight> component with the specific responsive display rules per specifications. This will ensure proper spacing of Item Tiles in relation to each other and maintain the horizontally-oriented Item Tiles stacked across all breakpoints until it hits the <highlight>xl</highlight> breakpoint, where it displays two Item Tiles per row.</p>
280270

281271
<demo>
282-
<div class="item-tile-group item-tile-group--list-view layout-grid"
283-
data-columns-min="1"
284-
data-columns-xl="2"
285-
>
272+
<div class="item-tile-group item-tile-group--list-view layout-grid">
286273
<ul aria-label="Items for sale">
287274
<li>
288275
<div class="item-tile item-tile--list-view">
@@ -322,7 +309,7 @@
322309
</div>
323310
<div class="item-tile__section-tertiary">
324311
<p>
325-
$29.99
312+
$29.99
326313
<span class="clipped">Was: </span>
327314
<s class="item-tile__list-price">$68.99</s>
328315
</p>
@@ -371,7 +358,7 @@
371358
</div>
372359
<div class="item-tile__section-tertiary">
373360
<p>
374-
$29.99
361+
$29.99
375362
<span class="clipped">Was: </span>
376363
<s class="item-tile__list-price">$68.99</s>
377364
</p>
@@ -420,7 +407,7 @@
420407
</div>
421408
<div class="item-tile__section-tertiary">
422409
<p>
423-
$29.99
410+
$29.99
424411
<span class="clipped">Was: </span>
425412
<s class="item-tile__list-price">$68.99</s>
426413
</p>
@@ -469,7 +456,7 @@
469456
</div>
470457
<div class="item-tile__section-tertiary">
471458
<p>
472-
$29.99
459+
$29.99
473460
<span class="clipped">Was: </span>
474461
<s class="item-tile__list-price">$68.99</s>
475462
</p>
@@ -485,10 +472,7 @@
485472
</demo>
486473

487474
<highlight-code type="html">
488-
<div class="item-tile-group item-tile-group--list-view layout-grid"
489-
data-columns-min="1"
490-
data-columns-xl="2"
491-
>
475+
<div class="item-tile-group item-tile-group--list-view layout-grid">
492476
<ul aria-label="Items for sale">
493477
<li>
494478
<div class="item-tile item-tile--list-view">
@@ -528,7 +512,7 @@
528512
</div>
529513
<div class="item-tile__section-tertiary">
530514
<p>
531-
$29.99
515+
$29.99
532516
<span class="clipped">Was: </span>
533517
<s class="item-tile__list-price">$68.99</s>
534518
</p>

‎src/sass/item-tile-group/item-tile-group.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
.layout-grid.item-tile-group {
2+
--layout-grid-columns-min: 2;
3+
--layout-grid-columns-xs: 2;
4+
--layout-grid-columns-sm: 2;
5+
--layout-grid-columns-md: 3;
6+
--layout-grid-columns-lg: 4;
7+
--layout-grid-columns-xl: 5;
8+
--layout-grid-columns-xl2: 5;
9+
--layout-grid-columns-xl3: 5;
10+
--layout-grid-columns-xl4: 5;
11+
}
12+
13+
.layout-grid.item-tile-group--list-view {
14+
--layout-grid-columns-min: 1;
15+
--layout-grid-columns-xs: 1;
16+
--layout-grid-columns-sm: 1;
17+
--layout-grid-columns-md: 1;
18+
--layout-grid-columns-lg: 1;
19+
--layout-grid-columns-xl: 2;
20+
--layout-grid-columns-xl2: 2;
21+
--layout-grid-columns-xl3: 2;
22+
--layout-grid-columns-xl4: 2;
23+
}
124
.item-tile-group .item-tile__title {
225
-webkit-line-clamp: 3;
326
}

0 commit comments

Comments
 (0)