Canvas: Add standard text config options to button element (#76160)

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>

.betterer.results

@@ -2907,10 +2907,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "1"],
       [0, 0, 0, "Styles should be written using objects.", "2"]
     ],
-    "public/app/features/canvas/elements/rectangle.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/features/canvas/elements/server/server.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],

public/app/features/canvas/element.ts

@@ -91,4 +91,5 @@ export interface CanvasElementItem<TConfig = any, TData = any> extends RegistryI
 
 export const defaultBgColor = '#D9D9D9';
 export const defaultTextColor = '#000000';
-export const defaultThemeTextColor = config.theme2.colors.text.primary;
+export const defaultLightTextColor = '#F0F4FD';
+export const defaultThemeTextColor = config.theme2.colors.background.primary;

public/app/features/canvas/elements/button.tsx

@@ -3,26 +3,26 @@ import React, { PureComponent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { PluginState } from '@grafana/data/src';
-import { TextDimensionConfig, TextDimensionMode } from '@grafana/schema';
+import { TextDimensionMode } from '@grafana/schema';
 import { Button, stylesFactory } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { DimensionContext } from 'app/features/dimensions/context';
+import { ColorDimensionEditor } from 'app/features/dimensions/editors';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
 import { APIEditor, APIEditorConfig } from 'app/plugins/panel/canvas/editor/element/APIEditor';
 import { ButtonStyleConfig, ButtonStyleEditor } from 'app/plugins/panel/canvas/editor/element/ButtonStyleEditor';
 import { callApi } from 'app/plugins/panel/canvas/editor/element/utils';
 import { HttpRequestMethod } from 'app/plugins/panel/canvas/panelcfg.gen';
 
-import { CanvasElementItem, CanvasElementProps } from '../element';
+import { CanvasElementItem, CanvasElementProps, defaultLightTextColor } from '../element';
+import { Align, TextConfig, TextData } from '../types';
 
-interface ButtonData {
-  text?: string;
+interface ButtonData extends Omit<TextData, 'valign'> {
   api?: APIEditorConfig;
   style?: ButtonStyleConfig;
 }
 
-interface ButtonConfig {
-  text?: TextDimensionConfig;
+interface ButtonConfig extends Omit<TextConfig, 'valign'> {
   api?: APIEditorConfig;
   style?: ButtonStyleConfig;
 }
@@ -61,9 +61,16 @@ class ButtonDisplay extends PureComponent<CanvasElementProps<ButtonConfig, Butto
 
 const getStyles = stylesFactory((theme: GrafanaTheme2, data: ButtonData | undefined) => ({
   button: css({
-    position: 'absolute',
     height: '100%',
     width: '100%',
+    display: 'grid',
+
+    '> span': {
+      display: 'inline-grid',
+      textAlign: data?.align,
+      fontSize: `${data?.size}px`,
+      color: data?.color,
+    },
   }),
 }));
 
@@ -80,8 +87,8 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
   display: ButtonDisplay,
 
   defaultSize: {
-    width: 78,
-    height: 32,
+    width: 150,
+    height: 45,
   },
 
   getNewOptions: (options) => ({
@@ -91,6 +98,11 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
         mode: TextDimensionMode.Fixed,
         fixed: 'Button',
       },
+      align: Align.Center,
+      color: {
+        fixed: defaultLightTextColor,
+      },
+      size: 14,
       api: defaultApiConfig,
       style: defaultStyleConfig,
     },
@@ -124,10 +136,16 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
 
     const data: ButtonData = {
       text: cfg?.text ? ctx.getText(cfg.text).value() : '',
+      align: cfg.align ?? Align.Center,
+      size: cfg.size,
       api: getCfgApi(),
       style: cfg?.style ?? defaultStyleConfig,
     };
 
+    if (cfg.color) {
+      data.color = ctx.getColor(cfg.color).value();
+    }
+
     return data;
   },
 
@@ -135,6 +153,13 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
   registerOptionsUI: (builder) => {
     const category = ['Button'];
     builder
+      .addCustomEditor({
+        category,
+        id: 'styleSelector',
+        path: 'config.style',
+        name: 'Style',
+        editor: ButtonStyleEditor,
+      })
       .addCustomEditor({
         category,
         id: 'textSelector',
@@ -144,10 +169,33 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
       })
       .addCustomEditor({
         category,
-        id: 'styleSelector',
-        path: 'config.style',
-        name: 'Style',
-        editor: ButtonStyleEditor,
+        id: 'config.color',
+        path: 'config.color',
+        name: 'Text color',
+        editor: ColorDimensionEditor,
+        settings: {},
+        defaultValue: {},
+      })
+      .addRadio({
+        category,
+        path: 'config.align',
+        name: 'Align text',
+        settings: {
+          options: [
+            { value: Align.Left, label: 'Left' },
+            { value: Align.Center, label: 'Center' },
+            { value: Align.Right, label: 'Right' },
+          ],
+        },
+        defaultValue: Align.Left,
+      })
+      .addNumberInput({
+        category,
+        path: 'config.size',
+        name: 'Text size',
+        settings: {
+          placeholder: 'Auto',
+        },
       })
       .addCustomEditor({
         category,

public/app/features/canvas/elements/rectangle.tsx

@@ -15,6 +15,7 @@ class RectangleDisplay extends PureComponent<CanvasElementProps<TextConfig, Text
   render() {
     const { data } = this.props;
     const styles = getStyles(config.theme2, data);
+
     return (
       <div className={styles.container}>
         <span className={styles.span}>{data?.text}</span>
@@ -22,21 +23,23 @@ class RectangleDisplay extends PureComponent<CanvasElementProps<TextConfig, Text
     );
   }
 }
+
 const getStyles = stylesFactory((theme: GrafanaTheme2, data) => ({
-  container: css`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    display: table;
-  `,
-  span: css`
-    display: table-cell;
-    vertical-align: ${data?.valign};
-    text-align: ${data?.align};
-    font-size: ${data?.size}px;
-    color: ${data?.color};
-  `,
+  container: css({
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    display: 'table',
+  }),
+  span: css({
+    display: 'table-cell',
+    verticalAlign: data?.valign,
+    textAlign: data?.align,
+    fontSize: `${data?.size}px`,
+    color: data?.color,
+  }),
 }));
+
 export const rectangleItem: CanvasElementItem<TextConfig, TextData> = {
   id: 'rectangle',
   name: 'Rectangle',