IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Fix Input width from className not being respected

* Also use width prop in Slider
This commit is contained in:
Josh Hunt 2025-02-06 16:14:38 +00:00 committed by GitHub
parent 0035ed8a5e
commit f8509273cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/Input/Input.tsx
View File

@ -60,19 +60,21 @@ export const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
// if a better solution is found. // if a better solution is found.
const isInAutoSizeInput = useContext(AutoSizeInputContext); const isInAutoSizeInput = useContext(AutoSizeInputContext);
const accessoriesWidth = (prefixRect.width || 0) + (suffixRect.width || 0); 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(); const theme = useTheme2();
// Don't pass the width prop, as this causes an unnecessary amount of Emotion calls when auto sizing // 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} />); const suffix = suffixProp || (loading && <Spinner inline={true} />);
return ( return (
<div <div
className={cx(styles.wrapper, className)} 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" data-testid="input-wrapper"
> >
{!!addonBefore && <div className={styles.addon}>{addonBefore}</div>} {!!addonBefore && <div className={styles.addon}>{addonBefore}</div>}
@ -130,7 +132,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
css({ css({
label: 'input-wrapper', label: 'input-wrapper',
display: 'flex', 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), height: theme.spacing(theme.components.height.md),
borderRadius: theme.shape.radius.default, borderRadius: theme.shape.radius.default,
'&:hover': { '&:hover': {

1
packages/grafana-ui/src/components/Slider/Slider.tsx
View File

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

1
packages/grafana-ui/src/components/Slider/styles.ts
View File

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