Add avatar patch

infor-design · Mar 14, 2024 · 102663f · 102663f
1 parent 543e428
commit 102663f
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/app/views/components/images/example-avatar.html b/app/views/components/images/example-avatar.html
@@ -6,11 +6,11 @@
       <div class="avatar">AC</div>&nbsp;&nbsp;&nbsp;&nbsp;
       <div class="avatar large">Ac</div>&nbsp;&nbsp;&nbsp;&nbsp;
       <br /><br />
-      <div class="avatar azure05">AC</div>&nbsp;&nbsp;&nbsp;&nbsp;
-      <div class="avatar large azure05">Ac</div>
+      <div class="avatar azure05 square">AC</div>&nbsp;&nbsp;&nbsp;&nbsp;
+      <div class="avatar large azure05 square">Ac</div>
       <br /><br />
-      <div class="avatar three-char">mon</div>&nbsp;&nbsp;&nbsp;&nbsp;
-      <div class="avatar large three-char">mon</div>
+      <div class="avatar three-char square">mon</div>&nbsp;&nbsp;&nbsp;&nbsp;
+      <div class="avatar large three-char square">mon</div>
       <br /><br />
       <img class="image-round" src="{{basepath}}/images/10.jpg" alt="Photo of Evyn" tabindex="0"/>
       <br/><br/>

diff --git a/app/views/components/module-nav/example-icon.html b/app/views/components/module-nav/example-icon.html
@@ -6,7 +6,7 @@
     justify-content: center;
     background-color: #0072EC;
     color: white;
-    border-radius: 4px;
+    border-radius: 8px;
     overflow: hidden;
     height: 100%;
   }

diff --git a/app/views/components/module-nav/example-set-role-from-data.html b/app/views/components/module-nav/example-set-role-from-data.html
@@ -6,7 +6,7 @@
     justify-content: center;
     background-color: #0072EC;
     color: white;
-    border-radius: 4px;
+    border-radius: 8px;
     overflow: hidden;
     height: 100%;
   }

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,5 +1,11 @@
 # What's New with Enterprise
 
+## v4.92.5
+
+## v4.92.5 Fixes
+
+- `[Avatar]` Is no longer round by default. To use it in module nav add the new `square` class. ([#8539](https://github.com/infor-design/enterprise/issues/8539))
+
 ## v4.92.3
 
 ## v4.92.3 Fixes

diff --git a/src/components/images/_images.scss b/src/components/images/_images.scss
@@ -61,6 +61,7 @@ $images-size: (
 
   img {
     border: 1px solid transparent; // to prevent jump on focus
+
     &:focus {
       @include focus-state();
     }
@@ -101,34 +102,46 @@ $images-size: (
 .avatar {
   background: $ids-color-palette-emerald-50;
   border: 1px solid transparent; // to prevent jump on focus
-  border-radius: 8px;
   color: $ids-color-palette-white;
+  border-radius: 50%;
   display: inline-block;
   font-size: 14px;
   font-weight: 600;
+  min-height: 32px;
   height: 32px;
+  max-height: 32px;
   line-height: 30px;
   text-align: center;
   text-transform: uppercase;
   vertical-align: middle;
+  min-width: 32px;
   width: 32px;
+  max-width: 32px;
   user-select: none;
 
   &.three-char {
     text-transform: capitalize;
   }
 
   &.large {
+    min-height: 48px;
     height: 48px;
+    max-height: 48px;
     font-size: 20px;
     line-height: 48px;
+    min-width: 48px;
     width: 48px;
+    max-width: 48px;
   }
 
   &.round {
     border-radius: 50%;
   }
 
+  &.square {
+    border-radius: 8px;
+  }
+
   &:focus {
     @include focus-state();
   }