Make avatar not round

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

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

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

docs/CHANGELOG.md

@@ -5,6 +5,15 @@
 ## v4.94.0 Fixes
 
 - `[Datagrid/Card]` When in a card/widget the size of the datagrid would be incorrect and the pager would be moved to the wrong place. Now on default widget size the widget will contain the pager correctly. You may need css for custom sized widgets or non default widget sizes ([#8496](https://github.com/infor-design/enterprise/issues/8372))
+- `[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))
+- `[Calendar]` Fixed inconsistencies in border colors of events in calendar. ([#8452](https://github.com/infor-design/enterprise/issues/8452))
+- `[Datagrid]` Fixed datagrid unable to have resize handle when using different column structure such as single lines. ([#8417](https://github.com/infor-design/enterprise/issues/8417))
+- `[Datagrid]` Removed escaping HTML for cell nodes. ([#8516](https://github.com/infor-design/enterprise/issues/8516))
+- `[Datagrid/Card]` When in a card/widget the size of the datagrid would be incorrect and the pager would be moved to the wrong place. Now on default widget size the widget will contain the pager correctly. You may need css for custom sized widgets or non default widget sizes. ([#8496](https://github.com/infor-design/enterprise/issues/8372))
+- `[Calendar]` Fixed inconsistencies in border colors of events in calendar. ([#8452](https://github.com/infor-design/enterprise/issues/8452))
+- `[Calendar]` Fixed event icon not properly rendered across week view mode. ([#8456](https://github.com/infor-design/enterprise/issues/8456))
+- `[Radio]` Fixed alignment in short form of radio button. ([#8193](https://github.com/infor-design/enterprise/issues/8193))
+- `[Toolbar]` Fixed button shapes in toolbar. ([#8523](https://github.com/infor-design/enterprise/issues/8523))
 
 ## v4.93.0
 

src/components/images/_images.scss

@@ -101,34 +101,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();
   }