Avatar Updates (#173)

* Clean up avatars

* Increase specificity of margin: 0

Author: philschanely

app/assets/stylesheets/sage/system/patterns/objects/_live_avatar.scss

@@ -35,6 +35,11 @@ $-live-avatar-ring-colors: (
 );
 $-live-avatar-tile-size: rem(216px);
 
+@mixin live-avatar-scaling() {
+  width: 100%;
+  height: 100%;
+}
+
 .sage-live-avatar {
   display: grid;
   grid-template-columns: 100%;
@@ -79,14 +84,11 @@ $-live-avatar-tile-size: rem(216px);
   @include sage-feature-live-avatar-ring();
 }
 
-.sage-live-avatar--scaling {
-  width: 100%;
-  height: 100%;
-}
-
 .sage-live-avatar--tile {
   padding: sage-spacing(md);
   border-radius: initial;
+
+  @include live-avatar-scaling;
 }
 
 // Set up color variations

app/assets/stylesheets/sage/system/vendor/_reboot.scss

@@ -266,6 +266,7 @@ button::-moz-focus-inner,
 input[type="radio"],
 input[type="checkbox"] {
   box-sizing: border-box;
+  margin: 0;
   padding: 0;
 }
 

app/views/sage/examples/objects/live_avatar/_markup.html.erb

@@ -1,4 +1,4 @@
-<div class="sage-live-avatar <%= color != "" ? "sage-live-avatar--#{color}" : "" %> <%= hasRing ? "sage-live-avatar--ring" : "" %> <%= scale ? "sage-live-avatar--scaling" : "" %> <%= custom_class %>">
+<div class="sage-live-avatar<%= color != "" ? " sage-live-avatar--#{color}" : "" %><%= hasRing ? " sage-live-avatar--ring" : "" %><%= scale ? " sage-live-avatar--scaling" : "" %><%= custom_class %>">
   <svg class="sage-live-avatar__initials" viewBox="0 0 40 40">
     <text text-anchor="middle" x="19.5" y="24"><%= initials %></text>
   </svg>

app/views/sage/examples/objects/live_avatar/_preview.html.erb

@@ -58,70 +58,4 @@
     scale: false,
     custom_class: ""
   %>
-</div>
-
-<div class="sage-live-avatar-wrapper">
-  <div style="width: 40px; height: 40px;">
-    <%= render "sage/examples/objects/live_avatar/markup",
-      initials: "JC",
-      color: "purple",
-      hasRing: false,
-      url: "",
-      scale: true,
-      custom_class: ""
-    %>
-  </div>
-  <div style="width: 128px; height: 128px;">
-    <%= render "sage/examples/objects/live_avatar/markup",
-      initials: "JC",
-      color: "purple",
-      hasRing: false,
-      url: "",
-      scale: true,
-      custom_class: ""
-    %>
-  </div>
-  <div style="width: 256px; height: 256px;">
-    <%= render "sage/examples/objects/live_avatar/markup",
-      initials: "JC",
-      color: "purple",
-      hasRing: false,
-      url: "",
-      scale: true,
-      custom_class: ""
-    %>
-  </div>
-</div>
-
-<div class="sage-live-avatar-wrapper">
-  <div style="width: 40px; height: 40px;">
-    <%= render "sage/examples/objects/live_avatar/markup",
-      initials: "LJ",
-      color: "",
-      hasRing: false,
-      url: "../../assets/sage/avatar/jay.png",
-      scale: true,
-      custom_class: ""
-    %>
-  </div>
-  <div style="width: 128px; height: 128px;">
-    <%= render "sage/examples/objects/live_avatar/markup",
-      initials: "LJ",
-      color: "",
-      hasRing: false,
-      url: "../../assets/sage/avatar/jay.png",
-      scale: true,
-      custom_class: ""
-    %>
-  </div>
-  <div style="width: 256px; height: 256px;">
-    <%= render "sage/examples/objects/live_avatar/markup",
-      initials: "LJ",
-      color: "",
-      hasRing: false,
-      url: "../../assets/sage/avatar/jay.png",
-      scale: true,
-      custom_class: ""
-    %>
-  </div>
-</div>
+</div>

app/views/sage/examples/objects/live_avatar/_props.html.erb

@@ -19,3 +19,13 @@
   <td>Boolean</td>
   <td>false</td>
 </tr>
+<tr>
+  <td>tile</td>
+  <td>
+    With the <code>--tile</code> modifier this component can become scalable as the core part of
+    a tile. In such cases, the initials or avatar image will be centered on a background depending
+    on the color passed in. The tile container should provide the sizing constraints.
+  </td>
+  <td>Boolean</td>
+  <td>false</td>
+</tr>