mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Convert @grafana/ui to use emotion object syntax (#71374)
* convert a bunch of grafana/ui to use emotion's object notation * convert some more grafana-ui emotion styles * more conversion * more conversion * finish conversion * fix unit tests * fix focus styles * remove semicolon from infobox story
This commit is contained in:
Ashley Harrison
GitHub
parent
9852b24d61
commit
626ac67dd7
@ -1,5 +1,6 @@
|
||||
{
|
||||
"rules": {
|
||||
"@emotion/syntax-preference": [2, "object"],
|
||||
"no-restricted-imports": [
|
||||
"error",
|
||||
{
|
||||
|
||||
@ -124,66 +124,66 @@ const getStyles = (
|
||||
const borderColor = tinycolor2(color.border).setAlpha(0.2).toString();
|
||||
|
||||
return {
|
||||
alert: css`
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
border-radius: ${borderRadius};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
background: ${color.transparent};
|
||||
box-shadow: ${elevated ? theme.shadows.z3 : 'none'};
|
||||
padding: ${theme.spacing(1, 2)};
|
||||
border: 1px solid ${borderColor};
|
||||
margin-bottom: ${theme.spacing(bottomSpacing ?? 2)};
|
||||
margin-top: ${theme.spacing(topSpacing ?? 0)};
|
||||
alert: css({
|
||||
flexGrow: 1,
|
||||
position: 'relative',
|
||||
borderRadius,
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'stretch',
|
||||
background: color.transparent,
|
||||
boxShadow: elevated ? theme.shadows.z3 : 'none',
|
||||
padding: theme.spacing(1, 2),
|
||||
border: `1px solid ${borderColor}`,
|
||||
marginBottom: theme.spacing(bottomSpacing ?? 2),
|
||||
marginTop: theme.spacing(topSpacing ?? 0),
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: ${theme.colors.background.primary};
|
||||
z-index: -1;
|
||||
}
|
||||
`,
|
||||
icon: css`
|
||||
padding: ${theme.spacing(1, 2, 0, 0)};
|
||||
color: ${color.text};
|
||||
display: flex;
|
||||
`,
|
||||
'&:before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
background: theme.colors.background.primary,
|
||||
zIndex: -1,
|
||||
},
|
||||
}),
|
||||
icon: css({
|
||||
padding: theme.spacing(1, 2, 0, 0),
|
||||
color: color.text,
|
||||
display: 'flex',
|
||||
}),
|
||||
title: css({
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
}),
|
||||
body: css`
|
||||
padding: ${theme.spacing(1, 0)};
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
`,
|
||||
content: css`
|
||||
padding-top: ${hasTitle ? theme.spacing(0.5) : 0};
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
`,
|
||||
buttonWrapper: css`
|
||||
margin-left: ${theme.spacing(1)};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
`,
|
||||
close: css`
|
||||
position: relative;
|
||||
color: ${theme.colors.text.secondary};
|
||||
background: none;
|
||||
display: flex;
|
||||
top: -6px;
|
||||
right: -14px;
|
||||
`,
|
||||
body: css({
|
||||
padding: theme.spacing(1, 0),
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
overflowWrap: 'break-word',
|
||||
wordBreak: 'break-word',
|
||||
}),
|
||||
content: css({
|
||||
paddingTop: hasTitle ? theme.spacing(0.5) : 0,
|
||||
maxHeight: '50vh',
|
||||
overflowY: 'auto',
|
||||
}),
|
||||
buttonWrapper: css({
|
||||
marginLeft: theme.spacing(1),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
}),
|
||||
close: css({
|
||||
position: 'relative',
|
||||
color: theme.colors.text.secondary,
|
||||
background: 'none',
|
||||
display: 'flex',
|
||||
top: '-6px',
|
||||
right: '-14px',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -55,18 +55,18 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
|
||||
}
|
||||
|
||||
return {
|
||||
wrapper: css`
|
||||
display: inline-flex;
|
||||
padding: 1px 4px;
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
background: ${bgColor};
|
||||
border: 1px solid ${borderColor};
|
||||
color: ${textColor};
|
||||
font-weight: ${theme.typography.fontWeightRegular};
|
||||
gap: 2px;
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
line-height: ${theme.typography.bodySmall.lineHeight};
|
||||
align-items: center;
|
||||
`,
|
||||
wrapper: css({
|
||||
display: 'inline-flex',
|
||||
padding: '1px 4px',
|
||||
borderRadius: theme.shape.radius.default,
|
||||
background: bgColor,
|
||||
border: `1px solid ${borderColor}`,
|
||||
color: textColor,
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
gap: '2px',
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
lineHeight: theme.typography.bodySmall.lineHeight,
|
||||
alignItems: 'center',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -101,57 +101,57 @@ export const Label = forwardRef<HTMLButtonElement, Props>(
|
||||
Label.displayName = 'Label';
|
||||
|
||||
const getLabelStyles = (theme: GrafanaTheme2) => ({
|
||||
base: css`
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-size: ${theme.typography.size.sm};
|
||||
line-height: ${theme.typography.bodySmall.lineHeight};
|
||||
background-color: ${theme.colors.background.secondary};
|
||||
color: ${theme.colors.text.primary};
|
||||
white-space: nowrap;
|
||||
text-shadow: none;
|
||||
padding: ${theme.spacing(0.5)};
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
border: none;
|
||||
margin-right: ${theme.spacing(1)};
|
||||
margin-bottom: ${theme.spacing(0.5)};
|
||||
`,
|
||||
loading: css`
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
background-color: ${theme.colors.primary.shade};
|
||||
color: ${theme.colors.text.primary};
|
||||
animation: pulse 3s ease-out 0s infinite normal forwards;
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
color: ${theme.colors.text.primary};
|
||||
}
|
||||
50% {
|
||||
color: ${theme.colors.text.secondary};
|
||||
}
|
||||
100% {
|
||||
color: ${theme.colors.text.disabled};
|
||||
}
|
||||
}
|
||||
`,
|
||||
active: css`
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
background-color: ${theme.colors.primary.main};
|
||||
color: ${theme.colors.primary.contrastText};
|
||||
`,
|
||||
matchHighLight: css`
|
||||
background: inherit;
|
||||
color: ${theme.components.textHighlight.text};
|
||||
background-color: ${theme.components.textHighlight.background};
|
||||
`,
|
||||
hidden: css`
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
border: 1px solid transparent;
|
||||
`,
|
||||
hover: css`
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
cursor: pointer;
|
||||
}
|
||||
`,
|
||||
base: css({
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
fontSize: theme.typography.size.sm,
|
||||
lineHeight: theme.typography.bodySmall.lineHeight,
|
||||
backgroundColor: theme.colors.background.secondary,
|
||||
color: theme.colors.text.primary,
|
||||
whiteSpace: 'nowrap',
|
||||
textShadow: 'none',
|
||||
padding: theme.spacing(0.5),
|
||||
borderRadius: theme.shape.borderRadius(),
|
||||
border: 'none',
|
||||
marginRight: theme.spacing(1),
|
||||
marginBottom: theme.spacing(0.5),
|
||||
}),
|
||||
loading: css({
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
backgroundColor: theme.colors.primary.shade,
|
||||
color: theme.colors.text.primary,
|
||||
animation: 'pulse 3s ease-out 0s infinite normal forwards',
|
||||
'@keyframes pulse': {
|
||||
'0%': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
'50%': {
|
||||
color: theme.colors.text.secondary,
|
||||
},
|
||||
'100%': {
|
||||
color: theme.colors.text.disabled,
|
||||
},
|
||||
},
|
||||
}),
|
||||
active: css({
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
backgroundColor: theme.colors.primary.main,
|
||||
color: theme.colors.primary.contrastText,
|
||||
}),
|
||||
matchHighLight: css({
|
||||
background: 'inherit',
|
||||
color: theme.components.textHighlight.text,
|
||||
backgroundColor: theme.components.textHighlight.background,
|
||||
}),
|
||||
hidden: css({
|
||||
opacity: 0.6,
|
||||
cursor: 'default',
|
||||
border: '1px solid transparent',
|
||||
}),
|
||||
hover: css({
|
||||
['&:hover']: {
|
||||
opacity: 0.85,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
@ -191,11 +191,11 @@ export const getButtonStyles = (props: StyleProps) => {
|
||||
'&[disabled]': disabledStyles,
|
||||
}),
|
||||
disabled: css(disabledStyles),
|
||||
img: css`
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: ${theme.spacing(0, 1, 0, 0.5)};
|
||||
`,
|
||||
img: css({
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
margin: theme.spacing(0, 1, 0, 0.5),
|
||||
}),
|
||||
icon: iconOnly
|
||||
? css({
|
||||
// Important not to set margin bottom here as it would override internal icon bottom margin
|
||||
@ -334,25 +334,25 @@ export function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVar
|
||||
}
|
||||
|
||||
export const clearButtonStyles = (theme: GrafanaTheme2) => {
|
||||
return css`
|
||||
background: transparent;
|
||||
color: ${theme.colors.text.primary};
|
||||
border: none;
|
||||
padding: 0;
|
||||
`;
|
||||
return css({
|
||||
background: 'transparent',
|
||||
color: theme.colors.text.primary,
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
});
|
||||
};
|
||||
|
||||
export const clearLinkButtonStyles = (theme: GrafanaTheme2) => {
|
||||
return css`
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
height: 100%;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
`;
|
||||
return css({
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
fontFamily: 'inherit',
|
||||
color: 'inherit',
|
||||
height: '100%',
|
||||
'&:hover': {
|
||||
background: 'transparent',
|
||||
color: 'inherit',
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@ -22,20 +22,18 @@ export const ButtonGroup = forwardRef<HTMLDivElement, Props>(({ className, child
|
||||
ButtonGroup.displayName = 'ButtonGroup';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
wrapper: css`
|
||||
display: flex;
|
||||
wrapper: css({
|
||||
display: 'flex',
|
||||
|
||||
> .button-group:not(:first-child) > button,
|
||||
> button:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
'> .button-group:not(:first-child) > button, > button:not(:first-child)': {
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
},
|
||||
|
||||
> .button-group:not(:last-child) > button,
|
||||
> button:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
`,
|
||||
'> .button-group:not(:last-child) > button, > button:not(:last-child)': {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
borderRightWidth: 0,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
@ -14,21 +14,21 @@ export const FullWidthButtonContainer = ({ className, children }: React.PropsWit
|
||||
};
|
||||
|
||||
const getStyles = stylesFactory(() => {
|
||||
return css`
|
||||
display: flex;
|
||||
return css({
|
||||
display: 'flex',
|
||||
|
||||
button {
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
button: {
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
> * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
'> *': {
|
||||
flexGrow: 1,
|
||||
},
|
||||
|
||||
label {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
label: {
|
||||
flexGrow: 1,
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@ -29,17 +29,17 @@ export interface ButtonCascaderProps {
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
popup: css`
|
||||
label: popup;
|
||||
z-index: ${theme.zIndex.dropdown};
|
||||
`,
|
||||
popup: css({
|
||||
label: 'popup',
|
||||
zIndex: theme.zIndex.dropdown,
|
||||
}),
|
||||
icons: {
|
||||
right: css`
|
||||
margin: 1px 0 0 4px;
|
||||
`,
|
||||
left: css`
|
||||
margin: -1px 4px 0 0;
|
||||
`,
|
||||
right: css({
|
||||
margin: '1px 0 0 4px',
|
||||
}),
|
||||
left: css({
|
||||
margin: '-1px 4px 0 0',
|
||||
}),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
@ -25,22 +25,22 @@ export const CallToActionCard = ({ message, callToActionElement, footer, classNa
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
wrapper: css`
|
||||
label: call-to-action-card;
|
||||
padding: ${theme.spacing(3)};
|
||||
background: ${theme.colors.background.secondary};
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
message: css`
|
||||
margin-bottom: ${theme.spacing(3)};
|
||||
font-style: italic;
|
||||
`,
|
||||
footer: css`
|
||||
margin-top: ${theme.spacing(3)}};
|
||||
`,
|
||||
wrapper: css({
|
||||
label: 'call-to-action-card',
|
||||
padding: theme.spacing(3),
|
||||
background: theme.colors.background.secondary,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
message: css({
|
||||
marginBottom: theme.spacing(3),
|
||||
fontStyle: 'italic',
|
||||
}),
|
||||
footer: css({
|
||||
marginTop: theme.spacing(3),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -187,9 +187,9 @@ const Figure = ({ children, align = 'start', className }: ChildProps & { align?:
|
||||
className={cx(
|
||||
styles.media,
|
||||
className,
|
||||
css`
|
||||
align-self: ${align};
|
||||
`
|
||||
css({
|
||||
alignSelf: align,
|
||||
})
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
@ -329,13 +329,13 @@ SecondaryActions.displayName = 'SecondaryActions';
|
||||
*/
|
||||
export const getCardStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
inner: css`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
`,
|
||||
inner: css({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
flexWrap: 'wrap',
|
||||
}),
|
||||
...getHeadingStyles(theme),
|
||||
...getMetaStyles(theme),
|
||||
...getDescriptionStyles(theme),
|
||||
|
||||
@ -63,11 +63,11 @@ export interface CascaderOption {
|
||||
children?: CascaderOption[];
|
||||
}
|
||||
|
||||
const disableDivFocus = css(`
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
`);
|
||||
const disableDivFocus = css({
|
||||
'&:focus': {
|
||||
outline: 'none',
|
||||
},
|
||||
});
|
||||
|
||||
const DEFAULT_SEPARATOR = '/';
|
||||
|
||||
|
||||
@ -8,88 +8,87 @@ import { clearButtonStyles } from '../Button';
|
||||
import { Icon } from '../Icon/Icon';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
collapse: css`
|
||||
label: collapse;
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
background-color: ${theme.colors.background.primary};
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
position: relative;
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 0;
|
||||
`,
|
||||
collapseBody: css`
|
||||
label: collapse__body;
|
||||
padding: ${theme.spacing(theme.components.panel.padding)};
|
||||
padding-top: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
bodyContentWrapper: css`
|
||||
label: bodyContentWrapper;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
`,
|
||||
loader: css`
|
||||
label: collapse__loader;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
margin: ${theme.spacing(0.5)};
|
||||
`,
|
||||
loaderActive: css`
|
||||
label: collapse__loader_active;
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 25%;
|
||||
top: 0;
|
||||
top: -50%;
|
||||
height: 250%;
|
||||
position: absolute;
|
||||
animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms;
|
||||
animation-iteration-count: 100;
|
||||
left: -25%;
|
||||
background: ${theme.colors.primary.main};
|
||||
}
|
||||
@keyframes loader {
|
||||
from {
|
||||
left: -25%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
to {
|
||||
left: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`,
|
||||
header: css`
|
||||
label: collapse__header;
|
||||
padding: ${theme.spacing(1, 2, 1, 2)};
|
||||
display: flex;
|
||||
transition: all 0.1s linear;
|
||||
`,
|
||||
headerCollapsed: css`
|
||||
label: collapse__header--collapsed;
|
||||
padding: ${theme.spacing(1, 2, 1, 2)};
|
||||
`,
|
||||
headerLabel: css`
|
||||
label: collapse__header-label;
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
margin-right: ${theme.spacing(1)};
|
||||
font-size: ${theme.typography.size.md};
|
||||
display: flex;
|
||||
flex: 0 0 100%;
|
||||
`,
|
||||
icon: css`
|
||||
label: collapse__icon;
|
||||
margin: ${theme.spacing(0.25, 1, 0, -1)};
|
||||
`,
|
||||
collapse: css({
|
||||
label: 'collapse',
|
||||
marginBottom: theme.spacing(1),
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
position: 'relative',
|
||||
borderRadius: theme.shape.radius.default,
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: '1 1 0',
|
||||
}),
|
||||
collapseBody: css({
|
||||
label: 'collapse__body',
|
||||
padding: theme.spacing(theme.components.panel.padding),
|
||||
paddingTop: 0,
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}),
|
||||
bodyContentWrapper: css({
|
||||
label: 'bodyContentWrapper',
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
}),
|
||||
loader: css({
|
||||
label: 'collapse__loader',
|
||||
height: '2px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
background: 'none',
|
||||
margin: theme.spacing(0.5),
|
||||
}),
|
||||
loaderActive: css({
|
||||
label: 'collapse__loader_active',
|
||||
'&:after': {
|
||||
content: "' '",
|
||||
display: 'block',
|
||||
width: '25%',
|
||||
top: 0,
|
||||
height: '250%',
|
||||
position: 'absolute',
|
||||
animation: 'loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms',
|
||||
animationIterationCount: 100,
|
||||
left: '-25%',
|
||||
background: theme.colors.primary.main,
|
||||
},
|
||||
'@keyframes loader': {
|
||||
from: {
|
||||
left: '-25%',
|
||||
opacity: 0.1,
|
||||
},
|
||||
to: {
|
||||
left: '100%',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
}),
|
||||
header: css({
|
||||
label: 'collapse__header',
|
||||
padding: theme.spacing(1, 2, 1, 2),
|
||||
display: 'flex',
|
||||
transition: 'all 0.1s linear',
|
||||
}),
|
||||
headerCollapsed: css({
|
||||
label: 'collapse__header--collapsed',
|
||||
padding: theme.spacing(1, 2, 1, 2),
|
||||
}),
|
||||
headerLabel: css({
|
||||
label: 'collapse__header-label',
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
marginRight: theme.spacing(1),
|
||||
fontSize: theme.typography.size.md,
|
||||
display: 'flex',
|
||||
flex: '0 0 100%',
|
||||
}),
|
||||
icon: css({
|
||||
label: 'collapse__icon',
|
||||
margin: theme.spacing(0.25, 1, 0, -1),
|
||||
}),
|
||||
});
|
||||
|
||||
export interface Props {
|
||||
|
||||
@ -92,17 +92,18 @@ const ColorPreview = ({ color, onClick, disabled, ariaLabel }: ColorPreviewProps
|
||||
disabled={disabled || !onClick}
|
||||
className={cx(
|
||||
styles,
|
||||
css`
|
||||
background-color: ${color};
|
||||
`
|
||||
css({
|
||||
backgroundColor: color,
|
||||
})
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const getColorPreviewStyles = (theme: GrafanaTheme2) => css`
|
||||
height: 100%;
|
||||
width: ${theme.spacing.gridSize * 4}px;
|
||||
border-radius: ${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()};
|
||||
border: 1px solid ${theme.colors.border.medium};
|
||||
`;
|
||||
const getColorPreviewStyles = (theme: GrafanaTheme2) =>
|
||||
css({
|
||||
height: '100%',
|
||||
width: `${theme.spacing.gridSize * 4}px`,
|
||||
borderRadius: `${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()}`,
|
||||
border: `1px solid ${theme.colors.border.medium}`,
|
||||
});
|
||||
|
||||
@ -89,29 +89,29 @@ export const SeriesColorPicker = withTheme2(colorPickerFactory(SeriesColorPicker
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
colorPicker: css`
|
||||
position: absolute;
|
||||
z-index: ${theme.zIndex.tooltip};
|
||||
color: ${theme.colors.text.primary};
|
||||
max-width: 400px;
|
||||
font-size: ${theme.typography.size.sm};
|
||||
colorPicker: css({
|
||||
position: 'absolute',
|
||||
zIndex: theme.zIndex.tooltip,
|
||||
color: theme.colors.text.primary,
|
||||
maxWidth: '400px',
|
||||
fontSize: theme.typography.size.sm,
|
||||
// !important because these styles are also provided to popper via .popper classes from Tooltip component
|
||||
// hope to get rid of those soon
|
||||
padding: 15px !important;
|
||||
& [data-placement^='top'] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
& [data-placement^='bottom'] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
& [data-placement^='left'] {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
& [data-placement^='right'] {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
`,
|
||||
padding: '15px !important',
|
||||
'& [data-placement^="top"]': {
|
||||
paddingLeft: '0 !important',
|
||||
paddingRight: '0 !important',
|
||||
},
|
||||
'& [data-placement^="bottom"]': {
|
||||
paddingLeft: '0 !important',
|
||||
paddingRight: '0 !important',
|
||||
},
|
||||
'& [data-placement^="left"]': {
|
||||
paddingTop: '0 !important',
|
||||
},
|
||||
'& [data-placement^="right"]': {
|
||||
paddingTop: '0 !important',
|
||||
},
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -80,19 +80,19 @@ ColorPickerInput.displayName = 'ColorPickerInput';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
position: relative;
|
||||
`,
|
||||
picker: css`
|
||||
&.react-colorful {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 11;
|
||||
bottom: 36px;
|
||||
}
|
||||
`,
|
||||
inner: css`
|
||||
position: absolute;
|
||||
`,
|
||||
wrapper: css({
|
||||
position: 'relative',
|
||||
}),
|
||||
picker: css({
|
||||
'&.react-colorful': {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
zIndex: 11,
|
||||
bottom: '36px',
|
||||
},
|
||||
}),
|
||||
inner: css({
|
||||
position: 'absolute',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -140,50 +140,50 @@ ColorPickerPopover.displayName = 'ColorPickerPopover';
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
colorPickerPopover: css`
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
box-shadow: ${theme.shadows.z3};
|
||||
background: ${theme.colors.background.primary};
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
colorPickerPopover: css({
|
||||
borderRadius: theme.shape.borderRadius(),
|
||||
boxShadow: theme.shadows.z3,
|
||||
background: theme.colors.background.primary,
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
|
||||
.ColorPickerPopover__tab {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
padding: ${theme.spacing(1, 0)};
|
||||
background: ${theme.colors.background.secondary};
|
||||
color: ${theme.colors.text.secondary};
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
'.ColorPickerPopover__tab': {
|
||||
width: '50%',
|
||||
textAlign: 'center',
|
||||
padding: theme.spacing(1, 0),
|
||||
background: theme.colors.background.secondary,
|
||||
color: theme.colors.text.secondary,
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
cursor: 'pointer',
|
||||
border: 'none',
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
'&:focus:not(:focus-visible)': {
|
||||
outline: 'none',
|
||||
boxShadow: 'none',
|
||||
},
|
||||
|
||||
:focus-visible {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
':focus-visible': {
|
||||
position: 'relative',
|
||||
},
|
||||
},
|
||||
|
||||
.ColorPickerPopover__tab--active {
|
||||
color: ${theme.colors.text.primary};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
background: ${theme.colors.background.primary};
|
||||
}
|
||||
`,
|
||||
colorPickerPopoverContent: css`
|
||||
width: 246px;
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
min-height: 184px;
|
||||
padding: ${theme.spacing(1)};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
colorPickerPopoverTabs: css`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0;
|
||||
`,
|
||||
'.ColorPickerPopover__tab--active': {
|
||||
color: theme.colors.text.primary,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
background: theme.colors.background.primary,
|
||||
},
|
||||
}),
|
||||
colorPickerPopoverContent: css({
|
||||
width: '246px',
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
minHeight: '184px',
|
||||
padding: theme.spacing(1),
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}),
|
||||
colorPickerPopoverTabs: css({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
borderRadius: `${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0`,
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -44,27 +44,27 @@ export default NamedColorsGroup;
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
colorRow: css`
|
||||
display: grid;
|
||||
grid-template-columns: 25% 1fr;
|
||||
grid-column-gap: ${theme.spacing(2)};
|
||||
padding: ${theme.spacing(0.5, 0)};
|
||||
colorRow: css({
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '25% 1fr',
|
||||
gridColumnGap: theme.spacing(2),
|
||||
padding: theme.spacing(0.5, 0),
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.background.secondary};
|
||||
}
|
||||
`,
|
||||
colorLabel: css`
|
||||
padding-left: ${theme.spacing(2)};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`,
|
||||
swatchRow: css`
|
||||
display: flex;
|
||||
gap: ${theme.spacing(1)};
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-direction: row;
|
||||
`,
|
||||
'&:hover': {
|
||||
background: theme.colors.background.secondary,
|
||||
},
|
||||
}),
|
||||
colorLabel: css({
|
||||
paddingLeft: theme.spacing(2),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
swatchRow: css({
|
||||
display: 'flex',
|
||||
gap: theme.spacing(1),
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
flexDirection: 'row',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -45,20 +45,20 @@ export const NamedColorsPalette = ({ color, onChange }: NamedColorsPaletteProps)
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
extraColors: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
gap: ${theme.spacing(1)};
|
||||
padding: ${theme.spacing(1, 0)};
|
||||
`,
|
||||
swatches: css`
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
container: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}),
|
||||
extraColors: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
gap: theme.spacing(1),
|
||||
padding: theme.spacing(1, 0),
|
||||
}),
|
||||
swatches: css({
|
||||
display: 'grid',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -47,12 +47,12 @@ export const SeriesColorPickerPopoverWithTheme = withTheme2(SeriesColorPickerPop
|
||||
|
||||
const getStyles = () => {
|
||||
return {
|
||||
colorPickerAxisSwitch: css`
|
||||
width: 100%;
|
||||
`,
|
||||
colorPickerAxisSwitchLabel: css`
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
colorPickerAxisSwitch: css({
|
||||
width: '100%',
|
||||
}),
|
||||
colorPickerAxisSwitchLabel: css({
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -44,35 +44,34 @@ const SpectrumPalette = ({ color, onChange }: SpectrumPaletteProps) => {
|
||||
};
|
||||
|
||||
export const getStyles = (theme: GrafanaTheme2) => ({
|
||||
wrapper: css`
|
||||
flex-grow: 1;
|
||||
`,
|
||||
root: css`
|
||||
&.react-colorful {
|
||||
width: auto;
|
||||
}
|
||||
wrapper: css({
|
||||
flexGrow: 1,
|
||||
}),
|
||||
root: css({
|
||||
'&.react-colorful': {
|
||||
width: 'auto',
|
||||
},
|
||||
|
||||
.react-colorful {
|
||||
&__saturation {
|
||||
border-radius: ${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)} 0 0;
|
||||
}
|
||||
&__alpha {
|
||||
border-radius: 0 0 ${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)};
|
||||
}
|
||||
&__alpha,
|
||||
&__hue {
|
||||
height: ${theme.spacing(2)};
|
||||
position: relative;
|
||||
}
|
||||
&__pointer {
|
||||
height: ${theme.spacing(2)};
|
||||
width: ${theme.spacing(2)};
|
||||
}
|
||||
}
|
||||
`,
|
||||
colorInput: css`
|
||||
margin-top: ${theme.spacing(2)};
|
||||
`,
|
||||
'.react-colorful': {
|
||||
'&__saturation': {
|
||||
borderRadius: `${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)} 0 0`,
|
||||
},
|
||||
'&__alpha': {
|
||||
borderRadius: `0 0 ${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)}`,
|
||||
},
|
||||
'&__alpha, &__hue': {
|
||||
height: theme.spacing(2),
|
||||
position: 'relative',
|
||||
},
|
||||
'&__pointer': {
|
||||
height: theme.spacing(2),
|
||||
width: theme.spacing(2),
|
||||
},
|
||||
},
|
||||
}),
|
||||
colorInput: css({
|
||||
marginTop: theme.spacing(2),
|
||||
}),
|
||||
});
|
||||
|
||||
export default SpectrumPalette;
|
||||
|
||||
@ -146,58 +146,51 @@ export const ConfirmButton = withTheme2(UnThemedConfirmButton);
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
buttonContainer: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
`,
|
||||
buttonDisabled: css`
|
||||
text-decoration: none;
|
||||
color: ${theme.colors.text.primary};
|
||||
opacity: 0.65;
|
||||
pointer-events: none;
|
||||
`,
|
||||
buttonShow: css`
|
||||
opacity: 1;
|
||||
transition: opacity 0.1s ease;
|
||||
z-index: 2;
|
||||
`,
|
||||
buttonHide: css`
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.1s ease,
|
||||
visibility 0 0.1s;
|
||||
visibility: hidden;
|
||||
z-index: 0;
|
||||
`,
|
||||
confirmButton: css`
|
||||
align-items: flex-start;
|
||||
background: ${theme.colors.background.primary};
|
||||
display: flex;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
`,
|
||||
confirmButtonShow: css`
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
transition:
|
||||
opacity 0.08s ease-out,
|
||||
transform 0.1s ease-out;
|
||||
transform: translateX(0);
|
||||
pointer-events: all;
|
||||
`,
|
||||
confirmButtonHide: css`
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition:
|
||||
opacity 0.12s ease-in,
|
||||
transform 0.14s ease-in,
|
||||
visibility 0s 0.12s;
|
||||
transform: translateX(100px);
|
||||
`,
|
||||
disabled: css`
|
||||
cursor: not-allowed;
|
||||
`,
|
||||
buttonContainer: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
}),
|
||||
buttonDisabled: css({
|
||||
textDecoration: 'none',
|
||||
color: theme.colors.text.primary,
|
||||
opacity: 0.65,
|
||||
pointerEvents: 'none',
|
||||
}),
|
||||
buttonShow: css({
|
||||
opacity: 1,
|
||||
transition: 'opacity 0.1s ease',
|
||||
zIndex: 2,
|
||||
}),
|
||||
buttonHide: css({
|
||||
opacity: 0,
|
||||
transition: 'opacity 0.1s ease, visibility 0 0.1s',
|
||||
visibility: 'hidden',
|
||||
zIndex: 0,
|
||||
}),
|
||||
confirmButton: css({
|
||||
alignItems: 'flex-start',
|
||||
background: theme.colors.background.primary,
|
||||
display: 'flex',
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
}),
|
||||
confirmButtonShow: css({
|
||||
zIndex: 1,
|
||||
opacity: 1,
|
||||
transition: 'opacity 0.08s ease-out, transform 0.1s ease-out',
|
||||
transform: 'translateX(0)',
|
||||
pointerEvents: 'all',
|
||||
}),
|
||||
confirmButtonHide: css({
|
||||
opacity: 0,
|
||||
visibility: 'hidden',
|
||||
transition: 'opacity 0.12s ease-in, transform 0.14s ease-in, visibility 0s 0.12s',
|
||||
transform: 'translateX(100px)',
|
||||
}),
|
||||
disabled: css({
|
||||
cursor: 'not-allowed',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -131,9 +131,9 @@ export const ConfirmModal = ({
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
modal: css`
|
||||
width: 500px;
|
||||
`,
|
||||
modal: css({
|
||||
width: '500px',
|
||||
}),
|
||||
modalText: css({
|
||||
fontSize: theme.typography.h5.fontSize,
|
||||
color: theme.colors.text.primary,
|
||||
|
||||
@ -155,57 +155,59 @@ export default CustomScrollbar;
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
customScrollbar: css`
|
||||
customScrollbar: css({
|
||||
// Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
|
||||
// make scroll working it should fit outer container size (scroll appears only when inner container size is
|
||||
// greater than outer one).
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
.scrollbar-view {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
.track-vertical {
|
||||
border-radius: ${theme.shape.borderRadius(2)};
|
||||
width: ${theme.spacing(1)} !important;
|
||||
right: 0px;
|
||||
bottom: ${theme.spacing(0.25)};
|
||||
top: ${theme.spacing(0.25)};
|
||||
}
|
||||
.track-horizontal {
|
||||
border-radius: ${theme.shape.borderRadius(2)};
|
||||
height: ${theme.spacing(1)} !important;
|
||||
right: ${theme.spacing(0.25)};
|
||||
bottom: ${theme.spacing(0.25)};
|
||||
left: ${theme.spacing(0.25)};
|
||||
}
|
||||
.thumb-vertical {
|
||||
background: ${theme.colors.action.focus};
|
||||
border-radius: ${theme.shape.borderRadius(2)};
|
||||
opacity: 0;
|
||||
}
|
||||
.thumb-horizontal {
|
||||
background: ${theme.colors.action.focus};
|
||||
border-radius: ${theme.shape.borderRadius(2)};
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.thumb-vertical,
|
||||
.thumb-horizontal {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
`,
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
'.scrollbar-view': {
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
flexDirection: 'column',
|
||||
},
|
||||
'.track-vertical': {
|
||||
borderRadius: theme.shape.borderRadius(2),
|
||||
width: `${theme.spacing(1)} !important`,
|
||||
right: 0,
|
||||
bottom: theme.spacing(0.25),
|
||||
top: theme.spacing(0.25),
|
||||
},
|
||||
'.track-horizontal': {
|
||||
borderRadius: theme.shape.borderRadius(2),
|
||||
height: `${theme.spacing(1)} !important`,
|
||||
right: theme.spacing(0.25),
|
||||
bottom: theme.spacing(0.25),
|
||||
left: theme.spacing(0.25),
|
||||
},
|
||||
'.thumb-vertical': {
|
||||
background: theme.colors.action.focus,
|
||||
borderRadius: theme.shape.borderRadius(2),
|
||||
opacity: 0,
|
||||
},
|
||||
'.thumb-horizontal': {
|
||||
background: theme.colors.action.focus,
|
||||
borderRadius: theme.shape.borderRadius(2),
|
||||
opacity: 0,
|
||||
},
|
||||
'&:hover': {
|
||||
'.thumb-vertical, .thumb-horizontal': {
|
||||
opacity: 1,
|
||||
transition: 'opacity 0.3s ease-in-out',
|
||||
},
|
||||
},
|
||||
}),
|
||||
// override the scroll container position so that the scroll indicators
|
||||
// are positioned at the top and bottom correctly.
|
||||
// react-custom-scrollbars doesn't provide any way for us to hook in nicely,
|
||||
// so we have to override with !important. feelsbad.
|
||||
scrollbarWithScrollIndicators: css`
|
||||
.scrollbar-view {
|
||||
position: static !important;
|
||||
}
|
||||
`,
|
||||
scrollbarWithScrollIndicators: css({
|
||||
'.scrollbar-view': {
|
||||
// Need type assertion here due to the use of !important
|
||||
// see https://github.com/frenic/csstype/issues/114#issuecomment-697201978
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
position: 'static !important' as 'static',
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`CustomScrollbar renders correctly 1`] = `
|
||||
<div
|
||||
className="css-12b7m5k"
|
||||
className="css-rzpihd"
|
||||
style={
|
||||
{
|
||||
"height": "auto",
|
||||
|
||||
@ -20,14 +20,14 @@ interface DataLinkEditorProps {
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
listItem: css`
|
||||
margin-bottom: ${theme.spacing()};
|
||||
`,
|
||||
infoText: css`
|
||||
padding-bottom: ${theme.spacing(2)};
|
||||
margin-left: 66px;
|
||||
color: ${theme.colors.text.secondary};
|
||||
`,
|
||||
listItem: css({
|
||||
marginBottom: theme.spacing(),
|
||||
}),
|
||||
infoText: css({
|
||||
paddingBottom: theme.spacing(2),
|
||||
marginLeft: '66px',
|
||||
color: theme.colors.text.secondary,
|
||||
}),
|
||||
});
|
||||
|
||||
export const DataLinkEditor = React.memo(({ index, value, onChange, suggestions, isLast }: DataLinkEditorProps) => {
|
||||
|
||||
@ -47,27 +47,27 @@ const plugins = [
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
input: getInputStyles({ theme, invalid: false }).input,
|
||||
editor: css`
|
||||
.token.builtInVariable {
|
||||
color: ${theme.colors.success.text};
|
||||
}
|
||||
.token.variable {
|
||||
color: ${theme.colors.primary.text};
|
||||
}
|
||||
`,
|
||||
suggestionsWrapper: css`
|
||||
box-shadow: ${theme.shadows.z2};
|
||||
`,
|
||||
editor: css({
|
||||
'.token.builtInVariable': {
|
||||
color: theme.colors.success.text,
|
||||
},
|
||||
'.token.variable': {
|
||||
color: theme.colors.primary.text,
|
||||
},
|
||||
}),
|
||||
suggestionsWrapper: css({
|
||||
boxShadow: theme.shadows.z2,
|
||||
}),
|
||||
// Wrapper with child selector needed.
|
||||
// When classnames are applied to the same element as the wrapper, it causes the suggestions to stop working
|
||||
wrapperOverrides: css`
|
||||
width: 100%;
|
||||
> .slate-query-field__wrapper {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
`,
|
||||
wrapperOverrides: css({
|
||||
width: '100%',
|
||||
'> .slate-query-field__wrapper': {
|
||||
padding: 0,
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
// This memoised also because rerendering the slate editor grabs focus which created problem in some cases this
|
||||
@ -238,9 +238,9 @@ export const DataLinkInput = memo(
|
||||
className={cx(
|
||||
styles.editor,
|
||||
styles.input,
|
||||
css`
|
||||
padding: 3px 8px;
|
||||
`
|
||||
css({
|
||||
padding: '3px 8px',
|
||||
})
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -18,38 +18,38 @@ interface DataLinkSuggestionsProps {
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
list: css`
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
`,
|
||||
wrapper: css`
|
||||
background: ${theme.colors.background.primary};
|
||||
width: 250px;
|
||||
`,
|
||||
item: css`
|
||||
background: none;
|
||||
padding: 2px 8px;
|
||||
color: ${theme.colors.text.primary};
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: ${theme.colors.action.hover};
|
||||
}
|
||||
`,
|
||||
label: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
`,
|
||||
activeItem: css`
|
||||
background: ${theme.colors.background.secondary};
|
||||
&:hover {
|
||||
background: ${theme.colors.background.secondary};
|
||||
}
|
||||
`,
|
||||
itemValue: css`
|
||||
font-family: ${theme.typography.fontFamilyMonospace};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
`,
|
||||
list: css({
|
||||
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||
'&:last-child': {
|
||||
border: 'none',
|
||||
},
|
||||
}),
|
||||
wrapper: css({
|
||||
background: theme.colors.background.primary,
|
||||
width: '250px',
|
||||
}),
|
||||
item: css({
|
||||
background: 'none',
|
||||
padding: '2px 8px',
|
||||
color: theme.colors.text.primary,
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
background: theme.colors.action.hover,
|
||||
},
|
||||
}),
|
||||
label: css({
|
||||
color: theme.colors.text.secondary,
|
||||
}),
|
||||
activeItem: css({
|
||||
background: theme.colors.background.secondary,
|
||||
'&:hover': {
|
||||
background: theme.colors.background.secondary,
|
||||
},
|
||||
}),
|
||||
itemValue: css({
|
||||
fontFamily: theme.typography.fontFamilyMonospace,
|
||||
fontSize: theme.typography.size.sm,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -42,9 +42,9 @@ export const DataLinksContextMenu = ({ children, links, style }: DataLinksContex
|
||||
};
|
||||
|
||||
// Use this class name (exposed via render prop) to add context menu indicator to the click target of the visualization
|
||||
const targetClassName = css`
|
||||
cursor: context-menu;
|
||||
`;
|
||||
const targetClassName = css({
|
||||
cursor: 'context-menu',
|
||||
});
|
||||
|
||||
if (linksCounter > 1) {
|
||||
return (
|
||||
|
||||
@ -112,8 +112,8 @@ export const DataLinksInlineEditor = ({ links, onChange, getSuggestions, data }:
|
||||
|
||||
const getDataLinksInlineEditorStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
margin-bottom: ${theme.spacing(2)};
|
||||
`,
|
||||
wrapper: css({
|
||||
marginBottom: theme.spacing(2),
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -54,45 +54,45 @@ export const DataLinksListItem = ({ link, onEdit, onRemove }: DataLinksListItemP
|
||||
|
||||
const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
margin-bottom: ${theme.spacing(2)};
|
||||
width: 100%;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
titleWrapper: css`
|
||||
label: data-links-list-item-title;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
`,
|
||||
actionButtons: css`
|
||||
margin-left: ${theme.spacing(1)};
|
||||
display: flex;
|
||||
`,
|
||||
errored: css`
|
||||
color: ${theme.colors.error.text};
|
||||
font-style: italic;
|
||||
`,
|
||||
notConfigured: css`
|
||||
font-style: italic;
|
||||
`,
|
||||
title: css`
|
||||
color: ${theme.colors.text.primary};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
`,
|
||||
url: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 90%;
|
||||
`,
|
||||
wrapper: css({
|
||||
marginBottom: theme.spacing(2),
|
||||
width: '100%',
|
||||
'&:last-child': {
|
||||
marginBottom: 0,
|
||||
},
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}),
|
||||
titleWrapper: css({
|
||||
label: 'data-links-list-item-title',
|
||||
justifyContent: 'space-between',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
actionButtons: css({
|
||||
marginLeft: theme.spacing(1),
|
||||
display: 'flex',
|
||||
}),
|
||||
errored: css({
|
||||
color: theme.colors.error.text,
|
||||
fontStyle: 'italic',
|
||||
}),
|
||||
notConfigured: css({
|
||||
fontStyle: 'italic',
|
||||
}),
|
||||
title: css({
|
||||
color: theme.colors.text.primary,
|
||||
fontSize: theme.typography.size.sm,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
}),
|
||||
url: css({
|
||||
color: theme.colors.text.secondary,
|
||||
fontSize: theme.typography.size.sm,
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: '90%',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -44,31 +44,31 @@ export function FieldLinkList({ links }: Props) {
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
wrapper: css`
|
||||
flex-basis: 150px;
|
||||
width: 100px;
|
||||
margin-top: ${theme.spacing(1)};
|
||||
`,
|
||||
externalLinksHeading: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
font-weight: ${theme.typography.fontWeightRegular};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
margin: 0;
|
||||
`,
|
||||
externalLink: css`
|
||||
color: ${theme.colors.text.link};
|
||||
font-weight: ${theme.typography.fontWeightRegular};
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
wrapper: css({
|
||||
flexBasis: '150px',
|
||||
width: '100px',
|
||||
marginTop: theme.spacing(1),
|
||||
}),
|
||||
externalLinksHeading: css({
|
||||
color: theme.colors.text.secondary,
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
fontSize: theme.typography.size.sm,
|
||||
margin: 0,
|
||||
}),
|
||||
externalLink: css({
|
||||
color: theme.colors.text.link,
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
display: 'block',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
'&:hover': {
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
|
||||
div {
|
||||
margin-right: ${theme.spacing(1)};
|
||||
}
|
||||
`,
|
||||
div: {
|
||||
marginRight: theme.spacing(1),
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
@ -38,20 +38,19 @@ interface CustomHeaderRowProps {
|
||||
|
||||
const getCustomHeaderRowStyles = stylesFactory(() => {
|
||||
return {
|
||||
layout: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
> * {
|
||||
margin-left: 4px;
|
||||
margin-bottom: 0;
|
||||
height: 100%;
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
`,
|
||||
layout: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: '4px',
|
||||
'> *': {
|
||||
marginLeft: '4px',
|
||||
marginBottom: 0,
|
||||
height: '100%',
|
||||
'&:first-child, &:last-child': {
|
||||
marginLeft: 0,
|
||||
},
|
||||
},
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -128,9 +128,9 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
|
||||
dataSourceConfig.url
|
||||
);
|
||||
|
||||
const notValidStyle = css`
|
||||
box-shadow: inset 0 0px 5px ${theme.v1.palette.red};
|
||||
`;
|
||||
const notValidStyle = css({
|
||||
boxShadow: `inset 0 0px 5px ${theme.v1.palette.red}`,
|
||||
});
|
||||
|
||||
const inputStyle = cx({ [`width-20`]: true, [notValidStyle]: !isValidUrl });
|
||||
|
||||
|
||||
@ -53,9 +53,9 @@ export const TLSAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsBase
|
||||
<div
|
||||
className={cx(
|
||||
'gf-form',
|
||||
css`
|
||||
align-items: baseline;
|
||||
`
|
||||
css({
|
||||
alignItems: 'baseline',
|
||||
})
|
||||
)}
|
||||
>
|
||||
<h6>TLS/SSL Auth Details</h6>
|
||||
|
||||
@ -65,17 +65,17 @@ Body.displayName = 'Body';
|
||||
|
||||
export const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
modal: css`
|
||||
z-index: ${theme.zIndex.modal};
|
||||
position: absolute;
|
||||
box-shadow: ${theme.shadows.z3};
|
||||
background-color: ${theme.colors.background.primary};
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
border-radius: 2px 0 0 2px;
|
||||
modal: css({
|
||||
zIndex: theme.zIndex.modal,
|
||||
position: 'absolute',
|
||||
boxShadow: theme.shadows.z3,
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
borderRadius: '2px 0 0 2px',
|
||||
|
||||
button:disabled {
|
||||
color: ${theme.colors.text.disabled};
|
||||
}
|
||||
`,
|
||||
'button:disabled': {
|
||||
color: theme.colors.text.disabled,
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -74,15 +74,15 @@ export const DatePickerWithInput = ({
|
||||
|
||||
const getStyles = () => {
|
||||
return {
|
||||
container: css`
|
||||
position: relative;
|
||||
`,
|
||||
input: css`
|
||||
/* hides the native Calendar picker icon given when using type=date */
|
||||
input[type='date']::-webkit-inner-spin-button,
|
||||
input[type='date']::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
`,
|
||||
container: css({
|
||||
position: 'relative',
|
||||
}),
|
||||
input: css({
|
||||
/* hides the native Calendar picker icon given when using type=date */
|
||||
"input[type='date']::-webkit-inner-spin-button, input[type='date']::-webkit-calendar-picker-indicator": {
|
||||
display: 'none',
|
||||
WebkitAppearance: 'none',
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -217,9 +217,9 @@ const DateTimeInput = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<InlineField
|
||||
label={label}
|
||||
invalid={!!(internalDate.value && internalDate.invalid)}
|
||||
className={css`
|
||||
margin-bottom: 0;
|
||||
`}
|
||||
className={css({
|
||||
marginBottom: 0,
|
||||
})}
|
||||
>
|
||||
<Input
|
||||
onChange={onChangeDate}
|
||||
@ -325,25 +325,25 @@ const DateTimeCalendar = React.forwardRef<HTMLDivElement, DateTimeCalendarProps>
|
||||
DateTimeCalendar.displayName = 'DateTimeCalendar';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
container: css`
|
||||
padding: ${theme.spacing(1)};
|
||||
border: 1px ${theme.colors.border.weak} solid;
|
||||
border-radius: ${theme.shape.borderRadius(1)};
|
||||
background-color: ${theme.colors.background.primary};
|
||||
z-index: ${theme.zIndex.modal};
|
||||
`,
|
||||
fullScreen: css`
|
||||
position: absolute;
|
||||
`,
|
||||
time: css`
|
||||
margin-bottom: ${theme.spacing(2)};
|
||||
`,
|
||||
modal: css`
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: ${theme.zIndex.modal};
|
||||
max-width: 280px;
|
||||
`,
|
||||
container: css({
|
||||
padding: theme.spacing(1),
|
||||
border: `1px ${theme.colors.border.weak} solid`,
|
||||
borderRadius: theme.shape.borderRadius(1),
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
zIndex: theme.zIndex.modal,
|
||||
}),
|
||||
fullScreen: css({
|
||||
position: 'absolute',
|
||||
}),
|
||||
time: css({
|
||||
marginBottom: theme.spacing(2),
|
||||
}),
|
||||
modal: css({
|
||||
position: 'fixed',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: theme.zIndex.modal,
|
||||
maxWidth: '280px',
|
||||
}),
|
||||
});
|
||||
|
||||
@ -204,15 +204,15 @@ const TooltipContent = () => {
|
||||
};
|
||||
|
||||
const toolTipStyles = (theme: GrafanaTheme2) => ({
|
||||
supported: css`
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
tooltip: css`
|
||||
margin: 0;
|
||||
`,
|
||||
link: css`
|
||||
margin-top: ${theme.spacing(1)};
|
||||
`,
|
||||
supported: css({
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
tooltip: css({
|
||||
margin: 0,
|
||||
}),
|
||||
link: css({
|
||||
marginTop: theme.spacing(1),
|
||||
}),
|
||||
});
|
||||
|
||||
const getStyles = (fromError?: string, toError?: string) => (theme: GrafanaTheme2) => {
|
||||
@ -221,76 +221,76 @@ const getStyles = (fromError?: string, toError?: string) => (theme: GrafanaTheme
|
||||
const bodyHeight = bodyMinimumHeight + calculateErrorHeight(theme, fromError) + calculateErrorHeight(theme, toError);
|
||||
|
||||
return {
|
||||
backdrop: css`
|
||||
position: fixed;
|
||||
z-index: ${theme.zIndex.modalBackdrop};
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
`,
|
||||
container: css`
|
||||
display: flex;
|
||||
position: relative;
|
||||
`,
|
||||
backdrop: css({
|
||||
position: 'fixed',
|
||||
zIndex: theme.zIndex.modalBackdrop,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
}),
|
||||
container: css({
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
}),
|
||||
pickerInput: cx(
|
||||
inputStyles.input,
|
||||
inputStyles.wrapper,
|
||||
css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
line-height: ${theme.spacing.gridSize * theme.components.height.md - 2}px;
|
||||
`
|
||||
css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
cursor: 'pointer',
|
||||
paddingRight: 0,
|
||||
paddingLeft: 0,
|
||||
lineHeight: `${theme.spacing.gridSize * theme.components.height.md - 2}px`,
|
||||
})
|
||||
),
|
||||
caretIcon: cx(
|
||||
inputStyles.suffix,
|
||||
css`
|
||||
position: relative;
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
`
|
||||
css({
|
||||
position: 'relative',
|
||||
marginLeft: theme.spacing(0.5),
|
||||
})
|
||||
),
|
||||
clockIcon: cx(
|
||||
inputStyles.prefix,
|
||||
css`
|
||||
position: relative;
|
||||
margin-right: ${theme.spacing(0.5)};
|
||||
`
|
||||
css({
|
||||
position: 'relative',
|
||||
marginRight: theme.spacing(0.5),
|
||||
})
|
||||
),
|
||||
content: css`
|
||||
background: ${theme.colors.background.primary};
|
||||
box-shadow: ${theme.shadows.z3};
|
||||
position: absolute;
|
||||
z-index: ${theme.zIndex.modal};
|
||||
width: 500px;
|
||||
top: 100%;
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
left: 0;
|
||||
white-space: normal;
|
||||
`,
|
||||
body: css`
|
||||
display: flex;
|
||||
height: ${bodyHeight}px;
|
||||
`,
|
||||
description: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
`,
|
||||
leftSide: css`
|
||||
width: 50% !important;
|
||||
border-right: 1px solid ${theme.colors.border.medium};
|
||||
`,
|
||||
rightSide: css`
|
||||
width: 50%;
|
||||
padding: ${theme.spacing(1)};
|
||||
`,
|
||||
title: css`
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
content: css({
|
||||
background: theme.colors.background.primary,
|
||||
boxShadow: theme.shadows.z3,
|
||||
position: 'absolute',
|
||||
zIndex: theme.zIndex.modal,
|
||||
width: '500px',
|
||||
top: '100%',
|
||||
borderRadius: theme.shape.radius.default,
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
left: 0,
|
||||
whiteSpace: 'normal',
|
||||
}),
|
||||
body: css({
|
||||
display: 'flex',
|
||||
height: `${bodyHeight}px`,
|
||||
}),
|
||||
description: css({
|
||||
color: theme.colors.text.secondary,
|
||||
fontSize: theme.typography.size.sm,
|
||||
}),
|
||||
leftSide: css({
|
||||
width: '50% !important',
|
||||
borderRight: `1px solid ${theme.colors.border.medium}`,
|
||||
}),
|
||||
rightSide: css({
|
||||
width: '50%',
|
||||
padding: theme.spacing(1),
|
||||
}),
|
||||
title: css({
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import React from 'react';
|
||||
import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
import { Icon, useStyles2 } from '../../index';
|
||||
import { focusCss } from '../../themes/mixins';
|
||||
import { getFocusStyles } from '../../themes/mixins';
|
||||
import { inputSizes } from '../Forms/commonStyles';
|
||||
import { FormInputSize } from '../Forms/types';
|
||||
|
||||
@ -77,80 +77,77 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
const borderRadius = theme.shape.borderRadius(1);
|
||||
const borderColor = theme.components.input.borderColor;
|
||||
return {
|
||||
caretWrapper: css`
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
color: ${theme.colors.text.secondary};
|
||||
`,
|
||||
picker: css`
|
||||
.rc-time-picker-panel-select {
|
||||
font-size: 14px;
|
||||
background-color: ${bgColor};
|
||||
border-color: ${borderColor};
|
||||
li {
|
||||
outline-width: 2px;
|
||||
&.rc-time-picker-panel-select-option-selected {
|
||||
background-color: inherit;
|
||||
border: 1px solid ${theme.v1.palette.orange};
|
||||
border-radius: ${borderRadius};
|
||||
}
|
||||
caretWrapper: css({
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
display: 'inline-block',
|
||||
textAlign: 'right',
|
||||
color: theme.colors.text.secondary,
|
||||
}),
|
||||
picker: css({
|
||||
'.rc-time-picker-panel-select': {
|
||||
fontSize: '14px',
|
||||
backgroundColor: bgColor,
|
||||
borderColor,
|
||||
li: {
|
||||
outlineWidth: '2px',
|
||||
'&.rc-time-picker-panel-select-option-selected': {
|
||||
backgroundColor: 'inherit',
|
||||
border: `1px solid ${theme.v1.palette.orange}`,
|
||||
borderRadius,
|
||||
},
|
||||
|
||||
&:hover {
|
||||
background: ${optionBgHover};
|
||||
}
|
||||
'&:hover': {
|
||||
background: optionBgHover,
|
||||
},
|
||||
|
||||
&.rc-time-picker-panel-select-option-disabled {
|
||||
color: ${theme.colors.action.disabledText};
|
||||
}
|
||||
}
|
||||
}
|
||||
'&.rc-time-picker-panel-select-option-disabled': {
|
||||
color: theme.colors.action.disabledText,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
.rc-time-picker-panel-inner {
|
||||
box-shadow: 0px 4px 4px ${menuShadowColor};
|
||||
background-color: ${bgColor};
|
||||
border-color: ${borderColor};
|
||||
border-radius: ${borderRadius};
|
||||
margin-top: 3px;
|
||||
'.rc-time-picker-panel-inner': {
|
||||
boxShadow: `0px 4px 4px ${menuShadowColor}`,
|
||||
backgroundColor: bgColor,
|
||||
borderColor,
|
||||
borderRadius,
|
||||
marginTop: '3px',
|
||||
|
||||
.rc-time-picker-panel-input-wrap {
|
||||
margin-right: 2px;
|
||||
'.rc-time-picker-panel-input-wrap': {
|
||||
marginRight: '2px',
|
||||
|
||||
&,
|
||||
.rc-time-picker-panel-input {
|
||||
background-color: ${bgColor};
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
'&, .rc-time-picker-panel-input': {
|
||||
backgroundColor: bgColor,
|
||||
paddingTop: '2px',
|
||||
},
|
||||
},
|
||||
|
||||
.rc-time-picker-panel-combobox {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
`,
|
||||
input: css`
|
||||
.rc-time-picker-input {
|
||||
background-color: ${bgColor};
|
||||
border-radius: ${borderRadius};
|
||||
border-color: ${borderColor};
|
||||
height: ${theme.spacing(4)};
|
||||
'.rc-time-picker-panel-combobox': {
|
||||
display: 'flex',
|
||||
},
|
||||
},
|
||||
}),
|
||||
input: css({
|
||||
'.rc-time-picker-input': {
|
||||
backgroundColor: bgColor,
|
||||
borderRadius,
|
||||
borderColor,
|
||||
height: theme.spacing(4),
|
||||
|
||||
&:focus {
|
||||
${focusCss(theme)}
|
||||
}
|
||||
'&:focus': getFocusStyles(theme),
|
||||
|
||||
&:disabled {
|
||||
background-color: ${theme.colors.action.disabledBackground};
|
||||
color: ${theme.colors.action.disabledText};
|
||||
border: 1px solid ${theme.colors.action.disabledBackground};
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
'&:disabled': {
|
||||
backgroundColor: theme.colors.action.disabledBackground,
|
||||
color: theme.colors.action.disabledText,
|
||||
border: `1px solid ${theme.colors.action.disabledBackground}`,
|
||||
'&:focus': {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -124,49 +124,49 @@ export const TimeRangeInput = ({
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2, disabled = false) => {
|
||||
const inputStyles = getInputStyles({ theme, invalid: false });
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
position: relative;
|
||||
`,
|
||||
content: css`
|
||||
margin-left: 0;
|
||||
position: absolute;
|
||||
top: 116%;
|
||||
z-index: ${theme.zIndex.dropdown};
|
||||
`,
|
||||
container: css({
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
}),
|
||||
content: css({
|
||||
marginLeft: 0,
|
||||
position: 'absolute',
|
||||
top: '116%',
|
||||
zIndex: theme.zIndex.dropdown,
|
||||
}),
|
||||
pickerInput: cx(
|
||||
inputStyles.input,
|
||||
disabled && inputStyles.inputDisabled,
|
||||
inputStyles.wrapper,
|
||||
css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
padding-right: 0;
|
||||
line-height: ${theme.spacing.gridSize * 4 - 2}px;
|
||||
`
|
||||
css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
cursor: 'pointer',
|
||||
paddingRight: 0,
|
||||
lineHeight: `${theme.spacing.gridSize * 4 - 2}px`,
|
||||
})
|
||||
),
|
||||
caretIcon: cx(
|
||||
inputStyles.suffix,
|
||||
css`
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
`
|
||||
css({
|
||||
position: 'relative',
|
||||
top: '-1px',
|
||||
marginLeft: theme.spacing(0.5),
|
||||
})
|
||||
),
|
||||
clearIcon: css`
|
||||
margin-right: ${theme.spacing(0.5)};
|
||||
&:hover {
|
||||
color: ${theme.colors.text.maxContrast};
|
||||
}
|
||||
`,
|
||||
placeholder: css`
|
||||
color: ${theme.colors.text.disabled};
|
||||
opacity: 1;
|
||||
`,
|
||||
icon: css`
|
||||
margin-right: ${theme.spacing(0.5)};
|
||||
`,
|
||||
clearIcon: css({
|
||||
marginRight: theme.spacing(0.5),
|
||||
'&:hover': {
|
||||
color: theme.colors.text.maxContrast,
|
||||
},
|
||||
}),
|
||||
placeholder: css({
|
||||
color: theme.colors.text.disabled,
|
||||
opacity: 1,
|
||||
}),
|
||||
icon: css({
|
||||
marginRight: theme.spacing(0.5),
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -227,11 +227,11 @@ const formattedRange = (value: TimeRange, timeZone?: TimeZone) => {
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
position: relative;
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
`,
|
||||
container: css({
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
verticalAlign: 'middle',
|
||||
}),
|
||||
backdrop: css({
|
||||
display: 'none',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
@ -257,18 +257,18 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
|
||||
const getLabelStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
`,
|
||||
utc: css`
|
||||
color: ${theme.v1.palette.orange};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
padding-left: 6px;
|
||||
line-height: 28px;
|
||||
vertical-align: bottom;
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
`,
|
||||
container: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
}),
|
||||
utc: css({
|
||||
color: theme.v1.palette.orange,
|
||||
fontSize: theme.typography.size.sm,
|
||||
paddingLeft: '6px',
|
||||
lineHeight: '28px',
|
||||
verticalAlign: 'bottom',
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -71,108 +71,99 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
|
||||
// the class that react-calendar uses is '--hasActive' by itself (without being part of a '--range')
|
||||
const hasActiveSelector = `.react-calendar__tile--hasActive:not(.react-calendar__tile--range)`;
|
||||
return {
|
||||
title: css`
|
||||
color: ${theme.colors.text.primary};
|
||||
background-color: ${theme.colors.background.primary};
|
||||
font-size: ${theme.typography.size.md};
|
||||
border: 1px solid transparent;
|
||||
title: css({
|
||||
color: theme.colors.text.primary,
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
fontSize: theme.typography.size.md,
|
||||
border: '1px solid transparent',
|
||||
|
||||
&:hover {
|
||||
position: relative;
|
||||
}
|
||||
'&:hover': {
|
||||
position: 'relative',
|
||||
},
|
||||
|
||||
&:disabled {
|
||||
color: ${theme.colors.action.disabledText};
|
||||
}
|
||||
`,
|
||||
body: css`
|
||||
z-index: ${theme.zIndex.modal};
|
||||
background-color: ${theme.colors.background.primary};
|
||||
width: 268px;
|
||||
'&:disabled': {
|
||||
color: theme.colors.action.disabledText,
|
||||
},
|
||||
}),
|
||||
body: css({
|
||||
zIndex: theme.zIndex.modal,
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
width: '268px',
|
||||
|
||||
.react-calendar__navigation {
|
||||
display: flex;
|
||||
}
|
||||
'.react-calendar__navigation': {
|
||||
display: 'flex',
|
||||
},
|
||||
|
||||
.react-calendar__navigation__label,
|
||||
.react-calendar__navigation__arrow,
|
||||
.react-calendar__navigation {
|
||||
padding-top: 4px;
|
||||
background-color: inherit;
|
||||
color: ${theme.colors.text.primary};
|
||||
border: 0;
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
}
|
||||
'.react-calendar__navigation__label, .react-calendar__navigation__arrow, .react-calendar__navigation': {
|
||||
paddingTop: '4px',
|
||||
backgroundColor: 'inherit',
|
||||
color: theme.colors.text.primary,
|
||||
border: 0,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
},
|
||||
|
||||
.react-calendar__month-view__weekdays {
|
||||
background-color: inherit;
|
||||
text-align: center;
|
||||
color: ${theme.colors.primary.text};
|
||||
'.react-calendar__month-view__weekdays': {
|
||||
backgroundColor: 'inherit',
|
||||
textAlign: 'center',
|
||||
color: theme.colors.primary.text,
|
||||
|
||||
abbr {
|
||||
border: 0;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 4px 0 4px 0;
|
||||
}
|
||||
}
|
||||
abbr: {
|
||||
border: 0,
|
||||
textDecoration: 'none',
|
||||
cursor: 'default',
|
||||
display: 'block',
|
||||
padding: '4px 0 4px 0',
|
||||
},
|
||||
},
|
||||
|
||||
.react-calendar__month-view__days {
|
||||
background-color: inherit;
|
||||
}
|
||||
'.react-calendar__month-view__days': {
|
||||
backgroundColor: 'inherit',
|
||||
},
|
||||
|
||||
.react-calendar__tile,
|
||||
.react-calendar__tile--now {
|
||||
margin-bottom: 4px;
|
||||
background-color: inherit;
|
||||
height: 26px;
|
||||
}
|
||||
'.react-calendar__tile, .react-calendar__tile--now': {
|
||||
marginBottom: '4px',
|
||||
backgroundColor: 'inherit',
|
||||
height: '26px',
|
||||
},
|
||||
|
||||
.react-calendar__navigation__label,
|
||||
.react-calendar__navigation > button:focus,
|
||||
.time-picker-calendar-tile:focus {
|
||||
outline: 0;
|
||||
}
|
||||
'.react-calendar__navigation__label, .react-calendar__navigation > button:focus, .time-picker-calendar-tile:focus':
|
||||
{
|
||||
outline: 0,
|
||||
},
|
||||
|
||||
${hasActiveSelector},
|
||||
.react-calendar__tile--active,
|
||||
.react-calendar__tile--active:hover {
|
||||
color: ${theme.colors.primary.contrastText};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
background: ${theme.colors.primary.main};
|
||||
box-shadow: none;
|
||||
border: 0px;
|
||||
}
|
||||
[`${hasActiveSelector}, .react-calendar__tile--active, .react-calendar__tile--active:hover`]: {
|
||||
color: theme.colors.primary.contrastText,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
background: theme.colors.primary.main,
|
||||
boxShadow: 'none',
|
||||
border: '0px',
|
||||
},
|
||||
|
||||
.react-calendar__tile--rangeEnd,
|
||||
.react-calendar__tile--rangeStart {
|
||||
padding: 0;
|
||||
border: 0px;
|
||||
color: ${theme.colors.primary.contrastText};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
background: ${theme.colors.primary.main};
|
||||
'.react-calendar__tile--rangeEnd, .react-calendar__tile--rangeStart': {
|
||||
padding: 0,
|
||||
border: '0px',
|
||||
color: theme.colors.primary.contrastText,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
background: theme.colors.primary.main,
|
||||
|
||||
abbr {
|
||||
background-color: ${theme.colors.primary.main};
|
||||
border-radius: 100px;
|
||||
display: block;
|
||||
padding-top: 2px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
abbr: {
|
||||
backgroundColor: theme.colors.primary.main,
|
||||
borderRadius: '100px',
|
||||
display: 'block',
|
||||
paddingTop: '2px',
|
||||
height: '26px',
|
||||
},
|
||||
},
|
||||
|
||||
${hasActiveSelector},
|
||||
.react-calendar__tile--rangeStart {
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
[`${hasActiveSelector}, .react-calendar__tile--rangeStart`]: {
|
||||
borderTopLeftRadius: '20px',
|
||||
borderBottomLeftRadius: '20px',
|
||||
},
|
||||
|
||||
${hasActiveSelector},
|
||||
.react-calendar__tile--rangeEnd {
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
`,
|
||||
[`${hasActiveSelector}, .react-calendar__tile--rangeEnd`]: {
|
||||
borderTopRightRadius: '20px',
|
||||
borderBottomRightRadius: '20px',
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -28,17 +28,17 @@ Footer.displayName = 'Footer';
|
||||
|
||||
const getFooterStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
background-color: ${theme.colors.background.primary};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
align-items: stretch;
|
||||
`,
|
||||
apply: css`
|
||||
margin-right: 4px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
`,
|
||||
container: css({
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '10px',
|
||||
alignItems: 'stretch',
|
||||
}),
|
||||
apply: css({
|
||||
marginRight: '4px',
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -33,12 +33,12 @@ Header.displayName = 'Header';
|
||||
|
||||
const getHeaderStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
background-color: ${theme.colors.background.primary};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 7px;
|
||||
`,
|
||||
container: css({
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '7px',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -16,40 +16,40 @@ import { Header } from './CalendarHeader';
|
||||
|
||||
export const getStyles = (theme: GrafanaTheme2, isReversed = false) => {
|
||||
return {
|
||||
container: css`
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
${isReversed ? 'left' : 'right'}: 544px;
|
||||
box-shadow: ${theme.shadows.z3};
|
||||
background-color: ${theme.colors.background.primary};
|
||||
z-index: -1;
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
border-radius: 2px 0 0 2px;
|
||||
container: css({
|
||||
top: 0,
|
||||
position: 'absolute',
|
||||
[`${isReversed ? 'left' : 'right'}`]: '544px',
|
||||
boxShadow: theme.shadows.z3,
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
zIndex: -1,
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
borderRadius: '2px 0 0 2px',
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
background-color: ${theme.colors.background.primary};
|
||||
width: 19px;
|
||||
height: 100%;
|
||||
content: ${!isReversed ? ' ' : ''};
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -19px;
|
||||
border-left: 1px solid ${theme.colors.border.weak};
|
||||
}
|
||||
`,
|
||||
modal: css`
|
||||
box-shadow: ${theme.shadows.z3};
|
||||
left: 50%;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: ${theme.zIndex.modal};
|
||||
`,
|
||||
content: css`
|
||||
margin: 0 auto;
|
||||
width: 268px;
|
||||
`,
|
||||
'&:after': {
|
||||
display: 'block',
|
||||
backgroundColor: theme.colors.background.primary,
|
||||
width: '19px',
|
||||
height: '100%',
|
||||
content: `${!isReversed ? '" "' : '""'}`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: '-19px',
|
||||
borderLeft: `1px solid ${theme.colors.border.weak}`,
|
||||
},
|
||||
}),
|
||||
modal: css({
|
||||
boxShadow: theme.shadows.z3,
|
||||
left: '50%',
|
||||
position: 'fixed',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: theme.zIndex.modal,
|
||||
}),
|
||||
content: css({
|
||||
margin: '0 auto',
|
||||
width: '268px',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -264,105 +264,102 @@ const useTimeOption = (raw: RawTimeRange, quickOptions: TimeOption[]): TimeOptio
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall, isFullscreen) => {
|
||||
return {
|
||||
container: css`
|
||||
background: ${theme.colors.background.primary};
|
||||
box-shadow: ${theme.shadows.z3};
|
||||
width: ${isFullscreen ? '546px' : '262px'};
|
||||
border-radius: 2px;
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
${isReversed ? 'left' : 'right'}: 0;
|
||||
`,
|
||||
body: css`
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
height: ${isContainerTall ? '381px' : '217px'};
|
||||
max-height: 100vh;
|
||||
`,
|
||||
leftSide: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`};
|
||||
width: ${!hideQuickRanges ? '60%' : '100%'};
|
||||
overflow: hidden;
|
||||
order: ${isReversed ? 1 : 0};
|
||||
`,
|
||||
rightSide: css`
|
||||
width: ${isFullscreen ? '40%' : '100%'}; !important;
|
||||
border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
timeRangeFilter: css`
|
||||
padding: ${theme.spacing(1)};
|
||||
`,
|
||||
spacing: css`
|
||||
margin-top: 16px;
|
||||
`,
|
||||
container: css({
|
||||
background: theme.colors.background.primary,
|
||||
boxShadow: theme.shadows.z3,
|
||||
width: `${isFullscreen ? '546px' : '262px'}`,
|
||||
borderRadius: '2px',
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
[`${isReversed ? 'left' : 'right'}`]: 0,
|
||||
}),
|
||||
body: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row-reverse',
|
||||
height: `${isContainerTall ? '381px' : '217px'}`,
|
||||
maxHeight: '100vh',
|
||||
}),
|
||||
leftSide: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
borderRight: `${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`}`,
|
||||
width: `${!hideQuickRanges ? '60%' : '100%'}`,
|
||||
overflow: 'hidden',
|
||||
order: isReversed ? 1 : 0,
|
||||
}),
|
||||
rightSide: css({
|
||||
width: `${isFullscreen ? '40%' : '100%'}; !important`,
|
||||
borderRight: isReversed ? `1px solid ${theme.colors.border.weak}` : 'none',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}),
|
||||
timeRangeFilter: css({
|
||||
padding: theme.spacing(1),
|
||||
}),
|
||||
spacing: css({
|
||||
marginTop: '16px',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const getNarrowScreenStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
header: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
padding: 7px 9px 7px 9px;
|
||||
`,
|
||||
expandButton: css`
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
header: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||
padding: '7px 9px 7px 9px',
|
||||
}),
|
||||
expandButton: css({
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
|
||||
&:focus-visible {
|
||||
${getFocusStyles(theme)}
|
||||
}
|
||||
`,
|
||||
body: css`
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
`,
|
||||
form: css`
|
||||
padding: 7px 9px 7px 9px;
|
||||
`,
|
||||
'&:focus-visible': getFocusStyles(theme),
|
||||
}),
|
||||
body: css({
|
||||
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||
}),
|
||||
form: css({
|
||||
padding: '7px 9px 7px 9px',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const getFullScreenStyles = stylesFactory((theme: GrafanaTheme2, hideQuickRanges?: boolean) => {
|
||||
return {
|
||||
container: css`
|
||||
padding-top: 9px;
|
||||
padding-left: 11px;
|
||||
padding-right: ${!hideQuickRanges ? '20%' : '11px'};
|
||||
`,
|
||||
title: css`
|
||||
margin-bottom: 11px;
|
||||
`,
|
||||
recent: css`
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding-top: ${theme.spacing(1)};
|
||||
`,
|
||||
container: css({
|
||||
paddingTop: '9px',
|
||||
paddingLeft: '11px',
|
||||
paddingRight: !hideQuickRanges ? '20%' : '11px',
|
||||
}),
|
||||
title: css({
|
||||
marginBottom: '11px',
|
||||
}),
|
||||
recent: css({
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
paddingTop: theme.spacing(1),
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const getEmptyListStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
padding: 12px;
|
||||
margin: 12px;
|
||||
container: css({
|
||||
padding: '12px',
|
||||
margin: '12px',
|
||||
|
||||
a,
|
||||
span {
|
||||
font-size: 13px;
|
||||
}\
|
||||
`,
|
||||
link: css`
|
||||
color: ${theme.colors.text.link};
|
||||
`,
|
||||
'a, span': {
|
||||
fontSize: '13px',
|
||||
},
|
||||
}),
|
||||
link: css({
|
||||
color: theme.colors.text.link,
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -136,42 +136,41 @@ export const TimePickerFooter = (props: Props) => {
|
||||
|
||||
const getStyle = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
border-top: 1px solid ${theme.colors.border.weak};
|
||||
padding: 11px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`,
|
||||
editContainer: css`
|
||||
border-top: 1px solid ${theme.colors.border.weak};
|
||||
padding: 11px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
`,
|
||||
spacer: css`
|
||||
margin-left: 7px;
|
||||
`,
|
||||
timeSettingContainer: css`
|
||||
padding-top: ${theme.spacing(1)};
|
||||
`,
|
||||
fiscalYearField: css`
|
||||
margin-bottom: 0px;
|
||||
`,
|
||||
timeZoneContainer: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
timeZone: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
container: css({
|
||||
borderTop: `1px solid ${theme.colors.border.weak}`,
|
||||
padding: '11px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
editContainer: css({
|
||||
borderTop: `1px solid ${theme.colors.border.weak}`,
|
||||
padding: '11px',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
spacer: css({
|
||||
marginLeft: '7px',
|
||||
}),
|
||||
timeSettingContainer: css({
|
||||
paddingTop: theme.spacing(1),
|
||||
}),
|
||||
fiscalYearField: css({
|
||||
marginBottom: 0,
|
||||
}),
|
||||
timeZoneContainer: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
timeZone: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -7,13 +7,13 @@ import { useStyles2 } from '../../../themes';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
text: css`
|
||||
font-size: ${theme.typography.size.md};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
color: ${theme.colors.text.primary};
|
||||
margin: 0;
|
||||
display: flex;
|
||||
`,
|
||||
text: css({
|
||||
fontSize: theme.typography.size.md,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
color: theme.colors.text.primary,
|
||||
margin: 0,
|
||||
display: 'flex',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -223,12 +223,12 @@ function isValid(value: string, roundUp?: boolean, timeZone?: TimeZone): boolean
|
||||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
fieldContainer: css`
|
||||
display: flex;
|
||||
`,
|
||||
tooltip: css`
|
||||
padding-left: ${theme.spacing(1)};
|
||||
padding-top: ${theme.spacing(3)};
|
||||
`,
|
||||
fieldContainer: css({
|
||||
display: 'flex',
|
||||
}),
|
||||
tooltip: css({
|
||||
paddingLeft: theme.spacing(1),
|
||||
paddingTop: theme.spacing(3),
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
@ -11,21 +11,21 @@ import { TimeRangeOption } from './TimeRangeOption';
|
||||
|
||||
const getStyles = stylesFactory(() => {
|
||||
return {
|
||||
title: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px 5px 9px;
|
||||
`,
|
||||
title: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '8px 16px 5px 9px',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
const getOptionsStyles = stylesFactory(() => {
|
||||
return {
|
||||
grow: css`
|
||||
flex-grow: 1;
|
||||
align-items: flex-start;
|
||||
`,
|
||||
grow: css({
|
||||
flexGrow: 1,
|
||||
alignItems: 'flex-start',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -9,34 +9,32 @@ import { getFocusStyles } from '../../../themes/mixins';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
`,
|
||||
selected: css`
|
||||
background: ${theme.colors.action.selected};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
`,
|
||||
radio: css`
|
||||
opacity: 0;
|
||||
width: 0 !important;
|
||||
container: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row-reverse',
|
||||
justifyContent: 'space-between',
|
||||
}),
|
||||
selected: css({
|
||||
background: theme.colors.action.selected,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
}),
|
||||
radio: css({
|
||||
opacity: 0,
|
||||
width: '0 !important',
|
||||
|
||||
&:focus-visible + label {
|
||||
${getFocusStyles(theme)};
|
||||
}
|
||||
`,
|
||||
label: css`
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
padding: 7px 9px 7px 9px;
|
||||
'&:focus-visible + label': getFocusStyles(theme),
|
||||
}),
|
||||
label: css({
|
||||
cursor: 'pointer',
|
||||
flex: 1,
|
||||
padding: '7px 9px 7px 9px',
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.action.hover};
|
||||
cursor: pointer;
|
||||
}
|
||||
`,
|
||||
'&:hover': {
|
||||
background: theme.colors.action.hover,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -43,12 +43,12 @@ const useDescription = (info?: TimeZoneInfo): string => {
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
description: css`
|
||||
font-weight: normal;
|
||||
font-size: ${theme.typography.size.sm};
|
||||
color: ${theme.colors.text.secondary};
|
||||
white-space: normal;
|
||||
text-overflow: ellipsis;
|
||||
`,
|
||||
description: css({
|
||||
fontWeight: 'normal',
|
||||
fontSize: theme.typography.size.sm,
|
||||
color: theme.colors.text.secondary,
|
||||
whiteSpace: 'normal',
|
||||
textOverflow: 'ellipsis',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -30,16 +30,16 @@ export const TimeZoneGroup = (props: Props) => {
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
header: css`
|
||||
padding: 7px 10px;
|
||||
width: 100%;
|
||||
border-top: 1px solid ${theme.colors.border.weak};
|
||||
text-transform: capitalize;
|
||||
`,
|
||||
label: css`
|
||||
font-size: ${theme.typography.size.sm};
|
||||
color: ${theme.colors.text.secondary};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
`,
|
||||
header: css({
|
||||
padding: '7px 10px',
|
||||
width: '100%',
|
||||
borderTop: `1px solid ${theme.colors.border.weak}`,
|
||||
textTransform: 'capitalize',
|
||||
}),
|
||||
label: css({
|
||||
fontSize: theme.typography.size.sm,
|
||||
color: theme.colors.text.secondary,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -40,21 +40,20 @@ export const formatUtcOffset = (timestamp: number, timeZone: TimeZone): string =
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
const textBase = css`
|
||||
font-weight: normal;
|
||||
font-size: ${theme.typography.size.sm};
|
||||
color: ${theme.colors.text.secondary};
|
||||
white-space: normal;
|
||||
`;
|
||||
const textBase = css({
|
||||
fontWeight: 'normal',
|
||||
fontSize: theme.typography.size.sm,
|
||||
color: theme.colors.text.secondary,
|
||||
whiteSpace: 'normal',
|
||||
});
|
||||
|
||||
return {
|
||||
offset: css`
|
||||
${textBase};
|
||||
color: ${theme.colors.text.primary};
|
||||
background: ${theme.colors.background.secondary};
|
||||
padding: 2px 5px;
|
||||
border-radius: 2px;
|
||||
margin-left: 4px;
|
||||
`,
|
||||
offset: css(textBase, {
|
||||
color: theme.colors.text.primary,
|
||||
background: theme.colors.background.secondary,
|
||||
padding: '2px 5px',
|
||||
borderRadius: '2px',
|
||||
marginLeft: '4px',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -115,47 +115,47 @@ export const CompactTimeZoneOption = (props: React.PropsWithChildren<Props>) =>
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
padding: 6px 8px 4px;
|
||||
container: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
cursor: 'pointer',
|
||||
padding: '6px 8px 4px',
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.action.hover};
|
||||
}
|
||||
`,
|
||||
containerFocused: css`
|
||||
background: ${theme.colors.action.hover};
|
||||
`,
|
||||
body: css`
|
||||
display: flex;
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
row: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`,
|
||||
leftColumn: css`
|
||||
flex-grow: 1;
|
||||
text-overflow: ellipsis;
|
||||
`,
|
||||
rightColumn: css`
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
`,
|
||||
wideRow: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
`,
|
||||
spacer: css`
|
||||
margin-left: 6px;
|
||||
`,
|
||||
'&:hover': {
|
||||
background: theme.colors.action.hover,
|
||||
},
|
||||
}),
|
||||
containerFocused: css({
|
||||
background: theme.colors.action.hover,
|
||||
}),
|
||||
body: css({
|
||||
display: 'flex',
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
row: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
}),
|
||||
leftColumn: css({
|
||||
flexGrow: 1,
|
||||
textOverflow: 'ellipsis',
|
||||
}),
|
||||
rightColumn: css({
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
wideRow: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
}),
|
||||
spacer: css({
|
||||
marginLeft: '6px',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -21,9 +21,9 @@ export const TimeZoneTitle = ({ title }: Props) => {
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
title: css`
|
||||
font-weight: ${theme.typography.fontWeightRegular};
|
||||
text-overflow: ellipsis;
|
||||
`,
|
||||
title: css({
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
textOverflow: 'ellipsis',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -24,15 +24,15 @@ Divider.displayName = 'Divider';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
horizontalDivider: css`
|
||||
border-top: 1px solid ${theme.colors.border.weak};
|
||||
margin: ${theme.spacing(2, 0)};
|
||||
width: 100%;
|
||||
`,
|
||||
verticalDivider: css`
|
||||
border-right: 1px solid ${theme.colors.border.weak};
|
||||
margin: ${theme.spacing(0, 0.5)};
|
||||
height: 100%;
|
||||
`,
|
||||
horizontalDivider: css({
|
||||
borderTop: `1px solid ${theme.colors.border.weak}`,
|
||||
margin: theme.spacing(2, 0),
|
||||
width: '100%',
|
||||
}),
|
||||
verticalDivider: css({
|
||||
borderRight: `1px solid ${theme.colors.border.weak}`,
|
||||
margin: theme.spacing(0, 0.5),
|
||||
height: '100%',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -161,30 +161,30 @@ function useBodyClassWhileOpen() {
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex: 1 1 0;
|
||||
`,
|
||||
drawer: css`
|
||||
.main-view & {
|
||||
top: 81px;
|
||||
}
|
||||
container: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
flex: '1 1 0',
|
||||
}),
|
||||
drawer: css({
|
||||
'.main-view &': {
|
||||
top: '81px',
|
||||
},
|
||||
|
||||
.main-view--search-bar-hidden & {
|
||||
top: 41px;
|
||||
}
|
||||
'.main-view--search-bar-hidden &': {
|
||||
top: '41px',
|
||||
},
|
||||
|
||||
.rc-drawer-content-wrapper {
|
||||
box-shadow: ${theme.shadows.z3};
|
||||
'.rc-drawer-content-wrapper': {
|
||||
boxShadow: theme.shadows.z3,
|
||||
|
||||
${theme.breakpoints.down('sm')} {
|
||||
width: calc(100% - ${theme.spacing(2)}) !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
}
|
||||
`,
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: `calc(100% - ${theme.spacing(2)}) !important`,
|
||||
minWidth: '0 !important',
|
||||
},
|
||||
},
|
||||
}),
|
||||
sizes: {
|
||||
sm: css({
|
||||
'.rc-drawer-content-wrapper': {
|
||||
@ -213,38 +213,38 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
},
|
||||
}),
|
||||
},
|
||||
drawerContent: css`
|
||||
background-color: ${theme.colors.background.primary} !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
z-index: ${theme.zIndex.dropdown};
|
||||
`,
|
||||
drawerMotion: css`
|
||||
&-appear {
|
||||
transform: translateX(100%);
|
||||
transition: none !important;
|
||||
drawerContent: css({
|
||||
backgroundColor: `${theme.colors.background.primary} !important`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
zIndex: theme.zIndex.dropdown,
|
||||
}),
|
||||
drawerMotion: css({
|
||||
'&-appear': {
|
||||
transform: 'translateX(100%)',
|
||||
transition: 'none !important',
|
||||
|
||||
&-active {
|
||||
transition: ${theme.transitions.create('transform')} !important;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
`,
|
||||
mask: css`
|
||||
background-color: ${theme.components.overlay.background} !important;
|
||||
backdrop-filter: blur(1px);
|
||||
`,
|
||||
maskMotion: css`
|
||||
&-appear {
|
||||
opacity: 0;
|
||||
'&-active': {
|
||||
transition: `${theme.transitions.create('transform')} !important`,
|
||||
transform: 'translateX(0)',
|
||||
},
|
||||
},
|
||||
}),
|
||||
mask: css({
|
||||
backgroundColor: `${theme.components.overlay.background} !important`,
|
||||
backdropFilter: 'blur(1px)',
|
||||
}),
|
||||
maskMotion: css({
|
||||
'&-appear': {
|
||||
opacity: 0,
|
||||
|
||||
&-active {
|
||||
opacity: 1;
|
||||
transition: ${theme.transitions.create('opacity')};
|
||||
}
|
||||
}
|
||||
`,
|
||||
'&-active': {
|
||||
opacity: 1,
|
||||
transition: theme.transitions.create('opacity'),
|
||||
},
|
||||
},
|
||||
}),
|
||||
header: css({
|
||||
flexGrow: 0,
|
||||
padding: theme.spacing(3, 2),
|
||||
@ -258,9 +258,9 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
right: theme.spacing(1),
|
||||
top: theme.spacing(2),
|
||||
}),
|
||||
titleWrapper: css`
|
||||
overflow-wrap: break-word;
|
||||
`,
|
||||
titleWrapper: css({
|
||||
overflowWrap: 'break-word',
|
||||
}),
|
||||
subtitle: css({
|
||||
color: theme.colors.text.secondary,
|
||||
paddingTop: theme.spacing(1),
|
||||
|
||||
@ -91,15 +91,15 @@ export const ButtonSelect = React.memo(ButtonSelectComponent) as typeof ButtonSe
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
`,
|
||||
menuWrapper: css`
|
||||
position: absolute;
|
||||
z-index: ${theme.zIndex.dropdown};
|
||||
top: ${theme.spacing(4)};
|
||||
right: 0;
|
||||
`,
|
||||
wrapper: css({
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
}),
|
||||
menuWrapper: css({
|
||||
position: 'absolute',
|
||||
zIndex: theme.zIndex.dropdown,
|
||||
top: theme.spacing(4),
|
||||
right: 0,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -16,14 +16,14 @@ const EmptySearchResult = ({ children }: Props) => {
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
border-left: 3px solid ${theme.colors.info.main};
|
||||
background-color: ${theme.colors.background.secondary};
|
||||
padding: ${theme.spacing(2)};
|
||||
min-width: 350px;
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
margin-bottom: ${theme.spacing(4)};
|
||||
`,
|
||||
container: css({
|
||||
borderLeft: `3px solid ${theme.colors.info.main}`,
|
||||
backgroundColor: `${theme.colors.background.secondary}`,
|
||||
padding: theme.spacing(2),
|
||||
minWidth: '350px',
|
||||
borderRadius: theme.shape.radius.default,
|
||||
marginBottom: theme.spacing(4),
|
||||
}),
|
||||
};
|
||||
};
|
||||
export { EmptySearchResult };
|
||||
|
||||
@ -6,10 +6,10 @@ import { stylesFactory } from '../../themes';
|
||||
import { ErrorBoundaryApi } from './ErrorBoundary';
|
||||
|
||||
const getStyles = stylesFactory(() => {
|
||||
return css`
|
||||
width: 500px;
|
||||
margin: 64px auto;
|
||||
`;
|
||||
return css({
|
||||
width: '500px',
|
||||
margin: '64px auto',
|
||||
});
|
||||
});
|
||||
|
||||
export interface Props extends ErrorBoundaryApi {
|
||||
|
||||
@ -298,43 +298,43 @@ function mapToCustomFile(file: File): DropzoneFile {
|
||||
|
||||
function getStyles(theme: GrafanaTheme2, isDragActive?: boolean) {
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: ${theme.spacing(2)};
|
||||
border-radius: 2px;
|
||||
border: 1px dashed ${theme.colors.border.strong};
|
||||
background-color: ${isDragActive ? theme.colors.background.secondary : theme.colors.background.primary};
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`,
|
||||
dropzone: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
defaultDropZone: css`
|
||||
text-align: center;
|
||||
`,
|
||||
icon: css`
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
primaryText: css`
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
acceptContainer: css`
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
`,
|
||||
acceptSeparator: css`
|
||||
margin: 0 ${theme.spacing(1)};
|
||||
`,
|
||||
small: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
`,
|
||||
errorAlert: css`
|
||||
padding-top: 10px;
|
||||
`,
|
||||
container: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
padding: theme.spacing(2),
|
||||
borderRadius: '2px',
|
||||
border: `1px dashed ${theme.colors.border.strong}`,
|
||||
backgroundColor: isDragActive ? theme.colors.background.secondary : theme.colors.background.primary,
|
||||
cursor: 'pointer',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}),
|
||||
dropzone: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}),
|
||||
defaultDropZone: css({
|
||||
textAlign: 'center',
|
||||
}),
|
||||
icon: css({
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
primaryText: css({
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
acceptContainer: css({
|
||||
textAlign: 'center',
|
||||
margin: 0,
|
||||
}),
|
||||
acceptSeparator: css({
|
||||
margin: `0 ${theme.spacing(1)}`,
|
||||
}),
|
||||
small: css({
|
||||
color: theme.colors.text.secondary,
|
||||
}),
|
||||
errorAlert: css({
|
||||
paddingTop: '10px',
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
@ -81,46 +81,46 @@ export function FileListItem({ file: customFile, removeFile }: FileListItemProps
|
||||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
fileListContainer: css`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: ${theme.spacing(2)};
|
||||
border: 1px dashed ${theme.colors.border.medium};
|
||||
background-color: ${theme.colors.background.secondary};
|
||||
margin-top: ${theme.spacing(1)};
|
||||
`,
|
||||
fileNameWrapper: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
`,
|
||||
padding: css`
|
||||
padding: ${theme.spacing(0, 1)};
|
||||
`,
|
||||
paddingLeft: css`
|
||||
padding-left: ${theme.spacing(2)};
|
||||
`,
|
||||
marginLeft: css`
|
||||
margin-left: ${theme.spacing(1)};
|
||||
`,
|
||||
error: css`
|
||||
padding-right: ${theme.spacing(2)};
|
||||
color: ${theme.colors.error.text};
|
||||
`,
|
||||
progressBar: css`
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
height: 4px;
|
||||
::-webkit-progress-bar {
|
||||
background-color: ${theme.colors.border.weak};
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
}
|
||||
::-webkit-progress-value {
|
||||
background-color: ${theme.colors.primary.main};
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
}
|
||||
`,
|
||||
fileListContainer: css({
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: theme.spacing(2),
|
||||
border: `1px dashed ${theme.colors.border.medium}`,
|
||||
backgroundColor: `${theme.colors.background.secondary}`,
|
||||
marginTop: theme.spacing(1),
|
||||
}),
|
||||
fileNameWrapper: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
padding: css({
|
||||
padding: theme.spacing(0, 1),
|
||||
}),
|
||||
paddingLeft: css({
|
||||
paddingLeft: theme.spacing(2),
|
||||
}),
|
||||
marginLeft: css({
|
||||
marginLeft: theme.spacing(1),
|
||||
}),
|
||||
error: css({
|
||||
paddingRight: theme.spacing(2),
|
||||
color: theme.colors.error.text,
|
||||
}),
|
||||
progressBar: css({
|
||||
borderRadius: theme.shape.radius.default,
|
||||
height: '4px',
|
||||
'::-webkit-progress-bar': {
|
||||
backgroundColor: theme.colors.border.weak,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
},
|
||||
'::-webkit-progress-value': {
|
||||
backgroundColor: theme.colors.primary.main,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
},
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
@ -28,36 +28,36 @@ export const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterP
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
background: ${theme.colors.background.secondary};
|
||||
border-radius: ${theme.shape.borderRadius(8)};
|
||||
padding: ${theme.spacing(0, 2)};
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
line-height: ${theme.typography.bodySmall.lineHeight};
|
||||
color: ${theme.colors.text.secondary};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
border: 1px solid ${theme.colors.background.secondary};
|
||||
white-space: nowrap;
|
||||
wrapper: css({
|
||||
background: theme.colors.background.secondary,
|
||||
borderRadius: theme.shape.borderRadius(8),
|
||||
padding: theme.spacing(0, 2),
|
||||
fontSize: theme.typography.bodySmall.fontSize,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
lineHeight: theme.typography.bodySmall.lineHeight,
|
||||
color: theme.colors.text.secondary,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: '32px',
|
||||
position: 'relative',
|
||||
border: `1px solid ${theme.colors.background.secondary}`,
|
||||
whiteSpace: 'nowrap',
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.action.hover};
|
||||
color: ${theme.colors.text.primary};
|
||||
}
|
||||
`,
|
||||
selected: css`
|
||||
color: ${theme.colors.text.primary};
|
||||
border: 1px solid #ff780a;
|
||||
'&:hover': {
|
||||
background: theme.colors.action.hover,
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
}),
|
||||
selected: css({
|
||||
color: theme.colors.text.primary,
|
||||
background: theme.colors.action.selected,
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.action.focus};
|
||||
}
|
||||
`,
|
||||
icon: css`
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
`,
|
||||
'&:hover': {
|
||||
background: theme.colors.action.focus,
|
||||
},
|
||||
}),
|
||||
icon: css({
|
||||
marginLeft: theme.spacing(0.5),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -57,12 +57,12 @@ FormField.defaultProps = defaultProps;
|
||||
|
||||
const getStyles = () => {
|
||||
return {
|
||||
formField: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
`,
|
||||
formField: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
textAlign: 'left',
|
||||
position: 'relative',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -83,141 +83,136 @@ export const getCheckboxStyles = (theme: GrafanaTheme2, invalid = false) => {
|
||||
position: 'relative',
|
||||
verticalAlign: 'middle',
|
||||
}),
|
||||
input: css`
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100% !important; // global styles unset this
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
input: css({
|
||||
position: 'absolute',
|
||||
zIndex: 1,
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100% !important', // global styles unset this
|
||||
height: '100%',
|
||||
opacity: 0,
|
||||
|
||||
&:focus + span,
|
||||
&:focus-visible + span {
|
||||
${getFocusStyles(theme)}
|
||||
}
|
||||
'&:focus + span, &:focus-visible + span': getFocusStyles(theme),
|
||||
|
||||
&:focus:not(:focus-visible) + span {
|
||||
${getMouseFocusStyles(theme)}
|
||||
}
|
||||
'&:focus:not(:focus-visible) + span': getMouseFocusStyles(theme),
|
||||
|
||||
/**
|
||||
* Using adjacent sibling selector to style checked state.
|
||||
* Primarily to limit the classes necessary to use when these classes will be used
|
||||
* for angular components styling
|
||||
* */
|
||||
&:checked + span {
|
||||
background: ${theme.colors.primary.main};
|
||||
border: 1px solid ${getBorderColor(theme.colors.primary.main)};
|
||||
'&:checked + span': {
|
||||
background: theme.colors.primary.main,
|
||||
border: `1px solid ${getBorderColor(theme.colors.primary.main)}`,
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.primary.shade};
|
||||
}
|
||||
'&:hover': {
|
||||
background: theme.colors.primary.shade,
|
||||
},
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 4px;
|
||||
top: 0px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
border: solid ${theme.colors.primary.contrastText};
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
'&:after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
left: '4px',
|
||||
top: 0,
|
||||
width: '6px',
|
||||
height: '12px',
|
||||
border: `solid ${theme.colors.primary.contrastText}`,
|
||||
borderWidth: '0 3px 3px 0',
|
||||
transform: 'rotate(45deg)',
|
||||
},
|
||||
},
|
||||
|
||||
&:disabled + span {
|
||||
background-color: ${theme.colors.action.disabledBackground};
|
||||
cursor: not-allowed;
|
||||
border: 1px solid ${getBorderColor(theme.colors.action.disabledBackground)};
|
||||
'&:disabled + span': {
|
||||
backgroundColor: theme.colors.action.disabledBackground,
|
||||
cursor: 'not-allowed',
|
||||
border: `1px solid ${getBorderColor(theme.colors.action.disabledBackground)}`,
|
||||
|
||||
&:hover {
|
||||
background-color: ${theme.colors.action.disabledBackground};
|
||||
}
|
||||
'&:hover': {
|
||||
backgroundColor: theme.colors.action.disabledBackground,
|
||||
},
|
||||
|
||||
&:after {
|
||||
border-color: ${theme.colors.action.disabledText};
|
||||
}
|
||||
}
|
||||
`,
|
||||
'&:after': {
|
||||
borderColor: theme.colors.action.disabledText,
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
inputIndeterminate: css`
|
||||
&[aria-checked='mixed'] + span {
|
||||
border: 1px solid ${getBorderColor(theme.colors.primary.main)};
|
||||
background: ${theme.colors.primary.main};
|
||||
inputIndeterminate: css({
|
||||
"&[aria-checked='mixed'] + span": {
|
||||
border: `1px solid ${getBorderColor(theme.colors.primary.main)}`,
|
||||
background: theme.colors.primary.main,
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.primary.shade};
|
||||
}
|
||||
'&:hover': {
|
||||
background: theme.colors.primary.shade,
|
||||
},
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
top: calc(50% - 1.5px);
|
||||
height: 3px;
|
||||
border: 1.5px solid ${theme.colors.primary.contrastText};
|
||||
background-color: ${theme.colors.primary.contrastText};
|
||||
width: auto;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
&:disabled[aria-checked='mixed'] + span {
|
||||
background-color: ${theme.colors.action.disabledBackground};
|
||||
border: 1px solid ${getBorderColor(theme.colors.error.transparent)};
|
||||
'&:after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
left: '2px',
|
||||
right: '2px',
|
||||
top: 'calc(50% - 1.5px)',
|
||||
height: '3px',
|
||||
border: `1.5px solid ${theme.colors.primary.contrastText}`,
|
||||
backgroundColor: theme.colors.primary.contrastText,
|
||||
width: 'auto',
|
||||
transform: 'none',
|
||||
},
|
||||
},
|
||||
"&:disabled[aria-checked='mixed'] + span": {
|
||||
backgroundColor: theme.colors.action.disabledBackground,
|
||||
border: `1px solid ${getBorderColor(theme.colors.error.transparent)}`,
|
||||
|
||||
&:after {
|
||||
border-color: ${theme.colors.action.disabledText};
|
||||
}
|
||||
}
|
||||
`,
|
||||
'&:after': {
|
||||
borderColor: theme.colors.action.disabledText,
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
checkboxWrapper: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
`,
|
||||
checkmark: css`
|
||||
position: relative; /* Checkbox should be layered on top of the invisible input so it recieves :hover */
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
width: ${theme.spacing(checkboxSize)};
|
||||
height: ${theme.spacing(checkboxSize)};
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
background: ${theme.components.input.background};
|
||||
border: 1px solid ${getBorderColor(theme.components.input.borderColor)};
|
||||
checkboxWrapper: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gridColumnStart: 1,
|
||||
gridRowStart: 1,
|
||||
}),
|
||||
checkmark: css({
|
||||
position: 'relative' /* Checkbox should be layered on top of the invisible input so it recieves :hover */,
|
||||
zIndex: 2,
|
||||
display: 'inline-block',
|
||||
width: theme.spacing(checkboxSize),
|
||||
height: theme.spacing(checkboxSize),
|
||||
borderRadius: theme.shape.borderRadius(),
|
||||
background: theme.components.input.background,
|
||||
border: `1px solid ${getBorderColor(theme.components.input.borderColor)}`,
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border-color: ${getBorderColor(theme.components.input.borderHover)};
|
||||
}
|
||||
`,
|
||||
'&:hover': {
|
||||
cursor: 'pointer',
|
||||
borderColor: getBorderColor(theme.components.input.borderHover),
|
||||
},
|
||||
}),
|
||||
label: cx(
|
||||
labelStyles.label,
|
||||
css`
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
max-width: fit-content;
|
||||
line-height: ${theme.typography.bodySmall.lineHeight};
|
||||
margin-bottom: 0;
|
||||
`
|
||||
css({
|
||||
gridColumnStart: 2,
|
||||
gridRowStart: 1,
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
cursor: 'pointer',
|
||||
maxWidth: 'fit-content',
|
||||
lineHeight: theme.typography.bodySmall.lineHeight,
|
||||
marginBottom: 0,
|
||||
})
|
||||
),
|
||||
description: cx(
|
||||
labelStyles.description,
|
||||
css`
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 2;
|
||||
line-height: ${theme.typography.bodySmall.lineHeight};
|
||||
margin-top: 0; /* The margin effectively comes from the top: -2px on the label above it */
|
||||
`
|
||||
css({
|
||||
gridColumnStart: 2,
|
||||
gridRowStart: 2,
|
||||
lineHeight: theme.typography.bodySmall.lineHeight,
|
||||
marginTop: 0 /* The margin effectively comes from the top: -2px on the label above it */,
|
||||
})
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
@ -42,30 +42,30 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
|
||||
|
||||
export const getFieldStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
field: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: ${theme.spacing(2)};
|
||||
`,
|
||||
fieldHorizontal: css`
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
`,
|
||||
fieldValidationWrapper: css`
|
||||
margin-top: ${theme.spacing(0.5)};
|
||||
`,
|
||||
fieldValidationWrapperHorizontal: css`
|
||||
flex: 1 1 100%;
|
||||
`,
|
||||
validationMessageHorizontalOverflow: css`
|
||||
width: 0;
|
||||
overflow-x: visible;
|
||||
field: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
marginBottom: theme.spacing(2),
|
||||
}),
|
||||
fieldHorizontal: css({
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
flexWrap: 'wrap',
|
||||
}),
|
||||
fieldValidationWrapper: css({
|
||||
marginTop: theme.spacing(0.5),
|
||||
}),
|
||||
fieldValidationWrapperHorizontal: css({
|
||||
flex: '1 1 100%',
|
||||
}),
|
||||
validationMessageHorizontalOverflow: css({
|
||||
width: 0,
|
||||
overflowX: 'visible',
|
||||
|
||||
& > * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
`,
|
||||
'& > *': {
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -27,12 +27,12 @@ export const FieldSet = ({ label, children, className, ...rest }: Props) => {
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
margin-bottom: ${theme.spacing(4)};
|
||||
wrapper: css({
|
||||
marginBottom: theme.spacing(4),
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`,
|
||||
'&:last-child': {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -35,41 +35,39 @@ export const getFieldValidationMessageStyles = stylesFactory((theme: GrafanaThem
|
||||
`;
|
||||
|
||||
return {
|
||||
vertical: css`
|
||||
${baseStyle}
|
||||
margin: ${theme.spacing(0.5, 0, 0, 0)};
|
||||
vertical: css(baseStyle, {
|
||||
margin: theme.spacing(0.5, 0, 0, 0),
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: -5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 0 4px 5px 4px;
|
||||
border-color: transparent transparent ${theme.colors.error.main} transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
`,
|
||||
horizontal: css`
|
||||
${baseStyle}
|
||||
margin-left: 10px;
|
||||
'&:before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
left: '9px',
|
||||
top: '-5px',
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderWidth: '0 4px 5px 4px',
|
||||
borderColor: `transparent transparent ${theme.colors.error.main} transparent`,
|
||||
borderStyle: 'solid',
|
||||
},
|
||||
}),
|
||||
horizontal: css(baseStyle, {
|
||||
marginLeft: '10px',
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
top: 9px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 4px 5px 4px 0;
|
||||
border-color: transparent #e02f44 transparent transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
`,
|
||||
fieldValidationMessageIcon: css`
|
||||
margin-right: ${theme.spacing()};
|
||||
`,
|
||||
'&:before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
left: '-5px',
|
||||
top: '9px',
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderWidth: '4px 5px 4px 0',
|
||||
borderColor: 'transparent #e02f44 transparent transparent',
|
||||
borderStyle: 'solid',
|
||||
},
|
||||
}),
|
||||
fieldValidationMessageIcon: css({
|
||||
marginRight: theme.spacing(),
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -39,10 +39,10 @@ export function Form<T extends FieldValues>({
|
||||
|
||||
return (
|
||||
<form
|
||||
className={css`
|
||||
max-width: ${maxWidth !== 'none' ? maxWidth + 'px' : maxWidth};
|
||||
width: 100%;
|
||||
`}
|
||||
className={css({
|
||||
maxWidth: maxWidth !== 'none' ? maxWidth + 'px' : maxWidth,
|
||||
width: '100%',
|
||||
})}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
{...htmlProps}
|
||||
>
|
||||
|
||||
@ -85,20 +85,20 @@ InlineField.displayName = 'InlineField';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2, grow?: boolean, shrink?: boolean) => {
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
flex: ${grow ? 1 : 0} ${shrink ? 1 : 0} auto;
|
||||
margin: 0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0;
|
||||
`,
|
||||
childContainer: css`
|
||||
flex: ${grow ? 1 : 0} ${shrink ? 1 : 0} auto;
|
||||
`,
|
||||
fieldValidationWrapper: css`
|
||||
margin-top: ${theme.spacing(0.5)};
|
||||
`,
|
||||
container: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
textAlign: 'left',
|
||||
position: 'relative',
|
||||
flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,
|
||||
margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`,
|
||||
}),
|
||||
childContainer: css({
|
||||
flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,
|
||||
}),
|
||||
fieldValidationWrapper: css({
|
||||
marginTop: theme.spacing(0.5),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -20,13 +20,13 @@ export const InlineFieldRow = ({ children, className, ...htmlProps }: Props) =>
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
label: InlineFieldRow;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
row-gap: ${theme.spacing(0.5)};
|
||||
`,
|
||||
container: css({
|
||||
label: 'InlineFieldRow',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
alignContent: 'flex-start',
|
||||
rowGap: theme.spacing(0.5),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -52,30 +52,30 @@ export const InlineLabel = ({
|
||||
|
||||
export const getInlineLabelStyles = (theme: GrafanaTheme2, transparent = false, width?: number | 'auto') => {
|
||||
return {
|
||||
label: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
padding: 0 ${theme.spacing(1)};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
background-color: ${transparent ? 'transparent' : theme.colors.background.secondary};
|
||||
height: ${theme.spacing(theme.components.height.md)};
|
||||
line-height: ${theme.spacing(theme.components.height.md)};
|
||||
margin-right: ${theme.spacing(0.5)};
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
border: none;
|
||||
width: ${width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%'};
|
||||
color: ${theme.colors.text.primary};
|
||||
`,
|
||||
icon: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
margin-left: 10px;
|
||||
label: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexShrink: 0,
|
||||
padding: theme.spacing(0, 1),
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
fontSize: theme.typography.size.sm,
|
||||
backgroundColor: transparent ? 'transparent' : theme.colors.background.secondary,
|
||||
height: theme.spacing(theme.components.height.md),
|
||||
lineHeight: theme.spacing(theme.components.height.md),
|
||||
marginRight: theme.spacing(0.5),
|
||||
borderRadius: theme.shape.radius.default,
|
||||
border: 'none',
|
||||
width: width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%',
|
||||
color: theme.colors.text.primary,
|
||||
}),
|
||||
icon: css({
|
||||
color: theme.colors.text.secondary,
|
||||
marginLeft: '10px',
|
||||
|
||||
:hover {
|
||||
color: ${theme.colors.text.primary};
|
||||
}
|
||||
`,
|
||||
':hover': {
|
||||
color: theme.colors.text.primary,
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -25,14 +25,14 @@ InlineSegmentGroup.displayName = 'InlineSegmentGroup';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2, grow?: boolean) => {
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
flex: ${grow ? 1 : 0} 0 auto;
|
||||
margin-bottom: ${theme.spacing(0.5)};
|
||||
`,
|
||||
container: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
textAlign: 'left',
|
||||
position: 'relative',
|
||||
flex: `${grow ? 1 : 0} 0 auto`,
|
||||
marginBottom: theme.spacing(0.5),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -14,35 +14,35 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
|
||||
|
||||
export const getLabelStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
label: css`
|
||||
label: Label;
|
||||
font-size: ${theme.typography.size.sm};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
line-height: 1.25;
|
||||
margin-bottom: ${theme.spacing(0.5)};
|
||||
color: ${theme.colors.text.primary};
|
||||
max-width: 480px;
|
||||
`,
|
||||
labelContent: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`,
|
||||
description: css`
|
||||
label: Label-description;
|
||||
color: ${theme.colors.text.secondary};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
font-weight: ${theme.typography.fontWeightRegular};
|
||||
margin-top: ${theme.spacing(0.25)};
|
||||
display: block;
|
||||
`,
|
||||
categories: css`
|
||||
label: Label-categories;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
`,
|
||||
chevron: css`
|
||||
margin: 0 ${theme.spacing(0.25)};
|
||||
`,
|
||||
label: css({
|
||||
label: 'Label',
|
||||
fontSize: theme.typography.size.sm,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
lineHeight: 1.25,
|
||||
marginBottom: theme.spacing(0.5),
|
||||
color: theme.colors.text.primary,
|
||||
maxWidth: '480px',
|
||||
}),
|
||||
labelContent: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
description: css({
|
||||
label: 'Label-description',
|
||||
color: theme.colors.text.secondary,
|
||||
fontSize: theme.typography.size.sm,
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
marginTop: theme.spacing(0.25),
|
||||
display: 'block',
|
||||
}),
|
||||
categories: css({
|
||||
label: 'Label-categories',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
}),
|
||||
chevron: css({
|
||||
margin: theme.spacing(0, 0.25),
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -12,11 +12,11 @@ export interface LabelProps extends React.HTMLAttributes<HTMLLegendElement> {
|
||||
|
||||
export const getLegendStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
legend: css`
|
||||
font-size: ${theme.typography.h3.fontSize};
|
||||
font-weight: ${theme.typography.fontWeightRegular};
|
||||
margin: 0 0 ${theme.spacing(2)} 0;
|
||||
`,
|
||||
legend: css({
|
||||
fontSize: theme.typography.h3.fontSize,
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
margin: theme.spacing(0, 0, 2, 0),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -77,53 +77,48 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioBut
|
||||
const labelHeight = height * theme.spacing.gridSize - 4 - 2;
|
||||
|
||||
return {
|
||||
radio: css`
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
radio: css({
|
||||
position: 'absolute',
|
||||
opacity: 0,
|
||||
zIndex: -1000,
|
||||
|
||||
&:checked + label {
|
||||
color: ${theme.colors.text.primary};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
background: ${theme.colors.action.selected};
|
||||
z-index: 3;
|
||||
}
|
||||
'&:checked + label': {
|
||||
color: theme.colors.text.primary,
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
background: theme.colors.action.selected,
|
||||
zIndex: 3,
|
||||
},
|
||||
|
||||
&:focus + label,
|
||||
&:focus-visible + label {
|
||||
${getFocusStyles(theme)};
|
||||
}
|
||||
'&:focus + label, &:focus-visible + label': getFocusStyles(theme),
|
||||
|
||||
&:focus:not(:focus-visible) + label {
|
||||
${getMouseFocusStyles(theme)}
|
||||
}
|
||||
'&:focus:not(:focus-visible) + label': getMouseFocusStyles(theme),
|
||||
|
||||
&:disabled + label {
|
||||
color: ${theme.colors.text.disabled};
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`,
|
||||
radioLabel: css`
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: ${fontSize};
|
||||
height: ${labelHeight}px;
|
||||
'&:disabled + label': {
|
||||
color: theme.colors.text.disabled,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
}),
|
||||
radioLabel: css({
|
||||
display: 'inline-block',
|
||||
position: 'relative',
|
||||
fontSize,
|
||||
height: `${labelHeight}px`,
|
||||
// Deduct border from line-height for perfect vertical centering on windows and linux
|
||||
line-height: ${labelHeight}px;
|
||||
color: ${textColor};
|
||||
padding: ${theme.spacing(0, padding)};
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
background: ${theme.colors.background.primary};
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
flex: ${fullWidth ? `1 0 0` : 'none'};
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
lineHeight: `${labelHeight}px`,
|
||||
color: textColor,
|
||||
padding: theme.spacing(0, padding),
|
||||
borderRadius: theme.shape.borderRadius(),
|
||||
background: theme.colors.background.primary,
|
||||
cursor: 'pointer',
|
||||
zIndex: 1,
|
||||
flex: fullWidth ? `1 0 0` : 'none',
|
||||
textAlign: 'center',
|
||||
userSelect: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
|
||||
&:hover {
|
||||
color: ${textColorHover};
|
||||
}
|
||||
`,
|
||||
'&:hover': {
|
||||
color: textColorHover,
|
||||
},
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -117,14 +117,14 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
fullWidth: css({
|
||||
display: 'flex',
|
||||
}),
|
||||
icon: css`
|
||||
margin-right: 6px;
|
||||
`,
|
||||
img: css`
|
||||
width: ${theme.spacing(2)};
|
||||
height: ${theme.spacing(2)};
|
||||
margin-right: ${theme.spacing(1)};
|
||||
`,
|
||||
icon: css({
|
||||
marginRight: '6px',
|
||||
}),
|
||||
img: css({
|
||||
width: theme.spacing(2),
|
||||
height: theme.spacing(2),
|
||||
marginRight: theme.spacing(1),
|
||||
}),
|
||||
invalid: css({
|
||||
border: `1px solid ${theme.colors.error.border}`,
|
||||
}),
|
||||
|
||||
@ -35,56 +35,53 @@ export const RadioButtonDot = ({ id, name, label, checked, disabled, description
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
input: css`
|
||||
position: relative;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
background-color: ${theme.colors.background.canvas};
|
||||
margin: 0;
|
||||
width: ${theme.spacing(2)} !important; /* TODO How to overcome this? Checkbox does the same 🙁 */
|
||||
height: ${theme.spacing(2)};
|
||||
border: 1px solid ${theme.colors.border.medium};
|
||||
border-radius: ${theme.shape.radius.circle};
|
||||
margin: 3px 0; /* Space for box-shadow when focused */
|
||||
input: css({
|
||||
position: 'relative',
|
||||
appearance: 'none',
|
||||
outline: 'none',
|
||||
backgroundColor: theme.colors.background.canvas,
|
||||
width: `${theme.spacing(2)} !important` /* TODO How to overcome this? Checkbox does the same 🙁 */,
|
||||
height: theme.spacing(2),
|
||||
border: `1px solid ${theme.colors.border.medium}`,
|
||||
borderRadius: theme.shape.radius.circle,
|
||||
margin: '3px 0' /* Space for box-shadow when focused */,
|
||||
|
||||
:checked {
|
||||
background-color: ${theme.v1.palette.white};
|
||||
border: 5px solid ${theme.colors.primary.main};
|
||||
}
|
||||
':checked': {
|
||||
backgroundColor: theme.v1.palette.white,
|
||||
border: `5px solid ${theme.colors.primary.main}`,
|
||||
},
|
||||
|
||||
:disabled {
|
||||
background-color: ${theme.colors.action.disabledBackground} !important;
|
||||
border-color: ${theme.colors.border.weak};
|
||||
}
|
||||
':disabled': {
|
||||
backgroundColor: `${theme.colors.action.disabledBackground} !important`,
|
||||
borderColor: theme.colors.border.weak,
|
||||
},
|
||||
|
||||
:disabled:checked {
|
||||
border: 1px solid ${theme.colors.border.weak};
|
||||
}
|
||||
':disabled:checked': {
|
||||
border: `1px solid ${theme.colors.border.weak}`,
|
||||
},
|
||||
|
||||
:disabled:checked::after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: ${theme.colors.text.disabled};
|
||||
border-radius: ${theme.shape.radius.circle};
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
}
|
||||
':disabled:checked::after': {
|
||||
content: '""',
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
backgroundColor: theme.colors.text.disabled,
|
||||
borderRadius: theme.shape.radius.circle,
|
||||
display: 'inline-block',
|
||||
position: 'absolute',
|
||||
top: '4px',
|
||||
left: '4px',
|
||||
},
|
||||
|
||||
:focus {
|
||||
outline: none !important;
|
||||
box-shadow:
|
||||
0 0 0 1px ${theme.colors.background.canvas},
|
||||
0 0 0 3px ${theme.colors.primary.main};
|
||||
}
|
||||
`,
|
||||
label: css`
|
||||
font-size: ${theme.typography.fontSize};
|
||||
line-height: 22px; /* 16px for the radio button and 6px for the focus shadow */
|
||||
display: grid;
|
||||
grid-template-columns: ${theme.spacing(2)} auto;
|
||||
gap: ${theme.spacing(1)};
|
||||
`,
|
||||
':focus': {
|
||||
outline: 'none !important',
|
||||
boxShadow: `0 0 0 1px ${theme.colors.background.canvas}, 0 0 0 3px ${theme.colors.primary.main}`,
|
||||
},
|
||||
}),
|
||||
label: css({
|
||||
fontSize: theme.typography.fontSize,
|
||||
lineHeight: '22px' /* 16px for the radio button and 6px for the focus shadow */,
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `${theme.spacing(2)} auto`,
|
||||
gap: theme.spacing(1),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -64,8 +64,8 @@ export function RadioButtonList<T>({
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
container: css`
|
||||
display: grid;
|
||||
gap: ${theme.spacing(1)};
|
||||
`,
|
||||
container: css({
|
||||
display: 'grid',
|
||||
gap: theme.spacing(1),
|
||||
}),
|
||||
});
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
|
||||
import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
import { focusCss } from '../../themes/mixins';
|
||||
import { getFocusStyles } from '../../themes/mixins';
|
||||
import { ComponentSize } from '../../types/size';
|
||||
|
||||
export const getFocusStyle = (theme: GrafanaTheme | GrafanaTheme2) => css`
|
||||
&:focus {
|
||||
${focusCss(theme)}
|
||||
}
|
||||
`;
|
||||
export const getFocusStyle = (theme: GrafanaTheme2) =>
|
||||
css({
|
||||
'&:focus': getFocusStyles(theme),
|
||||
});
|
||||
|
||||
export const sharedInputStyle = (theme: GrafanaTheme2, invalid = false) => {
|
||||
const borderColor = invalid ? theme.colors.error.border : theme.components.input.borderColor;
|
||||
@ -23,79 +22,72 @@ export const sharedInputStyle = (theme: GrafanaTheme2, invalid = false) => {
|
||||
|
||||
return cx(
|
||||
inputPadding(theme),
|
||||
css`
|
||||
background: ${background};
|
||||
line-height: ${theme.typography.body.lineHeight};
|
||||
font-size: ${theme.typography.size.md};
|
||||
color: ${textColor};
|
||||
border: 1px solid ${borderColor};
|
||||
css({
|
||||
background,
|
||||
lineHeight: theme.typography.body.lineHeight,
|
||||
fontSize: theme.typography.size.md,
|
||||
color: textColor,
|
||||
border: `1px solid ${borderColor}`,
|
||||
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover {
|
||||
'&:-webkit-autofill, &:-webkit-autofill:hover': {
|
||||
/* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0),
|
||||
inset 0 0 0 100px ${background}!important;
|
||||
-webkit-text-fill-color: ${textColor} !important;
|
||||
border-color: ${autoFillBorder};
|
||||
}
|
||||
boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important`,
|
||||
WebkitTextFillColor: `${textColor} !important`,
|
||||
borderColor: autoFillBorder,
|
||||
},
|
||||
|
||||
&:-webkit-autofill:focus {
|
||||
'&:-webkit-autofill:focus': {
|
||||
/* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */
|
||||
box-shadow:
|
||||
0 0 0 2px ${theme.colors.background.primary},
|
||||
0 0 0px 4px ${theme.colors.primary.main},
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0),
|
||||
inset 0 0 0 100px ${background}!important;
|
||||
-webkit-text-fill-color: ${textColor} !important;
|
||||
}
|
||||
boxShadow: `0 0 0 2px ${theme.colors.background.primary}, 0 0 0px 4px ${theme.colors.primary.main}, inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important`,
|
||||
WebkitTextFillColor: `${textColor} !important`,
|
||||
},
|
||||
|
||||
&:hover {
|
||||
border-color: ${borderColorHover};
|
||||
}
|
||||
'&:hover': {
|
||||
borderColor: borderColorHover,
|
||||
},
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
'&:focus': {
|
||||
outline: 'none',
|
||||
},
|
||||
|
||||
&:disabled {
|
||||
background-color: ${theme.colors.action.disabledBackground};
|
||||
color: ${theme.colors.action.disabledText};
|
||||
border: 1px solid ${theme.colors.action.disabledBackground};
|
||||
'&:disabled': {
|
||||
backgroundColor: theme.colors.action.disabledBackground,
|
||||
color: theme.colors.action.disabledText,
|
||||
border: `1px solid ${theme.colors.action.disabledBackground}`,
|
||||
|
||||
&:hover {
|
||||
border-color: ${borderColor};
|
||||
}
|
||||
}
|
||||
'&:hover': {
|
||||
borderColor,
|
||||
},
|
||||
},
|
||||
|
||||
&::placeholder {
|
||||
color: ${theme.colors.text.disabled};
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
'&::placeholder': {
|
||||
color: theme.colors.text.disabled,
|
||||
opacity: 1,
|
||||
},
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export const inputPadding = (theme: GrafanaTheme2) => {
|
||||
return css`
|
||||
padding: ${theme.spacing(0, 1, 0, 1)};
|
||||
`;
|
||||
return css({
|
||||
padding: theme.spacing(0, 1, 0, 1),
|
||||
});
|
||||
};
|
||||
|
||||
export const inputSizes = () => {
|
||||
return {
|
||||
sm: css`
|
||||
width: ${inputSizesPixels('sm')};
|
||||
`,
|
||||
md: css`
|
||||
width: ${inputSizesPixels('md')};
|
||||
`,
|
||||
lg: css`
|
||||
width: ${inputSizesPixels('lg')};
|
||||
`,
|
||||
auto: css`
|
||||
width: ${inputSizesPixels('auto')};
|
||||
`,
|
||||
sm: css({
|
||||
width: inputSizesPixels('sm'),
|
||||
}),
|
||||
md: css({
|
||||
width: inputSizesPixels('md'),
|
||||
}),
|
||||
lg: css({
|
||||
width: inputSizesPixels('lg'),
|
||||
}),
|
||||
auto: css({
|
||||
width: inputSizesPixels('auto'),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -132,14 +132,14 @@ export const GraphContextMenuHeader = ({
|
||||
|
||||
function getStyles(theme: GrafanaTheme2) {
|
||||
return {
|
||||
wrapper: css`
|
||||
padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
z-index: ${theme.zIndex.tooltip};
|
||||
`,
|
||||
displayName: css`
|
||||
white-space: nowrap;
|
||||
padding-left: ${theme.spacing(0.5)};
|
||||
`,
|
||||
wrapper: css({
|
||||
padding: theme.spacing(0.5, 1),
|
||||
fontSize: theme.typography.size.sm,
|
||||
zIndex: theme.zIndex.tooltip,
|
||||
}),
|
||||
displayName: css({
|
||||
whiteSpace: 'nowrap',
|
||||
paddingLeft: theme.spacing(0.5),
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
@ -26,18 +26,18 @@ export interface GraphWithLegendProps extends GraphProps {
|
||||
}
|
||||
|
||||
const getGraphWithLegendStyles = stylesFactory(({ placement }: GraphWithLegendProps) => ({
|
||||
wrapper: css`
|
||||
display: flex;
|
||||
flex-direction: ${placement === 'bottom' ? 'column' : 'row'};
|
||||
`,
|
||||
graphContainer: css`
|
||||
min-height: 65%;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
legendContainer: css`
|
||||
padding: 10px 0;
|
||||
max-height: ${placement === 'bottom' ? '35%' : 'none'};
|
||||
`,
|
||||
wrapper: css({
|
||||
display: 'flex',
|
||||
flexDirection: placement === 'bottom' ? 'column' : 'row',
|
||||
}),
|
||||
graphContainer: css({
|
||||
minHeight: '65%',
|
||||
flexGrow: 1,
|
||||
}),
|
||||
legendContainer: css({
|
||||
padding: '10px 0',
|
||||
maxHeight: placement === 'bottom' ? '35%' : 'none',
|
||||
}),
|
||||
}));
|
||||
|
||||
const shouldHideLegendItem = (data: GraphSeriesValue[][], hideEmpty = false, hideZero = false) => {
|
||||
|
||||
@ -31,25 +31,25 @@ const IconWrapper = ({ name }: { name: IconName }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={css`
|
||||
width: 150px;
|
||||
padding: 12px;
|
||||
border: 1px solid ${borderColor};
|
||||
text-align: center;
|
||||
className={css({
|
||||
width: '150px',
|
||||
padding: '12px',
|
||||
border: `1px solid ${borderColor}`,
|
||||
textAlign: 'center',
|
||||
|
||||
&:hover {
|
||||
background: ${borderColor};
|
||||
}
|
||||
`}
|
||||
'&:hover': {
|
||||
background: borderColor,
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Icon name={name} />
|
||||
<div
|
||||
className={css`
|
||||
padding-top: 16px;
|
||||
word-break: break-all;
|
||||
font-family: ${theme.typography.fontFamilyMonospace};
|
||||
font-size: ${theme.typography.size.xs};
|
||||
`}
|
||||
className={css({
|
||||
paddingTop: '16px',
|
||||
wordBreak: 'break-all',
|
||||
fontFamily: theme.typography.fontFamilyMonospace,
|
||||
fontSize: theme.typography.size.xs,
|
||||
})}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
@ -69,26 +69,26 @@ export const IconsOverview = () => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
`}
|
||||
className={css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
overflow: 'auto',
|
||||
width: '100%',
|
||||
})}
|
||||
>
|
||||
<Field
|
||||
className={css`
|
||||
width: 300px;
|
||||
`}
|
||||
className={css({
|
||||
width: '300px',
|
||||
})}
|
||||
>
|
||||
<Input onChange={searchIcon} placeholder="Search icons by name" />
|
||||
</Field>
|
||||
<div
|
||||
className={css`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
`}
|
||||
className={css({
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
})}
|
||||
>
|
||||
{icons
|
||||
.filter((val) => val.includes(filter))
|
||||
|
||||
@ -20,19 +20,19 @@ export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
const getIconStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
// line-height: 0; is needed for correct icon alignment in Safari
|
||||
container: css`
|
||||
label: Icon;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
`,
|
||||
icon: css`
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
fill: currentColor;
|
||||
`,
|
||||
orange: css`
|
||||
fill: ${theme.v1.palette.orange};
|
||||
`,
|
||||
container: css({
|
||||
label: 'Icon',
|
||||
display: 'inline-block',
|
||||
lineHeight: 0,
|
||||
}),
|
||||
icon: css({
|
||||
verticalAlign: 'middle',
|
||||
display: 'inline-block',
|
||||
fill: 'currentColor',
|
||||
}),
|
||||
orange: css({
|
||||
fill: theme.v1.palette.orange,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -54,11 +54,11 @@ export const ExamplesSizes = (args: BasePropsWithTooltip) => {
|
||||
const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
|
||||
const variants: IconButtonVariant[] = ['primary', 'secondary', 'destructive'];
|
||||
|
||||
const rowStyle = css`
|
||||
display: flex;
|
||||
gap: ${theme.spacing(1)};
|
||||
margin-bottom: ${theme.spacing(2)};
|
||||
`;
|
||||
const rowStyle = css({
|
||||
display: 'flex',
|
||||
gap: theme.spacing(1),
|
||||
marginBottom: theme.spacing(2),
|
||||
});
|
||||
|
||||
return (
|
||||
<HorizontalGroup justify="center">
|
||||
@ -66,9 +66,9 @@ export const ExamplesSizes = (args: BasePropsWithTooltip) => {
|
||||
return (
|
||||
<div
|
||||
key={variant}
|
||||
className={css`
|
||||
margin: auto ${theme.spacing(1)};
|
||||
`}
|
||||
className={css({
|
||||
margin: `auto ${theme.spacing(1)}`,
|
||||
})}
|
||||
>
|
||||
<p>{variant}</p>
|
||||
{icons.map((icon) => {
|
||||
@ -114,18 +114,18 @@ export const ExamplesBackground = (args: BasePropsWithTooltip) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={css`
|
||||
padding: 30px;
|
||||
background: ${theme.colors.background[background]};
|
||||
`}
|
||||
className={css({
|
||||
padding: '30px',
|
||||
background: theme.colors.background[background],
|
||||
})}
|
||||
>
|
||||
<VerticalGroup spacing="md">
|
||||
<div>{background}</div>
|
||||
<div
|
||||
className={css`
|
||||
display: flex;
|
||||
gap: ${theme.spacing(2)};
|
||||
`}
|
||||
className={css({
|
||||
display: 'flex',
|
||||
gap: theme.spacing(2),
|
||||
})}
|
||||
>
|
||||
{variants.map((variant) => {
|
||||
return <IconButton name="times" size="xl" variant={variant} key={variant} tooltip={args.tooltip} />;
|
||||
|
||||
@ -118,59 +118,52 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, size, variant: IconButton
|
||||
}
|
||||
|
||||
return {
|
||||
button: css`
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
margin: 0 ${theme.spacing(0.5)} 0 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
background: transparent;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
color: ${iconColor};
|
||||
button: css({
|
||||
zIndex: 0,
|
||||
position: 'relative',
|
||||
margin: theme.spacing(0, 0.5, 0, 0),
|
||||
boxShadow: 'none',
|
||||
border: 'none',
|
||||
display: 'inline-flex',
|
||||
background: 'transparent',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 0,
|
||||
color: iconColor,
|
||||
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
color: ${theme.colors.action.disabledText};
|
||||
opacity: 0.65;
|
||||
}
|
||||
'&[disabled], &:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
color: theme.colors.action.disabledText,
|
||||
opacity: 0.65,
|
||||
},
|
||||
|
||||
&:before {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: ${hoverSize}px;
|
||||
height: ${hoverSize}px;
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
content: '';
|
||||
transition-duration: 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: opacity;
|
||||
}
|
||||
'&:before': {
|
||||
zIndex: -1,
|
||||
position: 'absolute',
|
||||
opacity: 0,
|
||||
width: `${hoverSize}px`,
|
||||
height: `${hoverSize}px`,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
content: '""',
|
||||
transitionDuration: '0.2s',
|
||||
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transitionProperty: 'opacity',
|
||||
},
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
${getFocusStyles(theme)}
|
||||
}
|
||||
'&:focus, &:focus-visible': getFocusStyles(theme),
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
${getMouseFocusStyles(theme)}
|
||||
}
|
||||
'&:focus:not(:focus-visible)': getMouseFocusStyles(theme),
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
background-color: ${variant === 'secondary'
|
||||
? theme.colors.action.hover
|
||||
: colorManipulator.alpha(iconColor, 0.12)};
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`,
|
||||
icon: css`
|
||||
vertical-align: baseline;
|
||||
`,
|
||||
'&:hover': {
|
||||
'&:before': {
|
||||
backgroundColor:
|
||||
variant === 'secondary' ? theme.colors.action.hover : colorManipulator.alpha(iconColor, 0.12),
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
}),
|
||||
icon: css({
|
||||
verticalAlign: 'baseline',
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -36,9 +36,9 @@ FeatureInfoBox.displayName = 'FeatureInfoBox';
|
||||
|
||||
const getFeatureInfoBoxStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
badge: css`
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
badge: css({
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@ const InfoBoxTemplate: StoryFn<typeof InfoBox> = (args) => {
|
||||
return (
|
||||
<VerticalGroup>
|
||||
<div>Deprecrated component, use Alert with info severity</div>
|
||||
<InfoBox {...args} />;
|
||||
<InfoBox {...args} />
|
||||
</VerticalGroup>
|
||||
);
|
||||
};
|
||||
|
||||
@ -47,9 +47,9 @@ InfoBox.displayName = 'InfoBox';
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
return {
|
||||
docsLink: css`
|
||||
display: inline-block;
|
||||
margin-top: ${theme.spacing(2)};
|
||||
`,
|
||||
docsLink: css({
|
||||
display: 'inline-block',
|
||||
marginTop: theme.spacing(2),
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -82,182 +82,182 @@ Input.displayName = 'Input';
|
||||
|
||||
export const getInputStyles = stylesFactory(({ theme, invalid = false, width }: StyleDeps) => {
|
||||
const prefixSuffixStaticWidth = '28px';
|
||||
const prefixSuffix = css`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
font-size: ${theme.typography.size.md};
|
||||
height: 100%;
|
||||
const prefixSuffix = css({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
zIndex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexGrow: 0,
|
||||
flexShrink: 0,
|
||||
fontSize: theme.typography.size.md,
|
||||
height: '100%',
|
||||
/* Min width specified for prefix/suffix classes used outside React component*/
|
||||
min-width: ${prefixSuffixStaticWidth};
|
||||
color: ${theme.colors.text.secondary};
|
||||
`;
|
||||
minWidth: prefixSuffixStaticWidth,
|
||||
color: theme.colors.text.secondary,
|
||||
});
|
||||
|
||||
return {
|
||||
// Wraps inputWrapper and addons
|
||||
wrapper: cx(css`
|
||||
label: input-wrapper;
|
||||
display: flex;
|
||||
width: ${width ? `${theme.spacing(width)}` : '100%'};
|
||||
height: ${theme.spacing(theme.components.height.md)};
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
&:hover {
|
||||
> .prefix,
|
||||
.suffix,
|
||||
.input {
|
||||
border-color: ${invalid ? theme.colors.error.border : theme.colors.primary.border};
|
||||
}
|
||||
wrapper: cx(
|
||||
css({
|
||||
label: 'input-wrapper',
|
||||
display: 'flex',
|
||||
width: width ? theme.spacing(width) : '100%',
|
||||
height: theme.spacing(theme.components.height.md),
|
||||
borderRadius: theme.shape.borderRadius(),
|
||||
'&:hover': {
|
||||
'> .prefix, .suffix, .input': {
|
||||
borderColor: invalid ? theme.colors.error.border : theme.colors.primary.border,
|
||||
},
|
||||
|
||||
// only show number buttons on hover
|
||||
input[type='number'] {
|
||||
-moz-appearance: number-input;
|
||||
-webkit-appearance: number-input;
|
||||
appearance: textfield;
|
||||
}
|
||||
// only show number buttons on hover
|
||||
"input[type='number']": {
|
||||
appearance: 'textfield',
|
||||
},
|
||||
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button {
|
||||
-webkit-appearance: inner-spin-button !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`),
|
||||
"input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button": {
|
||||
// Need type assertion here due to the use of !important
|
||||
// see https://github.com/frenic/csstype/issues/114#issuecomment-697201978
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
WebkitAppearance: 'inner-spin-button !important' as 'inner-spin-button',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
})
|
||||
),
|
||||
// Wraps input and prefix/suffix
|
||||
inputWrapper: css`
|
||||
label: input-inputWrapper;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
inputWrapper: css({
|
||||
label: 'input-inputWrapper',
|
||||
position: 'relative',
|
||||
flexGrow: 1,
|
||||
/* we want input to be above addons, especially for focused state */
|
||||
z-index: 1;
|
||||
zIndex: 1,
|
||||
|
||||
/* when input rendered with addon before only*/
|
||||
&:not(:first-child):last-child {
|
||||
> input {
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
'&:not(:first-child):last-child': {
|
||||
'> input': {
|
||||
borderLeft: 'none',
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
},
|
||||
},
|
||||
|
||||
/* when input rendered with addon after only*/
|
||||
&:first-child:not(:last-child) {
|
||||
> input {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
'&:first-child:not(:last-child)': {
|
||||
'> input': {
|
||||
borderRight: 'none',
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
},
|
||||
},
|
||||
|
||||
/* when rendered with addon before and after */
|
||||
&:not(:first-child):not(:last-child) {
|
||||
> input {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
'&:not(:first-child):not(:last-child)': {
|
||||
'> input': {
|
||||
borderRight: 'none',
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
},
|
||||
},
|
||||
|
||||
input {
|
||||
input: {
|
||||
/* paddings specified for classes used outside React component */
|
||||
&:not(:first-child) {
|
||||
padding-left: ${prefixSuffixStaticWidth};
|
||||
}
|
||||
&:not(:last-child) {
|
||||
padding-right: ${prefixSuffixStaticWidth};
|
||||
}
|
||||
&[readonly] {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
`,
|
||||
'&:not(:first-child)': {
|
||||
paddingLeft: prefixSuffixStaticWidth,
|
||||
},
|
||||
'&:not(:last-child)': {
|
||||
paddingRight: prefixSuffixStaticWidth,
|
||||
},
|
||||
'&[readonly]': {
|
||||
cursor: 'default',
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
input: cx(
|
||||
getFocusStyle(theme),
|
||||
sharedInputStyle(theme, invalid),
|
||||
css`
|
||||
label: input-input;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
flex-grow: 1;
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
`
|
||||
css({
|
||||
label: 'input-input',
|
||||
position: 'relative',
|
||||
zIndex: 0,
|
||||
flexGrow: 1,
|
||||
borderRadius: theme.shape.borderRadius(),
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
})
|
||||
),
|
||||
inputDisabled: css`
|
||||
background-color: ${theme.colors.action.disabledBackground};
|
||||
color: ${theme.colors.action.disabledText};
|
||||
border: 1px solid ${theme.colors.action.disabledBackground};
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
`,
|
||||
addon: css`
|
||||
label: input-addon;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
inputDisabled: css({
|
||||
backgroundColor: theme.colors.action.disabledBackground,
|
||||
color: theme.colors.action.disabledText,
|
||||
border: `1px solid ${theme.colors.action.disabledBackground}`,
|
||||
'&:focus': {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
}),
|
||||
addon: css({
|
||||
label: 'input-addon',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexGrow: 0,
|
||||
flexShrink: 0,
|
||||
position: 'relative',
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
> :last-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
'&:first-child': {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
'> :last-child': {
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
},
|
||||
},
|
||||
|
||||
&:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
> :first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
> *:focus {
|
||||
'&:last-child': {
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
'> :first-child': {
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
},
|
||||
},
|
||||
'> *:focus': {
|
||||
/* we want anything that has focus and is an addon to be above input */
|
||||
z-index: 2;
|
||||
}
|
||||
`,
|
||||
zIndex: 2,
|
||||
},
|
||||
}),
|
||||
prefix: cx(
|
||||
prefixSuffix,
|
||||
css`
|
||||
label: input-prefix;
|
||||
padding-left: ${theme.spacing(1)};
|
||||
padding-right: ${theme.spacing(0.5)};
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
`
|
||||
css({
|
||||
label: 'input-prefix',
|
||||
paddingLeft: theme.spacing(1),
|
||||
paddingRight: theme.spacing(0.5),
|
||||
borderRight: 'none',
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
})
|
||||
),
|
||||
suffix: cx(
|
||||
prefixSuffix,
|
||||
css`
|
||||
label: input-suffix;
|
||||
padding-left: ${theme.spacing(1)};
|
||||
padding-right: ${theme.spacing(1)};
|
||||
margin-bottom: -2px;
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
right: 0;
|
||||
`
|
||||
css({
|
||||
label: 'input-suffix',
|
||||
paddingLeft: theme.spacing(1),
|
||||
paddingRight: theme.spacing(1),
|
||||
marginBottom: '-2px',
|
||||
borderLeft: 'none',
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
right: 0,
|
||||
})
|
||||
),
|
||||
loadingIndicator: css`
|
||||
& + * {
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
}
|
||||
`,
|
||||
loadingIndicator: css({
|
||||
'& + *': {
|
||||
marginLeft: theme.spacing(0.5),
|
||||
},
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -4,11 +4,11 @@ import { CellProps } from 'react-table';
|
||||
|
||||
import { IconButton } from '../IconButton/IconButton';
|
||||
|
||||
const expanderContainerStyles = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
`;
|
||||
const expanderContainerStyles = css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
export function ExpanderCell<K extends object>({ row, __rowID }: CellProps<K, void>) {
|
||||
return (
|
||||
|
||||
@ -26,90 +26,88 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03);
|
||||
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
gap: ${theme.spacing(2)};
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
`,
|
||||
table: css`
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
width: 100%;
|
||||
container: css({
|
||||
display: 'flex',
|
||||
gap: theme.spacing(2),
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
}),
|
||||
table: css({
|
||||
borderRadius: theme.shape.borderRadius(),
|
||||
width: '100%',
|
||||
|
||||
td {
|
||||
padding: ${theme.spacing(1)};
|
||||
}
|
||||
td: {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
|
||||
td,
|
||||
th {
|
||||
min-width: ${theme.spacing(3)};
|
||||
}
|
||||
`,
|
||||
disableGrow: css`
|
||||
width: 0;
|
||||
`,
|
||||
header: css`
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
&,
|
||||
& > button {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
padding: ${theme.spacing(1)};
|
||||
}
|
||||
& > button {
|
||||
&:after {
|
||||
content: '\\00a0';
|
||||
}
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding-right: ${theme.spacing(2.5)};
|
||||
text-align: left;
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
}
|
||||
`,
|
||||
row: css`
|
||||
label: row;
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
'td, th': {
|
||||
minWidth: theme.spacing(3),
|
||||
},
|
||||
}),
|
||||
disableGrow: css({
|
||||
width: 0,
|
||||
}),
|
||||
header: css({
|
||||
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||
'&, & > button': {
|
||||
position: 'relative',
|
||||
whiteSpace: 'nowrap',
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
'& > button': {
|
||||
'&:after': {
|
||||
content: '"\\00a0"',
|
||||
},
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
paddingRight: theme.spacing(2.5),
|
||||
textAlign: 'left',
|
||||
fontWeight: theme.typography.fontWeightMedium,
|
||||
},
|
||||
}),
|
||||
row: css({
|
||||
label: 'row',
|
||||
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||
|
||||
&:hover {
|
||||
background-color: ${rowHoverBg};
|
||||
}
|
||||
'&:hover': {
|
||||
backgroundColor: rowHoverBg,
|
||||
},
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
`,
|
||||
expandedRow: css`
|
||||
label: expanded-row-content;
|
||||
border-bottom: none;
|
||||
`,
|
||||
expandedContentRow: css`
|
||||
label: expanded-row-content;
|
||||
'&:last-child': {
|
||||
borderBottom: 0,
|
||||
},
|
||||
}),
|
||||
expandedRow: css({
|
||||
label: 'expanded-row-content',
|
||||
borderBottom: 'none',
|
||||
}),
|
||||
expandedContentRow: css({
|
||||
label: 'expanded-row-content',
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
position: relative;
|
||||
padding: ${theme.spacing(2, 2, 2, 5)};
|
||||
td: {
|
||||
borderBottom: `1px solid ${theme.colors.border.weak}`,
|
||||
position: 'relative',
|
||||
padding: theme.spacing(2, 2, 2, 5),
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
top: 0;
|
||||
left: 16px;
|
||||
bottom: ${theme.spacing(2)};
|
||||
background: ${theme.colors.border.medium};
|
||||
}
|
||||
}
|
||||
`,
|
||||
sortableHeader: css`
|
||||
'&:before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
width: '1px',
|
||||
top: 0,
|
||||
left: '16px',
|
||||
bottom: theme.spacing(2),
|
||||
background: theme.colors.border.medium,
|
||||
},
|
||||
},
|
||||
}),
|
||||
sortableHeader: css({
|
||||
/* increases selector's specificity so that it always takes precedence over default styles */
|
||||
&& {
|
||||
padding: 0;
|
||||
}
|
||||
`,
|
||||
'&&': {
|
||||
padding: 0,
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -287,13 +285,13 @@ const useUniqueId = () => {
|
||||
};
|
||||
|
||||
const getColumnHeaderStyles = (theme: GrafanaTheme2) => ({
|
||||
sortIcon: css`
|
||||
position: absolute;
|
||||
top: ${theme.spacing(1)};
|
||||
`,
|
||||
headerTooltipIcon: css`
|
||||
margin-left: ${theme.spacing(0.5)};
|
||||
`,
|
||||
sortIcon: css({
|
||||
position: 'absolute',
|
||||
top: theme.spacing(1),
|
||||
}),
|
||||
headerTooltipIcon: css({
|
||||
marginLeft: theme.spacing(0.5),
|
||||
}),
|
||||
});
|
||||
|
||||
function ColumnHeader<T extends object>({
|
||||
|
||||
@ -111,14 +111,8 @@ export const Container = ({ children, padding, margin, grow, shrink }: React.Pro
|
||||
<div
|
||||
className={cx(
|
||||
styles.wrapper,
|
||||
grow !== undefined &&
|
||||
css`
|
||||
flex-grow: ${grow};
|
||||
`,
|
||||
shrink !== undefined &&
|
||||
css`
|
||||
flex-shrink: ${shrink};
|
||||
`
|
||||
grow !== undefined && css({ flexGrow: grow }),
|
||||
shrink !== undefined && css({ flexShrink: shrink })
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
@ -143,30 +137,30 @@ const getStyles = (
|
||||
const label = orientation === Orientation.Vertical ? 'vertical-group' : 'horizontal-group';
|
||||
|
||||
return {
|
||||
layout: css`
|
||||
label: ${label};
|
||||
display: flex;
|
||||
flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'};
|
||||
flex-wrap: ${wrap ? 'wrap' : 'nowrap'};
|
||||
justify-content: ${justify};
|
||||
align-items: ${align};
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
layout: css({
|
||||
label: label,
|
||||
display: 'flex',
|
||||
flexDirection: orientation === Orientation.Vertical ? 'column' : 'row',
|
||||
flexWrap: wrap ? 'wrap' : 'nowrap',
|
||||
justifyContent: justify,
|
||||
alignItems: align,
|
||||
height: '100%',
|
||||
maxWidth: '100%',
|
||||
// compensate for last row margin when wrapped, horizontal layout
|
||||
margin-bottom: ${marginCompensation};
|
||||
`,
|
||||
childWrapper: css`
|
||||
label: layoutChildrenWrapper;
|
||||
margin-bottom: ${orientation === Orientation.Horizontal && !wrap ? 0 : finalSpacing};
|
||||
margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0};
|
||||
display: flex;
|
||||
align-items: ${align};
|
||||
marginBottom: marginCompensation,
|
||||
}),
|
||||
childWrapper: css({
|
||||
label: 'layoutChildrenWrapper',
|
||||
marginBottom: orientation === Orientation.Horizontal && !wrap ? 0 : finalSpacing,
|
||||
marginRight: orientation === Orientation.Horizontal ? finalSpacing : 0,
|
||||
display: 'flex',
|
||||
alignItems: align,
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: ${orientation === Orientation.Vertical && 0};
|
||||
margin-right: ${orientation === Orientation.Horizontal && 0};
|
||||
}
|
||||
`,
|
||||
'&:last-child': {
|
||||
marginBottom: orientation === Orientation.Vertical ? 0 : undefined,
|
||||
marginRight: orientation === Orientation.Horizontal ? 0 : undefined,
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -182,10 +176,10 @@ const getContainerStyles = (theme: GrafanaTheme2, padding?: Spacing, margin?: Sp
|
||||
const paddingSize = (padding && padding !== 'none' && theme.spacing(spacingToNumber[padding])) || 0;
|
||||
const marginSize = (margin && margin !== 'none' && theme.spacing(spacingToNumber[margin])) || 0;
|
||||
return {
|
||||
wrapper: css`
|
||||
label: container;
|
||||
margin: ${marginSize};
|
||||
padding: ${paddingSize};
|
||||
`,
|
||||
wrapper: css({
|
||||
label: 'container',
|
||||
margin: marginSize,
|
||||
padding: paddingSize,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -15,15 +15,15 @@ interface AbstractListProps<T> extends ListProps<T> {
|
||||
}
|
||||
|
||||
const getStyles = stylesFactory((inlineList = false) => ({
|
||||
list: css`
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
`,
|
||||
list: css({
|
||||
listStyleType: 'none',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}),
|
||||
|
||||
item: css`
|
||||
display: ${(inlineList && 'inline-block') || 'block'};
|
||||
`,
|
||||
item: css({
|
||||
display: (inlineList && 'inline-block') || 'block',
|
||||
}),
|
||||
}));
|
||||
|
||||
export class AbstractList<T> extends PureComponent<AbstractListProps<T>> {
|
||||
|
||||
@ -44,19 +44,19 @@ const getItem = (inline = false) => {
|
||||
const customRenderer = (item: ReturnType<typeof generateListItems>[0], index: number) => (
|
||||
<div
|
||||
className={cx([
|
||||
css`
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background: ${tinycolor.fromRatio({ h: index / 26, s: 1, v: 1 }).toHexString()};
|
||||
padding: 10px;
|
||||
`,
|
||||
css({
|
||||
color: 'white',
|
||||
fontWeight: 'bold',
|
||||
background: tinycolor.fromRatio({ h: index / 26, s: 1, v: 1 }).toHexString(),
|
||||
padding: '10px',
|
||||
}),
|
||||
inline
|
||||
? css`
|
||||
margin-right: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-bottom: 20px;
|
||||
`,
|
||||
? css({
|
||||
marginRight: '20px',
|
||||
})
|
||||
: css({
|
||||
marginBottom: '20px',
|
||||
}),
|
||||
])}
|
||||
>
|
||||
{item.name}
|
||||
|
||||
@ -27,8 +27,8 @@ export const LoadingPlaceholder = ({ text, className, ...rest }: LoadingPlacehol
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
container: css`
|
||||
margin-bottom: ${theme.spacing(4)};
|
||||
`,
|
||||
container: css({
|
||||
marginBottom: theme.spacing(4),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -90,13 +90,13 @@ export const FieldValueMatcherEditor = ({ options, onChange }: Props) => {
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
spot: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-content: flex-end;
|
||||
gap: 4px;
|
||||
`,
|
||||
spot: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
alignContent: 'flex-end',
|
||||
gap: '4px',
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -45,10 +45,10 @@ MenuGroup.displayName = 'MenuGroup';
|
||||
/** @internal */
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
groupLabel: css`
|
||||
color: ${theme.colors.text.secondary};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
padding: ${theme.spacing(0.5, 1)};
|
||||
`,
|
||||
groupLabel: css({
|
||||
color: theme.colors.text.secondary,
|
||||
fontSize: theme.typography.size.sm,
|
||||
padding: theme.spacing(0.5, 1),
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
@ -191,88 +191,80 @@ MenuItem.displayName = 'MenuItem';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
item: css`
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: ${theme.colors.text.primary};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: ${theme.spacing(0.5, 2)};
|
||||
min-height: ${theme.spacing(4)};
|
||||
margin: 0;
|
||||
border: none;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
item: css({
|
||||
background: 'none',
|
||||
cursor: 'pointer',
|
||||
whiteSpace: 'nowrap',
|
||||
color: theme.colors.text.primary,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(0.5, 2),
|
||||
minHeight: theme.spacing(4),
|
||||
margin: 0,
|
||||
border: 'none',
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
background: ${theme.colors.action.hover};
|
||||
color: ${theme.colors.text.primary};
|
||||
text-decoration: none;
|
||||
}
|
||||
'&:hover, &:focus, &:focus-visible': {
|
||||
background: theme.colors.action.hover,
|
||||
color: theme.colors.text.primary,
|
||||
textDecoration: 'none',
|
||||
},
|
||||
|
||||
&:focus-visible {
|
||||
${getFocusStyles(theme)}
|
||||
}
|
||||
`,
|
||||
active: css`
|
||||
background: ${theme.colors.action.hover};
|
||||
`,
|
||||
destructive: css`
|
||||
color: ${theme.colors.error.text};
|
||||
'&:focus-visible': getFocusStyles(theme),
|
||||
}),
|
||||
active: css({
|
||||
background: theme.colors.action.hover,
|
||||
}),
|
||||
destructive: css({
|
||||
color: theme.colors.error.text,
|
||||
|
||||
svg {
|
||||
color: ${theme.colors.error.text};
|
||||
}
|
||||
svg: {
|
||||
color: theme.colors.error.text,
|
||||
},
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
background: ${theme.colors.error.main};
|
||||
color: ${theme.colors.error.contrastText};
|
||||
'&:hover, &:focus, &:focus-visible': {
|
||||
background: theme.colors.error.main,
|
||||
color: theme.colors.error.contrastText,
|
||||
|
||||
svg {
|
||||
color: ${theme.colors.error.contrastText};
|
||||
}
|
||||
}
|
||||
`,
|
||||
disabled: css`
|
||||
color: ${theme.colors.action.disabledText};
|
||||
svg: {
|
||||
color: theme.colors.error.contrastText,
|
||||
},
|
||||
},
|
||||
}),
|
||||
disabled: css({
|
||||
color: theme.colors.action.disabledText,
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
cursor: not-allowed;
|
||||
background: none;
|
||||
color: ${theme.colors.action.disabledText};
|
||||
}
|
||||
`,
|
||||
icon: css`
|
||||
opacity: 0.7;
|
||||
margin-right: 10px;
|
||||
margin-left: -4px;
|
||||
color: ${theme.colors.text.secondary};
|
||||
`,
|
||||
rightWrapper: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
`,
|
||||
shortcutIcon: css`
|
||||
margin-right: ${theme.spacing(1)};
|
||||
`,
|
||||
withShortcut: css`
|
||||
min-width: ${theme.spacing(10.5)};
|
||||
`,
|
||||
shortcut: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: ${theme.spacing(1)};
|
||||
margin-left: ${theme.spacing(2)};
|
||||
color: ${theme.colors.text.secondary};
|
||||
opacity: 0.7;
|
||||
`,
|
||||
'&:hover, &:focus, &:focus-visible': {
|
||||
cursor: 'not-allowed',
|
||||
background: 'none',
|
||||
color: theme.colors.action.disabledText,
|
||||
},
|
||||
}),
|
||||
icon: css({
|
||||
opacity: 0.7,
|
||||
marginRight: '10px',
|
||||
marginLeft: '-4px',
|
||||
color: theme.colors.text.secondary,
|
||||
}),
|
||||
rightWrapper: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginLeft: 'auto',
|
||||
}),
|
||||
shortcutIcon: css({
|
||||
marginRight: theme.spacing(1),
|
||||
}),
|
||||
withShortcut: css({
|
||||
minWidth: theme.spacing(10.5),
|
||||
}),
|
||||
shortcut: css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: theme.spacing(1),
|
||||
marginLeft: theme.spacing(2),
|
||||
color: theme.colors.text.secondary,
|
||||
opacity: 0.7,
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user