fix(thumbnail): add and document custom properties

references #14850

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          |
+
 
 ----------------------------------------------
 

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>

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);
+  --size: #{$thumbnail-ios-width};
-
+  --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;
 }

core/src/components/thumbnail/thumbnail.md.scss

@@ -5,15 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  @include border-radius($thumbnail-md-border-radius);
+  --size: #{$thumbnail-md-width};
-
+  --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;
 }

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;
 }