diff --git a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss index 83f55f187..62648ef07 100644 --- a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss +++ b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.scss @@ -3,6 +3,7 @@ :host { align-items: center; display: flex; + justify-content: center; } .modus-checkbox { diff --git a/stencil-workspace/src/components/modus-table/models/table-context.models.ts b/stencil-workspace/src/components/modus-table/models/table-context.models.ts index 6031a5534..c27b8eef7 100644 --- a/stencil-workspace/src/components/modus-table/models/table-context.models.ts +++ b/stencil-workspace/src/components/modus-table/models/table-context.models.ts @@ -55,6 +55,8 @@ export interface TableContext { rowActions: TableRowActionWithOverflow[]; + rowActionSize: number; + rowsExpandable: boolean; rowSelection: boolean; diff --git a/stencil-workspace/src/components/modus-table/modus-table.tsx b/stencil-workspace/src/components/modus-table/modus-table.tsx index 45488b37d..a4d7691d2 100644 --- a/stencil-workspace/src/components/modus-table/modus-table.tsx +++ b/stencil-workspace/src/components/modus-table/modus-table.tsx @@ -172,6 +172,9 @@ export class ModusTable { /** (Optional) Actions that can be performed on each row. A maximum of 4 icons will be shown, including overflow menu and expand icons. */ @Prop() rowActions: ModusTableRowAction[] = []; + /**(Optional) The size of the row action's column*/ + @Prop() rowActionSize: number; + /** (Optional) To display expanded rows. */ @Prop() rowsExpandable = false; @Watch('rowsExpandable') onRowsExpandableChange(newVal: boolean) { @@ -520,6 +523,7 @@ export class ModusTable { rowSelectionChange: this.rowSelectionChange, rowExpanded: this.rowExpanded, rowActionClick: this.rowActionClick, + rowActionSize: this.rowActionSize, sortChange: this.sortChange, paginationChange: this.paginationChange, columnSizingChange: this.columnSizingChange, diff --git a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx index cb74c5282..e88b78d77 100644 --- a/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx +++ b/stencil-workspace/src/components/modus-table/parts/modus-table-header.tsx @@ -31,11 +31,12 @@ export const ModusTableHeader: FunctionalComponent = ({ rowSelection, componentId, rowActions, + rowActionSize, } = context; const tableHeadClass = { 'show-resize-cursor': getColumnResizing(), 'show-column-reorder-cursor': columnReorder }; const headerGroups: HeaderGroup[] = getHeaderGroups(); - const rowActionsLength = Math.min(Math.max(rowActions.length * 40, 90), 160); + const rowActionsLength = rowActionSize ? rowActionSize : Math.min(Math.max(rowActions.length * 40, 90), 160); return ( diff --git a/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx b/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx index 67c1e6910..95a2cce8c 100644 --- a/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx +++ b/stencil-workspace/src/components/modus-table/parts/row/selection/modus-table-header-checkbox.tsx @@ -14,12 +14,20 @@ export const ModusTableHeaderCheckbox: FunctionalComponent([ + ['compact', '38px'], + ['comfortable', '46px'], + ['relaxed', '46px'], + ]); + let checkboxSize: 'medium' | 'small' = 'medium'; if (density === 'compact') { checkboxSize = 'small'; } + + const width = densityWidths.get(density) || '46px'; return ( - + {rowSelectionOptions?.multiple && (