[MainMenuAvatar]: added RawProps prop

[App]: add aria label attributes for icon buttons in MainMenu examples. Fix Wave extension crashes.
epam · Jan 7, 2025 · 3b28484 · 3b28484
1 parent 790ff28
commit 3b28484
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/app/src/docs/_examples/mainMenu/Basic.example.tsx b/app/src/docs/_examples/mainMenu/Basic.example.tsx
@@ -49,7 +49,7 @@ export default function MainMenuBasicExample() {
             <Dropdown
                 key="avatar"
                 renderTarget={ (props) => (
-                    <MainMenuAvatar avatarUrl="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" isDropdown { ...props } />
+                    <MainMenuAvatar avatarUrl="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" rawProps={ { 'aria-label': 'User avatar' } } isDropdown { ...props } />
                 ) }
                 renderBody={ (props) => (
                     <DropdownMenuBody { ...props }>
@@ -76,9 +76,9 @@ export default function MainMenuBasicExample() {
             { id: 'trainingCatalog', priority: 3, render: (p) => <MainMenuButton key={ p.id } href="/" caption="Training Catalog" /> },
             { id: 'requests', priority: 3, render: (p) => <MainMenuButton key={ p.id } href="/" caption="Requests" /> },
             { id: 'flexSpacer', priority: 100, render: (p) => <FlexSpacer key={ p.id } /> },
-            { id: 'help', priority: 1, render: (p) => <MainMenuIcon key={ p.id } href="https://support.epam.com" target="_blank" icon={ HelpIcon } /> },
+            { id: 'help', priority: 1, render: (p) => <MainMenuIcon key={ p.id } href="https://support.epam.com" target="_blank" rawProps={ { 'aria-label': 'Help' } } icon={ HelpIcon } /> },
             { id: 'avatar', priority: 2, render: renderAvatar },
-            { id: 'globalMenu', priority: 100, render: (p) => <GlobalMenu key={ p.id } /> },
+            { id: 'globalMenu', priority: 100, render: (p) => <GlobalMenu rawProps={ { 'aria-label': 'Global Menu' } } key={ p.id } /> },
         ];
     };
 

diff --git a/app/src/docs/_examples/mainMenu/Responsive.example.tsx b/app/src/docs/_examples/mainMenu/Responsive.example.tsx
@@ -37,7 +37,7 @@ export default function MainMenuResponsiveExample() {
             <Dropdown
                 key="avatar"
                 renderTarget={ (props) => (
-                    <MainMenuAvatar avatarUrl="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" isDropdown { ...props } />
+                    <MainMenuAvatar avatarUrl="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" rawProps={ { 'aria-label': 'User avatar' } } isDropdown { ...props } />
                 ) }
                 renderBody={ (props) => (
                     <DropdownMenuBody { ...props }>
@@ -118,10 +118,10 @@ export default function MainMenuResponsiveExample() {
                 ),
             },
             { id: 'flexSpacer', priority: 100, render: (p) => <FlexSpacer key={ p.id } /> },
-            { id: 'pinIcon', priority: 8, render: (p) => <MainMenuIcon key={ p.id } icon={ PinIcon } onClick={ () => {} } /> },
-            { id: 'helpIcon', priority: 8, render: (p) => <MainMenuIcon key={ p.id } icon={ HelpIcon } onClick={ () => {} } /> },
+            { id: 'pinIcon', priority: 8, render: (p) => <MainMenuIcon key={ p.id } icon={ PinIcon } rawProps={ { 'aria-label': 'Pin' } } onClick={ () => {} } /> },
+            { id: 'helpIcon', priority: 8, render: (p) => <MainMenuIcon key={ p.id } icon={ HelpIcon } rawProps={ { 'aria-label': 'Help' } } onClick={ () => {} } /> },
             { id: 'avatar', priority: 9, render: renderAvatar },
-            { id: 'globalMenu', priority: 100, render: (p) => <GlobalMenu key={ p.id } /> },
+            { id: 'globalMenu', priority: 100, render: (p) => <GlobalMenu key={ p.id } rawProps={ { 'aria-label': 'Global Menu' } } /> },
         ];
     };
 

diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,8 @@
+# 5.12.2 - xx.xx.2024
+**What's New**
+* [MainMenuAvatar]: added `RawProps` prop
+
+
 # 5.12.1 - 17.12.2024
 **What's Fixed**
 * Revert '[Svg]: don't set fill attribute if it's not provided' change from 5.12.0 version. Because it turned out that many users relied on the previous behavior where the fill attribute was cleared by default. If you need to render icon with built-in fill, please look at this issue comment - https://github.com/epam/UUI/issues/2684#issuecomment-2548751434

diff --git a/uui/components/navigation/MainMenu/MainMenuAvatar.tsx b/uui/components/navigation/MainMenu/MainMenuAvatar.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { IAdaptiveItem, IDropdownToggler, Icon, IHasCX, uuiMarkers, IClickable } from '@epam/uui-core';
+import { IAdaptiveItem, IDropdownToggler, Icon, IHasCX, uuiMarkers, IClickable, IHasRawProps } from '@epam/uui-core';
 import { IconContainer, Avatar } from '@epam/uui-components';
 import { ReactComponent as FoldingArrow } from '@epam/assets/icons/navigation-chevron_down-outline.svg';
 import css from './MainMenuAvatar.module.scss';
 
 /** Represents the properties of the MainMenuAvatar component. */
-export interface MainMenuAvatarProps extends IClickable, IAdaptiveItem, IDropdownToggler, IHasCX {
+export interface MainMenuAvatarProps extends IClickable, IAdaptiveItem, IDropdownToggler, IHasCX, IHasRawProps<React.ButtonHTMLAttributes<HTMLButtonElement>> {
     avatarUrl?: string;
     icon?: Icon;
 }
@@ -16,6 +16,7 @@ export const MainMenuAvatar = React.forwardRef<HTMLButtonElement, MainMenuAvatar
         ref={ ref }
         className={ cx(css.container, props.isDropdown && css.dropdown, props.isOpen && css.open, props.onClick && uuiMarkers.clickable, props.cx) }
         onClick={ props.onClick }
+        { ...props.rawProps }
     >
         <Avatar size="36" img={ props.avatarUrl } />
         {props.icon && <IconContainer icon={ props.icon } />}