From d4af97c0b12aac664de9a094f9d0ba74762df05f Mon Sep 17 00:00:00 2001 From: vkatkade-c-eightfold Date: Mon, 9 Jun 2025 17:38:19 +0530 Subject: [PATCH 1/8] fix: icon: Add iconProps prop support to MdiIcon component --- src/components/Icon/Icon.tsx | 2 ++ src/components/Icon/Icon.types.ts | 30 +++++++++++++++++++++++++ src/components/InfoBar/InfoBar.tsx | 3 +++ src/components/InfoBar/InfoBar.types.ts | 6 +++++ 4 files changed, 41 insertions(+) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 054418c58..924fcd8f2 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -27,6 +27,7 @@ export const Icon: FC = ({ vertical, 'data-test-id': dataTestId, icomoonIconName, + iconProps, }) => { const { icomoonIconSet } = useConfig(); @@ -66,6 +67,7 @@ export const Icon: FC = ({ id={id} role={role} style={style ? style : null} + {...iconProps} > {iconComponent} diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts index 63a6453d8..3c43211cf 100644 --- a/src/components/Icon/Icon.types.ts +++ b/src/components/Icon/Icon.types.ts @@ -8,6 +8,32 @@ export enum IconSize { XSmall = '14px', } +/** + * Interface for icon accessibility properties + */ +export interface IconAccessibilityProps { + /** + * Accessible label for the icon + */ + 'aria-label'?: string; + /** + * Element that describes the icon + */ + 'aria-describedby'?: string; + /** + * Whether the icon is hidden from screen readers + */ + 'aria-hidden'?: boolean; + /** + * Role of the icon element + */ + role?: 'img' | 'presentation' | 'button' | 'none'; + /** + * Tab index for keyboard navigation + */ + tabIndex?: number; +} + export interface IconProps extends React.HTMLAttributes, Omit { @@ -82,4 +108,8 @@ export interface IconProps * Unique id used to target element for testing */ 'data-test-id'?: string; + /** + * Additional accessibility properties for the icon + */ + iconProps?: IconAccessibilityProps; } diff --git a/src/components/InfoBar/InfoBar.tsx b/src/components/InfoBar/InfoBar.tsx index cd9521489..a7fcbb8dc 100644 --- a/src/components/InfoBar/InfoBar.tsx +++ b/src/components/InfoBar/InfoBar.tsx @@ -39,6 +39,7 @@ export const InfoBar: FC = React.forwardRef( gradient = false, icon, iconClassNames, + iconProps, locale = enUS, onClose, role = 'alert', @@ -49,6 +50,7 @@ export const InfoBar: FC = React.forwardRef( ...rest } = props; const closeButtonRef = useRef(null); + console.log('iconProps', iconProps); const contextualGradient: Gradient = useContext(GradientContext); const mergedGradient: boolean = configContextProps.noGradientContext @@ -141,6 +143,7 @@ export const InfoBar: FC = React.forwardRef(
; @@ -92,6 +93,11 @@ export interface InfoBarsProps * Custom classes of the icon. */ iconClassNames?: string; + /** + * Additional props to be passed to the Icon component. + * These props will be merged with the default icon props. + */ + iconProps?: IconAccessibilityProps; /** * The InfoBar locale. * @default 'enUS' From 1d51e7aef1b857533556e8d67c189e6074b4ca10 Mon Sep 17 00:00:00 2001 From: vkatkade-c-eightfold Date: Wed, 11 Jun 2025 16:49:18 +0530 Subject: [PATCH 2/8] fix: icon: removed iconProps from icon component --- src/components/Icon/Icon.tsx | 2 -- src/components/Icon/Icon.types.ts | 30 ------------------------------ src/components/InfoBar/InfoBar.tsx | 2 +- 3 files changed, 1 insertion(+), 33 deletions(-) diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 924fcd8f2..054418c58 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -27,7 +27,6 @@ export const Icon: FC = ({ vertical, 'data-test-id': dataTestId, icomoonIconName, - iconProps, }) => { const { icomoonIconSet } = useConfig(); @@ -67,7 +66,6 @@ export const Icon: FC = ({ id={id} role={role} style={style ? style : null} - {...iconProps} > {iconComponent} diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts index 3c43211cf..63a6453d8 100644 --- a/src/components/Icon/Icon.types.ts +++ b/src/components/Icon/Icon.types.ts @@ -8,32 +8,6 @@ export enum IconSize { XSmall = '14px', } -/** - * Interface for icon accessibility properties - */ -export interface IconAccessibilityProps { - /** - * Accessible label for the icon - */ - 'aria-label'?: string; - /** - * Element that describes the icon - */ - 'aria-describedby'?: string; - /** - * Whether the icon is hidden from screen readers - */ - 'aria-hidden'?: boolean; - /** - * Role of the icon element - */ - role?: 'img' | 'presentation' | 'button' | 'none'; - /** - * Tab index for keyboard navigation - */ - tabIndex?: number; -} - export interface IconProps extends React.HTMLAttributes, Omit { @@ -108,8 +82,4 @@ export interface IconProps * Unique id used to target element for testing */ 'data-test-id'?: string; - /** - * Additional accessibility properties for the icon - */ - iconProps?: IconAccessibilityProps; } diff --git a/src/components/InfoBar/InfoBar.tsx b/src/components/InfoBar/InfoBar.tsx index a7fcbb8dc..490460386 100644 --- a/src/components/InfoBar/InfoBar.tsx +++ b/src/components/InfoBar/InfoBar.tsx @@ -143,7 +143,7 @@ export const InfoBar: FC = React.forwardRef(
Date: Thu, 12 Jun 2025 12:53:15 +0530 Subject: [PATCH 3/8] fix: icon: removed logs --- src/components/InfoBar/InfoBar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/InfoBar/InfoBar.tsx b/src/components/InfoBar/InfoBar.tsx index 490460386..65ae19c08 100644 --- a/src/components/InfoBar/InfoBar.tsx +++ b/src/components/InfoBar/InfoBar.tsx @@ -50,7 +50,6 @@ export const InfoBar: FC = React.forwardRef( ...rest } = props; const closeButtonRef = useRef(null); - console.log('iconProps', iconProps); const contextualGradient: Gradient = useContext(GradientContext); const mergedGradient: boolean = configContextProps.noGradientContext From f5c218a41de4c02d55625bbd0a87cdaaebcc5e34 Mon Sep 17 00:00:00 2001 From: vkatkade-c-eightfold Date: Mon, 30 Jun 2025 14:19:32 +0530 Subject: [PATCH 4/8] fix: icon: resolved comment --- src/components/Icon/Icon.types.ts | 16 ++++++++++++++++ src/components/InfoBar/InfoBar.types.ts | 23 ++++++++++++++++++++++- 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts index 63a6453d8..790c3e754 100644 --- a/src/components/Icon/Icon.types.ts +++ b/src/components/Icon/Icon.types.ts @@ -82,4 +82,20 @@ export interface IconProps * Unique id used to target element for testing */ 'data-test-id'?: string; + /** + * Accessible label for the icon + */ + 'aria-label'?: string; + /** + * Element that describes the icon + */ + 'aria-describedby'?: string; + /** + * Whether the icon is hidden from screen readers + */ + 'aria-hidden'?: boolean; + /** + * Tab index for keyboard navigation + */ + tabIndex?: number; } diff --git a/src/components/InfoBar/InfoBar.types.ts b/src/components/InfoBar/InfoBar.types.ts index 3381a6443..94c52fca0 100644 --- a/src/components/InfoBar/InfoBar.types.ts +++ b/src/components/InfoBar/InfoBar.types.ts @@ -2,10 +2,31 @@ import { ConfigContextProps, OcThemeName } from '../ConfigProvider'; import { IconName } from '../Icon'; import { ButtonProps } from '../Button'; import { OcBaseProps } from '../OcBase'; -import { IconAccessibilityProps } from '../Icon/Icon.types'; import React from 'react'; export type CloseButtonProps = Omit; +export interface IconAccessibilityProps { + /** + * Accessible label for the icon + */ + 'aria-label'?: string; + /** + * Element that describes the icon + */ + 'aria-describedby'?: string; + /** + * Whether the icon is hidden from screen readers + */ + 'aria-hidden'?: boolean; + /** + * Role of the icon element + */ + role?: 'img' | 'presentation' | 'button' | 'none'; + /** + * Tab index for keyboard navigation + */ + tabIndex?: number; +} export enum InfoBarType { neutral = 'neutral', From 034bf82996edd8e4bc45f361af271b77e94b569e Mon Sep 17 00:00:00 2001 From: vkatkade-c-eightfold Date: Fri, 8 Aug 2025 13:24:45 +0530 Subject: [PATCH 5/8] fix: icon: resolved comment --- src/components/InfoBar/InfoBar.types.ts | 25 ++----------------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/src/components/InfoBar/InfoBar.types.ts b/src/components/InfoBar/InfoBar.types.ts index 1725b5a3f..9f14623ec 100644 --- a/src/components/InfoBar/InfoBar.types.ts +++ b/src/components/InfoBar/InfoBar.types.ts @@ -3,30 +3,9 @@ import { IconName } from '../Icon'; import { ButtonProps } from '../Button'; import { OcBaseProps } from '../OcBase'; import React from 'react'; +import { IconProps } from '../Icon/Icon.types'; export type CloseButtonProps = Omit; -export interface IconAccessibilityProps { - /** - * Accessible label for the icon - */ - 'aria-label'?: string; - /** - * Element that describes the icon - */ - 'aria-describedby'?: string; - /** - * Whether the icon is hidden from screen readers - */ - 'aria-hidden'?: boolean; - /** - * Role of the icon element - */ - role?: 'img' | 'presentation' | 'button' | 'none'; - /** - * Tab index for keyboard navigation - */ - tabIndex?: number; -} export enum InfoBarType { neutral = 'neutral', @@ -118,7 +97,7 @@ export interface InfoBarsProps * Additional props to be passed to the Icon component. * These props will be merged with the default icon props. */ - iconProps?: IconAccessibilityProps; + iconProps?: IconProps; /** * The InfoBar locale. * @default 'enUS' From 6815f086d6997911afa7cffa5128803620203e88 Mon Sep 17 00:00:00 2001 From: vkatkade-c-eightfold Date: Tue, 12 Aug 2025 13:00:10 +0530 Subject: [PATCH 6/8] fix: icon: resolved comment --- src/components/Icon/Icon.types.ts | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts index 57a6b69c2..0a7908a98 100644 --- a/src/components/Icon/Icon.types.ts +++ b/src/components/Icon/Icon.types.ts @@ -78,26 +78,6 @@ export interface IconProps * @default false */ vertical?: boolean; - /** - * Unique id used to target element for testing - */ - 'data-test-id'?: string; - /** - * Accessible label for the icon - */ - 'aria-label'?: string; - /** - * Element that describes the icon - */ - 'aria-describedby'?: string; - /** - * Whether the icon is hidden from screen readers - */ - 'aria-hidden'?: boolean; - /** - * Tab index for keyboard navigation - */ - tabIndex?: number; /** * The icon role. */ From 6ecd1b2b2fea3f28902ff1e730aa0d347265be8c Mon Sep 17 00:00:00 2001 From: vkatkade-c-eightfold Date: Wed, 13 Aug 2025 09:36:07 +0530 Subject: [PATCH 7/8] fix: icon: resolved comment --- src/components/Icon/Icon.types.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts index 0a7908a98..3200afe27 100644 --- a/src/components/Icon/Icon.types.ts +++ b/src/components/Icon/Icon.types.ts @@ -78,6 +78,10 @@ export interface IconProps * @default false */ vertical?: boolean; + /** + * Unique id used to target element for testing + */ + 'data-test-id'?: string; /** * The icon role. */ From 8cdf9f6f04af571d54ccc516b7619771c77478f4 Mon Sep 17 00:00:00 2001 From: vkatkade-c-eightfold Date: Wed, 13 Aug 2025 13:53:12 +0530 Subject: [PATCH 8/8] fix: icon: resolved comment --- src/components/InfoBar/InfoBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/InfoBar/InfoBar.tsx b/src/components/InfoBar/InfoBar.tsx index f989444b5..927bfc8a3 100644 --- a/src/components/InfoBar/InfoBar.tsx +++ b/src/components/InfoBar/InfoBar.tsx @@ -39,7 +39,7 @@ export const InfoBar: FC = React.forwardRef( gradient = false, icon, iconClassNames, - iconProps, + iconProps = {}, locale = enUS, onClose, role = 'alert',