use ColorPicker component

packages/grafana-data/src/types/action.ts

@@ -29,7 +29,7 @@ export interface ActionModel<T = any> {
   onClick: (event: any, origin?: any) => void;
   confirmation?: string;
   oneClick?: boolean;
-  style?: ActionButtonCssProperties;
+  style: ActionButtonCssProperties;
 }
 
 interface FetchOptions {
@@ -69,7 +69,4 @@ export const defaultActionConfig: Action = {
     queryParams: [],
     headers: [['Content-Type', 'application/json']],
   },
-  style: {
-    backgroundColor: '',
-  },
 };

packages/grafana-ui/src/components/Actions/ActionButton.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import { ActionModel, Field } from '@grafana/data';
 
+import { useTheme2 } from '../../themes';
 import { t } from '../../utils/i18n';
 import { Button, ButtonProps } from '../Button';
 import { ConfirmModal } from '../ConfirmModal/ConfirmModal';
@@ -14,6 +15,10 @@ type ActionButtonProps = ButtonProps & {
  * @internal
  */
 export function ActionButton({ action, ...buttonProps }: ActionButtonProps) {
+  const theme = useTheme2();
+  const backgroundColor = action.style.backgroundColor || theme.colors.secondary.main;
+  const textColor = theme.colors.getContrastText(backgroundColor);
+
   const [showConfirm, setShowConfirm] = useState(false);
 
   return (
@@ -23,7 +28,7 @@ export function ActionButton({ action, ...buttonProps }: ActionButtonProps) {
         size="sm"
         onClick={() => setShowConfirm(true)}
         {...buttonProps}
-        style={{ width: 'fit-content', backgroundColor: action.style?.backgroundColor }}
+        style={{ width: 'fit-content', backgroundColor, color: textColor }}
       >
         {action.title}
       </Button>

public/app/features/actions/ActionEditor.tsx

@@ -10,7 +10,8 @@ import {
   RadioButtonGroup,
   JSONFormatter,
   useStyles2,
-  ColorPickerInput,
+  ColorPicker,
+  useTheme2,
 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
@@ -30,6 +31,7 @@ const LABEL_WIDTH = 13;
 
 export const ActionEditor = memo(({ index, value, onChange, suggestions, showOneClick }: ActionEditorProps) => {
   const styles = useStyles2(getStyles);
+  const theme = useTheme2();
 
   const onTitleChange = (title: string) => {
     onChange(index, { ...value, title });
@@ -152,6 +154,19 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions, showOne
         />
       </Field>
 
+      <Field label={t('grafana-ui.action-editor.button.style', 'Button style')}>
+        <InlineField
+          label={t('actions.action-editor.button.style.background-color', 'Color')}
+          labelWidth={LABEL_WIDTH}
+          className={styles.colorPicker}
+        >
+          <ColorPicker
+            color={value?.style?.backgroundColor || theme.colors.secondary.main}
+            onChange={onBackgroundColorChange}
+          />
+        </InlineField>
+      </Field>
+
       {showOneClick && (
         <Field
           label={t('grafana-ui.data-link-inline-editor.one-click', 'One click')}
@@ -223,18 +238,6 @@ export const ActionEditor = memo(({ index, value, onChange, suggestions, showOne
           {renderJSON(value?.fetch.body)}
         </>
       )}
-
-      <Field label={t('grafana-ui.action-editor.button.style', 'Button style')}>
-        <InlineFieldRow>
-          <InlineField
-            label={t('actions.action-editor.button.style.background-color', 'Background color')}
-            labelWidth={LABEL_WIDTH}
-            grow={true}
-          >
-            <ColorPickerInput value={value?.style?.backgroundColor} onChange={onBackgroundColorChange} />
-          </InlineField>
-        </InlineFieldRow>
-      </Field>
     </div>
   );
 });
@@ -254,6 +257,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
   inputField: css({
     marginRight: 4,
   }),
+  colorPicker: css({
+    display: 'flex',
+    alignItems: 'center',
+  }),
 });
 
 ActionEditor.displayName = 'ActionEditor';

public/app/features/actions/utils.ts

@@ -13,7 +13,7 @@ import {
   textUtil,
   ValueLinkConfig,
 } from '@grafana/data';
-import { BackendSrvRequest, getBackendSrv } from '@grafana/runtime';
+import { BackendSrvRequest, getBackendSrv, config as grafanaConfig } from '@grafana/runtime';
 import { appEvents } from 'app/core/core';
 
 import { HttpRequestMethod } from '../../plugins/panel/canvas/panelcfg.gen';
@@ -64,7 +64,7 @@ export const getActions = (
       },
       oneClick: action.oneClick ?? false,
       style: {
-        backgroundColor: action.style?.backgroundColor,
+        backgroundColor: action.style?.backgroundColor ?? grafanaConfig.theme2.colors.secondary.main,
       },
     };
 

public/locales/en-US/grafana.json

@@ -45,7 +45,7 @@
     "action-editor": {
       "button": {
         "style": {
-          "background-color": "Background color"
+          "background-color": "Color"
         }
       },
       "label-headers": "Headers",