From bf02908666af8c724cd5e22b2e0083a909f8a476 Mon Sep 17 00:00:00 2001 From: guidari Date: Mon, 20 Jan 2025 09:19:55 -0300 Subject: [PATCH 1/6] feat: added strong polymorphicProps --- .../react/src/components/Button/Button.tsx | 164 ++++----- packages/react/src/components/Link/Link.tsx | 125 ++++--- packages/react/src/components/Tag/Tag.tsx | 336 +++++++++--------- 3 files changed, 324 insertions(+), 301 deletions(-) diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index 02cc007c80d1..ae3994d865e1 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -12,6 +12,10 @@ import { composeEventHandlers } from '../../tools/events'; import { PolymorphicProps } from '../../types/common'; import { PopoverAlignment } from '../Popover'; import ButtonBase from './ButtonBase'; +import { + PolymorphicComponentPropWithRef, + PolymorphicRef, +} from '../../internal/PolymorphicProps'; export const ButtonKinds = [ 'primary', @@ -102,15 +106,13 @@ export interface ButtonBaseProps tooltipPosition?: ButtonTooltipPosition; } -export type ButtonProps = PolymorphicProps< - T, - ButtonBaseProps ->; +export type ButtonProps = + PolymorphicComponentPropWithRef; -export type ButtonComponent = ( +type ButtonComponent = ( props: ButtonProps, context?: any -) => React.ReactElement | null; +) => React.ReactElement | any; function isIconOnlyButton( hasIconOnly: ButtonBaseProps['hasIconOnly'], @@ -123,87 +125,89 @@ function isIconOnlyButton( return false; } -const Button = React.forwardRef(function Button( - props: ButtonProps, - ref: React.Ref -) { - const tooltipRef = useRef(null); - const { - as, - autoAlign = false, - children, - hasIconOnly = false, - iconDescription, - kind = 'primary', - onBlur, - onClick, - onFocus, - onMouseEnter, - onMouseLeave, - renderIcon: ButtonImageElement, - size, - tooltipAlignment = 'center', - tooltipPosition = 'top', - ...rest - } = props; - - const handleClick = (evt: React.MouseEvent) => { - // Prevent clicks on the tooltip from triggering the button click event - if (evt.target === tooltipRef.current) { - evt.preventDefault(); - } - }; - - const iconOnlyImage = !ButtonImageElement ? null : ; - - if (!isIconOnlyButton(hasIconOnly, kind)) { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { tooltipAlignment, ...propsWithoutTooltipAlignment } = props; - return ; - } else { - let align: PopoverAlignment | undefined = undefined; - - if (tooltipPosition === 'top' || tooltipPosition === 'bottom') { - if (tooltipAlignment === 'center') { - align = tooltipPosition; +const Button: ButtonComponent = React.forwardRef( + ( + props: ButtonProps, + ref: PolymorphicRef + ) => { + const tooltipRef = useRef(null); + const { + as, + autoAlign = false, + children, + hasIconOnly = false, + iconDescription, + kind = 'primary', + onBlur, + onClick, + onFocus, + onMouseEnter, + onMouseLeave, + renderIcon: ButtonImageElement, + size, + tooltipAlignment = 'center', + tooltipPosition = 'top', + ...rest + } = props; + + const handleClick = (evt: React.MouseEvent) => { + // Prevent clicks on the tooltip from triggering the button click event + if (evt.target === tooltipRef.current) { + evt.preventDefault(); } - if (tooltipAlignment === 'end') { - align = `${tooltipPosition}-end`; + }; + + const iconOnlyImage = !ButtonImageElement ? null : ; + + if (!isIconOnlyButton(hasIconOnly, kind)) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { tooltipAlignment, ...propsWithoutTooltipAlignment } = props; + return ; + } else { + let align: PopoverAlignment | undefined = undefined; + + if (tooltipPosition === 'top' || tooltipPosition === 'bottom') { + if (tooltipAlignment === 'center') { + align = tooltipPosition; + } + if (tooltipAlignment === 'end') { + align = `${tooltipPosition}-end`; + } + if (tooltipAlignment === 'start') { + align = `${tooltipPosition}-start`; + } } - if (tooltipAlignment === 'start') { - align = `${tooltipPosition}-start`; + + if (tooltipPosition === 'right' || tooltipPosition === 'left') { + align = tooltipPosition; } - } - if (tooltipPosition === 'right' || tooltipPosition === 'left') { - align = tooltipPosition; + return ( + + {iconOnlyImage ?? children} + + ); } - - return ( - - {iconOnlyImage ?? children} - - ); } -}); +); -Button.displayName = 'Button'; -Button.propTypes = { +(Button as React.FC).displayName = 'Button'; +(Button as React.FC).propTypes = { /** * Specify how the button itself should be rendered. * Make sure to apply all props to the root node and render children appropriately diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx index 0bdf2335233d..d2c157135e7f 100644 --- a/packages/react/src/components/Link/Link.tsx +++ b/packages/react/src/components/Link/Link.tsx @@ -16,6 +16,10 @@ import React, { } from 'react'; import { usePrefix } from '../../internal/usePrefix'; import { PolymorphicProps } from '../../types/common'; +import { + PolymorphicComponentPropWithRef, + PolymorphicRef, +} from '../../internal/PolymorphicProps'; export interface LinkBaseProps extends AnchorHTMLAttributes { /** @@ -68,67 +72,70 @@ export interface LinkBaseProps extends AnchorHTMLAttributes { visited?: boolean; } -export type LinkProps = PolymorphicProps< - E, - LinkBaseProps ->; - -const Link = React.forwardRef(function Link( - { - as: BaseComponent, - children, - className: customClassName, - href, - disabled = false, - inline = false, - visited = false, - renderIcon: Icon, - size, - target, - ...rest - }: LinkProps, - ref -) { - const prefix = usePrefix(); - const className = cx(`${prefix}--link`, customClassName, { - [`${prefix}--link--disabled`]: disabled, - [`${prefix}--link--inline`]: inline, - [`${prefix}--link--visited`]: visited, - [`${prefix}--link--${size}`]: size, - }); - const rel = target === '_blank' ? 'noopener' : undefined; - const linkProps: AnchorHTMLAttributes = { - className: BaseComponent ? undefined : className, - rel, - target, - }; - - // Reference for disabled links: - // https://www.scottohara.me/blog/2021/05/28/disabled-links.html - if (!disabled) { - linkProps.href = href; - } else { - linkProps.role = 'link'; - linkProps['aria-disabled'] = true; +export type LinkProps = + PolymorphicComponentPropWithRef; + +type LinkComponent = ( + props: LinkProps +) => React.ReactElement | any; + +const Link: LinkComponent = React.forwardRef( + ( + { + as: BaseComponent, + children, + className: customClassName, + href, + disabled = false, + inline = false, + visited = false, + renderIcon: Icon, + size, + target, + ...rest + }: LinkProps, + ref: PolymorphicRef + ) => { + const prefix = usePrefix(); + const className = cx(`${prefix}--link`, customClassName, { + [`${prefix}--link--disabled`]: disabled, + [`${prefix}--link--inline`]: inline, + [`${prefix}--link--visited`]: visited, + [`${prefix}--link--${size}`]: size, + }); + const rel = target === '_blank' ? 'noopener' : undefined; + const linkProps: AnchorHTMLAttributes = { + className: BaseComponent ? undefined : className, + rel, + target, + }; + + // Reference for disabled links: + // https://www.scottohara.me/blog/2021/05/28/disabled-links.html + if (!disabled) { + linkProps.href = href; + } else { + linkProps.role = 'link'; + linkProps['aria-disabled'] = true; + } + + const BaseComponentAsAny = (BaseComponent ?? 'a') as any; + + return ( + + {children} + {!inline && Icon && ( +
+ +
+ )} + + ); } +); - const BaseComponentAsAny = (BaseComponent ?? 'a') as any; - - return ( - - {children} - {!inline && Icon && ( -
- -
- )} - - ); -}); - -Link.displayName = 'Link'; - -Link.propTypes = { +(Link as React.FC).displayName = 'Link'; +(Link as React.FC).propTypes = { /** * Provide a custom element or component to render the top-level node for the * component. diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx index 8a762ffd64db..f1786904056b 100644 --- a/packages/react/src/components/Tag/Tag.tsx +++ b/packages/react/src/components/Tag/Tag.tsx @@ -23,6 +23,10 @@ import deprecate from '../../prop-types/deprecate'; import { DefinitionTooltip } from '../Tooltip'; import { isEllipsisActive } from './isEllipsisActive'; import { useMergeRefs } from '@floating-ui/react'; +import { + PolymorphicComponentPropWithRef, + PolymorphicRef, +} from '../../internal/PolymorphicProps'; export const TYPES = { red: 'Red', @@ -110,93 +114,141 @@ export interface TagBaseProps { type?: keyof typeof TYPES; } -export type TagProps = PolymorphicProps< - T, - TagBaseProps ->; - -const Tag = React.forwardRef(function Tag( - { - children, - className, - decorator, - id, - type, - filter, // remove filter in next major release - V12 - renderIcon: CustomIconElement, - title = 'Clear filter', // remove title in next major release - V12 - disabled, - onClose, // remove onClose in next major release - V12 - size, - as: BaseComponent, - slug, - ...other - }: TagProps, - forwardRef: ForwardedRef -) { - const prefix = usePrefix(); - const tagRef = useRef(); - const ref = useMergeRefs([forwardRef, tagRef]); - const tagId = id || `tag-${useId()}`; - const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); - - useLayoutEffect(() => { - const newElement = tagRef.current?.getElementsByClassName( - `${prefix}--tag__label` - )[0]; - setIsEllipsisApplied(isEllipsisActive(newElement)); - }, [prefix, tagRef]); - - const conditions = [ - `${prefix}--tag--selectable`, - `${prefix}--tag--filter`, - `${prefix}--tag--operational`, - ]; - - const isInteractiveTag = conditions.some((el) => className?.includes(el)); - - const tagClasses = classNames(`${prefix}--tag`, className, { - [`${prefix}--tag--disabled`]: disabled, - [`${prefix}--tag--filter`]: filter, - [`${prefix}--tag--${size}`]: size, // TODO: V12 - Remove this class - [`${prefix}--layout--size-${size}`]: size, - [`${prefix}--tag--${type}`]: type, - [`${prefix}--tag--interactive`]: - other.onClick && !isInteractiveTag && isEllipsisApplied, - }); - - const typeText = - type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : ''; - - const handleClose = (event: React.MouseEvent) => { - if (onClose) { - event.stopPropagation(); - onClose(event); - } - }; - - // AILabel is always size `sm` and `inline` - let normalizedDecorator = React.isValidElement(slug ?? decorator) - ? (slug ?? decorator) - : null; - if ( - normalizedDecorator && - normalizedDecorator['type']?.displayName === 'AILabel' && - !isInteractiveTag - ) { - normalizedDecorator = React.cloneElement( - normalizedDecorator as React.ReactElement, - { - size: 'sm', - kind: 'inline', +export type TagProps = + PolymorphicComponentPropWithRef; + +type TagComponent = ( + props: TagProps +) => React.ReactElement | any; + +const Tag: TagComponent = React.forwardRef( + ( + { + children, + className, + decorator, + id, + type, + filter, // remove filter in next major release - V12 + renderIcon: CustomIconElement, + title = 'Clear filter', // remove title in next major release - V12 + disabled, + onClose, // remove onClose in next major release - V12 + size, + as: BaseComponent, + slug, + ...other + }: TagProps, + forwardRef: PolymorphicRef + ) => { + const prefix = usePrefix(); + const tagRef = useRef(); + const ref = useMergeRefs([forwardRef, tagRef]); + const tagId = id || `tag-${useId()}`; + const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); + + useLayoutEffect(() => { + const newElement = tagRef.current?.getElementsByClassName( + `${prefix}--tag__label` + )[0]; + setIsEllipsisApplied(isEllipsisActive(newElement)); + }, [prefix, tagRef]); + + const conditions = [ + `${prefix}--tag--selectable`, + `${prefix}--tag--filter`, + `${prefix}--tag--operational`, + ]; + + const isInteractiveTag = conditions.some((el) => className?.includes(el)); + + const tagClasses = classNames(`${prefix}--tag`, className, { + [`${prefix}--tag--disabled`]: disabled, + [`${prefix}--tag--filter`]: filter, + [`${prefix}--tag--${size}`]: size, // TODO: V12 - Remove this class + [`${prefix}--layout--size-${size}`]: size, + [`${prefix}--tag--${type}`]: type, + [`${prefix}--tag--interactive`]: + other.onClick && !isInteractiveTag && isEllipsisApplied, + }); + + const typeText = + type !== undefined && type in Object.keys(TYPES) ? TYPES[type] : ''; + + const handleClose = (event: React.MouseEvent) => { + if (onClose) { + event.stopPropagation(); + onClose(event); } - ); - } + }; + + // AILabel is always size `sm` and `inline` + let normalizedDecorator = React.isValidElement(slug ?? decorator) + ? (slug ?? decorator) + : null; + if ( + normalizedDecorator && + normalizedDecorator['type']?.displayName === 'AILabel' && + !isInteractiveTag + ) { + normalizedDecorator = React.cloneElement( + normalizedDecorator as React.ReactElement, + { + size: 'sm', + kind: 'inline', + } + ); + } + + if (filter) { + const ComponentTag = (BaseComponent as React.ElementType) ?? 'div'; + return ( + + {CustomIconElement && size !== 'sm' ? ( +
+ +
+ ) : ( + '' + )} + + + {children !== null && children !== undefined ? children : typeText} + + {normalizedDecorator} + + + ); + } + + const ComponentTag = + BaseComponent ?? + (other.onClick || className?.includes(`${prefix}--tag--operational`) + ? 'button' + : 'div'); + + const labelClasses = classNames({ + [`${prefix}--tag__label`]: !isInteractiveTag, + }); - if (filter) { - const ComponentTag = (BaseComponent as React.ElementType) ?? 'div'; return ( - + {CustomIconElement && size !== 'sm' ? (
@@ -204,58 +256,28 @@ const Tag = React.forwardRef(function Tag( ) : ( '' )} - - - {children !== null && children !== undefined ? children : typeText} - - {normalizedDecorator} - - - ); - } - - const ComponentTag = - BaseComponent ?? - (other.onClick || className?.includes(`${prefix}--tag--operational`) - ? 'button' - : 'div'); - - const labelClasses = classNames({ - [`${prefix}--tag__label`]: !isInteractiveTag, - }); - - return ( - - {CustomIconElement && size !== 'sm' ? ( -
- -
- ) : ( - '' - )} - {isEllipsisApplied && !isInteractiveTag ? ( - + {isEllipsisApplied && !isInteractiveTag ? ( + + + {children !== null && children !== undefined + ? children + : typeText} + + + ) : ( ( className={labelClasses}> {children !== null && children !== undefined ? children : typeText} - - ) : ( - - {children !== null && children !== undefined ? children : typeText} - - )} - {slug ? ( - normalizedDecorator - ) : decorator ? ( -
{normalizedDecorator}
- ) : ( - '' - )} - - ); -}); - -Tag.propTypes = { + )} + {slug ? ( + normalizedDecorator + ) : decorator ? ( +
+ {normalizedDecorator} +
+ ) : ( + '' + )} + + ); + } +); + +(Tag as React.FC).propTypes = { /** * Provide an alternative tag or component to use instead of the default * wrapping element From 0610ae7c42f8276023f4c3d57bf9ee02d892cfea Mon Sep 17 00:00:00 2001 From: guidari Date: Mon, 20 Jan 2025 10:54:29 -0300 Subject: [PATCH 2/6] fix: fixed import in button --- packages/react/src/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index ae3994d865e1..b39f6881906a 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -109,7 +109,7 @@ export interface ButtonBaseProps export type ButtonProps = PolymorphicComponentPropWithRef; -type ButtonComponent = ( +export type ButtonComponent = ( props: ButtonProps, context?: any ) => React.ReactElement | any; From c5982a827af68bd2948feab4593dfa144dbee124 Mon Sep 17 00:00:00 2001 From: guidari Date: Mon, 20 Jan 2025 11:50:05 -0300 Subject: [PATCH 3/6] fix: fixed ref typescript error --- packages/react/src/components/Breadcrumb/Breadcrumb.tsx | 3 ++- packages/react/src/components/Button/Button.tsx | 2 +- packages/react/src/components/Modal/Modal.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.tsx index 7b1e11a76919..5bbc546590d6 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.tsx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.tsx @@ -6,10 +6,11 @@ */ import PropTypes from 'prop-types'; -import React, { PropsWithChildren } from 'react'; +import React, { PropsWithChildren, useRef } from 'react'; import cx from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { ForwardRefReturn } from '../../types/common'; +import Link from '../Link'; export interface BreadcrumbProps extends React.HTMLAttributes { /** diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index b39f6881906a..29a5e2548ec6 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -128,7 +128,7 @@ function isIconOnlyButton( const Button: ButtonComponent = React.forwardRef( ( props: ButtonProps, - ref: PolymorphicRef + ref: React.Ref ) => { const tooltipRef = useRef(null); const { diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx index 5362e384e45e..e21b292c4ed2 100644 --- a/packages/react/src/components/Modal/Modal.tsx +++ b/packages/react/src/components/Modal/Modal.tsx @@ -264,7 +264,7 @@ const Modal = React.forwardRef(function Modal( ) { const prefix = usePrefix(); const button = useRef(null); - const secondaryButton = useRef(); + const secondaryButton = useRef(null); const contentRef = useRef(null); const innerModal = useRef(null); const startTrap = useRef(null); From 4d9fa56ef4dadd0889d32dada14e198cf6db0118 Mon Sep 17 00:00:00 2001 From: guidari Date: Tue, 21 Jan 2025 16:09:54 -0300 Subject: [PATCH 4/6] fix: fixed tags --- .../react/src/components/Breadcrumb/Breadcrumb.tsx | 3 +-- packages/react/src/components/Tag/DismissibleTag.tsx | 5 ++--- packages/react/src/components/Tag/OperationalTag.tsx | 10 ++++++---- packages/react/src/components/Tag/SelectableTag.tsx | 10 ++++++---- packages/react/src/components/Tag/Tag.tsx | 9 +-------- 5 files changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/react/src/components/Breadcrumb/Breadcrumb.tsx index 5bbc546590d6..7b1e11a76919 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.tsx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.tsx @@ -6,11 +6,10 @@ */ import PropTypes from 'prop-types'; -import React, { PropsWithChildren, useRef } from 'react'; +import React, { PropsWithChildren } from 'react'; import cx from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { ForwardRefReturn } from '../../types/common'; -import Link from '../Link'; export interface BreadcrumbProps extends React.HTMLAttributes { /** diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx index 8e4baf20f1b1..48c5831a1697 100644 --- a/packages/react/src/components/Tag/DismissibleTag.tsx +++ b/packages/react/src/components/Tag/DismissibleTag.tsx @@ -104,7 +104,7 @@ const DismissibleTag = ({ ...other }: DismissibleTagProps) => { const prefix = usePrefix(); - const tagLabelRef = useRef(); + const tagLabelRef = useRef(null); const tagId = id || `tag-${useId()}`; const tagClasses = classNames(`${prefix}--tag--filter`, className); const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); @@ -157,8 +157,7 @@ const DismissibleTag = ({ renderIcon={renderIcon} disabled={disabled} className={tagClasses} - id={tagId} - {...otherProps}> + id={tagId}>
({ ...other }: OperationalTagProps) => { const prefix = usePrefix(); - const tagRef = useRef(); + const tagRef = useRef(null); const tagId = id || `tag-${useId()}`; const tagClasses = classNames(`${prefix}--tag--operational`, className); const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); @@ -119,6 +119,7 @@ const OperationalTag = ({ onMouseEnter={() => false} closeOnActivation> ({ disabled={disabled} className={tagClasses} id={tagId} - {...other}> + {...(other as Omit)}> {text} @@ -137,6 +138,7 @@ const OperationalTag = ({ return ( ({ disabled={disabled} className={tagClasses} id={tagId} - {...other}> + {...(other as Omit)}> {text} diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx index 7b70cb1c4c3f..84aa73a8ce4a 100644 --- a/packages/react/src/components/Tag/SelectableTag.tsx +++ b/packages/react/src/components/Tag/SelectableTag.tsx @@ -6,7 +6,7 @@ */ import PropTypes from 'prop-types'; -import React, { useLayoutEffect, useState, ReactNode, useRef } from 'react'; +import React, { useLayoutEffect, useState, useRef, MouseEvent } from 'react'; import classNames from 'classnames'; import { useId } from '../../internal/useId'; import { usePrefix } from '../../internal/usePrefix'; @@ -46,7 +46,7 @@ export interface SelectableTagBaseProps { /** * Provide an optional function to be called when the tag is clicked. */ - onClick?: (e: Event) => void; + onClick?: (e: MouseEvent) => void; /** * Specify the state of the selectable tag. @@ -83,7 +83,7 @@ const SelectableTag = ({ ...other }: SelectableTagProps) => { const prefix = usePrefix(); - const tagRef = useRef(); + const tagRef = useRef(null); const tagId = id || `tag-${useId()}`; const [selectedTag, setSelectedTag] = useState(selected); const tagClasses = classNames(`${prefix}--tag--selectable`, className, { @@ -103,7 +103,7 @@ const SelectableTag = ({ `${prefix}--tag-label-tooltip` ); - const handleClick = (e: Event) => { + const handleClick = (e: MouseEvent) => { setSelectedTag(!selectedTag); onChange?.(!selectedTag); onClick?.(e); @@ -118,6 +118,7 @@ const SelectableTag = ({ leaveDelayMs={0} onMouseEnter={() => false}> ({ return ( Date: Wed, 22 Jan 2025 10:47:26 -0300 Subject: [PATCH 5/6] fix: fixed tag typescript --- packages/react/src/components/Tag/DismissibleTag.tsx | 3 ++- packages/react/src/components/Tag/OperationalTag.tsx | 4 ++-- packages/react/src/components/Tag/SelectableTag.tsx | 6 +++--- packages/react/src/components/Tag/Tag.tsx | 9 ++++++++- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx index 48c5831a1697..a802a7fc67f5 100644 --- a/packages/react/src/components/Tag/DismissibleTag.tsx +++ b/packages/react/src/components/Tag/DismissibleTag.tsx @@ -157,7 +157,8 @@ const DismissibleTag = ({ renderIcon={renderIcon} disabled={disabled} className={tagClasses} - id={tagId}> + id={tagId} + {...otherProps}>
({ disabled={disabled} className={tagClasses} id={tagId} - {...(other as Omit)}> + {...other}> {text} @@ -146,7 +146,7 @@ const OperationalTag = ({ disabled={disabled} className={tagClasses} id={tagId} - {...(other as Omit)}> + {...other}> {text} diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx index 84aa73a8ce4a..1ae25e8457d1 100644 --- a/packages/react/src/components/Tag/SelectableTag.tsx +++ b/packages/react/src/components/Tag/SelectableTag.tsx @@ -11,7 +11,7 @@ import classNames from 'classnames'; import { useId } from '../../internal/useId'; import { usePrefix } from '../../internal/usePrefix'; import { PolymorphicProps } from '../../types/common'; -import Tag, { SIZES } from './Tag'; +import Tag, { SIZES, TagBaseProps } from './Tag'; import { Tooltip } from '../Tooltip'; import { Text } from '../Text'; import { isEllipsisActive } from './isEllipsisActive'; @@ -109,6 +109,8 @@ const SelectableTag = ({ onClick?.(e); }; + console.log('other', other); + if (isEllipsisApplied) { return ( ({ leaveDelayMs={0} onMouseEnter={() => false}> ({ return ( = PolymorphicComponentPropWithRef; type TagComponent = ( - props: TagProps + props: + | TagProps + | OperationalTagBaseProps + | SelectableTagBaseProps + | DismissibleTagBaseProps ) => React.ReactElement | any; const Tag: TagComponent = React.forwardRef( From 999cd692a843ff0eb15512d0a0fe4d04ea5221a4 Mon Sep 17 00:00:00 2001 From: guidari Date: Wed, 22 Jan 2025 14:49:47 -0300 Subject: [PATCH 6/6] fix: fixed ref in button --- packages/react/src/components/UIShell/HeaderGlobalAction.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/UIShell/HeaderGlobalAction.tsx b/packages/react/src/components/UIShell/HeaderGlobalAction.tsx index 404d5186a7aa..3eeeb6947a0c 100644 --- a/packages/react/src/components/UIShell/HeaderGlobalAction.tsx +++ b/packages/react/src/components/UIShell/HeaderGlobalAction.tsx @@ -66,7 +66,7 @@ const HeaderGlobalAction: React.FC = React.forwardRef( tooltipAlignment, ...rest }, - ref + ref: React.Ref ) { const prefix = usePrefix(); const className = cx({