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

Commit 0bfeabb

Browse files
kfranqueirokfranqueiro
authored
feat(image-list): Add feature targeting for styles (#4535)
1 parent e80ac0c commit 0bfeabb

File tree

4 files changed

+164
-101
lines changed

4 files changed

+164
-101
lines changed

‎packages/mdc-image-list/_mixins.scss

Lines changed: 154 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,49 +18,190 @@
1818
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
1919
// THE SOFTWARE.
2020

21+
@import "@material/feature-targeting/functions";
22+
@import "@material/feature-targeting/mixins";
2123
@import "@material/shape/mixins";
2224
@import "@material/shape/functions";
25+
@import "@material/theme/mixins";
26+
@import "@material/typography/mixins";
2327
@import "./variables";
2428

25-
@mixin mdc-image-list-aspect($width-height-ratio) {
29+
@mixin mdc-image-list-core-styles($query: mdc-feature-all()) {
30+
$feat-color: mdc-feature-create-target($query, color);
31+
$feat-structure: mdc-feature-create-target($query, structure);
32+
33+
// postcss-bem-linter: define image-list
34+
.mdc-image-list {
35+
@include mdc-feature-targets($feat-structure) {
36+
display: flex;
37+
flex-wrap: wrap;
38+
// Margin and padding are set to override default user agent styles for lists, and also to center the Image List
39+
margin: 0 auto;
40+
padding: 0;
41+
}
42+
}
43+
44+
.mdc-image-list__item,
45+
.mdc-image-list__image-aspect-container {
46+
@include mdc-feature-targets($feat-structure) {
47+
// Supports absolute positioning of protected supporting content for item, and image for image-aspect-container
48+
position: relative;
49+
box-sizing: border-box;
50+
}
51+
}
52+
53+
.mdc-image-list__item {
54+
@include mdc-feature-targets($feat-structure) {
55+
list-style-type: none;
56+
}
57+
}
58+
59+
.mdc-image-list__image {
60+
@include mdc-feature-targets($feat-structure) {
61+
width: 100%;
62+
}
63+
}
64+
65+
// Descendant selector allows image-aspect-container to be optional in DOM structure
66+
.mdc-image-list__image-aspect-container .mdc-image-list__image {
67+
@include mdc-feature-targets($feat-structure) {
68+
position: absolute;
69+
top: 0;
70+
right: 0;
71+
bottom: 0;
72+
left: 0;
73+
height: 100%;
74+
// Background styles to support div instead of img
75+
background-repeat: no-repeat;
76+
background-position: center;
77+
background-size: cover;
78+
}
79+
}
80+
81+
@include mdc-image-list-aspect(1, $query: $query);
82+
@include mdc-image-list-shape-radius(0, $query: $query);
83+
84+
.mdc-image-list__supporting {
85+
@include mdc-feature-targets($feat-color) {
86+
@include mdc-theme-prop(color, text-primary-on-background);
87+
}
88+
89+
@include mdc-feature-targets($feat-structure) {
90+
display: flex;
91+
align-items: center;
92+
justify-content: space-between;
93+
box-sizing: border-box;
94+
padding: 8px 0;
95+
line-height: $mdc-image-list-icon-size;
96+
}
97+
}
98+
99+
.mdc-image-list__label {
100+
@include mdc-typography(subtitle1, $query: $query);
101+
@include mdc-typography-overflow-ellipsis($query: $query);
102+
}
103+
104+
// Modifier for labels/icons with text protection, overlaying images.
105+
106+
.mdc-image-list--with-text-protection .mdc-image-list__supporting {
107+
@include mdc-feature-targets($feat-structure) {
108+
position: absolute;
109+
bottom: 0;
110+
width: 100%;
111+
height: $mdc-image-list-text-protection-height;
112+
padding: 0 $mdc-image-list-text-protection-horizontal-padding;
113+
}
114+
115+
@include mdc-feature-targets($feat-color) {
116+
background: $mdc-image-list-text-protection-background-color;
117+
color: #fff;
118+
}
119+
}
120+
121+
// Masonry Image List, using CSS columns (i.e. renders down then across)
122+
123+
.mdc-image-list--masonry {
124+
@include mdc-feature-targets($feat-structure) {
125+
display: block; // Override flex
126+
}
127+
128+
.mdc-image-list__item {
129+
@include mdc-feature-targets($feat-structure) {
130+
break-inside: avoid-column;
131+
}
132+
}
133+
134+
.mdc-image-list__image {
135+
@include mdc-feature-targets($feat-structure) {
136+
display: block;
137+
height: auto;
138+
}
139+
}
140+
}
141+
// postcss-bem-linter: end
142+
}
143+
144+
@mixin mdc-image-list-aspect($width-height-ratio, $query: mdc-feature-all()) {
145+
$feat-structure: mdc-feature-create-target($query, structure);
146+
26147
.mdc-image-list__image-aspect-container {
27-
padding-bottom: calc(100% / #{$width-height-ratio});
148+
@include mdc-feature-targets($feat-structure) {
149+
padding-bottom: calc(100% / #{$width-height-ratio});
150+
}
28151
}
29152
}
30153

31-
@mixin mdc-image-list-shape-radius($radius, $rtl-reflexive: false) {
154+
@mixin mdc-image-list-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
32155
.mdc-image-list__image {
33-
@include mdc-shape-radius($radius, $rtl-reflexive);
156+
@include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
34157
}
35158

36159
$selector: if(&, "&.mdc-image-list--with-text-protection", ".mdc-image-list--with-text-protection");
37160

38161
#{$selector} .mdc-image-list__supporting {
39162
$masked-radius: mdc-shape-mask-radius($radius, 0 0 1 1);
40163

41-
@include mdc-shape-radius($masked-radius, $rtl-reflexive);
164+
@include mdc-shape-radius($masked-radius, $rtl-reflexive, $query: $query);
42165
}
43166
}
44167

45168
// Standard Image List
46169

47-
@mixin mdc-image-list-standard-columns($column-count, $gutter-size: $mdc-image-list-standard-gutter-size) {
170+
@mixin mdc-image-list-standard-columns(
171+
$column-count,
172+
$gutter-size: $mdc-image-list-standard-gutter-size,
173+
$query: mdc-feature-all()
174+
) {
175+
$feat-structure: mdc-feature-create-target($query, structure);
176+
48177
// This uses margin rather than padding to facilitate properly positioning the supporting content element when
49178
// --with-text-protection is used.
50179
.mdc-image-list__item {
51-
// Subtract extra fraction from each item's width to ensure correct wrapping in IE and Edge which round differently
52-
width: calc(100% / #{$column-count} - #{$gutter-size + 1 / $column-count});
53-
margin: $gutter-size / 2;
180+
@include mdc-feature-targets($feat-structure) {
181+
// Subtract extra fraction from each item's width to ensure correct wrapping in IE/Edge which round differently
182+
width: calc(100% / #{$column-count} - #{$gutter-size + 1 / $column-count});
183+
margin: $gutter-size / 2;
184+
}
54185
}
55186
}
56187

57188
// Masonry Image List
58189

59-
@mixin mdc-image-list-masonry-columns($column-count, $gutter-size: $mdc-image-list-masonry-gutter-size) {
60-
column-count: $column-count;
61-
column-gap: $gutter-size;
190+
@mixin mdc-image-list-masonry-columns(
191+
$column-count,
192+
$gutter-size: $mdc-image-list-masonry-gutter-size,
193+
$query: mdc-feature-all()
194+
) {
195+
$feat-structure: mdc-feature-create-target($query, structure);
196+
197+
@include mdc-feature-targets($feat-structure) {
198+
column-count: $column-count;
199+
column-gap: $gutter-size;
200+
}
62201

63202
.mdc-image-list__item {
64-
margin-bottom: $gutter-size;
203+
@include mdc-feature-targets($feat-structure) {
204+
margin-bottom: $gutter-size;
205+
}
65206
}
66207
}

‎packages/mdc-image-list/mdc-image-list.scss

Lines changed: 1 addition & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -19,91 +19,4 @@
1919
// THE SOFTWARE.
2020

2121
@import "./mixins";
22-
@import "./variables";
23-
@import "@material/theme/mixins";
24-
@import "@material/typography/mixins";
25-
26-
.mdc-image-list {
27-
display: flex;
28-
flex-wrap: wrap;
29-
// Margin and padding are set to override default user agent styles for lists, and also to center the Image List
30-
margin: 0 auto;
31-
padding: 0;
32-
}
33-
34-
.mdc-image-list__item,
35-
.mdc-image-list__image-aspect-container {
36-
// Supports absolute positioning of protected supporting content for item, and image for image-aspect-container
37-
position: relative;
38-
box-sizing: border-box;
39-
}
40-
41-
.mdc-image-list__item {
42-
list-style-type: none;
43-
}
44-
45-
.mdc-image-list__image {
46-
width: 100%;
47-
}
48-
49-
// Descendant selector allows image-aspect-container to be optional in DOM structure
50-
.mdc-image-list__image-aspect-container .mdc-image-list__image {
51-
position: absolute;
52-
top: 0;
53-
right: 0;
54-
bottom: 0;
55-
left: 0;
56-
height: 100%;
57-
// Background styles to support div instead of img
58-
background-repeat: no-repeat;
59-
background-position: center;
60-
background-size: cover;
61-
}
62-
63-
@at-root {
64-
@include mdc-image-list-aspect(1);
65-
@include mdc-image-list-shape-radius(0);
66-
}
67-
68-
.mdc-image-list__supporting {
69-
@include mdc-theme-prop(color, text-primary-on-background);
70-
71-
display: flex;
72-
align-items: center;
73-
justify-content: space-between;
74-
box-sizing: border-box;
75-
padding: 8px 0;
76-
line-height: $mdc-image-list-icon-size;
77-
}
78-
79-
.mdc-image-list__label {
80-
@include mdc-typography(subtitle1);
81-
@include mdc-typography-overflow-ellipsis;
82-
}
83-
84-
// Modifier for labels/icons with text protection, overlaying images.
85-
86-
.mdc-image-list--with-text-protection .mdc-image-list__supporting {
87-
position: absolute;
88-
bottom: 0;
89-
width: 100%;
90-
height: $mdc-image-list-text-protection-height;
91-
padding: 0 $mdc-image-list-text-protection-horizontal-padding;
92-
background: $mdc-image-list-text-protection-background-color;
93-
color: #fff;
94-
}
95-
96-
// Masonry Image List, using CSS columns (i.e. renders down then across)
97-
98-
.mdc-image-list--masonry {
99-
display: block; // Override flex
100-
101-
.mdc-image-list__item {
102-
break-inside: avoid-column;
103-
}
104-
105-
.mdc-image-list__image {
106-
display: block;
107-
height: auto;
108-
}
109-
}
22+
@include mdc-image-list-core-styles;

‎packages/mdc-image-list/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"image list"
1414
],
1515
"dependencies": {
16+
"@material/feature-targeting": "^0.44.1",
1617
"@material/shape": "^1.0.0",
1718
"@material/theme": "^1.0.0",
1819
"@material/typography": "^1.0.0"

‎test/scss/_feature-targeting-test.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import "@material/elevation/mixins";
66
@import "@material/fab/mixins";
77
@import "@material/form-field/mixins";
8+
@import "@material/image-list/mixins";
89
@import "@material/list/mixins";
910
@import "@material/menu-surface/mixins";
1011
@import "@material/menu/mixins";
@@ -80,6 +81,13 @@
8081
// Form Field
8182
@include mdc-form-field-core-styles($query: $query);
8283

84+
// Image List
85+
@include mdc-image-list-core-styles($query: $query);
86+
@include mdc-image-list-aspect(1, $query: $query);
87+
@include mdc-image-list-shape-radius(0, $query: $query);
88+
@include mdc-image-list-standard-columns(4, 4px, $query: $query);
89+
@include mdc-image-list-masonry-columns(4, 4px, $query: $query);
90+
8391
// List
8492
@include mdc-list-core-styles($query: $query);
8593
@include mdc-list-item-primary-text-ink-color(red, $query: $query);

0 commit comments

Comments
 (0)