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

Canvas: Fix button element size not being applied correctly (#75387)

Browse Source 
Co-authored-by: Nathan Marrs <nathanielmarrs@gmail.com>
This commit is contained in:
Linghao Su 2023-10-04 12:32:58 +08:00 committed by GitHub
parent c88d5d7b40
commit 549acf09b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/app/features/canvas/elements/button.tsx
View File

@ -1,8 +1,11 @@
import { css } from '@emotion/css';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { PluginState } from '@grafana/data/src'; import { PluginState } from '@grafana/data/src';
import { TextDimensionConfig, TextDimensionMode } from '@grafana/schema'; import { TextDimensionConfig, TextDimensionMode } from '@grafana/schema';
import { Button } from '@grafana/ui'; import { Button, stylesFactory } from '@grafana/ui';
import { config } from 'app/core/config';
import { DimensionContext } from 'app/features/dimensions/context'; import { DimensionContext } from 'app/features/dimensions/context';
import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor'; import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
import { APIEditor, APIEditorConfig } from 'app/plugins/panel/canvas/editor/element/APIEditor'; import { APIEditor, APIEditorConfig } from 'app/plugins/panel/canvas/editor/element/APIEditor';
@ -40,6 +43,8 @@ export const defaultStyleConfig: ButtonStyleConfig = {
class ButtonDisplay extends PureComponent<CanvasElementProps<ButtonConfig, ButtonData>> { class ButtonDisplay extends PureComponent<CanvasElementProps<ButtonConfig, ButtonData>> {
render() { render() {
const { data } = this.props; const { data } = this.props;
const styles = getStyles(config.theme2, data);
const onClick = () => { const onClick = () => {
if (data?.api && data?.api?.endpoint) { if (data?.api && data?.api?.endpoint) {
callApi(data.api); callApi(data.api);
@ -47,13 +52,21 @@ class ButtonDisplay extends PureComponent<CanvasElementProps<ButtonConfig, Butto
}; };
return ( return (
<Button type="submit" variant={data?.style?.variant} onClick={onClick}> <Button type="submit" variant={data?.style?.variant} onClick={onClick} className={styles.button}>
{data?.text} {data?.text}
</Button> </Button>
); );
} }
} }
const getStyles = stylesFactory((theme: GrafanaTheme2, data: ButtonData | undefined) => ({
button: css({
position: 'absolute',
height: '100%',
width: '100%',
}),
}));
export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = { export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
id: 'button', id: 'button',
name: 'Button', name: 'Button',
@ -83,8 +96,8 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
}, },
}, },
placement: { placement: {
width: options?.placement?.width, width: options?.placement?.width ?? 32,
height: options?.placement?.height, height: options?.placement?.height ?? 78,
top: options?.placement?.top ?? 100, top: options?.placement?.top ?? 100,
left: options?.placement?.left ?? 100, left: options?.placement?.left ?? 100,
}, },