DataView: support different alignment for text and numbers

[rogermattic]

Currently, the DataView component only supports left alignment for all content, whether it's numbers or text. As we explore using tables for analytics and financial reports, where there will be more numbers, we need to improve accessibility by supporting different alignments.

The basic alignment requirements:

• Numbers → right-aligned
  

• Text → left-aligned
  

This change will make the data easier for users to read and interpret.

[jameskoster]

Are there any other styles we might consider, for instance font-variant-numeric: tabular-nums;?

[oandregal]

For the record, I've grouped together issues related to "theming" in the dataviews component issue, so they are visible #55083

Consumers can already provide styles for fields, so this sounds like it's already possible? (these styles are provided by dataviews at the container level)

DataViews may want to provide default styles tied to field types. For example, a field type "number" could provide the styling defaults for them. However, there's two important details to consider:

• The types we support may be too coarse for consumers: a number may actually be a currency (which one?), percentage, scientific, postal code, etc. and all of them are different.
• Are the styles provided by DataViews opt-in or opt-opt? How do we make sure styles for a type do not conflict with styles provided by the consumer for a given field?

[jameskoster]

There are certain conventions that should probably be respected by default, not opt out. Aligning number fields right in table layout feels like one of those standards to me.

The types we support may be too coarse for consumers: a number may actually be a currency (which one?), percentage, scientific, postal code, etc. and all of them are different.

Could/should the API be expanded to include these details? Probably something to work out later, but aligning all number fields right seems like a reasonable place to start.

[rogermattic]

The types we support may be too coarse for consumers: a number may actually be a currency (which one?), percentage, scientific, postal code, etc. and all of them are different.

Fair. I believe postal codes shouldn't be considered as numbers and wonder if there's any we could exclude them?

Could/should the API be expanded to include these details? Probably something to work out later, but aligning all number fields right seems like a reasonable place to start.

Yes I agree this is the way to start.

Are the styles provided by DataViews opt-in or opt-opt? How do we make sure styles for a type do not conflict with styles provided by the consumer for a given field?

Interesting question. Would you mind expanding on that? I guess I don't really understand what styles the users can provide? Is this bold, italic etc?

There are certain conventions that should probably be respected by default, not opt out. Aligning number fields right in table layout feels like one of those standards to me.

I agree with @jameskoster.

[rogermattic]

Are there any other styles we might consider, for instance font-variant-numeric: tabular-nums;?

Yeah, exactly (I wondered if that should be a separate issue request, but...) for anything that is numbers only we should display it in tabular/monospace style.