IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table Panel: Improve text wrapping on hover (#83642)

Browse Source 
* Fix up text wrapping

* Make sure there are basic cell styles

* codeincarnate/text-wrapping-hover-pt2/ run prettier

* Add comment for conditional

* Update condition

---------

Co-authored-by: jev forsberg <jev.forsberg@grafana.com>
This commit is contained in:
Kyle Cunningham 2024-03-01 11:20:14 -06:00 committed by GitHub
parent 33cb4f9bf4
commit 886d8fae36
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/grafana-ui/src/components/Table/DefaultCell.tsx
View File

@ -29,6 +29,8 @@ export const DefaultCell = (props: TableCellProps) => {
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
let value: string | ReactElement; let value: string | ReactElement;
const OG_TWEET_LENGTH = 140; // 🙏
const onMouseLeave = () => { const onMouseLeave = () => {
setHover(false); setHover(false);
}; };
@ -49,7 +51,9 @@ export const DefaultCell = (props: TableCellProps) => {
const isStringValue = typeof value === 'string'; const isStringValue = typeof value === 'string';
const cellStyle = getCellStyle(tableStyles, cellOptions, displayValue, inspectEnabled, isStringValue); // Text should wrap when the content length is less than or equal to the length of an OG tweet and it contains whitespace
const textShouldWrap = displayValue.text.length <= OG_TWEET_LENGTH && /\s/.test(displayValue.text);
const cellStyle = getCellStyle(tableStyles, cellOptions, displayValue, inspectEnabled, isStringValue, textShouldWrap);
if (isStringValue) { if (isStringValue) {
let justifyContent = cellProps.style?.justifyContent; let justifyContent = cellProps.style?.justifyContent;
@ -99,7 +103,8 @@ function getCellStyle(
cellOptions: TableCellOptions, cellOptions: TableCellOptions,
displayValue: DisplayValue, displayValue: DisplayValue,
disableOverflowOnHover = false, disableOverflowOnHover = false,
isStringValue = false isStringValue = false,
shouldWrapText = false
) { ) {
// How much to darken elements depends upon if we're in dark mode // How much to darken elements depends upon if we're in dark mode
const darkeningFactor = tableStyles.theme.isDark ? 1 : -0.7; const darkeningFactor = tableStyles.theme.isDark ? 1 : -0.7;
@ -128,13 +133,23 @@ function getCellStyle(
// If we have definied colors return those styles // If we have definied colors return those styles
// Otherwise we return default styles // Otherwise we return default styles
if (textColor !== undefined || bgColor !== undefined) { if (textColor !== undefined || bgColor !== undefined) {
return tableStyles.buildCellContainerStyle(textColor, bgColor, !disableOverflowOnHover, isStringValue); return tableStyles.buildCellContainerStyle(
textColor,
bgColor,
!disableOverflowOnHover,
isStringValue,
shouldWrapText
);
} }
if (isStringValue) { if (isStringValue) {
return disableOverflowOnHover ? tableStyles.cellContainerTextNoOverflow : tableStyles.cellContainerText; return disableOverflowOnHover
? tableStyles.buildCellContainerStyle(undefined, undefined, false, true, shouldWrapText)
: tableStyles.buildCellContainerStyle(undefined, undefined, true, true, shouldWrapText);
} else { } else {
return disableOverflowOnHover ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer; return disableOverflowOnHover
? tableStyles.buildCellContainerStyle(undefined, undefined, false, shouldWrapText)
: tableStyles.buildCellContainerStyle(undefined, undefined, true, false, shouldWrapText);
} }
} }

9
packages/grafana-ui/src/components/Table/styles.ts
View File

@ -15,7 +15,8 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
color?: string, color?: string,
background?: string, background?: string,
overflowOnHover?: boolean, overflowOnHover?: boolean,
asCellText?: boolean asCellText?: boolean,
textShouldWrap?: boolean
) => { ) => {
return css({ return css({
label: overflowOnHover ? 'cellContainerOverflow' : 'cellContainerNoOverflow', label: overflowOnHover ? 'cellContainerOverflow' : 'cellContainerNoOverflow',
@ -48,10 +49,10 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
'&:hover': { '&:hover': {
overflow: overflowOnHover ? 'visible' : undefined, overflow: overflowOnHover ? 'visible' : undefined,
width: overflowOnHover ? 'auto' : undefined, width: textShouldWrap ? 'auto' : 'auto !important',
height: overflowOnHover ? 'auto' : `${rowHeight - 1}px`, height: textShouldWrap ? 'auto !important' : `${rowHeight - 1}px`,
minHeight: `${rowHeight - 1}px`, minHeight: `${rowHeight - 1}px`,
wordBreak: overflowOnHover ? 'break-word' : undefined, wordBreak: textShouldWrap ? 'break-word' : undefined,
whiteSpace: overflowOnHover ? 'normal' : 'nowrap', whiteSpace: overflowOnHover ? 'normal' : 'nowrap',
boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined, boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined,
background: overflowOnHover ? background ?? theme.components.table.rowHoverBackground : undefined, background: overflowOnHover ? background ?? theme.components.table.rowHoverBackground : undefined,