TableInputCSV: migrated styles from sass to emotion (#30554)

* TableInputCSV: migrated styles from sass to emotion

* placed the getSyles function at the end of the file

* made some changes

* fixes small nit

* fixes small nit

* replaced classNames with emotions cx function

* Replaced textarea with TextArea component

* updated some changes

* removed return type annotation

* fixed small import nit

packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import TableInputCSV from './TableInputCSV';
+import { TableInputCSV } from './TableInputCSV';
+import { Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { DataFrame } from '@grafana/data';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -9,7 +10,7 @@ export default {
   title: 'Forms/TableInputCSV',
   component: TableInputCSV,
   decorators: [withCenteredStory],
-};
+} as Meta;
 
 export const basic = () => {
   return (

packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import renderer from 'react-test-renderer';
-import TableInputCSV from './TableInputCSV';
+import { TableInputCSV } from './TableInputCSV';
 import { DataFrame } from '@grafana/data';
 
 describe('TableInputCSV', () => {

packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
 import debounce from 'lodash/debounce';
+import { css } from 'emotion';
 import { DataFrame, CSVConfig, readCSV } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
+import { GrafanaTheme } from '@grafana/data';
+import { Themeable } from '../../types/theme';
+import { TextArea } from '../TextArea/TextArea';
+import { stylesFactory, withTheme } from '../../themes';
 
-interface Props {
+interface Props extends Themeable {
   config?: CSVConfig;
   text: string;
   width: string | number;
@@ -19,7 +24,7 @@ interface State {
 /**
  * Expects the container div to have size set and will fill it 100%
  */
-export class TableInputCSV extends React.PureComponent<Props, State> {
+export class UnThemedTableInputCSV extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 
@@ -59,19 +64,20 @@ export class TableInputCSV extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { width, height } = this.props;
+    const { width, height, theme } = this.props;
     const { data } = this.state;
+    const styles = getStyles(theme);
     return (
-      <div className="gf-table-input-csv">
-        <textarea
+      <div className={styles.tableInputCsv}>
+        <TextArea
           style={{ width, height }}
           placeholder="Enter CSV here..."
           value={this.state.text}
           onChange={this.onTextChange}
-          className="gf-form-input"
+          className={styles.textarea}
         />
         {data && (
-          <footer>
+          <footer className={styles.footer}>
             {data.map((frame, index) => {
               return (
                 <span key={index}>
@@ -87,4 +93,26 @@ export class TableInputCSV extends React.PureComponent<Props, State> {
   }
 }
 
-export default TableInputCSV;
+export const TableInputCSV = withTheme(UnThemedTableInputCSV);
+TableInputCSV.displayName = 'TableInputCSV';
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    tableInputCsv: css`
+      position: relative;
+    `,
+    textarea: css`
+      height: 100%;
+      width: 100%;
+    `,
+    footer: css`
+      position: absolute;
+      bottom: 15px;
+      right: 15px;
+      border: 1px solid #222;
+      background: ${theme.palette.online};
+      padding: 1px ${theme.spacing.xs};
+      font-size: 80%;
+    `,
+  };
+});

packages/grafana-ui/src/components/TableInputCSV/_TableInputCSV.scss

@@ -1,18 +0,0 @@
-.gf-table-input-csv {
-  position: relative;
-}
-
-.gf-table-input-csv textarea {
-  height: 100%;
-  width: 100%;
-}
-
-.gf-table-input-csv footer {
-  position: absolute;
-  bottom: 15px;
-  right: 15px;
-  border: 1px solid #222;
-  background: $online;
-  padding: 1px 4px;
-  font-size: 80%;
-}

packages/grafana-ui/src/components/index.scss

@@ -4,7 +4,6 @@
 @import 'FormField/FormField';
 @import 'RefreshPicker/RefreshPicker';
 @import 'Forms/Legacy/Select/Select';
-@import 'TableInputCSV/TableInputCSV';
 @import 'TimePicker/TimeOfDayPicker';
 @import 'Tooltip/Tooltip';
 @import 'Slider/Slider';