fix(thumbnail): add and document custom properties

references #14850
ionic-team · Aug 8, 2018 · c88e1ad · c88e1ad
1 parent 5f6f6a1
commit c88e1ad
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 23 deletions.
diff --git a/core/src/components/thumbnail/readme.md b/core/src/components/thumbnail/readme.md
@@ -8,6 +8,13 @@ Thumbnails can be used by themselves or inside of any element. If placed inside
 <!-- Auto Generated Below -->
 
 
+## CSS Custom Properties
+
+| Name              | Description                    |
+| ----------------- | ------------------------------ |
+| `--border-radius` | Border radius of the thumbnail |
+| `--size`          | Size of the thumbnail          |
+
 
 ----------------------------------------------
 

diff --git a/core/src/components/thumbnail/test/standalone/index.html b/core/src/components/thumbnail/test/standalone/index.html
@@ -13,5 +13,16 @@
   <ion-thumbnail>
     <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
   </ion-thumbnail>
+
+  <ion-thumbnail class="custom">
+    <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
+  </ion-thumbnail>
+
+  <style>
+    .custom {
+      --border-radius: 50%;
+      --size: 120px;
+    }
+  </style>
 </body>
 </html>
diff --git a/core/src/components/thumbnail/thumbnail.ios.scss b/core/src/components/thumbnail/thumbnail.ios.scss
@@ -1,20 +1,10 @@
 @import "./thumbnail";
 @import "./thumbnail.ios.vars";
 
-
 // iOS Thumbnail
 // --------------------------------------------------
 
 :host {
-  @include border-radius($thumbnail-ios-border-radius);
-
-  width: $thumbnail-ios-width;
-  height: $thumbnail-ios-height;
-}
-
-::slotted(ion-img),
-::slotted(img) {
-  @include border-radius($thumbnail-ios-border-radius);
-
-  overflow: hidden;
+  --size: #{$thumbnail-ios-width};
+  --border-radius: #{$thumbnail-ios-border-radius};
 }
diff --git a/core/src/components/thumbnail/thumbnail.md.scss b/core/src/components/thumbnail/thumbnail.md.scss
@@ -5,15 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  @include border-radius($thumbnail-md-border-radius);
-
-  width: $thumbnail-md-width;
-  height: $thumbnail-md-height;
-}
-
-::slotted(ion-img),
-::slotted(img) {
-  @include border-radius($thumbnail-md-border-radius);
-
-  overflow: hidden;
+  --size: #{$thumbnail-md-width};
+  --border-radius: #{$thumbnail-md-border-radius};
 }
diff --git a/core/src/components/thumbnail/thumbnail.scss b/core/src/components/thumbnail/thumbnail.scss
@@ -5,13 +5,26 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --border-radius: Border radius of the thumbnail
+   * @prop --size: Size of the thumbnail
+   */
+
+  @include border-radius(var(--border-radius));
+
   display: block;
+
+  width: var(--size);
+  height: var(--size);
 }
 
 ::slotted(ion-img),
 ::slotted(img) {
+  @include border-radius(var(--border-radius));
+
   width: 100%;
   height: 100%;
 
   object-fit: cover;
+  overflow: hidden;
 }