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

Combobox: Fix input overflowing parent with autosize (#96642)

Browse Source
This commit is contained in:
Laura Fernández 2024-11-25 16:36:05 +01:00 committed by GitHub
parent a8b6c81d12
commit df628951f5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Combobox/Combobox.tsx
View File

@ -370,7 +370,7 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
const placeholder = (isOpen ? itemToString(selectedItem) : null) || placeholderProp; const placeholder = (isOpen ? itemToString(selectedItem) : null) || placeholderProp;
return ( return (
<div> <div className={isAutoSize ? styles.addaptToParent : undefined}>
<InputComponent <InputComponent
width={isAutoSize ? undefined : width} width={isAutoSize ? undefined : width}
{...(isAutoSize ? { minWidth, maxWidth } : {})} {...(isAutoSize ? { minWidth, maxWidth } : {})}

27
packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts
View File

@ -19,7 +19,7 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
display: 'none', display: 'none',
}), }),
menu: css({ menu: css({
label: 'grafana-select-menu', label: 'combobox-menu',
background: theme.components.dropdown.background, background: theme.components.dropdown.background,
boxShadow: theme.shadows.z3, boxShadow: theme.shadows.z3,
zIndex: theme.zIndex.dropdown, zIndex: theme.zIndex.dropdown,
@ -27,11 +27,11 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
borderRadius: theme.shape.radius.default, borderRadius: theme.shape.radius.default,
}), }),
menuUlContainer: css({ menuUlContainer: css({
label: 'grafana-select-menu-ul-container', label: 'combobox-menu-ul-container',
listStyle: 'none', listStyle: 'none',
}), }),
option: css({ option: css({
label: 'grafana-select-option', label: 'combobox-option',
padding: MENU_ITEM_PADDING, padding: MENU_ITEM_PADDING,
position: 'absolute', position: 'absolute',
display: 'flex', display: 'flex',
@ -50,7 +50,7 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
}, },
}), }),
optionBody: css({ optionBody: css({
label: 'grafana-select-option-body', label: 'combobox-option-body',
display: 'flex', display: 'flex',
fontWeight: theme.typography.fontWeightMedium, fontWeight: theme.typography.fontWeightMedium,
flexDirection: 'column', flexDirection: 'column',
@ -58,7 +58,7 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
overflow: 'hidden', overflow: 'hidden',
}), }),
optionLabel: css({ optionLabel: css({
label: 'grafana-select-option-label', label: 'combobox-option-label',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
overflow: 'hidden', overflow: 'hidden',
fontSize: MENU_ITEM_FONT_SIZE, fontSize: MENU_ITEM_FONT_SIZE,
@ -66,7 +66,7 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
letterSpacing: 0, // pr todo: text in grafana has a slightly different letter spacing, which causes measureText() to be ~5% off letterSpacing: 0, // pr todo: text in grafana has a slightly different letter spacing, which causes measureText() to be ~5% off
}), }),
optionDescription: css({ optionDescription: css({
label: 'grafana-select-option-description', label: 'combobox-option-description',
fontWeight: 'normal', fontWeight: 'normal',
fontSize: theme.typography.bodySmall.fontSize, fontSize: theme.typography.bodySmall.fontSize,
color: theme.colors.text.secondary, color: theme.colors.text.secondary,
@ -75,7 +75,7 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
overflow: 'hidden', overflow: 'hidden',
}), }),
optionFocused: css({ optionFocused: css({
label: 'grafana-select-option-focused', label: 'combobox-option-focused',
top: 0, top: 0,
background: theme.colors.action.focus, background: theme.colors.action.focus,
'@media (forced-colors: active), (prefers-contrast: more)': { '@media (forced-colors: active), (prefers-contrast: more)': {
@ -97,7 +97,7 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
}, },
}), }),
clear: css({ clear: css({
label: 'grafana-select-clear', label: 'combobox-clear',
cursor: 'pointer', cursor: 'pointer',
pointerEvents: 'auto', pointerEvents: 'auto',
'&:hover': { '&:hover': {
@ -105,14 +105,21 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => {
}, },
}), }),
warningIcon: css({ warningIcon: css({
label: 'grafana-select-warning-icon', label: 'combobox-warning-icon',
color: theme.colors.text.secondary, color: theme.colors.text.secondary,
}), }),
input: css({ input: css({
label: 'grafana-select-input', label: 'combobox-input',
'> div > div:last-child': { '> div > div:last-child': {
pointerEvents: 'none', pointerEvents: 'none',
}, },
}), }),
addaptToParent: css({
label: 'combobox-addapt-to-parent',
maxWidth: '100%',
'[class*="input-wrapper-combobox-input"]': {
maxWidth: '100%',
},
}),
}; };
}; };