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

ResourcePicker: Fix missing border bug on cancel button (#68966)

Browse Source 
* ResourcePicker: Fix missing border bug

* remove unused imports
This commit is contained in:
Torkel Ödegaard 2023-05-24 15:10:46 +02:00 committed by GitHub
parent ae373c662c
commit 2966989525
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
View File

@ -144,7 +144,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.borderRadius()};
box-shadow: ${theme.shadows.z3}; box-shadow: ${theme.shadows.z3};
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.weak};
.ColorPickerPopover__tab { .ColorPickerPopover__tab {
width: 50%; width: 50%;

24
public/app/features/dimensions/editors/ResourcePickerPopover.tsx
View File

@ -6,7 +6,7 @@ import React, { createRef, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime'; import { getBackendSrv } from '@grafana/runtime';
import { Button, ButtonGroup, useStyles2 } from '@grafana/ui'; import { Button, useStyles2 } from '@grafana/ui';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
import { MediaType, PickerTabType, ResourceFolderName } from '../types'; import { MediaType, PickerTabType, ResourceFolderName } from '../types';
@ -98,12 +98,11 @@ export const ResourcePickerPopover = (props: Props) => {
</div> </div>
<div className={styles.resourcePickerPopoverContent}> <div className={styles.resourcePickerPopoverContent}>
{renderPicker()} {renderPicker()}
<ButtonGroup className={styles.buttonGroup}> <div className={styles.buttonRow}>
<Button className={styles.button} variant={'secondary'} onClick={() => onClose()} fill="outline"> <Button variant={'secondary'} onClick={() => onClose()} fill="outline">
Cancel Cancel
</Button> </Button>
<Button <Button
className={styles.button}
variant={newValue && newValue !== value ? 'primary' : 'secondary'} variant={newValue && newValue !== value ? 'primary' : 'secondary'}
onClick={() => { onClick={() => {
if (upload) { if (upload) {
@ -133,7 +132,7 @@ export const ResourcePickerPopover = (props: Props) => {
> >
Select Select
</Button> </Button>
</ButtonGroup> </div>
</div> </div>
</div> </div>
</section> </section>
@ -146,7 +145,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.borderRadius()};
box-shadow: ${theme.shadows.z3}; box-shadow: ${theme.shadows.z3};
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.weak};
`, `,
resourcePickerPopoverTab: css` resourcePickerPopoverTab: css`
width: 50%; width: 50%;
@ -185,11 +184,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
width: 100%; width: 100%;
border-radius: ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0; border-radius: ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0;
`, `,
buttonGroup: css` buttonRow: css({
align-self: center; display: 'flex',
flex-direction: row; justifyContent: 'center',
`, gap: theme.spacing(2),
button: css` padding: theme.spacing(1),
margin: 12px 20px 5px; }),
`,
}); });