fix(avatar): document and add custom properties

references #14850
ionic-team · Aug 8, 2018 · f1389f7 · f1389f7
1 parent d0cd3b0
commit f1389f7
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 17 deletions.
diff --git a/core/src/components/avatar/avatar.ios.scss b/core/src/components/avatar/avatar.ios.scss
@@ -6,15 +6,8 @@
 // --------------------------------------------------
 
 :host {
-  @include border-radius($avatar-ios-border-radius);
+  --border-radius: #{$avatar-ios-border-radius};
 
   width: $avatar-ios-width;
   height: $avatar-ios-height;
 }
-
-::slotted(ion-img),
-::slotted(img) {
-  @include border-radius($avatar-ios-border-radius);
-
-  overflow: hidden;
-}
diff --git a/core/src/components/avatar/avatar.md.scss b/core/src/components/avatar/avatar.md.scss
@@ -6,15 +6,8 @@
 // --------------------------------------------------
 
 :host {
-  @include border-radius($avatar-md-border-radius);
+  --border-radius: #{$avatar-md-border-radius};
 
   width: $avatar-md-width;
   height: $avatar-md-height;
 }
-
-::slotted(ion-img),
-::slotted(img) {
-  @include border-radius($avatar-md-border-radius);
-
-  overflow: hidden;
-}
diff --git a/core/src/components/avatar/avatar.scss b/core/src/components/avatar/avatar.scss
@@ -5,13 +5,22 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --border-radius: Border radius of the avatar and inner image
+   */
+  @include border-radius(var(--border-radius));
+
   display: block;
 }
 
 ::slotted(ion-img),
 ::slotted(img) {
+  @include border-radius(var(--border-radius));
+
   width: 100%;
   height: 100%;
 
   object-fit: cover;
+
+  overflow: hidden;
 }
diff --git a/core/src/components/avatar/readme.md b/core/src/components/avatar/readme.md
@@ -8,6 +8,12 @@ Avatars can be used by themselves or inside of any element. If placed inside of
 <!-- Auto Generated Below -->
 
 
+## CSS Custom Properties
+
+| Name              | Description                                 |
+| ----------------- | ------------------------------------------- |
+| `--border-radius` | Border radius of the avatar and inner image |
+
 
 ----------------------------------------------
 

diff --git a/core/src/components/avatar/test/standalone/index.html b/core/src/components/avatar/test/standalone/index.html
@@ -9,9 +9,19 @@
   <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
 
-<body>
+<body padding>
+  <h1>Default</h1>
   <ion-avatar>
     <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
   </ion-avatar>
+
+  <h1>Custom</h1>
+  <ion-avatar style="width: 200px; height: 200px">
+    <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
+  </ion-avatar>
+
+  <ion-avatar style="--border-radius: 4px;">
+    <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
+  </ion-avatar>
 </body>
 </html>