Merge pull request #49 from grafana/src/remove-deprecated

Chore: Remove deprecated theme functions/methods/types

Author: srclosson

package.json

@@ -17,8 +17,8 @@
     "@grafana/data": "^8.4.7",
     "@grafana/runtime": "^8.4.7",
     "@grafana/toolkit": "^8.4.7",
-    "@grafana/tsconfig": "^1.0.0-rc1",
     "@grafana/ui": "^8.4.7",
+    "@grafana/tsconfig": "1.2.0-rc1",
     "@types/chance": "^1.1.0",
     "@types/memoize-one": "^5.1.2",
     "@types/react-calendar": "^3.1.2",

src/components/DataLinks/DataLinks.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import { css } from '@emotion/css';
-import { Button, stylesFactory, useTheme } from '@grafana/ui';
+import { Button, useTheme2 } from '@grafana/ui';
 import {
-  GrafanaTheme,
+  GrafanaTheme2,
   VariableOrigin,
   DataLinkBuiltInVars,
 } from '@grafana/data';
 import { DataLinkConfig } from './types';
 import { DataLink } from './DataLink';
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
+const getStyles = ((theme: GrafanaTheme2) => ({
   infoText: css`
-    padding-bottom: ${theme.spacing.md};
-    color: ${theme.colors.textWeak};
+    padding-bottom: ${theme.v1.spacing.md};
+    color: ${theme.v1.colors.textWeak};
   `,
   dataLink: css`
-    margin-bottom: ${theme.spacing.sm};
+    margin-bottom: ${theme.v1.spacing.sm};
   `,
 }));
 
@@ -25,7 +25,7 @@ type Props = {
 };
 export const DataLinks = (props: Props) => {
   const { value, onChange } = props;
-  const theme = useTheme();
+  const theme = useTheme2();
   const styles = getStyles(theme);
 
   return (

src/components/DatePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import Calendar from 'react-calendar';
-import { useTheme, ClickOutsideWrapper, Icon } from '@grafana/ui';
+import { useTheme2, ClickOutsideWrapper, Icon } from '@grafana/ui';
 import { getStyles, getBodyStyles } from './styles';
 
 export interface DatePickerProps {
@@ -11,7 +11,7 @@ export interface DatePickerProps {
 }
 
 export const DatePicker = memo<DatePickerProps>((props) => {
-  const theme = useTheme();
+  const theme = useTheme2();
   const styles = getStyles(theme);
   const { isOpen, onClose } = props;
 
@@ -33,7 +33,7 @@ export const DatePicker = memo<DatePickerProps>((props) => {
 });
 
 const Body = memo<DatePickerProps>(({ value, onChange }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
   const styles = getBodyStyles(theme);
 
   return (

src/components/DatePicker/styles.ts

@@ -1,36 +1,36 @@
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 
-export const getStyles = ((theme: GrafanaTheme) => {
+export const getStyles = ((theme: GrafanaTheme2) => {
   const containerBorder = theme.isDark
-    ? theme.palette.dark9
-    : theme.palette.gray5;
+    ? theme.v1.palette.dark9
+    : theme.v1.palette.gray5;
 
   return {
     container: css`
       top: -1px;
       position: absolute;
       right: 544px;
-      box-shadow: 0px 0px 20px ${theme.colors.dropdownShadow};
-      background-color: ${theme.colors.bodyBg};
+      box-shadow: 0px 0px 20px ${theme.v1.colors.dropdownShadow};
+      background-color: ${theme.v1.colors.bodyBg};
       z-index: -1;
       border: 1px solid ${containerBorder};
       border-radius: 2px 0 0 2px;
 
       &:after {
         display: block;
-        background-color: ${theme.colors.bodyBg};
+        background-color: ${theme.v1.colors.bodyBg};
         width: 19px;
         height: 100%;
         content: '';
         position: absolute;
         top: 0;
         right: -19px;
-        border-left: 1px solid ${theme.colors.border1};
+        border-left: 1px solid ${theme.v1.colors.border1};
       }
     `,
     modal: css`
-      z-index: ${theme.zIndex.modal};
+      z-index: ${theme.v1.zIndex.modal};
     `,
     content: css`
       margin: 0 auto;
@@ -44,22 +44,22 @@ export const getStyles = ((theme: GrafanaTheme) => {
       left: 0;
       background: #202226;
       opacity: 0.7;
-      z-index: ${theme.zIndex.modalBackdrop};
+      z-index: ${theme.v1.zIndex.modalBackdrop};
       text-align: center;
     `,
   };
 });
 
-export const getBodyStyles = ((theme: GrafanaTheme) => {
+export const getBodyStyles = ((theme: GrafanaTheme2) => {
   const containerBorder = theme.isDark
-    ? theme.palette.dark9
-    : theme.palette.gray5;
+    ? theme.v1.palette.dark9
+    : theme.v1.palette.gray5;
 
   return {
     title: css`
       color: ${theme.colors.text};
-      background-color: ${theme.colors.bodyBg};
-      font-size: ${theme.typography.size.md};
+      background-color: ${theme.v1.colors.bodyBg};
+      font-size: ${theme.v1.typography.size.md};
       border: 1px solid transparent;
 
       &:hover {
@@ -69,10 +69,10 @@ export const getBodyStyles = ((theme: GrafanaTheme) => {
     body: css`
       z-index: ${theme.zIndex.modal};
       position: fixed;
-      background-color: ${theme.colors.bodyBg};
+      background-color: ${theme.v1.colors.bodyBg};
       width: 268px;
 
-      box-shadow: 0px 0px 20px ${theme.colors.dropdownShadow};
+      box-shadow: 0px 0px 20px ${theme.v1.colors.dropdownShadow};
       border: 1px solid ${containerBorder};
       border-radius: 2px 0 0 2px;
 
@@ -83,13 +83,13 @@ export const getBodyStyles = ((theme: GrafanaTheme) => {
         background-color: inherit;
         color: ${theme.colors.text};
         border: 0;
-        font-weight: ${theme.typography.weight.semibold};
+        font-weight: ${theme.v1.typography.weight.semibold};
       }
 
       .react-calendar__month-view__weekdays {
         background-color: inherit;
         text-align: center;
-        color: ${theme.palette.blue77};
+        color: ${theme.v1.palette.blue77};
 
         abbr {
           border: 0;
@@ -119,9 +119,9 @@ export const getBodyStyles = ((theme: GrafanaTheme) => {
 
       .react-calendar__tile--active,
       .react-calendar__tile--active:hover {
-        color: ${theme.palette.white};
-        font-weight: ${theme.typography.weight.semibold};
-        background: ${theme.palette.blue95};
+        color: ${theme.v1.palette.white};
+        font-weight: ${theme.v1.typography.weight.semibold};
+        background: ${theme.v1.palette.blue95};
         box-shadow: none;
         border: 0px;
       }
@@ -130,12 +130,12 @@ export const getBodyStyles = ((theme: GrafanaTheme) => {
       .react-calendar__tile--rangeStart {
         padding: 0;
         border: 0px;
-        color: ${theme.palette.white};
-        font-weight: ${theme.typography.weight.semibold};
-        background: ${theme.palette.blue95};
+        color: ${theme.v1.palette.white};
+        font-weight: ${theme.v1.typography.weight.semibold};
+        background: ${theme.v1.palette.blue95};
 
         abbr {
-          background-color: ${theme.palette.blue77};
+          background-color: ${theme.v1.palette.blue77};
           border-radius: 100px;
           display: block;
           padding-top: 2px;

tsconfig.json

@@ -1,13 +1,13 @@
+
 {
   "compilerOptions": {
-    "jsx": "react",
-    "baseUrl": "node_modules/@types",
-    "declarationDir": "dist",
+    "declarationDir": "dist/src",
+    "module": "commonjs",
     "outDir": "dist",
-    "rootDirs": [".", "stories"],
-    "module": "CommonJS"
+    "rootDirs": ["."],
+    "useUnknownInCatchVariables": false
   },
-  "include": ["src"],
+  "exclude": ["dist", "node_modules"],
   "extends": "@grafana/tsconfig",
-  "exclude": ["node_modules", "dist", "compiled"]
+  "include": ["src/**/*.ts", "../../public/app/types/jquery/*.ts"]
 }

yarn.lock

@@ -2350,12 +2350,7 @@
     url-loader "^2.0.1"
     webpack "4.41.5"
 
-"@grafana/tsconfig@^1.0.0-rc1":
-  version "1.0.0-rc1"
-  resolved "https://registry.yarnpkg.com/@grafana/tsconfig/-/tsconfig-1.0.0-rc1.tgz#d07ea16755a50cae21000113f30546b61647a200"
-  integrity sha512-nucKPGyzlSKYSiJk5RA8GzMdVWhdYNdF+Hh65AXxjD9PlY69JKr5wANj8bVdQboag6dgg0BFKqgKPyY+YtV4Iw==
-
-"@grafana/tsconfig@^1.2.0-rc1":
+"@grafana/[email protected]", "@grafana/tsconfig@^1.2.0-rc1":
   version "1.2.0-rc1"
   resolved "https://registry.yarnpkg.com/@grafana/tsconfig/-/tsconfig-1.2.0-rc1.tgz#10973c978ec95b0ea637511254b5f478bce04de7"
   integrity sha512-+SgQeBQ1pT6D/E3/dEdADqTrlgdIGuexUZ8EU+8KxQFKUeFeU7/3z/ayI2q/wpJ/Kr6WxBBNlrST6aOKia19Ag==