update initial alts, add isInline to icons, update css, update prop desc

Author: kmcfaul

packages/react-core/src/components/Avatar/Avatar.tsx

@@ -11,7 +11,7 @@ export interface AvatarProps extends React.DetailedHTMLProps<
   className?: string;
   /** Attribute that specifies the URL of the image for the avatar. */
   src?: string;
-  /** Attribute that specifies the alternate text of the image for the avatar. Will set aria-label for children or initials avatars. */
+  /** Attribute that specifies the alternate text of the image for the avatar. Will set aria-label avatars using children or initials. */
   alt: string;
   /** Flag to indicate the avatar should have a border. */
   isBordered?: boolean;

packages/react-core/src/components/Avatar/examples/AvatarIcons.tsx

@@ -4,47 +4,47 @@ import RhUiAiChatbotIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-c
 
 <Fragment>
   <Avatar color="red" alt="red icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="orangered" alt="orangered icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="orange" alt="orange icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="yellow" alt="yellow icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="green" alt="green icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="teal" alt="teal icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="blue" alt="blue icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="purple" alt="purple icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>
   <Avatar color="gray" alt="gray icon avatar">
-    <Icon size="xl">
+    <Icon size="xl" isInline>
       <RhUiAiChatbotIcon />
     </Icon>
   </Avatar>

packages/react-core/src/components/Avatar/examples/AvatarInitials.tsx

@@ -2,13 +2,13 @@ import { Fragment } from 'react';
 import { Avatar } from '@patternfly/react-core';
 
 <Fragment>
-  <Avatar color="red" alt="red initials avatar" initials="AB" />
-  <Avatar color="orangered" alt="orangered initials avatar" initials="AB" />
-  <Avatar color="orange" alt="orange initials avatar" initials="AB" />
-  <Avatar color="yellow" alt="yellow initials avatar" initials="AB" />
-  <Avatar color="green" alt="green initials avatar" initials="AB" />
-  <Avatar color="teal" alt="teal initials avatar" initials="AB" />
-  <Avatar color="blue" alt="blue initials avatar" initials="AB" />
-  <Avatar color="purple" alt="purple initials avatar" initials="AB" />
-  <Avatar color="gray" alt="gray initials avatar" initials="AB" />
+  <Avatar color="red" alt="red AB avatar" initials="AB" />
+  <Avatar color="orangered" alt="orangered AB avatar" initials="AB" />
+  <Avatar color="orange" alt="orange AB avatar" initials="AB" />
+  <Avatar color="yellow" alt="yellow AB avatar" initials="AB" />
+  <Avatar color="green" alt="green AB avatar" initials="AB" />
+  <Avatar color="teal" alt="teal AB avatar" initials="AB" />
+  <Avatar color="blue" alt="blue AB avatar" initials="AB" />
+  <Avatar color="purple" alt="purple AB avatar" initials="AB" />
+  <Avatar color="gray" alt="gray AB avatar" initials="AB" />
 </Fragment>;

packages/react-core/src/components/Avatar/examples/avatar.css

@@ -2,5 +2,6 @@
 #ws-react-c-avatar-with-initials,
 #ws-react-c-avatar-with-icons {
   display: flex;
+  flex-wrap: wrap;
   gap: 3px;
 }