Skip to content

DataView: expose classNames for filter-chip internals and loader rows #846

Description

@ravisuhag

Summary

DataView.List renders its rows, cells, and group headers internally, and exposes classNames hooks for them (root, header, headerCell, row, cell, groupHeader, plus per-column cell/header and Filters.classNames.filterChips/addFilter). Two rendered parts still have no hook, so theming them means targeting hashed CSS-module classes ([class*="data-view-module_…"]), which are internal and can change between releases.

What has no hook

  1. Filter-chip internals. Filters.classNames.filterChips lands on the chip root only. The inner parts can't be reached: chip-label, operationText, operationValue, selectValue, removeIcon, removeIconContainer, leadingIcon.

  2. Loader / skeleton rows. When isLoading renders placeholder rows, there's no hook on the loader container or its rows — DataViewListClassNames covers real rows, not the loading state.

Proposed change

  1. Add a classNames object to FilterChip (surfaced through Filters) covering its inner parts.
  2. Add a loader (and/or loader-row) key to DataViewListClassNames.

Both follow the pattern the existing hooks already use: read an optional string from props, apply it to the element DataView already renders.

Willing to contribute

Happy to open a PR if the approach looks right.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions