@atom-learning/components 2.9.1 → 2.10.0

package/dist/docs/NumberInput.mdx

@@ -0,0 +1,37 @@
+---
+title: Number Input
+component: NumberInput
+description: The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values.
+category: Form primitives
+---
+
+`NumberInput` wraps `Input` set to a numeric value, along with two `ActionIcon` buttons for decrementing and incrementing the value.
+
+```tsx preview
+<NumberInput name="age" />
+```
+
+When min or max values are set, the corresponding decrement or increment button will become disabled when the min/max values are reached. By default, min is set to 0.
+
+A tooltip will display on hover of a disabled button, providing information on why the button is disabled. To override the default tooltip content, pass in a `disabledTooltipContent` object.
+
+Note: A `<ToolTipProvider />` must be rendered at the root of the app for this to work.
+
+```tsx preview
+<NumberInput
+  name="age"
+  max={11}
+  disabledTooltipContent={{ increment: 'Ages over 11 are not allowed' }}
+/>
+```
+
+## Keyboard interactions
+
+A negative `tabindex` has been added to the increment and decrement buttons to remove them from the default tabbing order. Instead, users can use the below keys to interact with the component.
+
+- When you hit the ⬆️ or ➡️ key, the input value will be increased by step.
+- When you hit the ⬅️ or ⬇️ key, the input value will be decreased by step.
+- When you hit the Home button, the value will jump to the min value.
+- When you hit the End button, the value will jump to the max value.
+
+See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role#keyboard_interactions) for more information on accessibility.

package/dist/docs/NumberInputField.mdx

@@ -0,0 +1,26 @@
+---
+title: Number Input Field
+component: NumberInputField
+description: NumberInputField renders a field composed of an NumberInput, a Label and a InlineMessage
+category: Form fields
+---
+
+`NumberInputField` is the preferred way to render a form field for a number input.
+
+In addition to text `Label` (required) and a validation error (optional), `NumberInputField` accepts all the same props as `NumberInput` and will pass them on to the `NumberInput` it renders.
+
+```tsx preview
+<Form>
+  <NumberInputField
+    label="Number of cats"
+    name="cats"
+    min={3}
+    validation={{
+      min: {
+        value: 3,
+        message: 'You must have at least 3 cats!'
+      }
+    }}
+  />
+</Form>
+```