[ic-data-table]: Icon only cells / columnAlignment / cellAlignment
Summary of the bug
When an icon is added to the table cell via the data object without any text...
const cols: IcDataTableColumnObject[] = [
{ key: 'projectName', title: 'Project Name', dataType: 'string' },
{
key: 'badges',
title: 'Badges',
dataType: 'string',
columnAlignment: { horizontal: 'center' },
},
];
const data = [
{
projectName: 'Project 1',
badges: {
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" /></svg>',
},
},
{
projectName: 'Project 2',
badges: {
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" /></svg>',
},
},
];
..it is not possible to change the positioning due to the empty ic-typography component taking up the remaining space. This ticket is to add an if statement which will not render ic-typography if icon is set but data is within the column key.
🪜 How to reproduce
Tell us the steps to reproduce the problem: View Stackblitz
📸 Screenshots or code
Use stackblitz link above to view the problem.
🖥 📱 Device
- Type: Desktop
- Device: N/A
- OS version: Windows
- Browser version: Chrome 127
🧐 Expected behaviour
The icon should appear in the centre of the cell set by columnAlignment within the column collection.
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given the columnAlignment horizontal center has been set
When the icon renders within a cell without any adjacent data
Then the icon should appear in the center of the cell
Additional info
A display: flex is applied to the cell at 576px and above so no additional styling updates are required on the cell.