Skip to content

Commit 8c75e4f

Browse files
GurinderRawalaGurinderRawala
committed
fixes
1 parent f97f210 commit 8c75e4f

File tree

14 files changed

+196
-255
lines changed

14 files changed

+196
-255
lines changed

‎package.json

-3
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,6 @@
146146
"@types/ol-ext": "npm:@siedlerchr/[email protected]",
147147
"@types/papaparse": "5.3.7",
148148
"@types/pluralize": "^0.0.29",
149-
"@types/postcss-prefix-selector": "^1",
150149
"@types/prismjs": "1.26.0",
151150
"@types/react": "18.2.28",
152151
"@types/react-beautiful-dnd": "13.1.3",
@@ -373,8 +372,6 @@
373372
"ol-ext": "4.0.6",
374373
"papaparse": "5.4.1",
375374
"pluralize": "^8.0.0",
376-
"postcss-prefix-selector": "^1.16.1",
377-
"postcss-prefixwrap": "^1.49.0",
378375
"prismjs": "1.29.0",
379376
"prop-types": "15.8.1",
380377
"pseudoizer": "^0.1.0",

‎packages/grafana-data/src/themes/createColors.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -220,8 +220,8 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
220220
};
221221

222222
background = {
223-
canvas: '#FAFAFA',
224-
primary: '#FFFFFF',
223+
primary: '#FAFAFA',
224+
canvas: '#FFFFFF',
225225
secondary: '#FAFAFA',
226226
};
227227

‎packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export const CustomScrollbar = ({
116116
passedProps.style['WebkitOverflowScrolling'] = 'auto';
117117
}
118118

119-
return <div {...passedProps} className="scrollbar-view" />;
119+
return <div {...passedProps} style={{ ...passedProps.style, overflow: 'auto' }} className="scrollbar-view" />;
120120
}, []);
121121

122122
const onScrollStop = useCallback(() => {

‎packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

+18-16
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,11 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
111111
/>
112112
)}
113113

114-
<Tooltip content={<TimePickerTooltip timeRange={value} timeZone={timeZone} />} placement="bottom" interactive>
114+
<Tooltip
115+
content={<TimePickerTooltip timeRange={value} timeZone={timeZone} />}
116+
placement="bottom-start"
117+
interactive
118+
>
115119
<ToolbarButton
116120
data-testid={selectors.components.TimePicker.openButton}
117121
aria-label={t('time-picker.range-picker.current-time-selected', 'Time range selected: {{currentTimeRange}}', {
@@ -162,27 +166,25 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
162166
/>
163167
)}
164168

165-
<Tooltip content={ZoomOutTooltip} placement="bottom">
166-
<ToolbarButton
167-
aria-label={t('time-picker.range-picker.zoom-out-button', 'Zoom out time range')}
168-
onClick={onZoom}
169-
icon="search-minus"
170-
variant={variant}
171-
/>
172-
</Tooltip>
169+
{/* <Tooltip content={ZoomOutTooltip} placement="bottom-start"> */}
170+
<ToolbarButton
171+
aria-label={t('time-picker.range-picker.zoom-out-button', 'Zoom out time range')}
172+
onClick={onZoom}
173+
icon="search-minus"
174+
variant={variant}
175+
/>
176+
{/* </Tooltip> */}
173177
</ButtonGroup>
174178
);
175179
}
176180

177181
TimeRangePicker.displayName = 'TimeRangePicker';
178182

179-
const ZoomOutTooltip = () => (
180-
<>
181-
<Trans i18nKey="time-picker.range-picker.zoom-out-tooltip">
182-
Time range zoom out <br /> CTRL+Z
183-
</Trans>
184-
</>
185-
);
183+
// const ZoomOutTooltip = () => (
184+
// <Trans i18nKey="time-picker.range-picker.zoom-out-tooltip">
185+
// Time range zoom out <br /> CTRL+Z
186+
// </Trans>
187+
// );
186188

187189
export const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => {
188190
const styles = useStyles2(getLabelStyles);

‎packages/grafana-ui/src/components/Portal/Portal.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,12 @@ export function Portal(props: PropsWithChildren<Props>) {
3636
};
3737
}, [portalRoot]);
3838

39-
return ReactDOM.createPortal(<div ref={forwardedRef}>{children}</div>, node.current);
39+
return ReactDOM.createPortal(
40+
<div data-qiankun="grafana-full-app" ref={forwardedRef}>
41+
{children}
42+
</div>,
43+
node.current
44+
);
4045
}
4146

4247
/** @internal */

‎packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
102102
);
103103

104104
return tooltip ? (
105-
<Tooltip content={tooltip} placement="bottom">
105+
<Tooltip content={tooltip} placement="bottom-start">
106106
{body}
107107
</Tooltip>
108108
) : (

‎packages/grafana-ui/src/themes/GlobalStyles/elements.ts

+121-121
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import { css, CSSObject } from '@emotion/react';
22

33
import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data';
44

5-
// import { getFocusStyles } from '../mixins';
5+
import { getFocusStyles } from '../mixins';
66

77
export function getElementStyles(theme: GrafanaTheme2) {
88
return css({
99
html: {
1010
MsOverflowStyle: 'scrollbar',
1111
WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
1212
height: '100%',
13-
// fontFamily: theme.typography.fontFamily,
14-
// lineHeight: theme.typography.body.lineHeight,
15-
// fontKerning: 'normal',
13+
fontFamily: theme.typography.fontFamily,
14+
lineHeight: theme.typography.body.lineHeight,
15+
fontKerning: 'normal',
1616
},
1717

1818
':root': {
@@ -28,129 +28,129 @@ export function getElementStyles(theme: GrafanaTheme2) {
2828
...getVariantStyles(theme.typography.body),
2929
},
3030

31-
// 'h1, .h1': getVariantStyles(theme.typography.h1),
32-
// 'h2, .h2': getVariantStyles(theme.typography.h2),
33-
// 'h3, .h3': getVariantStyles(theme.typography.h3),
34-
// 'h4, .h4': getVariantStyles(theme.typography.h4),
35-
// 'h5, .h5': getVariantStyles(theme.typography.h5),
36-
// 'h6, .h6': getVariantStyles(theme.typography.h6),
37-
38-
// p: {
39-
// margin: theme.spacing(0, 0, 2),
40-
// },
41-
42-
// button: {
43-
// letterSpacing: theme.typography.body.letterSpacing,
44-
45-
// '&:focus-visible': getFocusStyles(theme),
46-
// '&:focus': {
47-
// outline: 'none',
48-
// },
49-
// },
50-
51-
// // Ex: 14px base font * 85% = about 12px
52-
// small: {
53-
// fontSize: theme.typography.bodySmall.fontSize,
54-
// },
55-
56-
// 'b, strong': {
57-
// fontWeight: theme.typography.fontWeightMedium,
58-
// },
59-
60-
// em: {
61-
// fontStyle: 'italic',
62-
// color: theme.colors.text.primary,
63-
// },
64-
65-
// cite: {
66-
// fontStyle: 'normal',
67-
// },
68-
69-
// // Utility classes
70-
// '.muted': {
71-
// color: theme.colors.text.secondary,
72-
// },
73-
74-
// 'a.muted:hover, a.muted:focus': {
75-
// color: theme.colors.text.primary,
76-
// },
77-
78-
// '.text-warning': {
79-
// color: theme.colors.warning.text,
80-
81-
// '&:hover, &:focus': {
82-
// color: theme.colors.emphasize(theme.colors.warning.text, 0.15),
83-
// },
84-
// },
85-
86-
// '.text-error': {
87-
// color: theme.colors.error.text,
88-
89-
// '&:hover, &:focus': {
90-
// color: theme.colors.emphasize(theme.colors.error.text, 0.15),
91-
// },
92-
// },
93-
94-
// '.text-success': {
95-
// color: '$success-text-color',
96-
97-
// '&:hover, &:focus': {
98-
// color: theme.colors.emphasize(theme.colors.success.text, 0.15),
99-
// },
100-
// },
101-
102-
// a: {
103-
// cursor: 'pointer',
104-
// color: theme.colors.text.primary,
105-
// textDecoration: 'none',
106-
107-
// '&:focus': {
108-
// outline: 'none',
109-
// },
110-
111-
// '&:focus-visible': getFocusStyles(theme),
112-
113-
// '&:[disabled]': {
114-
// cursor: 'default',
115-
// // Need type assertion here due to the use of !important
116-
// // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978
117-
// // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
118-
// pointerEvents: 'none !important' as 'none',
119-
// },
120-
// },
121-
122-
// '.text-link': {
123-
// textDecoration: 'underline',
124-
// },
125-
126-
// '.text-left': {
127-
// textAlign: 'left',
128-
// },
129-
130-
// '.text-right': {
131-
// textAlign: 'right',
132-
// },
133-
134-
// '.text-center': {
135-
// textAlign: 'center',
136-
// },
137-
138-
// '.highlight-search-match': {
139-
// background: theme.components.textHighlight.background,
140-
// color: theme.components.textHighlight.text,
141-
// padding: 0,
142-
// },
31+
'h1, .h1': getVariantStyles(theme.typography.h1),
32+
'h2, .h2': getVariantStyles(theme.typography.h2),
33+
'h3, .h3': getVariantStyles(theme.typography.h3),
34+
'h4, .h4': getVariantStyles(theme.typography.h4),
35+
'h5, .h5': getVariantStyles(theme.typography.h5),
36+
'h6, .h6': getVariantStyles(theme.typography.h6),
37+
38+
p: {
39+
margin: theme.spacing(0, 0, 2),
40+
},
41+
42+
button: {
43+
letterSpacing: theme.typography.body.letterSpacing,
44+
45+
'&:focus-visible': getFocusStyles(theme),
46+
'&:focus': {
47+
outline: 'none',
48+
},
49+
},
50+
51+
// Ex: 14px base font * 85% = about 12px
52+
small: {
53+
fontSize: theme.typography.bodySmall.fontSize,
54+
},
55+
56+
'b, strong': {
57+
fontWeight: theme.typography.fontWeightMedium,
58+
},
59+
60+
em: {
61+
fontStyle: 'italic',
62+
color: theme.colors.text.primary,
63+
},
64+
65+
cite: {
66+
fontStyle: 'normal',
67+
},
68+
69+
// Utility classes
70+
'.muted': {
71+
color: theme.colors.text.secondary,
72+
},
73+
74+
'a.muted:hover, a.muted:focus': {
75+
color: theme.colors.text.primary,
76+
},
77+
78+
'.text-warning': {
79+
color: theme.colors.warning.text,
80+
81+
'&:hover, &:focus': {
82+
color: theme.colors.emphasize(theme.colors.warning.text, 0.15),
83+
},
84+
},
85+
86+
'.text-error': {
87+
color: theme.colors.error.text,
88+
89+
'&:hover, &:focus': {
90+
color: theme.colors.emphasize(theme.colors.error.text, 0.15),
91+
},
92+
},
93+
94+
'.text-success': {
95+
color: '$success-text-color',
96+
97+
'&:hover, &:focus': {
98+
color: theme.colors.emphasize(theme.colors.success.text, 0.15),
99+
},
100+
},
101+
102+
a: {
103+
cursor: 'pointer',
104+
color: theme.colors.text.primary,
105+
textDecoration: 'none',
106+
107+
'&:focus': {
108+
outline: 'none',
109+
},
110+
111+
'&:focus-visible': getFocusStyles(theme),
112+
113+
'&:[disabled]': {
114+
cursor: 'default',
115+
// Need type assertion here due to the use of !important
116+
// see https://github.com/frenic/csstype/issues/114#issuecomment-697201978
117+
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
118+
pointerEvents: 'none !important' as 'none',
119+
},
120+
},
121+
122+
'.text-link': {
123+
textDecoration: 'underline',
124+
},
125+
126+
'.text-left': {
127+
textAlign: 'left',
128+
},
129+
130+
'.text-right': {
131+
textAlign: 'right',
132+
},
133+
134+
'.text-center': {
135+
textAlign: 'center',
136+
},
137+
138+
'.highlight-search-match': {
139+
background: theme.components.textHighlight.background,
140+
color: theme.components.textHighlight.text,
141+
padding: 0,
142+
},
143143
});
144144
}
145145

146146
export function getVariantStyles(variant: ThemeTypographyVariant): CSSObject {
147147
return {
148148
margin: 0,
149-
// fontSize: variant.fontSize,
150-
// lineHeight: variant.lineHeight,
151-
// fontWeight: variant.fontWeight,
152-
// letterSpacing: variant.letterSpacing,
153-
// fontFamily: variant.fontFamily,
149+
fontSize: variant.fontSize,
150+
lineHeight: variant.lineHeight,
151+
fontWeight: variant.fontWeight,
152+
letterSpacing: variant.letterSpacing,
153+
fontFamily: variant.fontFamily,
154154
marginBottom: '0.45em',
155155
};
156156
}

0 commit comments

Comments
 (0)