Slider: Fix text input box being too wide (#100138)

* Fix Input width from className not being respected

* Also use width prop in Slider

packages/grafana-ui/src/components/Input/Input.tsx

@@ -60,19 +60,21 @@ export const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
   // if a better solution is found.
   const isInAutoSizeInput = useContext(AutoSizeInputContext);
   const accessoriesWidth = (prefixRect.width || 0) + (suffixRect.width || 0);
-  const finalWidth = isInAutoSizeInput && width ? width + accessoriesWidth / 8 : width;
+  const autoSizeWidth = isInAutoSizeInput && width ? width + accessoriesWidth / 8 : undefined;
 
   const theme = useTheme2();
 
   // Don't pass the width prop, as this causes an unnecessary amount of Emotion calls when auto sizing
-  const styles = getInputStyles({ theme, invalid: !!invalid });
+  const styles = getInputStyles({ theme, invalid: !!invalid, width: autoSizeWidth ? undefined : width });
 
   const suffix = suffixProp || (loading && <Spinner inline={true} />);
 
   return (
     <div
       className={cx(styles.wrapper, className)}
-      style={{ width: finalWidth ? theme.spacing(finalWidth) : '100%' }} // Override emotion styles for the width prop
+      // If the component is in an AutoSizeInput, set the width here to prevent emotion doing stuff
+      // on every keypress
+      style={autoSizeWidth ? { width: theme.spacing(autoSizeWidth) } : undefined}
       data-testid="input-wrapper"
     >
       {!!addonBefore && <div className={styles.addon}>{addonBefore}</div>}
@@ -130,7 +132,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
       css({
         label: 'input-wrapper',
         display: 'flex',
-        width: width ? theme.spacing(width) : '100%', // Not used in Input, as this causes performance issues with auto sizing
+        width: width ? theme.spacing(width) : '100%',
         height: theme.spacing(theme.components.height.md),
         borderRadius: theme.shape.radius.default,
         '&:hover': {

packages/grafana-ui/src/components/Slider/Slider.tsx

@@ -109,6 +109,7 @@ export const Slider = ({
 
         <Input
           type="text"
+          width={7.5}
           className={cx(styles.sliderInputField, ...sliderInputFieldClassNames)}
           value={sliderValue}
           onChange={onSliderInputChange}

packages/grafana-ui/src/components/Slider/styles.ts

@@ -117,7 +117,6 @@ export const getStyles = (theme: GrafanaTheme2, isHorizontal: boolean, hasMarks
     }),
     sliderInputField: css({
       marginLeft: theme.spacing(3),
-      width: '60px',
       input: {
         textAlign: 'center',
       },