Adding additional classes to vanillaStyles

General
1

I was wondering if there was any appetite for adding additional classNames to the array.table vanilla style set. For example, adding the following:

   // packages/vanilla-renderers/src/complex/TableArrayControl.tsx

    const tableLabelClass = getStyleAsClassName('array.table.header');
    const tableHeaderClass = getStyleAsClassName('array.table.tableHead');
    const tableRowClass = getStyleAsClassName('array.table.tableRow');
    const tableBodyClass = getStyleAsClassName('array.table.tableBody');
    const deleteButtonClass = getStyleAsClassName('array.table.tableRowDelete');
    const tableDataCellClass = getStyleAsClassName('array.table.tableDataCell');

  // packages/vanilla-renderers/src/styles/styles.ts
  {
    name: 'array.table.tableHead',
    classNames: ['array-table-tableHead-cell'],
  },
  {
    name: 'array.table.tableRow',
    classNames: ['array-table-data-row'],
  },
  {
    name: 'array.table.tableBody',
    classNames: ['array-table-body'],
  },
  {
    name: 'array.table.tableRowDeleteButton',
    classNames: ['array-table-row-delete-button'],
  },
  {
    name: 'array.table.tableDataCell',
    classNames: ['array-table-row-data-cell'],
  },

This would allow more flexibility around styling the vanilla table (which is the only array renderer for that suite). I am attempting to match designs and adding those locally has been the only way I was able to achieve the look I want. Note that the screenshot isn’t quite where I need it yet, but much closer than when I was using the available style props outlined here.

image
image896×444 19.3 KB

Let me know if a PR would be appreciated!

2

Hi @dclark27,

Eventually we would like to see every single HTML element rendered by the vanilla renderers to be separately styleable. So if your PR moves us a step closer to this goal then we will definitely take a look at it :+1:

We actually have a different renderer: It’s the ArrayControlRenderer. That one renders the array entries vertically after each other with their own UI schemas instead of rendering a table.