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' ? ( - + {listItem} 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..82e6d0460f4 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({ atoms({ display: 'block', width: 'full', - paddingX: menuItemPaddingSize, + paddingX: 'xsmall', cursor: 'pointer', textAlign: 'left', outline: 'none', @@ -220,7 +220,7 @@ function MenuItemChildren({ {leftSlot ? ( @@ -240,7 +240,7 @@ function MenuItemChildren({ {badge ? ( 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 })} > - + 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 = ({ )} {variant !== 'starsOnly' && ( - + {rating.toFixed(1)} )} 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 { export const AvoidWidowIcon = ({ children, iconPosition, - space = 'xxsmall', className, }: Props) => ( 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 { children?: ReactNode; @@ -59,7 +60,7 @@ export const Typography = ({