feat(ui-number-input): rewrite NumberInput to the new theming system

- Converted `NumberInput` from class-based to functional component
- It uses the theme from TextInput, they are the same in Figma
- The styling of the upper label/messages are not done, they are coming
 in `FormFieldLayout`

Tokens are also not fully used (they are used only in `TextInput`):

- `fontSizeSm`, `heightSm`, `paddingHorizontalSm`: This component has no
 small size
- `gapContent`: This is a gap between the text and elements rendered
 after it, `NumberInput` does not have such

To test:

- Check the examples in the docs, they should function exactly as before
- Compare its CSS to the ones in Figma

Completes INSTUI-4814

Author: matyasf

packages/__docs__/resolve.mjs

@@ -92,6 +92,7 @@ const alias = {
   ),
   '@instructure/ui-grid$': path.resolve(import.meta.dirname, '../ui-grid/src/'),
   '@instructure/ui-i18n$': path.resolve(import.meta.dirname, '../ui-i18n/src/'),
+  '@instructure/ui-icons-lucide': path.resolve(import.meta.dirname, '../ui-icons-lucide/src/'),
   '@instructure/ui-img$': path.resolve(import.meta.dirname, '../ui-img/src/'),
   '@instructure/ui-instructure$': path.resolve(import.meta.dirname, '../ui-instructure/src/'),
   '@instructure/ui-link$': path.resolve(import.meta.dirname, '../ui-link/src/'),

packages/emotion/src/styleUtils/calcFocusOutlineStyles.ts

@@ -78,6 +78,7 @@ const calcFocusOutlineStyles = (
       transition: 'outline-color 0.2s, outline-offset 0.25s'
     }),
     outlineOffset: '-0.8rem',
+    outlineStyle: 'solid',
     outlineColor: alpha(outlineStyle.outlineColor, 0),
     '&:focus': {
       ...outlineStyle,

packages/emotion/src/useStyle.ts

@@ -60,7 +60,8 @@ const isNewThemeObject = (obj: BaseThemeOrOverride): obj is Theme => {
 const useStyle = <P extends GenerateStyleParams>(useStyleParams: {
   generateStyle: P
   params?: SecondParameter<P>
-  componentId: keyof NewComponentTypes
+  // needs to be a string too because it might be a child component
+  componentId: keyof NewComponentTypes | string
   themeOverride: ThemeOverrideValue | undefined
   displayName?: string
   //in case of a child component needed to use it's parent's tokens, provide parent's name

packages/ui-icons-lucide/src/wrapLucideIcon/styles.ts

@@ -49,16 +49,12 @@ const generateStyle = (
     if (color === 'inherit') {
       colorStyle = { color: 'inherit' }
     } else if (color in componentTheme) {
-      /**
-       * Direct theme property access
-       */
+      // Direct theme property access
       colorStyle = {
         color: componentTheme[color as keyof typeof componentTheme] as string
       }
     } else {
-      /**
-       * Custom CSS color (e.g., "#ff0000", "rgb(255, 0, 0)")
-       */
+      // Custom CSS color (e.g., "#ff0000", "rgb(255, 0, 0)")
       colorStyle = { color }
     }
   }

packages/ui-number-input/package.json

@@ -37,7 +37,7 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-a11y-utils": "workspace:*",
     "@instructure/ui-form-field": "workspace:*",
-    "@instructure/ui-icons": "workspace:*",
+    "@instructure/ui-icons-lucide": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-utils": "workspace:*",
     "@instructure/uid": "workspace:*",

packages/ui-number-input/src/NumberInput/README.md

@@ -8,9 +8,7 @@ Note that this field **does not work
 uncontrolled** - you must pass event handlers if you want it to respond to
 user input.
 
-This example handles arrow buttons, up/down arrow keys, and typing into
-the input. It also includes an `onBlur` handler that displays an error message
-if the input is invalid or missing.
+This example handles arrow buttons, up/down arrow keys, and typing into the input. It also includes an `onBlur` handler that displays an error message if the input is invalid or missing.
 
 ```js
 ---
@@ -150,16 +148,43 @@ render(<Example />)
 
 > Note: `NumberInput` accepts a string or number as its `value`. However, the value returned by the `onChange` callback is always a string and should be converted to a number before attempting to augment it.
 
-NumberInput comes in 2 sizes. The default size is "medium".
+You can see here most of the visual states of the component.
 
 ```js
 ---
-type: example
+  type: example
 ---
-<div>
-  <NumberInput renderLabel="Default-size input" /><br/>
-  <NumberInput size="large" renderLabel="Large-size input" />
-</div>
+  <Flex gap='2rem' direction='column'>
+    <NumberInput
+      renderLabel='normal'
+      placeholder="placeholder"
+    />
+    <NumberInput
+      interaction='disabled'
+      renderLabel='disabled'
+      placeholder="placeholder"
+    />
+    <NumberInput
+      interaction='readonly'
+      renderLabel='readonly'
+      placeholder="placeholder"
+    />
+    <NumberInput
+      renderLabel='has error'
+      placeholder="placeholder"
+      messages={[{ text: 'This is an error.', type: 'error' }]}
+    />
+    <NumberInput
+      renderLabel='with success message'
+      placeholder="placeholder"
+      messages={[{ text: 'Great success!', type: 'success' }]}
+    />
+    <NumberInput
+      renderLabel='Large size. Default is "medium"'
+      placeholder="placeholder"
+      size='large'
+    />
+  </Flex>
 ```
 
 ### Guidelines