fix(number-field): don't reserve stepper columns when buttons are absent (#6778)

packages/react/tests/components/number-field/number-field.test.tsx

@@ -6,6 +6,13 @@ import {FieldError} from "@/components/field-error";
 import {Label} from "@/components/label";
 import {NumberField} from "@/components/number-field";
 
+const stepperCompositions = [
+  ["no stepper buttons", false, false],
+  ["only a decrement button", true, false],
+  ["only an increment button", false, true],
+  ["both stepper buttons", true, true],
+] as const;
+
 describe("NumberField", () => {
   let user: ReturnType<typeof setupUser>;
 
@@ -47,6 +54,27 @@ describe("NumberField", () => {
     expect(document.querySelector('[data-slot="number-field-decrement-button"]')).not.toBeNull();
   });
 
+  it.each(stepperCompositions)(
+    "supports composition with %s",
+    (_description, hasDecrement, hasIncrement) => {
+      render(
+        <NumberField defaultValue={11} name="customer-number">
+          <Label>Customer number</Label>
+          <NumberField.Group data-testid="number-field-group">
+            {hasDecrement ? <NumberField.DecrementButton /> : null}
+            <NumberField.Input />
+            {hasIncrement ? <NumberField.IncrementButton /> : null}
+          </NumberField.Group>
+        </NumberField>,
+      );
+
+      const group = screen.getByTestId("number-field-group");
+
+      expect(group.querySelector('[slot="decrement"]') !== null).toBe(hasDecrement);
+      expect(group.querySelector('[slot="increment"]') !== null).toBe(hasIncrement);
+    },
+  );
+
   it("exposes variant BEM modifier", () => {
     renderNumber({variant: "secondary"});
 

packages/styles/components/number-field.css

@@ -18,7 +18,19 @@
   @apply grid h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
   border-width: var(--border-width-field);
   border-color: var(--field-border);
-  grid-template-columns: 40px 1fr 40px;
+  grid-template-columns: 1fr;
+
+  &:has([slot="decrement"]) {
+    grid-template-columns: 40px 1fr;
+  }
+
+  &:has([slot="increment"]) {
+    grid-template-columns: 1fr 40px;
+  }
+
+  &:has([slot="decrement"]):has([slot="increment"]) {
+    grid-template-columns: 40px 1fr 40px;
+  }
 
   /**
    * Transitions