Number input

app/components/form/fields/DiskSizeField.tsx

@@ -5,12 +5,12 @@
  *
  * Copyright Oxide Computer Company
  */
-import type { FieldPath, FieldValues } from 'react-hook-form'
+import type { FieldPath, FieldPathByValue, FieldValues } from 'react-hook-form'
 
 import { MAX_DISK_SIZE_GiB } from '@oxide/api'
 
+import { NumberField } from './NumberField'
 import type { TextFieldProps } from './TextField'
-import { TextField } from './TextField'
 
 interface DiskSizeProps<
   TFieldValues extends FieldValues,
@@ -21,10 +21,10 @@ interface DiskSizeProps<
 
 export function DiskSizeField<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>
+  TName extends FieldPathByValue<TFieldValues, number>
 >({ required = true, name, minSize = 1, ...props }: DiskSizeProps<TFieldValues, TName>) {
   return (
-    <TextField
+    <NumberField
       units="GiB"
       type="number"
       required={required}

app/components/form/fields/NumberField.tsx

@@ -0,0 +1,100 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import cn from 'classnames'
+import { useId } from 'react'
+import type { FieldPathByValue, FieldValues } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
+
+import { FieldLabel, TextInputHint, NumberInput as UINumberField } from '@oxide/ui'
+import { capitalize } from '@oxide/util'
+
+import { ErrorMessage } from './ErrorMessage'
+import type { TextFieldProps } from './TextField'
+
+export function NumberField<
+  TFieldValues extends FieldValues,
+  // can only be used on fields with number values
+  TName extends FieldPathByValue<TFieldValues, number>
+>({
+  name,
+  label = capitalize(name),
+  units,
+  description,
+  helpText,
+  required,
+  ...props
+}: Omit<TextFieldProps<TFieldValues, TName>, 'id'>) {
+  // id is omitted from props because we generate it here
+  const id = useId()
+  return (
+    <div className="max-w-lg">
+      <div className="mb-2">
+        <FieldLabel id={`${id}-label`} tip={description} optional={!required}>
+          {label} {units && <span className="ml-1 text-secondary">({units})</span>}
+        </FieldLabel>
+        {helpText && (
+          <TextInputHint id={`${id}-help-text`} className="mb-2">
+            {helpText}
+          </TextInputHint>
+        )}
+      </div>
+      {/* passing the generated id is very important for a11y */}
+      <NumberFieldInner name={name} {...props} id={id} />
+    </div>
+  )
+}
+
+/**
+ * Primarily exists for `NumberField`, but we occasionally also need a plain field
+ * without a label on it.
+ *
+ * Note that `id` is an allowed prop, unlike in `TextField`, where it is always
+ * generated from `name`. This is because we need to pass the generated ID in
+ * from there to here. For the case where `TextFieldInner` is used
+ * independently, we also generate an ID for use only if none is passed in.
+ */
+export const NumberFieldInner = <
+  TFieldValues extends FieldValues,
+  TName extends FieldPathByValue<TFieldValues, number>
+>({
+  name,
+  label = capitalize(name),
+  validate,
+  control,
+  description,
+  required,
+  id: idProp,
+}: TextFieldProps<TFieldValues, TName>) => {
+  const generatedId = useId()
+  const id = idProp || generatedId
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={{ required, validate }}
+      render={({ field: { value, ...fieldRest }, fieldState: { error } }) => {
+        return (
+          <>
+            <UINumberField
+              id={id}
+              error={!!error}
+              aria-labelledby={cn(`${id}-label`, {
+                [`${id}-help-text`]: !!description,
+              })}
+              aria-describedby={description ? `${id}-label-tip` : undefined}
+              defaultValue={value}
+              {...fieldRest}
+            />
+            <ErrorMessage error={error} label={label} />
+          </>
+        )
+      }}
+    />
+  )
+}

app/test/e2e/click-everything.e2e.ts

@@ -52,7 +52,7 @@ test('Click through disks page', async ({ page }) => {
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
     'role=radiogroup[name="Block size (Bytes)"]',
-    'role=spinbutton[name="Size (GiB)"]',
+    'role=textbox[name="Size (GiB)"]',
     'role=button[name="Create Disk"]',
   ])
   await page.goBack()

app/test/e2e/instance-create.e2e.ts

@@ -22,7 +22,7 @@ test('can create an instance', async ({ page }) => {
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
     'role=textbox[name="Disk name"]',
-    'role=spinbutton[name="Disk size (GiB)"]',
+    'role=textbox[name="Disk size (GiB)"]',
     'role=radiogroup[name="Network interface"]',
     'role=textbox[name="Hostname"]',
     'role=button[name="Create instance"]',
@@ -33,8 +33,9 @@ test('can create an instance', async ({ page }) => {
   await page.fill('textarea[name=description]', 'An instance... from space!')
   await page.locator('.ox-radio-card').nth(3).click()
 
-  await page.fill('input[name=bootDiskName]', 'my-boot-disk')
-  await page.fill('input[name=bootDiskSize]', '20')
+  await page.getByRole('textbox', { name: 'Disk name' }).fill('my-boot-disk')
+  const diskSizeInput = page.getByRole('textbox', { name: 'Disk size (GiB)' })
+  await diskSizeInput.fill('20')
 
   // pick a project image just to show we can
   await page.getByRole('tab', { name: 'Project images' }).click()
@@ -95,20 +96,22 @@ test('can create an instance with custom hardware', async ({ page }) => {
   await page.fill('input[name=ncpus]', '29')
   await page.fill('input[name=memory]', '53')
 
-  await page.fill('input[name=bootDiskName]', 'my-boot-disk')
-  await page.fill('input[name=bootDiskSize]', '20')
+  await page.getByRole('textbox', { name: 'Disk name' }).fill('my-boot-disk')
+  const diskSizeInput = page.getByRole('textbox', { name: 'Disk size (GiB)' })
+  await diskSizeInput.fill('20')
 
   // pick a project image just to show we can
   await page.getByRole('tab', { name: 'Project images' }).click()
   await page.getByRole('button', { name: 'Image' }).click()
   await page.getByRole('option', { name: images[2].name }).click()
 
   // test disk size validation against image size
-  await page.getByRole('spinbutton', { name: 'Disk size (GiB)' }).fill('5')
+  await diskSizeInput.fill('5')
+  await diskSizeInput.blur() // need blur to trigger validation
   await expectVisible(page, [
     'main >> text=Must be as large as selected image (min. 6 GiB)',
   ])
-  await page.getByRole('spinbutton', { name: 'Disk size (GiB)' }).fill('10')
+  await diskSizeInput.fill('10')
 
   await page.getByRole('button', { name: 'Create instance' }).click()
 

app/test/e2e/instance/attach-disk.e2e.ts

@@ -37,7 +37,7 @@ test('Attach disk', async ({ page }) => {
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
     'role=radiogroup[name="Block size (Bytes)"]',
-    'role=spinbutton[name="Size (GiB)"]',
+    'role=textbox[name="Size (GiB)"]',
     'role=button[name="Create Disk"]',
   ])
   await page.click('role=button[name="Cancel"]')

libs/ui/index.ts

@@ -31,6 +31,7 @@ export * from './lib/message/Message'
 export * from './lib/modal/Modal'
 export * from './lib/ModalLinks'
 export * as MiniTable from './lib/mini-table/MiniTable'
+export * from './lib/number-input/NumberInput'
 export * from './lib/page-header/PageHeader'
 export * from './lib/pagination/Pagination'
 export * from './lib/progress/Progress'

libs/ui/lib/date-picker/DatePicker.tsx

@@ -66,14 +66,14 @@ export function DatePicker(props: DatePickerProps) {
           className={cn(
             state.isOpen && 'z-10 ring-2',
             'relative flex h-10  items-center rounded-l rounded-r border text-sans-md border-default focus-within:ring-2 hover:border-raise focus:z-10',
-            state.validationState === 'invalid'
+            state.isInvalid
               ? 'focus-error border-error ring-error-secondary'
               : 'border-default ring-accent-secondary'
           )}
         >
           <div className={cn('relative flex w-[10rem] items-center px-3 text-sans-md')}>
             {label}
-            {state.validationState === 'invalid' && (
+            {state.isInvalid && (
               <div className="absolute bottom-0 right-2 top-0 flex items-center text-error">
                 <Error12Icon className="h-3 w-3" />
               </div>
@@ -84,7 +84,7 @@ export function DatePicker(props: DatePickerProps) {
           </div>
         </button>
       </div>
-      {state.validationState === 'invalid' && (
+      {state.isInvalid && (
         <p {...errorMessageProps} className="py-2 text-sans-md text-error">
           Date is invalid
         </p>

libs/ui/lib/date-picker/DateRangePicker.tsx

@@ -41,14 +41,17 @@ export function DateRangePicker(props: DateRangePickerProps) {
     hourCycle: 'h24',
   })
 
-  const label = useMemo(
-    () =>
-      formatter.formatRange(
-        state.dateRange.start.toDate(getLocalTimeZone()),
-        state.dateRange.end.toDate(getLocalTimeZone())
-      ),
-    [state, formatter]
-  )
+  const label = useMemo(() => {
+    // This is here to make TS happy. This should be impossible in practice
+    // because we always pass a value to this component and there is no way to
+    // unset the value through the UI.
+    if (!state.dateRange) return 'No range selected'
+
+    return formatter.formatRange(
+      state.dateRange.start.toDate(getLocalTimeZone()),
+      state.dateRange.end.toDate(getLocalTimeZone())
+    )
+  }, [state.dateRange, formatter])
 
   return (
     <div
@@ -62,14 +65,14 @@ export function DateRangePicker(props: DateRangePickerProps) {
           className={cn(
             state.isOpen && 'z-10 ring-2',
             'relative flex h-10  items-center rounded-l rounded-r border text-sans-md border-default focus-within:ring-2 hover:border-raise focus:z-10',
-            state.validationState === 'invalid'
+            state.isInvalid
               ? 'focus-error border-error ring-error-secondary'
               : 'border-default ring-accent-secondary'
           )}
         >
           <div className={cn('relative flex w-[16rem] items-center px-3 text-sans-md')}>
             {label}
-            {state.validationState === 'invalid' && (
+            {state.isInvalid && (
               <div className="absolute bottom-0 right-2 top-0 flex items-center text-error">
                 <Error12Icon className="h-3 w-3" />
               </div>
@@ -80,7 +83,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
           </div>
         </button>
       </div>
-      {state.validationState === 'invalid' && (
+      {state.isInvalid && (
         <p {...errorMessageProps} className="py-2 text-sans-md text-error">
           Date range is invalid
         </p>

libs/ui/lib/number-input/NumberInput.stories.tsx

@@ -0,0 +1,44 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { NumberInput } from './NumberInput'
+
+export const Default = () => (
+  <div className="max-w-lg">
+    <NumberInput defaultValue={6} />
+  </div>
+)
+
+export const WithUnit = () => (
+  <div className="max-w-lg">
+    <NumberInput
+      defaultValue={6}
+      formatOptions={{
+        style: 'unit',
+        unit: 'inch',
+        unitDisplay: 'long',
+      }}
+    />
+  </div>
+)
+
+export const StepValues = () => (
+  <div className="max-w-lg space-y-4 text-sans-md children:space-y-2">
+    <div>
+      <div>Step</div>
+      <NumberInput step={10} />
+    </div>
+    <div>
+      <div>Step + minValue</div>
+      <NumberInput minValue={2} step={2} />
+    </div>
+    <div>
+      <div>Step + minValue + maxValue</div>
+      <NumberInput minValue={2} maxValue={20} step={2} />
+    </div>
+  </div>
+)