chore: allow to use ReactNode in label/title (#340)

IlyaBondar · web-flow · commit 8b558d799d15 · 2025-12-17T09:10:41.000+01:00
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -19,7 +19,7 @@ import {
 
 export interface DialAlertProps extends HTMLAttributes<HTMLDivElement> {
   variant?: AlertVariant;
-  message: string | ReactNode;
+  message: ReactNode;
   closable?: boolean;
   iconSize?: number;
   iconStroke?: number;
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -17,7 +17,7 @@ export interface DialButtonProps
   > {
   variant?: ButtonVariant;
   textClassName?: string;
-  label?: string;
+  label?: ReactNode;
   iconBefore?: ReactNode;
   iconAfter?: ReactNode;
   hideTitleOnMobile?: boolean;
@@ -74,7 +74,7 @@ export const DialButton: FC<DialButtonProps> = ({
       {...props}
       type={type}
       className={btnClassName}
-      aria-label={label || props['aria-label']}
+      aria-label={(typeof label === 'string' && label) || props['aria-label']}
     >
       <DialIcon icon={iconBefore} />
       {label && <span className={btnTextClassName}>{label}</span>}
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -14,7 +14,7 @@ import { DialEllipsisTooltip } from '@/components/EllipsisTooltip/EllipsisToolti
 export interface DialCheckboxProps
   extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'onChange'> {
   id: string;
-  label?: string | ReactNode;
+  label?: ReactNode;
   checked: boolean;
   disabled?: boolean;
   indeterminate?: boolean;
diff --git a/src/components/CollapsibleSidebar/CollapsibleSidebar.tsx b/src/components/CollapsibleSidebar/CollapsibleSidebar.tsx
@@ -15,7 +15,7 @@ import { mergeClasses } from '@/utils/merge-classes';
 export interface DialCollapsibleSidebarProps {
   children: ReactNode;
   width?: number;
-  title: string;
+  title: ReactNode;
   titleClassName?: string;
   containerClassName?: string;
   iconSize?: number;
diff --git a/src/components/ConfirmationPopup/ConfirmationPopup.tsx b/src/components/ConfirmationPopup/ConfirmationPopup.tsx
@@ -16,7 +16,7 @@ import { ButtonVariant } from '@/types/button';
 import { PopupSize } from '@/types/popup';
 
 export interface DialConfirmationPopupProps extends DialPopupProps {
-  description?: string | ReactNode;
+  description?: ReactNode;
   descriptionClassName?: string;
   confirmLabel?: string;
   cancelLabel?: string;
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useRef, useState } from 'react';
+import { useRef, useState, type ReactNode } from 'react';
 import type { Placement } from '@floating-ui/react';
 import {
   IconUser,
@@ -59,7 +59,7 @@ const specItems: DropdownItem[] = [
   { key: 'del', label: 'Delete', icon: <IconTrash size={16} />, danger: true },
 ];
 
-const TriggerBtn = ({ label = 'Open' }: { label?: string }) => (
+const TriggerBtn = ({ label = 'Open' }: { label?: ReactNode }) => (
   <DialButton
     variant={ButtonVariant.Primary}
     iconAfter={<IconChevronDown size={16} />}
diff --git a/src/components/EllipsisTooltip/EllipsisTooltip.tsx b/src/components/EllipsisTooltip/EllipsisTooltip.tsx
@@ -9,7 +9,7 @@ import { tooltipContentBaseClassName } from './constants';
 import { mergeClasses } from '@/utils/merge-classes';
 
 export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
-  text: string | ReactNode;
+  text: ReactNode;
   className?: string;
   contentClassName?: string;
   hideTooltip?: boolean;
diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx
@@ -10,7 +10,7 @@ type NativeLabelProps = Omit<
 >;
 
 export interface DialFieldLabelProps extends NativeLabelProps {
-  fieldTitle?: string | ReactNode;
+  fieldTitle?: ReactNode;
   optional?: boolean;
   optionalText?: string;
   description?: string;
diff --git a/src/components/FileIcon/FileIcon.tsx b/src/components/FileIcon/FileIcon.tsx
@@ -12,7 +12,7 @@ export interface DialFileIconProps {
   stroke?: number;
   className?: string;
   decorative?: boolean;
-  label?: string;
+  label?: ReactNode;
   indicator?: ReactNode;
 }
 
@@ -58,7 +58,9 @@ export const DialFileIcon: FC<DialFileIconProps> = ({
   });
 
   const computedLabel =
-    label ?? `${normalized.slice(1).toUpperCase()} file icon`;
+    typeof label === 'string'
+      ? label
+      : `${normalized.slice(1).toUpperCase()} file icon`;
 
   return (
     <span
diff --git a/src/components/FileManager/FileManager.tsx b/src/components/FileManager/FileManager.tsx
@@ -133,7 +133,7 @@ export interface FileMetadataPopupOptions {
   fileMetadata?: DialFile;
   loading?: boolean;
   clearMetadata?: () => void;
-  title?: string;
+  title?: ReactNode;
   nameLabel?: string;
   pathLabel?: string;
   modifiedDateLabel?: string;
@@ -144,7 +144,7 @@ export interface FileMetadataPopupOptions {
 export interface FileTreeOptions
   extends Omit<DialFoldersTreeProps, 'items' | 'selectedPath' | 'onItemClick'> {
   width?: number;
-  title?: string;
+  title?: ReactNode;
   containerClassName?: string;
   additionalButtons?: ReactNode;
   collapsed?: boolean;
@@ -165,7 +165,7 @@ export interface FileTreeOptions
 
 export interface DeleteConfirmationOptions {
   cancelLabel?: string;
-  titleRenderer?: (fileNames: string[]) => ReactNode | string;
+  titleRenderer?: (fileNames: string[]) => ReactNode;
   confirmLabel?: string;
   contentRenderer?: (fileNames: string[]) => ReactNode;
 }
diff --git a/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.tsx b/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.tsx
@@ -9,7 +9,7 @@ import { ButtonVariant } from '@/types/button';
 import { IconFolderPlus } from '@tabler/icons-react';
 import { BASE_ICON_PROPS } from '@/constants/icon';
 import { DialSwitch } from '@/components/Switch/Switch';
-import { useState, useCallback, type FC, useRef } from 'react';
+import { useState, useCallback, type FC, useRef, type ReactNode } from 'react';
 import { DestinationFolderMode } from '@/types/file-manager';
 import type { DialFileManagerActionsRef } from '@/models/file-manager';
 
@@ -24,7 +24,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
   addFolderLabel?: string;
   hiddenFilesSwitcherLabel?: string;
   mode?: 'copy' | 'move';
-  title?: string;
+  title?: ReactNode;
 }
 
 /**
diff --git a/src/components/FileManager/components/FileManagerDeleteConfirmationPopup/FileManagerDeleteConfirmationPopup.tsx b/src/components/FileManager/components/FileManagerDeleteConfirmationPopup/FileManagerDeleteConfirmationPopup.tsx
@@ -10,7 +10,7 @@ export interface FileManagerDeleteConfirmationPopupProps {
   onConfirm: () => void;
   cancelLabel?: string;
   confirmLabel?: string;
-  titleRenderer?: (fileNames: string[]) => ReactNode | string;
+  titleRenderer?: (fileNames: string[]) => ReactNode;
   contentRenderer?: (fileNames: string[]) => ReactNode;
 }
 
diff --git a/src/components/FileManager/components/FileMetadataPopup/FileMetadataPopup.stories.tsx b/src/components/FileManager/components/FileMetadataPopup/FileMetadataPopup.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { FileMetadataPopup } from './FileMetadataPopup';
-import { useState, type FC } from 'react';
+import { useState, type FC, type ReactNode } from 'react';
 import { DialButton } from '@/components/Button/Button';
 import { DialFileNodeType, type DialFile } from '@/models/file';
 import { ButtonVariant } from '@/types/button';
@@ -32,7 +32,7 @@ const mockFile: DialFile = {
 const StoryWrapper: FC<{
   loading?: boolean;
   fileMetadata?: DialFile;
-  title?: string;
+  title?: ReactNode;
   nameLabel?: string;
   pathLabel?: string;
   modifiedDateLabel?: string;
diff --git a/src/components/FileManager/components/FileMetadataPopup/FileMetadataPopup.tsx b/src/components/FileManager/components/FileMetadataPopup/FileMetadataPopup.tsx
@@ -1,6 +1,6 @@
 import { DialPopup } from '@/components/Popup/Popup';
 import { PopupSize } from '@/types/popup';
-import { type FC } from 'react';
+import { type FC, type ReactNode } from 'react';
 import type { DialFile } from '@/models/file';
 import { DialFileName } from '@/components/FileName/FileName';
 import { DialSkeleton } from '@/components/Skeleton/Skeleton';
@@ -21,7 +21,7 @@ export interface FileMetadataPopupProps {
   onClose: () => void;
   fileMetadata?: DialFile;
   loading?: boolean;
-  title?: string;
+  title?: ReactNode;
   nameLabel?: string;
   pathLabel?: string;
   modifiedDateLabel?: string;
diff --git a/src/components/FormItem/FormItem.tsx b/src/components/FormItem/FormItem.tsx
@@ -18,7 +18,7 @@ export interface DialFormItemProps extends DialFormItemBaseProps {
   labelClassName?: string;
   errorClassName?: string;
   children: ReactNode;
-  value?: ReactNode | string;
+  value?: ReactNode;
   defaultEmptyText?: string;
 }
 
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
@@ -23,7 +23,7 @@ import { mergeClasses } from '@/utils/merge-classes';
 
 export interface DialPopupProps {
   open?: boolean;
-  title?: string | ReactNode;
+  title?: ReactNode;
   portalId?: string;
   className?: string;
   overlayClassName?: string;
@@ -106,7 +106,7 @@ export const DialPopup: FC<DialPopupProps> = ({
   const headingId =
     typeof title === 'string' ? 'dial-popup-heading' : undefined;
 
-  const renderTitle = (title?: ReactNode | string) => {
+  const renderTitle = (title?: ReactNode) => {
     if (!title) return <span /* empty element to balance the close button */ />;
 
     return typeof title === 'string' ? (
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
@@ -4,7 +4,7 @@ import type { ChangeEvent, FC, ReactNode } from 'react';
 export interface DialRadioButtonProps {
   name: string;
   value: string;
-  title?: string;
+  title?: ReactNode;
   description?: ReactNode;
   checked?: boolean;
   inputId: string;
@@ -69,7 +69,7 @@ export const DialRadioButton: FC<DialRadioButtonProps> = ({
 
   const inputClassName = classNames(
     'cursor-pointer dial-input-radio',
-    title && 'mr-2',
+    !!title && 'mr-2',
     className,
   );
 
diff --git a/src/components/SharedEntityIndicator/SharedEntityIndicator.tsx b/src/components/SharedEntityIndicator/SharedEntityIndicator.tsx
@@ -1,12 +1,12 @@
 import { IconArrowUpRight } from '@tabler/icons-react';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
 import { DialIcon } from '@/components/Icon/Icon';
 
 import { mergeClasses } from '@/utils/merge-classes';
 
 export interface DialSharedEntityIndicatorProps {
-  label?: string;
+  label?: ReactNode;
   size?: number;
   className?: string;
   stroke?: number;
@@ -42,7 +42,7 @@ export const DialSharedEntityIndicator: FC<DialSharedEntityIndicatorProps> = ({
         <IconArrowUpRight
           size={size}
           stroke={stroke}
-          aria-label={label}
+          aria-label={typeof label === 'string' ? label : undefined}
           className="bg-layer-3"
           role="img"
         />
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
-import { useCallback, type ChangeEvent, type FC } from 'react';
+import { useCallback, type ChangeEvent, type FC, type ReactNode } from 'react';
 
 export interface DialSwitchProps {
-  title?: string;
+  title?: ReactNode;
   switchId: string;
   isOn?: boolean;
   disabled?: boolean;
diff --git a/src/models/tab.ts b/src/models/tab.ts
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 
 export interface TabModel {
   id: string;
-  label: string | ReactNode;
+  label: ReactNode;
   invalid?: boolean;
   disabled?: boolean;
 }
diff --git a/src/types/form-item.ts b/src/types/form-item.ts
@@ -24,11 +24,11 @@ export enum FormItemOrientation {
  * @param orientation - Layout orientation for the form item
  */
 export interface DialFormItemBaseProps {
-  label?: string | ReactNode;
+  label?: ReactNode;
   optional?: boolean;
   optionalText?: string;
   description?: string;
-  error?: string | ReactNode | boolean;
+  error?: ReactNode;
   captionDescription?: string;
   readonly?: boolean;
   orientation?: FormItemOrientation;
