feat: remove itemClassName

.eslintrc

@@ -20,6 +20,16 @@
             }
         ],
         "jsx-a11y/no-autofocus": 0
+        ],
+        "jsx-a11y/no-redundant-roles": ["error", {
+            // https://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example:The_.3Cnav.3E_element
+            "nav": [
+                "navigation"
+            ],
+            // Safari remove role=list with some styles, applied to li items, so we need
+            // to restore role manually
+            "ul": ["list"]
+        }]
     },
     "overrides": [
         {

src/components/AvatarStack/AvatarStack.scss

@@ -15,6 +15,7 @@ $block: '.#{variables.$ns-new}avatar-stack';
     padding: 0;
 
     &__item {
+        display: flex;
         list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
         z-index: 0;
         border: solid $border-width var(--g-color-line-generic-solid);
@@ -33,10 +34,6 @@ $block: '.#{variables.$ns-new}avatar-stack';
         }
     }
 
-    &__item-children {
-        vertical-align: top;
-    }
-
     &__more-button {
         @include mixins.button-reset;
         @include mixins.button-outline;

src/components/AvatarStack/AvatarStack.tsx

@@ -44,7 +44,7 @@ const AvatarStackComponent = <T extends object>({
     }
 
     return (
-        <ul className={b(null, className)}>
+        <ul className={b(null, className)} role={'list'}>
             {restItems.length > 0 ? (
                 <li key={'show-more'} className={b('item', {'overlap-size': overlapSize})}>
                     {renderMore(restItems)}
@@ -53,7 +53,7 @@ const AvatarStackComponent = <T extends object>({
 
             {visibleItems.map((item, index) => (
                 <li key={index} className={b('item', {'overlap-size': overlapSize})}>
-                    {renderItem(item, {itemClassName: b('item-children')})}
+                    {renderItem(item)}
                 </li>
             ))}
         </ul>

src/components/AvatarStack/__stories__/ImageStack.stories.tsx

@@ -45,8 +45,8 @@ const Template: StoryFn<ComponentType> = (args) => {
 
     const avatarSize = overlapAvatarSizeMap[args.overlapSize || 's'];
 
-    const renderItem: AvatarStackProps<DemoItem>['renderItem'] = (item, {itemClassName}) => (
-        <UserAvatar size={avatarSize} className={itemClassName} imgUrl={item.image} />
+    const renderItem: AvatarStackProps<DemoItem>['renderItem'] = (item) => (
+        <UserAvatar size={avatarSize} imgUrl={item.image} />
     );
 
     const renderMore: AvatarStackProps<DemoItem>['renderMore'] = (items) => (

src/components/AvatarStack/types.ts

@@ -5,7 +5,7 @@ export type AvatarStackOverlapSize = 's' | 'm' | 'l';
 export interface AvatarStackProps<T extends object> {
     items: T[];
 
-    renderItem(item: T, options: {itemClassName: string}): React.ReactNode;
+    renderItem(item: T): React.ReactNode;
 
     renderMore(items: T[]): React.ReactNode;