Chore: fixed text-alignment on hovering tableCells (#27311)

## FilterableTableCell

### added
- added `display: inline-flex` and `align-items: center` to
  `tableCellWrapper` class
- added `flex: 1` to `tableCell` class

### removed
- unused imports
- removed ternary if since it has no use anymore
- removed `tableCellWrapper` style definition from stylesFactory
This commit is contained in:
Michel Engelen 2020-09-08 18:20:44 +02:00 committed by GitHub
parent b2fe359a5e
commit 5b6e156934
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 18 deletions

View File

@ -1,10 +1,9 @@
import React, { FC, useCallback, useState } from 'react';
import { TableCellProps } from 'react-table';
import { GrafanaTheme } from '@grafana/data';
import { css, cx } from 'emotion';
import { css } from 'emotion';
import { stylesFactory, useTheme } from '../../themes';
import { TableStyles } from './styles';
import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableFilterActionCallback } from './types';
import { Icon, Tooltip } from '..';
import { Props, renderCell } from './TableCell';
@ -35,15 +34,10 @@ export const FilterableTableCell: FC<FilterableTableCellProps> = ({
[cell, field, onCellFilterAdded]
);
const theme = useTheme();
const styles = getFilterableTableCellStyles(theme, tableStyles);
const styles = getFilterableTableCellStyles(theme);
return (
<div
{...cellProps}
className={showFilters ? styles.tableCellWrapper : tableStyles.tableCellWrapper}
onMouseOver={onMouseOver}
onMouseLeave={onMouseLeave}
>
<div {...cellProps} className={tableStyles.tableCellWrapper} onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
{renderCell(cell, field, tableStyles)}
{showFilters && cell.value && (
<div className={styles.filterWrapper}>
@ -63,15 +57,7 @@ export const FilterableTableCell: FC<FilterableTableCellProps> = ({
);
};
const getFilterableTableCellStyles = stylesFactory((theme: GrafanaTheme, tableStyles: TableStyles) => ({
tableCellWrapper: cx(
tableStyles.tableCellWrapper,
css`
display: inline-flex;
justify-content: space-between;
align-items: center;
`
),
const getFilterableTableCellStyles = stylesFactory((theme: GrafanaTheme) => ({
filterWrapper: css`
label: filterWrapper;
display: inline-flex;

View File

@ -89,6 +89,8 @@ export const getTableStyles = stylesFactory(
`,
tableCellWrapper: css`
border-right: 1px solid ${borderColor};
display: inline-flex;
align-items: center;
height: 100%;
&:last-child {
@ -107,6 +109,7 @@ export const getTableStyles = stylesFactory(
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex: 1;
`,
overflow: css`
overflow: hidden;