diff --git a/lib/badges.tsx b/lib/badges.tsx index 7bc041f..7de4d16 100644 --- a/lib/badges.tsx +++ b/lib/badges.tsx @@ -22,17 +22,13 @@ export const Badge = forwardRef( component="span" padding="2" paddingInline="3" + fontSize="0" + fontWeight="medium" className={[className, variant && badgePurposeClassNames[variant]]} {...props} > {isStringLike(children) ? ( - + {children} ) : ( diff --git a/lib/box.css.ts b/lib/box.css.ts index 4501df0..438db80 100644 --- a/lib/box.css.ts +++ b/lib/box.css.ts @@ -259,6 +259,20 @@ export const textOverflowVariants = styleVariants( (value) => [textOverflowBase, value], ); +export type TextWrap = 'pretty' | 'balance' | 'nowrap'; + +export const textWrapVariants = styleVariants({ + balance: { + textWrap: 'balance', + }, + pretty: { + textWrap: 'pretty', + }, + nowrap: { + textWrap: 'nowrap', + }, +} satisfies Record); + export type FlexDirection = 'row' | 'column'; export const flexDirectionVariants = styleVariants( diff --git a/lib/box.tsx b/lib/box.tsx index 6cfb753..09179e9 100644 --- a/lib/box.tsx +++ b/lib/box.tsx @@ -39,6 +39,8 @@ import { flexShrinkClass, flexWrapVariants, type Wrap, + textWrapVariants, + type TextWrap, } from './box.css.js'; import { isNotFalsy, matchViewportVariants } from './component-utils.js'; import { TooltipLazy } from './tooltip-lazy.js'; @@ -57,7 +59,6 @@ import { type FontSize, type FontWeight, type LineHeight, - type TextWrap, } from './typography.css.js'; export type BoxProps = Merge< @@ -85,12 +86,12 @@ export type BoxProps = Merge< textAlign?: TextAlign | Falsy; textOverflow?: TextOverflow | Falsy; + textWrap?: TextWrap | Falsy; fontSize?: FontSize | Falsy; capSize?: FontSize | Falsy; fontWeight?: FontWeight | Falsy; lineHeight?: LineHeight | Falsy; - textWrap?: TextWrap | Falsy; overflow?: Overflow | Falsy; @@ -256,6 +257,7 @@ export const Box = forwardRef( ), textAlign && textAlignVariants[textAlign], + textWrap && textWrapVariants[textWrap], isNotFalsy(rounded) && roundedVariants[rounded], diff --git a/lib/button.css.ts b/lib/button.css.ts index f18e032..ec5a93d 100644 --- a/lib/button.css.ts +++ b/lib/button.css.ts @@ -79,6 +79,9 @@ export const buttonClassName = style([ userSelect: 'none', borderRadius: baseVars.border.radius, borderWidth: baseVars.border.width, + transitionProperty: 'background-color, color, border-color', + transitionDuration: '0.08s', + transitionTimingFunction: 'ease-in-out', selectors: { '&[disabled]': { pointerEvents: 'none', @@ -118,14 +121,18 @@ export const iconClassName = style({ width: '0.7em', // hack, this should be variable based on the font-size }); -export const visiblyHiddenClass = style({ - visibility: 'hidden', -}); - export const busyButtonClass = style({ pointerEvents: 'none', }); +export const busySpinnerClass = style({ + position: 'absolute', +}); + export const inlineBleedClass = style({ marginBlock: calc(propsVars.space[0]).negate().toString(), }); + +export const visiblyHiddenClass = style({ + visibility: 'hidden', +}); diff --git a/lib/button.test.tsx b/lib/button.test.tsx index 4925d2a..afd2200 100644 --- a/lib/button.test.tsx +++ b/lib/button.test.tsx @@ -16,7 +16,7 @@ describe('Button', () => { // ASSERT expect(screen.getByRole('button')).toMatchInlineSnapshot(`