fix(text-field): Display buttons for type number, documentation for number use case

Author: Flodi

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 -   `Tooltip`: increment z-index making them appear above popovers.
+-   `TextField`: display browser native buttons when used with type="number", add "number" use case documentation.
 
 ## [3.9.1][] - 2024-09-17
 

packages/lumx-core/src/scss/components/date-picker/_index.scss

@@ -16,7 +16,7 @@
 
     &__year {
         input[type="number"] {
-            width: 4ch; 
+            width: 6ch;
         }
     }
 

packages/lumx-core/src/scss/components/text-field/_mixins.scss

@@ -89,13 +89,11 @@
     border: none;
     outline: none;
 
-    &[type="number"] {
-        appearance: textfield;
-    }
+    // Always show the up/down arrow, not just on hover or focus
+    &[type=number]::-webkit-inner-spin-button,
+    &[type=number]::-webkit-outer-spin-button {
+        opacity: 1;
 
-    &[type="number"]::-webkit-inner-spin-button,
-    &[type="number"]::-webkit-outer-spin-button {
-        appearance: none;
     }
 
     @if $theme == lumx-base-const("theme", "LIGHT") {

packages/lumx-react/src/stories/generated/TextField/Demos.stories.tsx

@@ -10,6 +10,7 @@ export { App as Disabled } from './disabled';
 export { App as Helper } from './helper';
 export { App as Icon } from './icon';
 export { App as Invalid } from './invalid';
+export { App as Number } from './number';
 export { App as Placeholder } from './placeholder';
 export { App as Required } from './required';
 export { App as TextAreaInvalid } from './text-area-invalid';

packages/lumx-react/src/stories/generated/TextField/number.tsx

@@ -0,0 +1 @@
+../../../../../site-demo/content/product/components/text-field/react/number.tsx

packages/site-demo/content/product/components/text-field/index.mdx

@@ -86,6 +86,12 @@ Use Text areas when users are expected to enter more than one line of text.
 
 <DemoBlock demo="text-area-invalid" withThemeSwitcher />
 
+## Number
+
+Use number input when users are expected to enter numeric values.
+
+<DemoBlock demo="number" withThemeSwitcher />
+
 ### Properties
 
 <PropTable component="TextField" />

packages/site-demo/content/product/components/text-field/react/number.tsx

@@ -0,0 +1,8 @@
+import { TextField } from '@lumx/react';
+import React, { useState } from 'react';
+
+export const App = ({ theme }: any) => {
+    const [value, setValue] = useState('');
+
+    return <TextField label="Number" value={value} type="number" onChange={setValue} theme={theme} />;
+};