From 80ece8cf91544048bd10aaee08b3b53c8f480467 Mon Sep 17 00:00:00 2001 From: Stephanie Closson Date: Thu, 21 Jul 2022 15:19:47 -0300 Subject: [PATCH] remove deprecated theme functions/methods/types --- package.json | 2 +- src/components/DataLinks/DataLinks.tsx | 14 +++---- src/components/DatePicker/DatePicker.tsx | 6 +-- src/components/DatePicker/styles.ts | 52 ++++++++++++------------ tsconfig.json | 14 +++---- yarn.lock | 7 +--- 6 files changed, 45 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index 35d5cc0..ada20cb 100644 --- a/package.json +++ b/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", diff --git a/src/components/DataLinks/DataLinks.tsx b/src/components/DataLinks/DataLinks.tsx index 2be172d..9a9c127 100644 --- a/src/components/DataLinks/DataLinks.tsx +++ b/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 ( diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx index 99b1e59..acd217e 100644 --- a/src/components/DatePicker/DatePicker.tsx +++ b/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((props) => { - const theme = useTheme(); + const theme = useTheme2(); const styles = getStyles(theme); const { isOpen, onClose } = props; @@ -33,7 +33,7 @@ export const DatePicker = memo((props) => { }); const Body = memo(({ value, onChange }) => { - const theme = useTheme(); + const theme = useTheme2(); const styles = getBodyStyles(theme); return ( diff --git a/src/components/DatePicker/styles.ts b/src/components/DatePicker/styles.ts index 163dbc2..e7d72c8 100644 --- a/src/components/DatePicker/styles.ts +++ b/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; diff --git a/tsconfig.json b/tsconfig.json index 1800cf0..0df5832 100644 --- a/tsconfig.json +++ b/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"] } diff --git a/yarn.lock b/yarn.lock index ac7dedf..8948b13 100644 --- a/yarn.lock +++ b/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/tsconfig@1.2.0-rc1", "@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==