Add research for a number input

site/src/components/input-number-anatomy.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { AnatomyWrapper, Host, Part, Slot } from './anatomy-components'
+
+const InputNumberAnatomy = () => {
+ return (
+ <AnatomyWrapper>
+ <Host name="openui-input-number">
+ <Part name="input">
+ <Slot name="input">
+ <Part name="value">
+ <Slot name="value">
+ <Part name="placeholder">
+ <Slot name="placeholder" />
+ </Part>
+ </Slot>
+ </Part>
+ </Slot>
+ <Part name="spinner">
+ <Slot name="spinner">
+ <Part name="spinner-button-up">
+ <Slot name="spinner-button-up" />
+ </Part>
+ <Part name="spinner-button-down">
+ <Slot name="spinner-button-down" />
+ </Part>
+ </Slot>
+ </Part>
+ </Part>
+ </Host>
+ </AnatomyWrapper>
+ )
+}
+
+export default InputNumberAnatomy

site/src/pages/components/inputnumber.research.explainer.mdx

@@ -0,0 +1,47 @@
+---
+menu: Research
+name: Number (Explainer)
+pathToResearch: /components/inputnumber.research
+layout: ../../layouts/ComponentLayout.astro
+---
+
+import InputNumberAnatomy from '../../components/input-number-anatomy.jsx'
+
+## Overview
+
+The number component is a control that allows the user to enter a number, integer or decimal. It is a variation of the text input component, but with extra validation and optionally increment/decrement controls.
+
+### Use Cases
+
+The number component is primarily leveraged to indicate a numeric value. For example, forms could use a number input to enter a quantity of items.
+
+## Design
+
+### API
+
+#### Properties
+
+| Attribute Name | Type | Default Value | Description |
+| ---------------- | -------- | ------------- | ---------------------------------------------------------------------------------------------------------|
+| `min` | `number` | `null` | The minimum valid value of the input. |
+| `max` | `number` | `null` | The maximum valid value of the input. |
+| `step` | `number` | `null` | The amount that the value changes when editing using keyboard arrows or UI. |
+| `value` | `number` | `null` | The value of the checkbox. |
+| `autofocus` | `bool` | `false` | Get focus by default. |
+| `disabled` | `bool` | `false` | Prevents the user from interacting with the control. Defaults to false. |
+| `form` | `string` | `null` | Associates the element with a form in the document whose `id` is this value. |
+| `name` | `string` | `""` | Specify the name of the control for purposes of form submission. |
+| `placeholder` | `string` | `""` | Text that appears in the form control when it has no value set |
+| `required` | `bool` | `false` | Indicates that the input is invalid unless checked. |
+| `readonly` | `bool` | `readonly` | Indicates that the input is not interactive but its value should still be submitted with the form. |
+
+### Anatomy
+
+<InputNumberAnatomy />
+
+### Explanation
+
+The proposed anatomy of the number component is based on the existing `<input type="number">` element. Which shares the same anatomy across all desktop implementations.
+
+The spinner part of the component is not universal, for example mobile implementations of the number input do not have a spinner. However, the spinner is a useful affordance for desktop users, so it is included in the anatomy.
+Implementations should consider the default styles given to the spinner parts.

site/src/pages/components/inputnumber.research.mdx

@@ -0,0 +1,23 @@
+---
+menu: Research
+name: Number
+pathToProposal: /components/inputnumber.research.explainer
+
+layout: ../../layouts/ComponentLayout.astro
+---
+
+import InputNumberAnatomy from '../../components/input-number-anatomy.jsx'
+import Concepts from '../../components/concepts'
+import ComponentCoverage from '../../components/component-coverage'
+
+## Names
+
+<ComponentCoverage component="InputNumber" />
+
+## Anatomy
+
+<InputNumberAnatomy />
+
+## Concepts
+
+<Concepts client:load component="InputNumber" />

site/src/sources/antd.json

@@ -629,7 +629,24 @@
  },
  {
  "name": "InputNumber",
- "url": "https://ant.design/components/input-number"
+ "url": "https://ant.design/components/input-number",
+ "concepts": [
+ {
+ "name": "basic",
+ "image": "antd-input-number-basic.png"
+ },
+ {
+ "name": "disabled",
+ "image": "antd-input-number-disabled.png"
+ },
+ {
+ "name": "hovered",
+ "image": "antd-input-number-hovered.png"
+ },
+ {
+ "name": "readonly"
+ }
+ ]
  },
  {
  "name": "Input",

site/src/sources/carbon.json

@@ -293,7 +293,22 @@
  },
  {
  "name": "Number input",
- "url": "https://www.carbondesignsystem.com/components/number-input/code"
+ "openUIName": "InputNumber",
+ "url": "https://www.carbondesignsystem.com/components/number-input/code",
+ "concepts": [
+ {
+ "name": "basic",
+ "image": "carbon-input-number-basic.png"
+ },
+ {
+ "name": "disabled",
+ "image": "carbon-input-number-disabled.png"
+ },
+ {
+ "name": "readonly",
+ "image": "carbon-input-number-readonly.png"
+ }
+ ]
  },
  {
  "name": "Pagination",

site/src/sources/chromium.json

@@ -26,6 +26,23 @@
  "image": "chromium-file-multiple-selection.png"
  }
  ]
+ },
+ {
+ "name": "InputNumber",
+ "concepts": [
+ {
+ "name": "basic",
+ "image": "chromium-input-number-basic.png"
+ },
+ {
+ "name": "disabled",
+ "image": "chromium-input-number-disabled.png"
+ },
+ {
+ "name": "hovered",
+ "image": "chromium-input-number-hovered.png"
+ }
+ ]
  }
  ]
 }

site/src/sources/fast.json

@@ -382,6 +382,28 @@
  "name": "Data Grid",
  "definition": "The data grid component enables authors to display an array of data in a tabular layout. The layout can include a header region where a title can be displayed for each column.",
  "url": "https://explore.fast.design/components/fast-data-grid"
+ },
+ {
+ "name": "Number field",
+ "openUIName": "InputNumber",
+ "url": "https://explore.fast.design/components/fast-number-field",
+ "concepts": [
+ {
+ "name": "basic",
+ "image": "fast-input-number-basic.png"
+ },
+ {
+ "name": "disabled",
+ "image": "fast-input-number-disabled.png"
+ },
+ {
+ "name": "hovered",
+ "image": "fast-input-number-hovered.png"
+ },
+ {
+ "name": "readonly"
+ }
+ ]
  }
  ]
 }

site/src/sources/kolibri.json

@@ -553,6 +553,19 @@
  "url": "https://public-ui.github.io/docs/components/input-number",
  "anatomy": [],
  "concepts": [
+ {
+ "name": "basic",
+ "image": "kolibri-input-number-basic.png"
+ },
+ {
+ "name": "disabled",
+ "description": "Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.",
+ "image": "kolibri-input-number-disabled.png"
+ },
+ {
+ "name": "hovered",
+ "image": "kolibri-input-number-hovered.png"
+ },
  {
  "name": "access-key",
  "description": "Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann."
@@ -565,10 +578,6 @@
  "name": "auto-complete",
  "description": "Gibt an, ob das Eingabefeld autovervollständigt werden kann."
  },
- {
- "name": "disabled",
- "description": "Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt."
- },
  { "name": "error", "description": "Gibt den Text für eine Fehlermeldung an." },
  { "name": "hide-label", "description": "Versteckt das sichtbare Label des Elements." },
  { "name": "hint", "description": "Gibt den Hinweistext an." },
@@ -591,6 +600,7 @@
  },
  {
  "name": "read-only",
+ "openUIName": "readonly",
  "description": "Setzt das Eingabefeld in den schreibgeschützten Modus."
  },
  { "name": "required", "description": "Macht das Eingabeelement zu einem Pflichtfeld." },

site/src/sources/lion.json

@@ -29,6 +29,7 @@
  },
  {
  "name": "input-amount",
+ "openUIName": "InputNumber",
  "url": "https://lion-web-components.netlify.app/?path=/docs/forms-input-amount--main"
  },
  {
@@ -53,7 +54,21 @@
  },
  {
  "name": "input-stepper",
- "url": "https://lion-web-components.netlify.app/?path=/docs/forms-input-stepper--main"
+ "openUIName": "InputNumber",
+ "url": "https://lion-web.netlify.app/components/input-stepper/overview/",
+ "concepts": [
+ {
+ "name": "basic",
+ "image": "lion-input-number-basic.png"
+ },
+ {
+ "name": "disabled",
+ "image": "lion-input-number-disabled.png"
+ },
+ {
+ "name": "readonly"
+ }
+ ]
  },
  {
  "name": "listbox",

site/src/sources/web.json

@@ -59,6 +59,7 @@
  },
  {
  "name": "Number",
+ "openUIName": "InputNumber",
  "url": "https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)"
  },
  {