ic-ui-kit icon indicating copy to clipboard operation
ic-ui-kit copied to clipboard

[ic-data-table]: Icon only cells / columnAlignment / cellAlignment

Open jd239 opened this issue 1 year ago • 0 comments

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.

jd239 avatar Aug 15 '24 12:08 jd239