From 83d05ce7a0c0855f04d7d1e373ebed63a6e633aa Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Thu, 10 Nov 2022 18:18:29 -0600
Subject: [PATCH 1/3] joy avatar first pass
---
docs/data/joy/components/avatar/avatar.md | 44 +++++++++++------------
1 file changed, 22 insertions(+), 22 deletions(-)
diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md
index 3408b2d91ebf15..8cf877e4c2ecdc 100644
--- a/docs/data/joy/components/avatar/avatar.md
+++ b/docs/data/joy/components/avatar/avatar.md
@@ -6,11 +6,11 @@ githubLabel: 'component: avatar'
# Avatar
-
Avatar represents a person that contains an image or initials which can also be presented in a group with multiple avatars.
+
An avatar is a graphical representation of a user's identity.
## Introduction
-The avatar component is usually seen for displaying user information in places such as menus, tables, and chats.
+The Avatar component can be used to display graphical information about a user in places such as menus, tables, and chats.
{{"demo": "AvatarUsage.js", "hideToolbar": true}}
@@ -30,17 +30,17 @@ export default function MyApp() {
### Sizes
-The avatar components comes with three sizes out of the box: `sm`, `md` (the default), and `lg`.
+The Avatar component comes in three sizes: `sm`, `md` (the default), and `lg`:
{{"demo": "AvatarSizes.js"}}
:::success
-To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
:::
### Variants
-The avatar component supports the four global variants: `soft` (default), `solid`, `outlined`, and `plain`.
+The Avatar component supports the four global variants: `soft` (default), `solid`, `outlined`, and `plain`.
{{"demo": "AvatarVariants.js"}}
@@ -50,36 +50,36 @@ To learn how to add more variants to the component, check out [Themed components
### Initials
-Use a string as children to display its initials on the avatar component.
+Use a string as children to display its initials on the Avatar component.
{{"demo": "InitialAvatars.js"}}
### Image
-Insert images in the avatar by using a path inside the `src` prop, similar to how you'd do in the HTML `` element.
+Insert images in the Avatar by using a path inside the `src` prop, similar to how you'd do in the HTML `` element.
Make sure to to write a meaningful description in the `alt` prop.
{{"demo": "ImageAvatars.js"}}
### Image fallbacks
-If an error occurs while loading the avatar image, it will fallback to alternatives in the following order:
+If an error occurs while loading the Avatar's image, it will fall back to alternatives in the following order:
-1. The provided children string.
-2. The first letter of the `alt` text.
-3. A generic icon.
+1. The provided children string
+2. The first letter of the `alt` text
+3. A generic icon
{{"demo": "FallbackAvatars.js"}}
### With a badge
-Combine the avatar component with the [`Badge`](/joy-ui/react-badge/) to extend what you can communicate with it.
+Combine the Avatar component with the [Badge](/joy-ui/react-badge/) to extend what you can communicate with it.
{{"demo": "BadgeAvatars.js"}}
### Group
-Use `AvatarGroup` component to group multiple avatars together.
+Use the Avatar Group component to group multiple Avatars together.
```jsx
import AvatarGroup from '@mui/joy/AvatarGroup';
@@ -89,7 +89,7 @@ import AvatarGroup from '@mui/joy/AvatarGroup';
### Quantity within a group
-The `AvatarGroup` does not provide built-in props to control the maximum and the total number of avatars within a group.
+The Avatar Group does not provide built-in props to control the maximum or the total number of Avatars within a group.
This is because customization is broader if you have full control of the logic.
Use the snippet below as insipiration to create that:
@@ -98,34 +98,34 @@ Use the snippet below as insipiration to create that:
### Ellipsis action
-`Avatar` exposes meaningful CSS variables to communicate with `AvatarGroup`.
-You can apply those variables to other components to mimic the avatar appearance inside a group.
+Avatar exposes meaningful CSS variables to communicate with Avatar Group.
+You can apply those variables to other components to mimic the Avatar's appearance inside a group.
This customization technique makes your interface more resilient to changes.
-Here is an example of using `IconButton` component to create an ellipsis action:
+Here is an example using the Icon Button component to create an ellipsis action:
{{"demo": "EllipsisAvatarAction.js"}}
### Overlapping order
-By default, the first avatar in the group stays behind the second and so on.
-You can reverse the overlapping order by reversing avatars position and using the CSS `flexDirection: row-reverse` property in the `AvatarGroup`.
+By default, the first Avatar in the group stays behind the second, and so on.
+You can reverse the overlapping order by reversing the Avatar's position and using the CSS `flexDirection: row-reverse` property in the Avatar Group:
{{"demo": "OverlapAvatarGroup.js"}}
### Vertical
-To render the `AvatarGroup` vertically, add the CSS `writing-mode: vertical-rl` property to the it and rotate the extra element, if existent, by -90 degrees.
+To render the Avatar Group vertically, add the CSS `writing-mode: vertical-rl` property to the it and rotate the extra element (if it exists) by -90 degrees.
:::info
-**Tip:** Give preference to this approach as it preserves the overlapping offset between avatars whereas `flexDirection: column` don't.
+This approach is preferable as it preserves the overlapping offset between Avatars, whereas `flexDirection: column` doesn't.
:::
{{"demo": "VerticalAvatarGroup.js"}}
## CSS variables
-Play around with all the CSS variables available in the slider component to see how the design changes.
+Play around with all the CSS variables available in the Slider component to see how the design changes.
You can use those to customize the component on both the `sx` prop and the theme.
From ad124bfea123745732e3e879f432ada06f65c26d Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Thu, 10 Nov 2022 19:42:03 -0600
Subject: [PATCH 2/3] avatar second pass:
---
.../joy/components/avatar/FallbackAvatars.js | 2 +-
.../joy/components/avatar/FallbackAvatars.tsx | 2 +-
.../avatar/FallbackAvatars.tsx.preview | 2 +-
docs/data/joy/components/avatar/avatar.md | 101 ++++++++++--------
4 files changed, 62 insertions(+), 45 deletions(-)
diff --git a/docs/data/joy/components/avatar/FallbackAvatars.js b/docs/data/joy/components/avatar/FallbackAvatars.js
index ad9de295481356..8a605a3ec62b26 100644
--- a/docs/data/joy/components/avatar/FallbackAvatars.js
+++ b/docs/data/joy/components/avatar/FallbackAvatars.js
@@ -6,7 +6,7 @@ export default function FallbackAvatars() {
return (
- B
+ BT
diff --git a/docs/data/joy/components/avatar/FallbackAvatars.tsx b/docs/data/joy/components/avatar/FallbackAvatars.tsx
index ad9de295481356..8a605a3ec62b26 100644
--- a/docs/data/joy/components/avatar/FallbackAvatars.tsx
+++ b/docs/data/joy/components/avatar/FallbackAvatars.tsx
@@ -6,7 +6,7 @@ export default function FallbackAvatars() {
return (
- B
+ BT
diff --git a/docs/data/joy/components/avatar/FallbackAvatars.tsx.preview b/docs/data/joy/components/avatar/FallbackAvatars.tsx.preview
index 4909c1039443d1..fbf311584f0550 100644
--- a/docs/data/joy/components/avatar/FallbackAvatars.tsx.preview
+++ b/docs/data/joy/components/avatar/FallbackAvatars.tsx.preview
@@ -1,5 +1,5 @@
- B
+ BT
\ No newline at end of file
diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md
index 8cf877e4c2ecdc..ded3013d8ffd4d 100644
--- a/docs/data/joy/components/avatar/avatar.md
+++ b/docs/data/joy/components/avatar/avatar.md
@@ -28,56 +28,74 @@ export default function MyApp() {
}
```
-### Sizes
+## Basics
-The Avatar component comes in three sizes: `sm`, `md` (the default), and `lg`:
+By default, the Avatar component displays a generic Person Icon.
+Wrap it around a string to display plain text, or use the `src` prop to display an image.
-{{"demo": "AvatarSizes.js"}}
-
-:::success
-To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
-:::
-
-### Variants
+## Anatomy
-The Avatar component supports the four global variants: `soft` (default), `solid`, `outlined`, and `plain`.
+The Avatar component is composed of a root `