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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 6 deletions
Show Stats 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>;
children: (api: FormAPI<T>) => React.ReactNode;
/** Sets max-width for container. Use it instead of setting individual widths on inputs.*/
maxWidth?: number;
maxWidth?: number | 'none';
}
export function Form<T>({
@ -38,7 +38,7 @@ export function Form<T>({
return (
<form
className={css`
max-width: ${maxWidth}px;
max-width: ${maxWidth !== 'none' ? maxWidth + 'px' : maxWidth};
width: 100%;
`}
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`
display: flex;
flex-direction: row;
align-items: flex-start;
align-items: center;
text-align: left;
position: relative;
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;
}
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 styles = getInlineLabelStyles(theme, width);
@ -48,7 +48,7 @@ export const getInlineLabelStyles = (theme: GrafanaTheme, width?: number | 'auto
font-size: ${theme.typography.size.sm};
background-color: ${theme.colors.bg2};
height: ${theme.height.md}px;
line-height: ${theme.height.md};
line-height: ${theme.height.md}px;
margin-right: ${theme.spacing.xs};
border-radius: ${theme.border.radius.md};
border: none;
@ -56,7 +56,6 @@ export const getInlineLabelStyles = (theme: GrafanaTheme, width?: number | 'auto
color: ${theme.colors.textHeading};
`,
icon: css`
flex-grow: 0;
color: ${theme.colors.textWeak};
margin-left: 10px;