feat(image-list): Add corner radius mixin (#2385)

material-components · Mar 13, 2018 · 567deec · 567deec
1 parent cf45654
commit 567deec
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 9 deletions.
diff --git a/demos/image-list.html b/demos/image-list.html
@@ -118,17 +118,35 @@
       </section>
 
       <section class="example">
-        <div class="mdc-form-field">
-          <div class="mdc-checkbox">
-            <input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
-            <div class="mdc-checkbox__background">
-              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-              </svg>
-              <div class="mdc-checkbox__mixedmark"></div>
+        <div dir="ltr">
+          <div>
+            <div class="mdc-form-field">
+              <div class="mdc-checkbox">
+                <input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
+                <div class="mdc-checkbox__background">
+                  <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
+                    <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+                  </svg>
+                  <div class="mdc-checkbox__mixedmark"></div>
+                </div>
+              </div>
+              <label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
+            </div>
+          </div>
+          <div>
+            <div class="mdc-form-field">
+              <div class="mdc-checkbox">
+                <input type="checkbox" class="mdc-checkbox__native-control" id="toggle-radius" aria-labelledby="toggle-radius-label" />
+                <div class="mdc-checkbox__background">
+                  <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
+                    <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+                  </svg>
+                  <div class="mdc-checkbox__mixedmark"></div>
+                </div>
+              </div>
+              <label for="toggle-radius" id="toggle-radius-label">Toggle Rounded Corners</label>
             </div>
           </div>
-          <label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
         </div>
 
         <h1 class="mdc-typography--headline">Standard Image List</h1>
@@ -304,6 +322,10 @@ <h1 class="mdc-typography--headline">Standard Image List</h1>
           document.body.setAttribute('dir', this.checked ? 'rtl' : 'ltr');
         });
 
+        document.getElementById('toggle-radius').addEventListener('change', function() {
+          document.querySelector('.example').classList[this.checked ? 'add' : 'remove']('rounded-corners');
+        });
+
         var standardImageListEl = document.getElementById('standard-image-list');
 
         document.getElementById('standard-label-below').addEventListener('change', function() {

diff --git a/demos/image-list.scss b/demos/image-list.scss
@@ -41,6 +41,10 @@
   display: none;
 }
 
+.rounded-corners {
+  @include mdc-image-list-corner-radius(8px);
+}
+
 @media (max-width: 599px) {
   .mdc-image-list.standard-image-list {
     @include mdc-image-list-standard-columns(3);

diff --git a/packages/mdc-image-list/README.md b/packages/mdc-image-list/README.md
@@ -90,6 +90,7 @@ CSS Class | Description
 Mixin | Description
 --- | ---
 `mdc-image-list-aspect($width-height-ratio)` | Styles the aspect container elements within an Image List to conform to the given ratio, where 1 is 1:1, greater than 1 is wider, and less than 1 is taller.
+`mdc-image-list-corner-radius($radius)` | Styles the image and supporting content elements within an Image List to have rounded corners with the given radius.
 `mdc-image-list-standard-columns($column-count, $gutter-size)` | Styles a Standard Image List to display the given number of columns. `$gutter-size` is optional and overrides the default amount of space between items.
 
 ### Additional Information

diff --git a/packages/mdc-image-list/_mixins.scss b/packages/mdc-image-list/_mixins.scss
@@ -20,6 +20,16 @@
   }
 }
 
+@mixin mdc-image-list-corner-radius($radius) {
+  .mdc-image-list__image {
+    border-radius: $radius;
+  }
+
+  .mdc-image-list__supporting {
+    border-radius: 0 0 $radius $radius;
+  }
+}
+
 // Standard Image List
 
 @mixin mdc-image-list-standard-columns($column-count, $gutter-size: $mdc-image-list-standard-gutter-size) {