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 => {
const classes = useStyles();
const { themeValues } = useTheme();
const datagridTheme = useDatagridTheme(readonly);
const datagridTheme = useDatagridTheme(readonly, readonly);
const editor = useRef<DataEditorRef>();
const customRenderers = useCustomCellRenderers();
@ -248,8 +248,10 @@ export const Datagrid: React.FC<DatagridProps> = ({
}
const overrideTheme = {
bgCell: themeValues.colors.background.surfaceNeutralHighlight,
bgCellMedium: themeValues.colors.background.surfaceNeutralHighlight,
bgCell:
themeValues.colors.background.interactiveNeutralSecondaryHovering,
bgCellMedium:
themeValues.colors.background.interactiveNeutralSecondaryHovering,
accentLight: undefined,
};
@ -404,7 +406,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
getRowThemeOverride={handleGetThemeOverride}
gridSelection={selection}
rowHeight={cellHeight}
headerHeight={cellHeight + 16}
headerHeight={cellHeight}
ref={editor}
onPaste
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 { useMemo } from "react";
export const cellHeight = 36;
export const cellHeight = 40;
const useStyles = makeStyles(
() => {
@ -33,7 +33,7 @@ const useStyles = makeStyles(
display: "flex",
alignItems: "center",
justifyContent: "center",
height: cellHeight + 16,
height: cellHeight,
},
columnPickerBackground: {
background: vars.colors.background.plain,
@ -205,23 +205,24 @@ export function useDatagridTheme(
accentFg: "transparent",
bgCell: themeValues.colors.background.plain,
bgHeader: themeValues.colors.background.plain,
bgHeaderHasFocus: themeValues.colors.background.plain,
bgHeaderHasFocus:
themeValues.colors.background.interactiveNeutralSecondaryHovering,
bgHeaderHovered: hasHeaderClickable
? themeValues.colors.background.surfaceNeutralHighlight
? themeValues.colors.background.interactiveNeutralSecondaryHovering
: themeValues.colors.background.plain,
bgBubbleSelected: themeValues.colors.background.plain,
textHeader: themeValues.colors.foreground.iconNeutralPlain,
borderColor: themeValues.colors.border.neutralHighlight,
fontFamily: "'Inter var', sans-serif",
baseFontStyle: themeValues.fontSize.bodySmall,
headerFontStyle: themeValues.fontSize.captionSmall,
headerFontStyle: themeValues.fontSize.bodySmall,
editorFontSize: themeValues.fontSize.bodySmall,
textMedium: themeValues.colors.background.interactiveNeutralDefault,
textGroupHeader: themeValues.colors.foreground.iconNeutralPlain,
textMedium: themeValues.colors.foreground.iconNeutralPlain,
textGroupHeader: themeValues.colors.foreground.iconNeutralDefault,
textBubble: themeValues.colors.background.interactiveNeutralDefault,
textDark: themeValues.colors.background.interactiveNeutralDefault,
textLight: themeValues.colors.background.interactiveNeutralDefault,
textHeaderSelected: themeValues.colors.foreground.textBrandDefault,
textDark: themeValues.colors.foreground.iconNeutralDefault,
textLight: themeValues.colors.foreground.iconNeutralDefault,
textHeader: themeValues.colors.foreground.iconNeutralDefault,
textHeaderSelected: themeValues.colors.background.plain,
cellHorizontalPadding: 8,
cellVerticalPadding: 8,
lineHeight: 20,
@ -232,8 +233,9 @@ export function useDatagridTheme(
const readonylDatagridTheme = useMemo(
() => ({
...datagridTheme,
accentColor: themeValues.colors.background.surfaceBrandDepressed,
accentLight: themeValues.colors.background.plain,
accentColor: themeValues.colors.background.decorativeSurfacePlain3,
accentLight:
themeValues.colors.background.interactiveNeutralSecondaryHovering,
}),
[themeValues, datagridTheme],
);