From f8509273cbe9838d60efd7693bf6c56d7902e61e Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Thu, 6 Feb 2025 16:14:38 +0000
Subject: [PATCH] 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   | 10 ++++++----
 packages/grafana-ui/src/components/Slider/Slider.tsx |  1 +
 packages/grafana-ui/src/components/Slider/styles.ts  |  1 -
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index 09b113cf76b..563adfa9772 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/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': {
diff --git a/packages/grafana-ui/src/components/Slider/Slider.tsx b/packages/grafana-ui/src/components/Slider/Slider.tsx
index 5da049a3d0c..c677d402dc9 100644
--- a/packages/grafana-ui/src/components/Slider/Slider.tsx
+++ b/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}
diff --git a/packages/grafana-ui/src/components/Slider/styles.ts b/packages/grafana-ui/src/components/Slider/styles.ts
index 1e0b73f0b44..dc2f060abae 100644
--- a/packages/grafana-ui/src/components/Slider/styles.ts
+++ b/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',
       },