fix(html): avatar rounded option value

telerik · Mar 14, 2022 · 865dc33 · 865dc33
1 parent f38780b
commit 865dc33
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/docs/components/avatar/index.md b/docs/components/avatar/index.md
@@ -14,7 +14,7 @@ The Avatar enables the user to display images, icons or initials representing pe
 ### Image
 
 ```html
-<div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+<div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-primary">
     <span class="k-avatar-image">
         <img src="avatar.jpg" />
     </span>
@@ -24,7 +24,7 @@ The Avatar enables the user to display images, icons or initials representing pe
 ### Icon
 
 ```html
-<div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+<div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-primary">
     <span class="k-avatar-icon">
         <span class="k-icon k-i-x"></span>
     </span>
@@ -34,7 +34,7 @@ The Avatar enables the user to display images, icons or initials representing pe
 ### Text
 
 ```html
-<div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+<div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-primary">
     <span class="k-avatar-text">JD</span>
 </div>
 ```
@@ -44,17 +44,17 @@ The Avatar has predefined sizes - small, medium or large.
 
 ```html
 <div class="k-d-flex k-gap-2">
-    <div class="k-avatar k-avatar-sm k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+    <div class="k-avatar k-avatar-sm k-rounded-full k-avatar-solid k-avatar-solid-primary">
         <span class="k-avatar-image">
             <img src="avatar.jpg" />
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-primary">
         <span class="k-avatar-image">
             <img src="avatar.jpg" />
         </span>
     </div>
-    <div class="k-avatar k-avatar-lg k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+    <div class="k-avatar k-avatar-lg k-rounded-full k-avatar-solid k-avatar-solid-primary">
         <span class="k-avatar-image">
             <img src="avatar.jpg" />
         </span>
@@ -68,7 +68,7 @@ The Avatar supports two appearance fill styles - `solid` and `outline`.
 ### Solid
 
 ```html
-<div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+<div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-primary">
     <span class="k-avatar-icon">
         <span class="k-icon k-i-user"></span>
     </span>
@@ -78,7 +78,7 @@ The Avatar supports two appearance fill styles - `solid` and `outline`.
 ### Outline
 
 ```html
-<div class="k-avatar k-avatar-md k-rounded-circle k-avatar-outline k-avatar-bordered k-avatar-outline-primary">
+<div class="k-avatar k-avatar-md k-rounded-full k-avatar-outline k-avatar-bordered k-avatar-outline-primary">
     <span class="k-avatar-icon">
         <span class="k-icon k-i-user"></span>
     </span>
@@ -90,13 +90,13 @@ The Avatar allows you to specify whether or not to render an additional border a
 
 ```html
 <div class="k-d-flex k-gap-2">
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-outline k-avatar-bordered k-avatar-outline-primary">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-outline k-avatar-bordered k-avatar-outline-primary">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
 
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-outline k-avatar-outline-primary">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-outline k-avatar-outline-primary">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
@@ -109,52 +109,52 @@ Avatars include several predefined theme colors, each serving its own semantic p
 
 ```html
 <div class="k-d-flex k-gap-2">
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-primary">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-secondary">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-secondary">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-tertiary">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-tertiary">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-info">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-info">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-success">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-success">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-warning">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-warning">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-error">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-error">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-dark">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-dark">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-light">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-light">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>
     </div>
-    <div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-inverse">
+    <div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-inverse">
         <span class="k-avatar-icon">
             <span class="k-icon k-i-user"></span>
         </span>

diff --git a/docs/components/button/index.md b/docs/components/button/index.md
@@ -237,7 +237,7 @@ To create different shapes, button utilizes two classes, one for the base struct
     </button>
     <button
         type="button"
-        class="k-button k-button-solid k-button-md k-button-square k-rounded-circle k-button-solid-base">
+        class="k-button k-button-solid k-button-md k-button-square k-rounded-full k-button-solid-base">
         <span class="k-button-text">Circle</span></button>
     </button>
 </div>

diff --git a/packages/html/src/avatar/README.md b/packages/html/src/avatar/README.md
@@ -1,6 +1,6 @@
 ```html
 <!-- default rendering -->
-<div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+<div class="k-avatar k-avatar-md k-rounded-full k-avatar-solid k-avatar-solid-primary">
     <span class="k-avatar-image">
         <img src="../../assets/avatar.jpg" />
     </span>