u

src/components/article/tabs/ArticleAttributesTab.jsx

@@ -3,10 +3,7 @@ import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import TextField from '@mui/material/TextField';
+import TextInput from '../../TextInput';
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
 import Tooltip from '@mui/material/Tooltip';
@@ -397,51 +394,45 @@ export default class ArticleAttributesTab extends PureComponent {
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
         {/* Unified Add Bar: [Merkmal ▼] [Wert ▼ / Input] [+] */}
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <FormControl size="small" sx={{ minWidth: 170 }}>
-            <InputLabel id="merkmal-select-label">Merkmal</InputLabel>
-            <Select
-              labelId="merkmal-select-label"
-              value={selectedMerkmalKey}
-              label="Merkmal"
-              disabled={saving || merkmalOptions.length === 0}
-              onChange={this.handleMerkmalChange}
-              sx={{ bgcolor: 'background.paper' }}
-            >
-              {merkmalOptions.map((m) => (
-                <MenuItem key={m.key} value={m.key}>
-                  {m.name}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
+          <TextInput
+            select
+            label="Merkmal"
+            value={selectedMerkmalKey}
+            disabled={saving || merkmalOptions.length === 0}
+            onChange={this.handleMerkmalChange}
+            sx={{ minWidth: 170 }}
+          >
+            {merkmalOptions.map((m) => (
+              <MenuItem key={m.key} value={m.key}>
+                {m.name}
+              </MenuItem>
+            ))}
+          </TextInput>
 
           {isAttr ? (
-            <FormControl size="small" sx={{ minWidth: 170 }}>
-              <InputLabel id="item-select-label">Wert</InputLabel>
-              <Select
-                labelId="item-select-label"
-                value={selectedItemId}
-                label="Wert"
-                disabled={saving || availableItems.length === 0}
-                onChange={this.handleItemChange}
-                sx={{ bgcolor: 'background.paper' }}
-              >
-                {availableItems.length === 0 ? (
-                  <MenuItem value="" disabled>
-                    (Keine Werte)
+            <TextInput
+              select
+              label="Wert"
+              value={selectedItemId}
+              disabled={saving || availableItems.length === 0}
+              onChange={this.handleItemChange}
+              sx={{ minWidth: 170 }}
+            >
+              {availableItems.length === 0 ? (
+                <MenuItem value="" disabled>
+                  (Keine Werte)
+                </MenuItem>
+              ) : (
+                availableItems.map((val) => (
+                  <MenuItem key={val.id} value={val.id}>
+                    {val.value}
                   </MenuItem>
-                ) : (
-                  availableItems.map((val) => (
-                    <MenuItem key={val.id} value={val.id}>
-                      {val.value}
-                    </MenuItem>
-                  ))
-                )}
-              </Select>
-            </FormControl>
+                ))
+              )}
+            </TextInput>
           ) : (
-            <TextField
-              size="small"
+            <TextInput
+              label="Wert"
               placeholder="Wert..."
               value={customValueText}
               disabled={saving || !selectedMerkmalKey}
@@ -452,7 +443,7 @@ export default class ArticleAttributesTab extends PureComponent {
                   void this.handleAddItem();
                 }
               }}
-              sx={{ minWidth: 170, bgcolor: 'background.paper' }}
+              sx={{ minWidth: 170 }}
             />
           )}
 

src/components/article/tabs/ArticleLabelTab.jsx

@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
+import TextInput from '../../TextInput';
 import MenuItem from '@mui/material/MenuItem';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
@@ -210,22 +210,21 @@ export default class ArticleLabelTab extends PureComponent {
 
         <Box>
           <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'flex-start' }}>
-            <TextField
+            <TextInput
               select
               label="Drucker"
               value={selectedPrinterId}
               onChange={(e) => this.setState({ selectedPrinterId: e.target.value })}
               sx={{ minWidth: 200 }}
-              size="small"
             >
               {printers.map((p) => (
                 <MenuItem key={p.id} value={p.id}>
                   {p.desc ? `${p.desc} (${p.address})` : p.address}
                 </MenuItem>
               ))}
-            </TextField>
+            </TextInput>
 
-            <TextField
+            <TextInput
               type="number"
               label="Anzahl"
               value={quantity}
@@ -233,9 +232,8 @@ export default class ArticleLabelTab extends PureComponent {
                 const val = parseInt(e.target.value, 10);
                 this.setState({ quantity: isNaN(val) ? 1 : Math.max(1, val) });
               }}
-              inputProps={{ min: 1, max: 9999 }}
+              slotProps={{ htmlInput: { min: 1, max: 9999 } }}
               sx={{ width: 100 }}
-              size="small"
             />
 
             <Button