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

PanelEdit: Fixes alignment issue with collapse button (#59414)

Browse Source 
* PanelEdit: Fixes alignment issue with collapse button

* Fix
This commit is contained in:
Torkel Ödegaard 2022-11-30 16:06:32 +01:00 committed by GitHub
parent d4d4e05bcb
commit 6625147e74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/alerting/unified/components/CollapseToggle.tsx
View File

@ -29,6 +29,7 @@ export const CollapseToggle: FC<Props> = ({
<Button
type="button"
fill="text"
variant="secondary"
aria-expanded={!isCollapsed}
aria-controls={idControlled}
className={cx(styles.expandButton, className)}
@ -43,7 +44,6 @@ export const CollapseToggle: FC<Props> = ({
export const getStyles = (theme: GrafanaTheme2) => ({
expandButton: css`
color: ${theme.colors.text.secondary};
margin-right: ${theme.spacing(1)};
`,
});

1
public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx
View File

@ -25,6 +25,7 @@ export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
<div className={styles.header}>
<div className={styles.group} data-testid="alert-group">
<CollapseToggle
size="sm"
isCollapsed={isCollapsed}
onToggle={() => setIsCollapsed(!isCollapsed)}
data-testid="alert-group-collapse-toggle"

1
public/app/features/alerting/unified/components/rules/RulesGroup.tsx
View File

@ -192,6 +192,7 @@ export const RulesGroup: FC<Props> = React.memo(({ group, namespace, expandAll,
<div className={styles.wrapper} data-testid="rule-group">
<div className={styles.header} data-testid="rule-group-header">
<CollapseToggle
size="sm"
className={styles.collapseToggle}
isCollapsed={isCollapsed}
onToggle={setIsCollapsed}

20
public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
View File

@ -4,9 +4,8 @@ import { useLocalStorage } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { Counter, useStyles2 } from '@grafana/ui';
import { Button, Counter, useStyles2 } from '@grafana/ui';
import { useQueryParams } from 'app/core/hooks/useQueryParams';
import { CollapseToggle } from 'app/features/alerting/unified/components/CollapseToggle';
import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
@ -107,7 +106,16 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
ref={ref}
>
<div className={headerStyles} onClick={onToggle} aria-label={selectors.components.OptionsGroup.toggle(id)}>
<CollapseToggle isCollapsed={!isExpanded} idControlled={id} onToggle={onToggle} />
<Button
type="button"
fill="text"
size="sm"
variant="secondary"
aria-expanded={isExpanded}
className={styles.toggleButton}
icon={isExpanded ? 'angle-down' : 'angle-right'}
onClick={onToggle}
/>
<h6 id={`button-${id}`} className={styles.title}>
{renderTitle(isExpanded)}
</h6>
@ -137,13 +145,14 @@ const getStyles = (theme: GrafanaTheme2) => {
overflow: hidden;
line-height: 1.5;
font-size: 1rem;
padding-left: 6px;
font-weight: ${theme.typography.fontWeightMedium};
margin: 0;
`,
header: css`
display: flex;
cursor: pointer;
align-items: baseline;
align-items: center;
padding: ${theme.spacing(0.5)};
color: ${theme.colors.text.primary};
font-weight: ${theme.typography.fontWeightMedium};
@ -152,6 +161,9 @@ const getStyles = (theme: GrafanaTheme2) => {
background: ${theme.colors.emphasize(theme.colors.background.primary, 0.03)};
}
`,
toggleButton: css`
align-self: baseline;
`,
headerExpanded: css`
color: ${theme.colors.text.primary};
`,

1
public/app/plugins/panel/alertGroups/AlertGroup.tsx
View File

@ -103,6 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
display: flex;
flex-direction: row;
align-items: center;
gap: ${theme.spacing(1)};
`,
alerts: css`
margin: ${theme.spacing(0, 2, 0, 4)};