diff --git a/.changeset/bright-peas-trade.md b/.changeset/bright-peas-trade.md new file mode 100644 index 00000000000..6679ead9da6 --- /dev/null +++ b/.changeset/bright-peas-trade.md @@ -0,0 +1,22 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - AccordionItem + - Button + - ButtonLink + - FieldMessage + - Heading + - 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/.changeset/chatty-yaks-drop.md b/.changeset/chatty-yaks-drop.md new file mode 100644 index 00000000000..c0024e31639 --- /dev/null +++ b/.changeset/chatty-yaks-drop.md @@ -0,0 +1,13 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - Rating +--- + +**Rating:** Simplify internal layout + +Simplify the internal HTML and layout of the `Rating` component. +This change should not affect the appearance or behavior of the component. diff --git a/packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx b/packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx index 6c6e86a49bb..3a5d3b49cd0 100644 --- a/packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx +++ b/packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx @@ -27,6 +27,7 @@ import { import buildDataAttributes, { type DataAttributeMap, } from '../private/buildDataAttributes'; +import { badgeSlotSpace } from '../private/badgeSlotSpace'; import * as styles from './AccordionItem.css'; const itemSpaceForSize = { @@ -145,7 +146,7 @@ export const AccordionItem = ({ {badge ? ( - + {label} ) : ( 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' ? ( ({ atoms({ display: 'block', width: 'full', - paddingX: menuItemPaddingSize, + paddingX: 'small', cursor: 'pointer', textAlign: 'left', outline: 'none', @@ -183,6 +185,9 @@ function MenuItemChildren({ formElement = false, }: MenuItemChildrenProps) { const menuRendererContext = useContext(MenuRendererContext); + const legacy = useBraidTheme().legacy; + const iconSpace = legacy ? 'small' : iconSlotSpace; + const badgeSpace = legacy ? 'small' : badgeSlotSpace; assert( menuRendererContext !== null, @@ -220,7 +225,7 @@ function MenuItemChildren({ {leftSlot ? ( @@ -240,7 +245,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..a21e1597c7f 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,8 @@ 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 { useBraidTheme } from '../BraidProvider/BraidThemeContext'; import * as styles from './MenuItemCheckbox.css'; @@ -26,6 +28,8 @@ export const MenuItemCheckbox = ({ data, id, }); + const legacy = useBraidTheme().legacy; + const iconSpace = legacy ? 'xsmall' : iconSlotSpace; return ( 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..385d01a5004 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 @@ -18,10 +18,7 @@ export const darkModeStarColor = style( }), ); -export const starSpacing = style({ - paddingRight: '1px', -}); - -export const textSpacing = style({ - paddingLeft: '0.4em', +export const inlineFlex = style({ + display: 'inline-flex', + gap: '1px', }); 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..0cfb3e561f9 100644 --- a/packages/braid-design-system/src/lib/components/Rating/Rating.tsx +++ b/packages/braid-design-system/src/lib/components/Rating/Rating.tsx @@ -2,12 +2,14 @@ import React from 'react'; import assert from 'assert'; import dedent from 'dedent'; import { useBackground } from '../Box/BackgroundContext'; -import useIcon, { type UseIconProps } from '../../hooks/useIcon'; +import type { UseIconProps } from '../../hooks/useIcon'; import { Box } from '../Box/Box'; import { type TextProps, Text } from '../Text/Text'; import { IconStarSvg as IconStarEmptySvg } from '../icons/IconStar/IconStarSvg'; import { IconStarHalfSvg } from '../icons/IconStar/IconStarHalfSvg'; +import { IconContainer } from '../icons/IconContainer'; 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) => @@ -18,10 +20,6 @@ type RatingStar = { } & UseIconProps; const RatingStar = ({ percent, ...restProps }: RatingStar) => { const currentBg = useBackground(); - const { - svgProps: { className, ...svgProps }, - } = useIcon(restProps); - let component = IconStarEmptySvg; if (percent >= 25 && percent < 75) { @@ -33,21 +31,27 @@ const RatingStar = ({ percent, ...restProps }: RatingStar) => { } return ( - + + {({ className, ...svgProps }) => ( + + )} + ); }; @@ -102,32 +106,22 @@ export const Rating = ({ return ( {variant === 'minimal' ? ( - - - + ) : ( ratingArr.map((_, position) => ( - - - + )) )} {variant !== 'starsOnly' && ( - + {rating.toFixed(1)} )} diff --git a/packages/braid-design-system/src/lib/components/Tabs/Tab.tsx b/packages/braid-design-system/src/lib/components/Tabs/Tab.tsx index 9e0695f7a97..7ee2442e03b 100644 --- a/packages/braid-design-system/src/lib/components/Tabs/Tab.tsx +++ b/packages/braid-design-system/src/lib/components/Tabs/Tab.tsx @@ -36,6 +36,7 @@ import { useResponsiveValue } from '../useResponsiveValue/useResponsiveValue'; import { smoothScroll, smoothScrollIntoView } from '../private/smoothScroll'; import { useSpace } from '../useSpace/useSpace'; import type { BraidTokens } from '../../themes/tokenType'; +import { badgeSlotSpace } from '../private/badgeSlotSpace'; import * as styles from './Tabs.css'; export interface TabProps { @@ -294,7 +295,7 @@ export const Tab = ({ {badge ? ( - + {cloneElement(badge, { bleedY: true })} ) : null} 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/InlineField/InlineField.tsx b/packages/braid-design-system/src/lib/components/private/InlineField/InlineField.tsx index 3eecd0bae15..a45f16b12b7 100644 --- a/packages/braid-design-system/src/lib/components/private/InlineField/InlineField.tsx +++ b/packages/braid-design-system/src/lib/components/private/InlineField/InlineField.tsx @@ -19,6 +19,7 @@ import { StyledInput, } from './StyledInput'; import { virtualTouchable } from '../touchable/virtualTouchable.css'; +import { badgeSlotSpace } from '../badgeSlotSpace'; import * as styles from './InlineField.css'; interface InlineFieldBaseProps { @@ -130,7 +131,7 @@ export const InlineField = forwardRef< size={size} > {badge ? ( - + {label} ) : ( 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 = ({