djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Datagrid refinements (#3538)

Browse source 
* Increase row height

* Make header height consistent

* Make header text consistent

* Highlight header on column focus

* Apply consistent text colors

* Add visible hover to columns

* Adjust column select colors

* Use consistent hover color
This commit is contained in:
Timur Carpeev 2023-04-21 09:02:31 +02:00 committed by GitHub
parent 44ba16e7ee
commit 6271eba349
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/Datagrid/Datagrid.tsx
View file

@ -125,7 +125,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
}): ReactElement => { }): ReactElement => {
const classes = useStyles(); const classes = useStyles();
const { themeValues } = useTheme(); const { themeValues } = useTheme();
const datagridTheme = useDatagridTheme(readonly); const datagridTheme = useDatagridTheme(readonly, readonly);
const editor = useRef<DataEditorRef>(); const editor = useRef<DataEditorRef>();
const customRenderers = useCustomCellRenderers(); const customRenderers = useCustomCellRenderers();
@ -248,8 +248,10 @@ export const Datagrid: React.FC<DatagridProps> = ({
} }
const overrideTheme = { const overrideTheme = {
bgCell: themeValues.colors.background.surfaceNeutralHighlight, bgCell:
bgCellMedium: themeValues.colors.background.surfaceNeutralHighlight, themeValues.colors.background.interactiveNeutralSecondaryHovering,
bgCellMedium:
themeValues.colors.background.interactiveNeutralSecondaryHovering,
accentLight: undefined, accentLight: undefined,
}; };
@ -404,7 +406,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
getRowThemeOverride={handleGetThemeOverride} getRowThemeOverride={handleGetThemeOverride}
gridSelection={selection} gridSelection={selection}
rowHeight={cellHeight} rowHeight={cellHeight}
headerHeight={cellHeight + 16} headerHeight={cellHeight}
ref={editor} ref={editor}
onPaste onPaste
rightElementProps={{ rightElementProps={{

28
src/components/Datagrid/styles.ts
View file

@ -3,7 +3,7 @@ import { makeStyles } from "@saleor/macaw-ui";
import { useTheme, vars } from "@saleor/macaw-ui/next"; import { useTheme, vars } from "@saleor/macaw-ui/next";
import { useMemo } from "react"; import { useMemo } from "react";
export const cellHeight = 36; export const cellHeight = 40;
const useStyles = makeStyles( const useStyles = makeStyles(
() => { () => {
@ -33,7 +33,7 @@ const useStyles = makeStyles(
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
height: cellHeight + 16, height: cellHeight,
}, },
columnPickerBackground: { columnPickerBackground: {
background: vars.colors.background.plain, background: vars.colors.background.plain,
@ -205,23 +205,24 @@ export function useDatagridTheme(
accentFg: "transparent", accentFg: "transparent",
bgCell: themeValues.colors.background.plain, bgCell: themeValues.colors.background.plain,
bgHeader: themeValues.colors.background.plain, bgHeader: themeValues.colors.background.plain,
bgHeaderHasFocus: themeValues.colors.background.plain, bgHeaderHasFocus:
themeValues.colors.background.interactiveNeutralSecondaryHovering,
bgHeaderHovered: hasHeaderClickable bgHeaderHovered: hasHeaderClickable
? themeValues.colors.background.surfaceNeutralHighlight ? themeValues.colors.background.interactiveNeutralSecondaryHovering
: themeValues.colors.background.plain, : themeValues.colors.background.plain,
bgBubbleSelected: themeValues.colors.background.plain, bgBubbleSelected: themeValues.colors.background.plain,
textHeader: themeValues.colors.foreground.iconNeutralPlain,
borderColor: themeValues.colors.border.neutralHighlight, borderColor: themeValues.colors.border.neutralHighlight,
fontFamily: "'Inter var', sans-serif", fontFamily: "'Inter var', sans-serif",
baseFontStyle: themeValues.fontSize.bodySmall, baseFontStyle: themeValues.fontSize.bodySmall,
headerFontStyle: themeValues.fontSize.captionSmall, headerFontStyle: themeValues.fontSize.bodySmall,
editorFontSize: themeValues.fontSize.bodySmall, editorFontSize: themeValues.fontSize.bodySmall,
textMedium: themeValues.colors.background.interactiveNeutralDefault, textMedium: themeValues.colors.foreground.iconNeutralPlain,
textGroupHeader: themeValues.colors.foreground.iconNeutralPlain, textGroupHeader: themeValues.colors.foreground.iconNeutralDefault,
textBubble: themeValues.colors.background.interactiveNeutralDefault, textBubble: themeValues.colors.background.interactiveNeutralDefault,
textDark: themeValues.colors.background.interactiveNeutralDefault, textDark: themeValues.colors.foreground.iconNeutralDefault,
textLight: themeValues.colors.background.interactiveNeutralDefault, textLight: themeValues.colors.foreground.iconNeutralDefault,
textHeaderSelected: themeValues.colors.foreground.textBrandDefault, textHeader: themeValues.colors.foreground.iconNeutralDefault,
textHeaderSelected: themeValues.colors.background.plain,
cellHorizontalPadding: 8, cellHorizontalPadding: 8,
cellVerticalPadding: 8, cellVerticalPadding: 8,
lineHeight: 20, lineHeight: 20,
@ -232,8 +233,9 @@ export function useDatagridTheme(
const readonylDatagridTheme = useMemo( const readonylDatagridTheme = useMemo(
() => ({ () => ({
...datagridTheme, ...datagridTheme,
accentColor: themeValues.colors.background.surfaceBrandDepressed, accentColor: themeValues.colors.background.decorativeSurfacePlain3,
accentLight: themeValues.colors.background.plain, accentLight:
themeValues.colors.background.interactiveNeutralSecondaryHovering,
}), }),
[themeValues, datagridTheme], [themeValues, datagridTheme],
); );