feat(Table): itwinui-css 1.0.0 Class Refactor

[adamhock]

Changes

• Data Attribute
  • iui-condensed/extra-condensed replaced with data-iui-size="condensed/extra-condensed"
  • iui-selected replaced with aria-selected="true"
  • iui-table-body elements that contain selectable rows now have aria-multiselectable="true"
  • iui-disabled replaced with aria-disabled="true"
• Class name changes
  • iui-paginator-* changed to iui-table-paginator-*
  • iui-column-filter changed to iui-table-column-filter
  • iui-filter-button changed to iui-table-filter-button
  • iui-resizer-* changed to iui-table-resizer-*
  • iui-sort changed to iui-table-sort
  • iui-reorder-bar-* changed to iui-table-reorder-bar-*
  • iui-expanded-content changed to iui-table-expanded-content
  • iui-row-* changed to iui-table-row-*
  • iui-cell-* changed to iui-table-cell-*

Comments

• I couldn't find any examples where we use rows with statuses or use the iui-table-more-options class like we do in the CSS demos.
• Every row has aria-disabled and aria-selected attributes even if they are false. It seems excessive to set these two attributes for every row in a table. I'm not sure if there's a way to only add these attributes if they are true and remove them when they are false.
  • The same goes for every iui-table-body having an aria-multiselectable attribute and for each iui-table having a data-iui-size attribute. I don't think they're as big of issues here though since it's only applied once per table.
• The visual tests for Table will not pass because the Button Refactor hasn't been implemented in React yet and I wanted to leave that as a separate PR.

[adamhock]

If you want to have data attribute added only, when its value is true, you could do something like aria-disabled={disabled || undefined}

This has been fixed