Merge pull request #24 from maxholman/fixes20240726-canary

Fixes20240726 canary

Author: maxholman

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) ? (
-          <Box
-            component="span"
-            fontSize="0"
-            fontWeight="medium"
-            textOverflow="ellipsis"
-            textAlign="center"
-          >
+          <Box component="span" textOverflow="ellipsis" textAlign="center">
             {children}
           </Box>
         ) : (

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<TextWrap, StyleRule>);
+
 export type FlexDirection = 'row' | 'column';
 
 export const flexDirectionVariants = styleVariants(

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<T extends keyof ReactHTMLElementsHacked = 'div'> = Merge<
@@ -85,12 +86,12 @@ export type BoxProps<T extends keyof ReactHTMLElementsHacked = 'div'> = 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],
 

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',
+});

lib/button.test.tsx

@@ -16,7 +16,7 @@ describe('Button', () => {
     // ASSERT
     expect(screen.getByRole('button')).toMatchInlineSnapshot(`
       <button
-        class="button_buttonVariantClassNames_default__1sytq441 button_buttonClassName__1sytq44p layout_alignItemsVariants_center__17vpgba1 layout_justifyContentVariants_center__17vpgbad box_viewportStyleVariants_2__fg8qdbmn box_flexWrapVariants_nowrap__fg8qdbm0 box_viewportStyleVariants_5__fg8qdben box_viewportStyleVariants_6__fg8qdbc1 box_flexDirectionVariants_row__fg8qdblt"
+        class="button_buttonVariantClassNames_default__1sytq441 button_buttonClassName__1sytq44p layout_alignItemsVariants_center__17vpgba1 layout_justifyContentVariants_center__17vpgbad box_viewportStyleVariants_2__fg8qdbmq box_flexWrapVariants_nowrap__fg8qdbm3 box_viewportStyleVariants_5__fg8qdben box_viewportStyleVariants_6__fg8qdbc1 box_flexDirectionVariants_row__fg8qdblw"
         type="button"
       >
         <span

lib/button.tsx

@@ -15,6 +15,7 @@ import {
   iconClassName,
   inlineBleedClass,
   visiblyHiddenClass,
+  busySpinnerClass,
 } from './button.css.js';
 import { differentOriginLinkProps } from './component-utils.js';
 import { useStringLikeDetector } from './hooks/use-string-like.js';
@@ -68,17 +69,13 @@ export type ButtonIconProps<
   }
 >;
 
-/** @private */
-const IconBox: FC<{
-  icon: ReactElement | FC;
-  busy?: boolean | Falsy;
-  capSize?: FontSize;
-}> = ({ icon, busy, ...props }) => (
-  <Box
-    {...props}
-    component="span"
-    className={[iconClassName, busy && visiblyHiddenClass]}
-  >
+const IconBox: FC<
+  BoxProps<'span'> & {
+    icon: ReactElement | FC;
+    capSize?: FontSize;
+  }
+> = ({ icon, className, ...props }) => (
+  <Box {...props} component="span" className={[className, iconClassName]}>
     {isValidElement<ReactElementDefaultPropsType>(icon)
       ? icon
       : icon({} /* { className: iconClassName } */)}
@@ -199,10 +196,10 @@ export const Button = forwardRef(
         ]}
       >
         {iconStart && (
-          <IconBox capSize={fontSize} busy={busy} icon={iconStart} />
+          <IconBox capSize={fontSize} icon={iconStart} {...busyAttributes} />
         )}
 
-        {!busy && hasStringChildren && (
+        {hasStringChildren && (
           <ExactText
             component="span"
             textAlign={textAlign}
@@ -213,15 +210,17 @@ export const Button = forwardRef(
           </ExactText>
         )}
 
-        {!busy && children && !hasStringChildren && (
+        {!hasStringChildren && children && (
           <Box flexGrow component="span" {...busyAttributes}>
             {children}
           </Box>
         )}
 
-        {busy && <Spinner capSize={fontSize} />}
+        {busy && <Spinner className={busySpinnerClass} capSize={fontSize} />}
 
-        {iconEnd && <IconBox capSize={fontSize} busy={busy} icon={iconEnd} />}
+        {iconEnd && (
+          <IconBox capSize={fontSize} icon={iconEnd} {...busyAttributes} />
+        )}
       </UnstyledButton>
     );
   },

lib/callout.tsx

@@ -14,13 +14,13 @@ import {
   PositiveIcon,
 } from './icons.js';
 import type { PurposeVariant } from './purpose.css.js';
-import type { Merge, ReactHTMLElementsHacked } from './types.js';
+import type { Falsy, Merge, ReactHTMLElementsHacked } from './types.js';
 import { ExactText } from './typography.js';
 import { isValidElementOfType } from './utils.js';
 
 export type { PurposeVariant as CalloutVariant };
 
-function variantIcon(variant: PurposeVariant): ReactNode {
+function variantIcon(variant: PurposeVariant | Falsy): ReactNode {
   const props = { className: iconClassName };
 
   switch (variant) {
@@ -41,7 +41,7 @@ export type CalloutCommonProps = {
   align?: never;
   children: ReactNode;
   icon?: ReactNode;
-  variant?: PurposeVariant;
+  variant?: PurposeVariant | Falsy;
 };
 
 export type CalloutProps<T extends keyof ReactHTMLElementsHacked = 'div'> =
@@ -70,7 +70,7 @@ export const Callout = ({
   return (
     <Box
       space={space}
-      className={[className, calloutStyleVariants[variant]]}
+      className={[className, variant && calloutStyleVariants[variant]]}
       role="alert"
       aria-live="polite"
       {...props}

lib/forms.css.ts

@@ -74,7 +74,9 @@ export const formInputOuterClassName = style({
 export const formInputInnerClassName = style([
   {
     selectors: {
-      '&::placeholder': {},
+      '&::placeholder': {
+        color: baseVars.color.muted.fgColor,
+      },
     },
   },
 ]);

lib/forms.tsx

@@ -133,6 +133,8 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
       message,
       autoFocus,
       customValidity,
+      flexGrow,
+      hidden,
       ...props
     },
     forwardedRef,
@@ -146,7 +148,12 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
     const ref = useCombinedRefs(forwardedRef, ourRef);
 
     return (
-      <Block className={className} space={defaultFormInputSpace}>
+      <Block
+        flexGrow={flexGrow}
+        className={className}
+        space={defaultFormInputSpace}
+        hidden={hidden}
+      >
         {label && (
           <FormInputLabel
             htmlFor={!inputTypeProps.readOnly ? id : undefined}
@@ -169,6 +176,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
           {...inputTypeProps}
           autoFocus={definitelyAutoFocus}
           id={id}
+          flexGrow={flexGrow}
         />
         {message && <FormInputMessage message={message} />}
       </Block>

lib/loaders.tsx

@@ -22,7 +22,7 @@ export type SpinnerProps = Merge<
 >;
 
 export const Spinner: FC<SpinnerProps> = ({
-  size = '1',
+  size,
   className,
   inline = true,
   delay = false,
@@ -39,7 +39,7 @@ export const Spinner: FC<SpinnerProps> = ({
         ? spinnerAnimationVariantClassNames.delay
         : spinnerAnimationVariantClassNames.normal,
       inline && inlineSpinnerClass,
-      !inline && spinnerSizeVariantClassNames[size],
+      size && spinnerSizeVariantClassNames[size],
     ]}
     {...props}
   >