chore: add DIAL_ICON_SIZE constant (#541)

Author: denys-kolomiitsev

src/components/Alert/Alert.tsx

@@ -16,6 +16,7 @@ import {
   alertVariantClassNameMap,
   variantIcons,
 } from './constants';
+import { DIAL_ICON_SIZE } from '@/constants/icon';
 
 export interface DialAlertProps extends HTMLAttributes<HTMLDivElement> {
   variant?: AlertVariant;
@@ -100,7 +101,7 @@ export const DialAlert: FC<DialAlertProps> = ({
         <DialButton
           className="ml-2 text-secondary hover:text-primary"
           aria-label="Close alert"
-          iconBefore={<IconX size={16} />}
+          iconBefore={<IconX size={DIAL_ICON_SIZE.SM} />}
           onClick={onClose}
         />
       )}

src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -4,6 +4,7 @@ import { DialBreadcrumb } from './Breadcrumb';
 import { DialBreadcrumbItem } from './BreadcrumbItem';
 import { IconFolder } from '@tabler/icons-react';
 import { useState } from 'react';
+import { DIAL_ICON_SIZE } from '@/constants/icon';
 
 const meta = {
   title: 'Navigation/Breadcrumb',
@@ -183,7 +184,7 @@ export const WithFolderIcons: Story = {
       <DialBreadcrumbItem
         label="Projects"
         href="#"
-        iconBefore={<IconFolder size={16} aria-label="folder" />}
+        iconBefore={<IconFolder size={DIAL_ICON_SIZE.SM} aria-label="folder" />}
         onClick={(e) => {
           e.preventDefault();
           alert('Clicked Projects folder');
@@ -192,15 +193,15 @@ export const WithFolderIcons: Story = {
       <DialBreadcrumbItem
         label="2025"
         href="#"
-        iconBefore={<IconFolder size={16} aria-label="folder" />}
+        iconBefore={<IconFolder size={DIAL_ICON_SIZE.SM} aria-label="folder" />}
         onClick={(e) => {
           e.preventDefault();
           alert('Clicked 2025 folder');
         }}
       />
       <DialBreadcrumbItem
         label="Design System"
-        iconBefore={<IconFolder size={16} aria-label="folder" />}
+        iconBefore={<IconFolder size={DIAL_ICON_SIZE.SM} aria-label="folder" />}
         onClick={(e) => {
           e.preventDefault();
           alert('Clicked Design System folder');

src/components/Breadcrumb/Breadcrumb.tsx

@@ -20,6 +20,7 @@ import type {
 import { DialDropdown } from '@/components/Dropdown/Dropdown';
 import { IconDots } from '@tabler/icons-react';
 import type { DropdownItem } from '@/models/dropdown';
+import { DIAL_ICON_SIZE } from '@/constants/icon';
 
 export interface DialBreadcrumbProps {
   pathItems?: DialBreadcrumbPathItem[];
@@ -176,7 +177,7 @@ export const DialBreadcrumb: FC<DialBreadcrumbProps> = ({
               aria-label="More breadcrumbs"
               className={breadcrumbEllipsisButtonClassName}
             >
-              <IconDots size={16} />
+              <IconDots size={DIAL_ICON_SIZE.SM} />
             </button>
           </DialDropdown>
           <span className={breadcrumbSeparatorClassName}>{separator}</span>

src/components/Breadcrumb/constants.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { IconChevronRight } from '@tabler/icons-react';
+import { DIAL_ICON_SIZE } from '@/constants/icon';
 
 export const breadcrumbBaseClassName = 'w-full overflow-hidden';
 export const breadcrumbListClassName =
@@ -27,5 +28,5 @@ export const breadcrumbEllipsisButtonClassName =
   'items-center gap-1 min-w-0 transition-colors text-secondary hover:text-accent-primary';
 
 export const defaultSeparator: ReactNode = (
-  <IconChevronRight size={16} aria-hidden="true" />
+  <IconChevronRight size={DIAL_ICON_SIZE.SM} aria-hidden="true" />
 );

src/components/Button/Button.stories.tsx

@@ -11,6 +11,7 @@ import {
   DialPrimaryButton,
 } from './ButtonWrappers';
 import { ElementSize } from '@/types/size';
+import { DIAL_ICON_SIZE } from '@/constants/icon';
 
 const meta = {
   title: 'DIAL/Elements/Buttons/Button',
@@ -200,14 +201,14 @@ export const AllVariants: Story = {
   render: () => {
     const baseProps: DialButtonProps = {
       label: 'Standard',
-      iconAfter: <IconArrowRight size={20} />,
-      iconBefore: <IconArrowLeft size={20} />,
+      iconAfter: <IconArrowRight size={DIAL_ICON_SIZE.MD} />,
+      iconBefore: <IconArrowLeft size={DIAL_ICON_SIZE.MD} />,
     };
 
     const smallProps: DialButtonProps = {
       label: 'Small',
-      iconAfter: <IconArrowRight size={16} />,
-      iconBefore: <IconArrowLeft size={16} />,
+      iconAfter: <IconArrowRight size={DIAL_ICON_SIZE.SM} />,
+      iconBefore: <IconArrowLeft size={DIAL_ICON_SIZE.SM} />,
       size: ElementSize.Small,
     };
 
@@ -299,15 +300,15 @@ export const WithIconsBeforeAfter: Story = {
   args: {
     label: 'With Icons',
     variant: ButtonVariant.Primary,
-    iconBefore: <IconArrowLeft size={20} />,
-    iconAfter: <IconArrowRight size={20} />,
+    iconBefore: <IconArrowLeft size={DIAL_ICON_SIZE.MD} />,
+    iconAfter: <IconArrowRight size={DIAL_ICON_SIZE.MD} />,
   },
 };
 
 export const IconOnlyButton: Story = {
   args: {
     variant: ButtonVariant.Primary,
-    iconBefore: <IconArrowRight size={20} />,
+    iconBefore: <IconArrowRight size={DIAL_ICON_SIZE.MD} />,
     'aria-label': 'Next',
   },
   parameters: {
@@ -325,8 +326,8 @@ export const HideTitleOnMobile: Story = {
     label: 'Hidden on mobile',
     variant: ButtonVariant.Primary,
     hideTitleOnMobile: true,
-    iconBefore: <IconArrowLeft size={20} />,
-    iconAfter: <IconArrowRight size={20} />,
+    iconBefore: <IconArrowLeft size={DIAL_ICON_SIZE.MD} />,
+    iconAfter: <IconArrowRight size={DIAL_ICON_SIZE.MD} />,
   },
   parameters: {
     docs: {
@@ -366,7 +367,7 @@ export const LinkWrapperButton: Story = {
   render: (args) => <DialLinkButton {...args} />,
   args: {
     label: 'Link Button',
-    iconAfter: <IconArrowRight size={20} />,
+    iconAfter: <IconArrowRight size={DIAL_ICON_SIZE.MD} />,
   },
   parameters: {
     docs: {
@@ -382,7 +383,7 @@ export const GhostWrapperButton: Story = {
   render: (args) => <DialGhostButton {...args} />,
   args: {
     label: 'Ghost Button',
-    iconBefore: <IconArrowLeft size={20} />,
+    iconBefore: <IconArrowLeft size={DIAL_ICON_SIZE.MD} />,
   },
   parameters: {
     docs: {

src/components/ButtonDropdown/constants.tsx

@@ -1,4 +1,5 @@
+import { DIAL_ICON_SIZE } from '@/constants/icon';
 import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
 
-export const buttonChevronDown = <IconChevronDown size={16} />;
-export const buttonChevronUp = <IconChevronUp size={16} />;
+export const buttonChevronDown = <IconChevronDown size={DIAL_ICON_SIZE.SM} />;
+export const buttonChevronUp = <IconChevronUp size={DIAL_ICON_SIZE.SM} />;

src/components/CollapsibleSidebar/CollapsibleSidebar.stories.tsx

@@ -7,6 +7,7 @@ import {
   type DialCollapsibleSidebarProps,
 } from './CollapsibleSidebar';
 import { DialButton } from '@/components/Button/Button';
+import { BASE_ICON_SIZE } from '@/constants/icon';
 
 const BarContent = (
   <div className="flex flex-col gap-4">
@@ -94,7 +95,7 @@ export const WithAdditionalButtons: Story = {
     children: BarContent,
     additionalButtons: (
       <DialButton
-        iconBefore={<IconSettings size={18} />}
+        iconBefore={<IconSettings size={BASE_ICON_SIZE} />}
         onClick={() => alert('Settings clicked!')}
         className="hover:text-accent-primary"
       />
@@ -126,7 +127,7 @@ export const AllVariants: Story = {
           children: BarContent,
           additionalButtons: (
             <DialButton
-              iconBefore={<IconSettings size={18} />}
+              iconBefore={<IconSettings size={BASE_ICON_SIZE} />}
               onClick={() => alert('Settings clicked!')}
             />
           ),

src/components/Dropdown/Dropdown.stories.tsx

@@ -22,47 +22,64 @@ import {
   DialPrimaryButton,
 } from '@/components/Button/ButtonWrappers';
 import { type DropdownItem } from '@/models/dropdown';
+import { DIAL_ICON_SIZE } from '@/constants/icon';
 
 const items: DropdownItem[] = [
-  { key: 'profile', label: 'Profile', icon: <IconUser size={16} /> },
-  { key: 'settings', label: 'Settings', icon: <IconSettings size={16} /> },
+  {
+    key: 'profile',
+    label: 'Profile',
+    icon: <IconUser size={DIAL_ICON_SIZE.SM} />,
+  },
+  {
+    key: 'settings',
+    label: 'Settings',
+    icon: <IconSettings size={DIAL_ICON_SIZE.SM} />,
+  },
   {
     key: 'disabled',
     label: 'Disabled',
-    icon: <IconStack size={16} />,
+    icon: <IconStack size={DIAL_ICON_SIZE.SM} />,
     disabled: true,
   },
   {
     key: 'danger',
     label: 'Danger',
-    icon: <IconRowRemove size={16} />,
+    icon: <IconRowRemove size={DIAL_ICON_SIZE.SM} />,
     danger: true,
   },
   { key: 'd1', type: DropdownItemType.Divider },
   {
     key: 'logout',
     label: 'Logout',
-    icon: <IconLogout size={16} />,
+    icon: <IconLogout size={DIAL_ICON_SIZE.SM} />,
   },
 ];
 
 const specItems: DropdownItem[] = [
   {
     key: 'open',
     label: 'Open in a new tab',
-    icon: <IconExternalLink size={16} />,
+    icon: <IconExternalLink size={DIAL_ICON_SIZE.SM} />,
   },
   {
     key: 'dup',
     label: 'Duplicate as a new version',
-    icon: <IconCopy size={16} />,
+    icon: <IconCopy size={DIAL_ICON_SIZE.SM} />,
   },
   { key: 'd2', type: DropdownItemType.Divider },
-  { key: 'del', label: 'Delete', icon: <IconTrash size={16} />, danger: true },
+  {
+    key: 'del',
+    label: 'Delete',
+    icon: <IconTrash size={DIAL_ICON_SIZE.SM} />,
+    danger: true,
+  },
 ];
 
 const TriggerBtn = ({ label = 'Open' }: { label?: ReactNode }) => (
-  <DialPrimaryButton iconAfter={<IconChevronDown size={16} />} label={label} />
+  <DialPrimaryButton
+    iconAfter={<IconChevronDown size={DIAL_ICON_SIZE.SM} />}
+    label={label}
+  />
 );
 
 const PLACEMENTS: Placement[] = [
@@ -193,7 +210,7 @@ export const SecondaryEllipsisTrigger: Story = {
     children: (
       <DialNeutralButton
         aria-label="More actions"
-        iconBefore={<IconDots size={16} />}
+        iconBefore={<IconDots size={DIAL_ICON_SIZE.SM} />}
       />
     ),
     menu: { items: specItems },

src/components/FileManager/components/ConflictResolutionPopup/ConflictResolutionPopup.tsx

@@ -24,6 +24,7 @@ import {
   DialFileManagerConflictActions,
   DialFileManagerConflictStrategies,
 } from '@/types/file-manager';
+import { DIAL_ICON_SIZE } from '@/constants/icon';
 
 export interface FileConflictDecision {
   file: DialFile;
@@ -321,7 +322,7 @@ export const ConflictResolutionPopup: FC<ConflictResolutionPopupProps> = ({
                     {activeItem?.label ?? replaceLabel}
                   </span>
                   <IconChevronDown
-                    size={16}
+                    size={DIAL_ICON_SIZE.SM}
                     className={classNames(
                       'text-secondary transition-transform',
                       isOpen && 'rotate-180',

src/components/FileManager/hooks/use-tree-additional-buttons.tsx

@@ -3,6 +3,7 @@ import { mergeClasses } from '@/utils/merge-classes';
 import { IconCopyMinus } from '@tabler/icons-react';
 import { useMemo, type ReactNode } from 'react';
 import { ElementSize } from '@/types/size';
+import { DIAL_ICON_SIZE } from '@/constants/icon';
 
 interface useTreeAdditionalButtonsOptions {
   additionalButtons?: ReactNode;
@@ -44,7 +45,7 @@ export const useTreeAdditionalButtons = ({
           className={buttonClass}
           size={ElementSize.Small}
           onClick={collapseAll}
-          icon={<IconCopyMinus size={24} stroke={1.5} />}
+          icon={<IconCopyMinus size={DIAL_ICON_SIZE.LG} stroke={1.5} />}
           aria-label="collapse-all"
         />
       </>