From 2cb524f5f2b7c4e130029d8d0310cffc0e43eb2e Mon Sep 17 00:00:00 2001
From: Michael Taranto <michael.taranto@gmail.com>
Date: Thu, 24 Oct 2024 10:21:00 +1100
Subject: [PATCH] Standardise icon slot spacing

---
 .changeset/bright-peas-trade.md               | 23 +++++++++++++++++++
 .../src/lib/components/Button/Button.tsx      |  2 --
 .../src/lib/components/List/List.tsx          |  7 ++----
 .../lib/components/MenuItem/useMenuItem.tsx   |  8 +++----
 .../MenuItemCheckbox/MenuItemCheckbox.tsx     |  3 ++-
 .../src/lib/components/Notice/Notice.tsx      |  3 ++-
 .../src/lib/components/Rating/Rating.css.ts   |  4 ----
 .../src/lib/components/Rating/Rating.tsx      |  3 ++-
 .../private/AvoidWidowIcon/AvoidWidowIcon.tsx |  6 ++---
 .../private/Typography/Typography.tsx         |  3 ++-
 .../lib/components/private/iconSlotSpace.ts   |  1 +
 11 files changed, 41 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/bright-peas-trade.md
 create mode 100644 packages/braid-design-system/src/lib/components/private/iconSlotSpace.ts

diff --git a/.changeset/bright-peas-trade.md b/.changeset/bright-peas-trade.md
new file mode 100644
index 00000000000..1003db807b5
--- /dev/null
+++ b/.changeset/bright-peas-trade.md
@@ -0,0 +1,23 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - AccordionItem
+  - Button
+  - ButtonLink
+  - FieldMessage
+  - Heading
+  - List
+  - MenuItem
+  - MenuItemCheckbox
+  - Notice
+  - Rating
+  - Tab
+  - Text
+---
+
+Standardise icon slot spacing
+
+Normalise the space between the `icon` slot and component content across the system.
diff --git a/packages/braid-design-system/src/lib/components/Button/Button.tsx b/packages/braid-design-system/src/lib/components/Button/Button.tsx
index 6c496afb051..64b77be9ab2 100644
--- a/packages/braid-design-system/src/lib/components/Button/Button.tsx
+++ b/packages/braid-design-system/src/lib/components/Button/Button.tsx
@@ -386,7 +386,6 @@ export const ButtonText = ({
         {icon && iconPosition === 'leading' ? (
           <AvoidWidowIcon
             iconPosition={iconPosition}
-            space="xsmall"
             className={
               shouldReducePaddingX || bleed
                 ? null
@@ -401,7 +400,6 @@ export const ButtonText = ({
         {!loading && icon && iconPosition === 'trailing' ? (
           <AvoidWidowIcon
             iconPosition={iconPosition}
-            space="xsmall"
             className={
               shouldReducePaddingX || bleed
                 ? null
diff --git a/packages/braid-design-system/src/lib/components/List/List.tsx b/packages/braid-design-system/src/lib/components/List/List.tsx
index e619686361e..02ecfa7fdda 100644
--- a/packages/braid-design-system/src/lib/components/List/List.tsx
+++ b/packages/braid-design-system/src/lib/components/List/List.tsx
@@ -9,6 +9,7 @@ import {
   useDefaultTextProps,
 } from '../private/defaultTextProps';
 import { lineHeightContainer } from '../../css/lineHeightContainer.css';
+import { iconSlotSpace } from '../private/iconSlotSpace';
 import * as styles from './List.css';
 
 function numberToAlpha(inputNumber: number) {
@@ -178,11 +179,7 @@ export const List = ({
                   })()}
                 </Box>
               </Text>
-              <Box
-                minWidth={0}
-                width="full"
-                paddingLeft={size === 'xsmall' ? 'xsmall' : 'small'}
-              >
+              <Box minWidth={0} width="full" paddingLeft={iconSlotSpace}>
                 {listItem}
               </Box>
             </Box>
diff --git a/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx b/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx
index 354d95d8b13..482f1f291f5 100644
--- a/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx
+++ b/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx
@@ -22,6 +22,7 @@ import { atoms } from '../../css/atoms/atoms';
 import { iconSize } from '../../hooks/useIcon';
 import * as styles from './useMenuItem.css';
 import { MenuRendererContext } from '../MenuRenderer/MenuRendererContext';
+import { iconSlotSpace } from '../private/iconSlotSpace';
 
 const {
   MENU_ITEM_UP,
@@ -35,7 +36,6 @@ const {
 } = actionTypes;
 
 const menuItemChildrenSize = 'standard';
-const menuItemPaddingSize = 'small';
 
 type MenuItemTone = 'critical' | undefined;
 
@@ -157,7 +157,7 @@ export function useMenuItem<MenuItemElement extends HTMLElement>({
         atoms({
           display: 'block',
           width: 'full',
-          paddingX: menuItemPaddingSize,
+          paddingX: 'small',
           cursor: 'pointer',
           textAlign: 'left',
           outline: 'none',
@@ -220,7 +220,7 @@ function MenuItemChildren({
       {leftSlot ? (
         <Box
           component="span"
-          paddingRight={menuItemPaddingSize}
+          paddingRight={iconSlotSpace}
           flexShrink={0}
           minWidth={0}
         >
@@ -240,7 +240,7 @@ function MenuItemChildren({
       {badge ? (
         <Box
           component="span"
-          paddingLeft={menuItemPaddingSize}
+          paddingLeft={iconSlotSpace}
           flexShrink={0}
           minWidth={0}
         >
diff --git a/packages/braid-design-system/src/lib/components/MenuItemCheckbox/MenuItemCheckbox.tsx b/packages/braid-design-system/src/lib/components/MenuItemCheckbox/MenuItemCheckbox.tsx
index be54a81814d..1d65a06ca9d 100644
--- a/packages/braid-design-system/src/lib/components/MenuItemCheckbox/MenuItemCheckbox.tsx
+++ b/packages/braid-design-system/src/lib/components/MenuItemCheckbox/MenuItemCheckbox.tsx
@@ -3,6 +3,7 @@ import { Box } from '../Box/Box';
 import { IconTick } from '../icons/IconTick/IconTick';
 import type { MenuItemProps } from '../MenuItem/MenuItem';
 import { useMenuItem } from '../MenuItem/useMenuItem';
+import { iconSlotSpace } from '../private/iconSlotSpace';
 
 import * as styles from './MenuItemCheckbox.css';
 
@@ -43,7 +44,7 @@ export const MenuItemCheckbox = ({
         boxShadow="borderField"
         position="relative"
         background={{ lightMode: 'surface' }}
-        marginRight="xsmall"
+        marginRight={iconSlotSpace}
         flexShrink={0}
         className={styles.checkboxSize}
       >
diff --git a/packages/braid-design-system/src/lib/components/Notice/Notice.tsx b/packages/braid-design-system/src/lib/components/Notice/Notice.tsx
index d0d1ea2aed3..3911f9975be 100644
--- a/packages/braid-design-system/src/lib/components/Notice/Notice.tsx
+++ b/packages/braid-design-system/src/lib/components/Notice/Notice.tsx
@@ -8,6 +8,7 @@ import { DefaultTextPropsProvider } from '../private/defaultTextProps';
 import buildDataAttributes, {
   type DataAttributeMap,
 } from '../private/buildDataAttributes';
+import { iconSlotSpace } from '../private/iconSlotSpace';
 
 type Tone = 'promote' | 'info' | 'positive' | 'critical';
 
@@ -40,7 +41,7 @@ export const Notice = ({
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >
       <DefaultTextPropsProvider tone={tone}>
-        <Columns space="xsmall">
+        <Columns space={iconSlotSpace}>
           <Column width="content">
             <Text>
               <Icon />
diff --git a/packages/braid-design-system/src/lib/components/Rating/Rating.css.ts b/packages/braid-design-system/src/lib/components/Rating/Rating.css.ts
index 37d40cd3512..11893bde012 100644
--- a/packages/braid-design-system/src/lib/components/Rating/Rating.css.ts
+++ b/packages/braid-design-system/src/lib/components/Rating/Rating.css.ts
@@ -21,7 +21,3 @@ export const darkModeStarColor = style(
 export const starSpacing = style({
   paddingRight: '1px',
 });
-
-export const textSpacing = style({
-  paddingLeft: '0.4em',
-});
diff --git a/packages/braid-design-system/src/lib/components/Rating/Rating.tsx b/packages/braid-design-system/src/lib/components/Rating/Rating.tsx
index 60c54c253b9..0a07ce58bf3 100644
--- a/packages/braid-design-system/src/lib/components/Rating/Rating.tsx
+++ b/packages/braid-design-system/src/lib/components/Rating/Rating.tsx
@@ -8,6 +8,7 @@ import { type TextProps, Text } from '../Text/Text';
 import { IconStarSvg as IconStarEmptySvg } from '../icons/IconStar/IconStarSvg';
 import { IconStarHalfSvg } from '../icons/IconStar/IconStarHalfSvg';
 import { IconStarActiveSvg as IconStarFullSvg } from '../icons/IconStar/IconStarActiveSvg';
+import { iconSlotSpace } from '../private/iconSlotSpace';
 import * as styles from './Rating.css';
 
 const getPercent = (rating: number, position: number) =>
@@ -127,7 +128,7 @@ export const Rating = ({
         )}
       </Box>
       {variant !== 'starsOnly' && (
-        <Box component="span" className={styles.textSpacing} aria-hidden={true}>
+        <Box component="span" paddingLeft={iconSlotSpace} aria-hidden={true}>
           {rating.toFixed(1)}
         </Box>
       )}
diff --git a/packages/braid-design-system/src/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.tsx b/packages/braid-design-system/src/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.tsx
index 0f770f778c5..5289f224a22 100644
--- a/packages/braid-design-system/src/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.tsx
+++ b/packages/braid-design-system/src/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Space } from '../../../css/atoms/atoms';
 import { type BoxProps, Box } from '../../Box/Box';
+import { iconSlotSpace } from '../iconSlotSpace';
 
 import * as styles from './AvoidWidowIcon.css';
 
@@ -12,13 +13,12 @@ interface Props extends Pick<BoxProps, 'children' | 'className'> {
 export const AvoidWidowIcon = ({
   children,
   iconPosition,
-  space = 'xxsmall',
   className,
 }: Props) => (
   <Box
     component="span"
-    paddingRight={iconPosition === 'leading' ? space : undefined}
-    paddingLeft={iconPosition === 'trailing' ? space : undefined}
+    paddingRight={iconPosition === 'leading' ? iconSlotSpace : undefined}
+    paddingLeft={iconPosition === 'trailing' ? iconSlotSpace : undefined}
     className={[styles.nowrap, className]}
     aria-hidden
   >
diff --git a/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx b/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx
index da711552c42..70cd2e68e76 100644
--- a/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx
+++ b/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx
@@ -7,6 +7,7 @@ import { MaxLines } from '../MaxLines/MaxLines';
 import type { UseIconProps } from '../../../hooks/useIcon';
 import { alignToFlexAlign } from '../../../utils/align';
 import { descenderCropFixForWebkitBox } from '../MaxLines/MaxLines.css';
+import { iconSlotSpace } from '../iconSlotSpace';
 
 export interface TypographyProps extends Pick<BoxProps, 'id' | 'component'> {
   children?: ReactNode;
@@ -59,7 +60,7 @@ export const Typography = ({
           <Box
             component="span"
             display="block"
-            paddingRight="xsmall"
+            paddingRight={iconSlotSpace}
             flexGrow={0}
             flexShrink={0}
             minWidth={0}
diff --git a/packages/braid-design-system/src/lib/components/private/iconSlotSpace.ts b/packages/braid-design-system/src/lib/components/private/iconSlotSpace.ts
new file mode 100644
index 00000000000..ab9eca37b9f
--- /dev/null
+++ b/packages/braid-design-system/src/lib/components/private/iconSlotSpace.ts
@@ -0,0 +1 @@
+export const iconSlotSpace = 'xxsmall';