vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #6738 - DataTable: size variant still using hardcode size

pull/7064/merge
Cagatay Civici 2025-01-14 15:10:50 +03:00
parent d4c6dbfc1f
commit dcaeb76411
6 changed files with 256 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/primevue/src/datatable/style/DataTableStyle.js
View File

@ -511,43 +511,43 @@ const theme = ({ dt }) => `
} }
.p-datatable.p-datatable-sm .p-datatable-header { .p-datatable.p-datatable-sm .p-datatable-header {
padding: 0.375rem 0.5rem; padding: ${dt('datatable.header.sm.padding')};
} }
.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
padding: 0.375rem 0.5rem; padding: ${dt('datatable.header.cell.sm.padding')};
} }
.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
padding: 0.375rem 0.5rem; padding: ${dt('datatable.body.cell.sm.padding')};
} }
.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
padding: 0.375rem 0.5rem; padding: ${dt('datatable.footer.cell.sm.padding')};
} }
.p-datatable.p-datatable-sm .p-datatable-footer { .p-datatable.p-datatable-sm .p-datatable-footer {
padding: 0.375rem 0.5rem; padding: ${dt('datatable.footer.sm.padding')};
} }
.p-datatable.p-datatable-lg .p-datatable-header { .p-datatable.p-datatable-lg .p-datatable-header {
padding: 1rem 1.25rem; padding: ${dt('datatable.header.lg.padding')};
} }
.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
padding: 1rem 1.25rem; padding: ${dt('datatable.header.cell.lg.padding')};
} }
.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td { .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
padding: 1rem 1.25rem; padding: ${dt('datatable.body.lg.padding')};
} }
.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td { .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
padding: 1rem 1.25rem; padding: ${dt('datatable.footer.cell.lg.padding')};
} }
.p-datatable.p-datatable-lg .p-datatable-footer { .p-datatable.p-datatable-lg .p-datatable-footer {
padding: 1rem 1.25rem; padding: ${dt('datatable.footer.lg.padding')};
} }
.p-datatable-row-toggle-button { .p-datatable-row-toggle-button {

38
packages/themes/src/presets/aura/datatable/index.js
View File

@ -7,7 +7,13 @@ export default {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
borderWidth: '0 0 1px 0', borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
headerCell: { headerCell: {
background: '{content.background}', background: '{content.background}',
@ -25,6 +31,12 @@ export default {
color: '{focus.ring.color}', color: '{focus.ring.color}',
offset: '-1px', offset: '-1px',
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
},
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
} }
}, },
columnTitle: { columnTitle: {
@ -47,13 +59,25 @@ export default {
}, },
bodyCell: { bodyCell: {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
footerCell: { footerCell: {
background: '{content.background}', background: '{content.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
columnFooter: { columnFooter: {
fontWeight: '600' fontWeight: '600'
@ -63,7 +87,13 @@ export default {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
borderWidth: '0 0 1px 0', borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
dropPoint: { dropPoint: {
color: '{primary.color}' color: '{primary.color}'

38
packages/themes/src/presets/lara/datatable/index.js
View File

@ -5,7 +5,13 @@ export default {
header: { header: {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
borderWidth: '1px 0 1px 0', borderWidth: '1px 0 1px 0',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
headerCell: { headerCell: {
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
@ -20,6 +26,12 @@ export default {
color: '{focus.ring.color}', color: '{focus.ring.color}',
offset: '{focus.ring.offset}', offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}' shadow: 'inset {focus.ring.shadow}'
},
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
} }
}, },
columnTitle: { columnTitle: {
@ -42,11 +54,23 @@ export default {
}, },
bodyCell: { bodyCell: {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
footerCell: { footerCell: {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
columnFooter: { columnFooter: {
fontWeight: '700' fontWeight: '700'
@ -54,7 +78,13 @@ export default {
footer: { footer: {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
borderWidth: '0 0 1px 0', borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
dropPoint: { dropPoint: {
color: '{primary.color}' color: '{primary.color}'

38
packages/themes/src/presets/material/datatable/index.js
View File

@ -7,7 +7,13 @@ export default {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
borderWidth: '0 0 1px 0', borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
headerCell: { headerCell: {
background: '{content.background}', background: '{content.background}',
@ -25,6 +31,12 @@ export default {
color: '{focus.ring.color}', color: '{focus.ring.color}',
offset: '-1px', offset: '-1px',
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
},
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
} }
}, },
columnTitle: { columnTitle: {
@ -47,13 +59,25 @@ export default {
}, },
bodyCell: { bodyCell: {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
footerCell: { footerCell: {
background: '{content.background}', background: '{content.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
columnFooter: { columnFooter: {
fontWeight: '600' fontWeight: '600'
@ -63,7 +87,13 @@ export default {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
borderWidth: '0 0 1px 0', borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
dropPoint: { dropPoint: {
color: '{primary.color}' color: '{primary.color}'

38
packages/themes/src/presets/nora/datatable/index.js
View File

@ -7,7 +7,13 @@ export default {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
borderWidth: '1px 0 1px 0', borderWidth: '1px 0 1px 0',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
headerCell: { headerCell: {
background: '{content.background}', background: '{content.background}',
@ -25,6 +31,12 @@ export default {
color: '{focus.ring.color}', color: '{focus.ring.color}',
offset: '-1px', offset: '-1px',
shadow: '{focus.ring.shadow}' shadow: '{focus.ring.shadow}'
},
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
} }
}, },
columnTitle: { columnTitle: {
@ -47,13 +59,25 @@ export default {
}, },
bodyCell: { bodyCell: {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
footerCell: { footerCell: {
background: '{content.background}', background: '{content.background}',
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
columnFooter: { columnFooter: {
fontWeight: '700' fontWeight: '700'
@ -63,7 +87,13 @@ export default {
borderColor: '{datatable.border.color}', borderColor: '{datatable.border.color}',
color: '{content.color}', color: '{content.color}',
borderWidth: '0 0 1px 0', borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem' padding: '0.75rem 1rem',
sm: {
padding: '0.375rem 0.5rem'
},
lg: {
padding: '1rem 1.25rem'
}
}, },
dropPoint: { dropPoint: {
color: '{primary.color}' color: '{primary.color}'

110
packages/themes/types/datatable/index.d.ts vendored
View File

@ -62,6 +62,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
* @designToken datatable.header.padding * @designToken datatable.header.padding
*/ */
padding?: string; padding?: string;
/**
* Sm of header
*/
sm?: {
/**
* Sm padding of header
*
* @designToken datatable.header.sm.padding
*/
padding?: string;
};
/**
* Lg of header
*/
lg?: {
/**
* Lg padding of header
*
* @designToken datatable.header.lg.padding
*/
padding?: string;
};
}; };
/** /**
* Used to pass tokens of the header cell section * Used to pass tokens of the header cell section
@ -156,6 +178,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
*/ */
shadow?: string; shadow?: string;
}; };
/**
* Sm of header cell
*/
sm?: {
/**
* Sm padding of header cell
*
* @designToken datatable.header.cell.sm.padding
*/
padding?: string;
};
/**
* Lg of header cell
*/
lg?: {
/**
* Lg padding of header cell
*
* @designToken datatable.header.cell.lg.padding
*/
padding?: string;
};
}; };
/** /**
* Used to pass tokens of the column title section * Used to pass tokens of the column title section
@ -272,6 +316,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
* @designToken datatable.body.cell.selected.border.color * @designToken datatable.body.cell.selected.border.color
*/ */
selectedBorderColor?: string; selectedBorderColor?: string;
/**
* Sm of body cell
*/
sm?: {
/**
* Sm padding of body cell
*
* @designToken datatable.body.cell.sm.padding
*/
padding?: string;
};
/**
* Lg of body cell
*/
lg?: {
/**
* Lg padding of body cell
*
* @designToken datatable.body.cell.lg.padding
*/
padding?: string;
};
}; };
/** /**
* Used to pass tokens of the footer cell section * Used to pass tokens of the footer cell section
@ -301,6 +367,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
* @designToken datatable.footer.cell.padding * @designToken datatable.footer.cell.padding
*/ */
padding?: string; padding?: string;
/**
* Sm of footer cell
*/
sm?: {
/**
* Sm padding of footer cell
*
* @designToken datatable.footer.cell.sm.padding
*/
padding?: string;
};
/**
* Lg of footer cell
*/
lg?: {
/**
* Lg padding of footer cell
*
* @designToken datatable.footer.cell.lg.padding
*/
padding?: string;
};
}; };
/** /**
* Used to pass tokens of the column footer section * Used to pass tokens of the column footer section
@ -347,6 +435,28 @@ export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableD
* @designToken datatable.footer.padding * @designToken datatable.footer.padding
*/ */
padding?: string; padding?: string;
/**
* Sm of footer
*/
sm?: {
/**
* Sm padding of footer
*
* @designToken datatable.footer.sm.padding
*/
padding?: string;
};
/**
* Lg of footer
*/
lg?: {
/**
* Lg padding of footer
*
* @designToken datatable.footer.lg.padding
*/
padding?: string;
};
}; };
/** /**
* Used to pass tokens of the drop point section * Used to pass tokens of the drop point section