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

Grafana-UI: Form elements fixes (#27858)

Browse Source 
* Fix inline label tooltip position

* Allow resetting max-width

* Fix label alignment and props

* Fix label line height
This commit is contained in:
Alex Khomenko
2020-10-07 13:20:32 +03:00
committed by GitHub
parent 09574547b8
commit 9c112cd785
3 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/Forms/Form.tsx
View File

@@ -11,7 +11,7 @@ interface FormProps<T> extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
onSubmit: OnSubmit<T>; onSubmit: OnSubmit<T>;
children: (api: FormAPI<T>) => React.ReactNode; children: (api: FormAPI<T>) => React.ReactNode;
/** Sets max-width for container. Use it instead of setting individual widths on inputs.*/ /** Sets max-width for container. Use it instead of setting individual widths on inputs.*/
maxWidth?: number; maxWidth?: number | 'none';
} }
export function Form<T>({ export function Form<T>({
@@ -38,7 +38,7 @@ export function Form<T>({
return ( return (
<form <form
className={css` className={css`
max-width: ${maxWidth}px; max-width: ${maxWidth !== 'none' ? maxWidth + 'px' : maxWidth};
width: 100%; width: 100%;
`} `}
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}

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

@@ -59,7 +59,7 @@ const getStyles = (theme: GrafanaTheme, grow?: boolean) => {
container: css` container: css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: center;
text-align: left; text-align: left;
position: relative; position: relative;
flex: ${grow ? 1 : 0} 0 auto; flex: ${grow ? 1 : 0} 0 auto;

5
packages/grafana-ui/src/components/Forms/InlineLabel.tsx
View File

@@ -20,7 +20,7 @@ export interface Props extends Omit<LabelProps, 'css' | 'description' | 'categor
isInvalid?: boolean; isInvalid?: boolean;
} }
export const InlineLabel: FunctionComponent<Props> = ({ children, className, htmlFor, tooltip, width, ...rest }) => { export const InlineLabel: FunctionComponent<Props> = ({ children, className, tooltip, width, ...rest }) => {
const theme = useTheme(); const theme = useTheme();
const styles = getInlineLabelStyles(theme, width); const styles = getInlineLabelStyles(theme, width);
@@ -48,7 +48,7 @@ export const getInlineLabelStyles = (theme: GrafanaTheme, width?: number | 'auto
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
background-color: ${theme.colors.bg2}; background-color: ${theme.colors.bg2};
height: ${theme.height.md}px; height: ${theme.height.md}px;
line-height: ${theme.height.md}; line-height: ${theme.height.md}px;
margin-right: ${theme.spacing.xs}; margin-right: ${theme.spacing.xs};
border-radius: ${theme.border.radius.md}; border-radius: ${theme.border.radius.md};
border: none; border: none;
@@ -56,7 +56,6 @@ export const getInlineLabelStyles = (theme: GrafanaTheme, width?: number | 'auto
color: ${theme.colors.textHeading}; color: ${theme.colors.textHeading};
`, `,
icon: css` icon: css`
flex-grow: 0;
color: ${theme.colors.textWeak}; color: ${theme.colors.textWeak};
margin-left: 10px; margin-left: 10px;