Standardise icon slot spacing

seek-oss · Oct 23, 2024 · 2cb524f · 2cb524f
1 parent 1422b36
commit 2cb524f
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 22 deletions.
diff --git a/.changeset/bright-peas-trade.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+export const iconSlotSpace = 'xxsmall';