diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx index 3aeeff070bb..232b2d6f2ed 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx @@ -54,7 +54,6 @@ export const OptionsPaneCategory: FC = React.memo( const boxStyles = cx( { [styles.box]: true, - [styles.boxExpanded]: isExpanded, [styles.boxNestedExpanded]: isNested && isExpanded, }, className, @@ -93,13 +92,7 @@ export const OptionsPaneCategory: FC = React.memo( const getStyles = (theme: GrafanaTheme2) => { return { box: css` - border-bottom: 1px solid ${theme.colors.border.weak}; - &:last-child { - border-bottom: none; - } - `, - boxExpanded: css` - border-bottom: 0; + border-top: 1px solid ${theme.colors.border.weak}; `, boxNestedExpanded: css` margin-bottom: ${theme.spacing(2)}; diff --git a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx index efa8f1399db..2c6e6a969ac 100644 --- a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx +++ b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx @@ -7,14 +7,16 @@ import { VariableSuggestionsScope, DynamicConfigValue, ConfigOverrideRule, + GrafanaTheme2, } from '@grafana/data'; -import { Container, fieldMatchersUI, ValuePicker } from '@grafana/ui'; +import { fieldMatchersUI, useStyles2, ValuePicker } from '@grafana/ui'; import { OptionPaneRenderProps } from './types'; import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor'; import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor'; import { DynamicConfigValueEditor } from './DynamicConfigValueEditor'; import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv'; import { OverrideCategoryTitle } from './OverrideCategoryTitle'; +import { css } from '@emotion/css'; export function getFieldOverrideCategories(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor[] { const categories: OptionsPaneCategoryDescriptor[] = []; @@ -208,7 +210,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option id: 'add button', customRender: function renderAddButton() { return ( - + >((i) => ({ label: i.name, value: i.id, description: i.description }))} onChange={(value) => onOverrideAdd(value)} /> - + ); }, }) ); - // - // Field override rules give you fine-grained control over how your data is displayed. - // - return categories; } @@ -257,3 +249,15 @@ function getOverrideProperties(registry: FieldConfigOptionsRegistry) { }; }); } + +function AddOverrideButtonContainer({ children }: { children: React.ReactNode }) { + const styles = useStyles2(getBorderTopStyles); + return
{children}
; +} + +function getBorderTopStyles(theme: GrafanaTheme2) { + return css({ + borderTop: `1px solid ${theme.colors.border.weak}`, + padding: `${theme.spacing(2)}`, + }); +}