Closed Anastasiia-Boleiko closed 11 months ago
As a workaround for now, you can use the --calcite-internal-table-cell-background
to set the cell background, and --calcite-ui-focus-color
for the focused ring, if you'd like to match that: https://codepen.io/mac_and_cheese/pen/abXMpRx?editors=1000
Currently, the border color is set partially by the parent row as well, we may need to change how that is applied if we want folks to be able to easily configure border, per cell, via css. We might not want to expose this at all, and remove the non functioning public css var.
@macandcheese Thanks a lot for a quick response! 😊 I think the proposed workaround serves our case. Thanks a lot 👍
Installed and assigned for verification.
Verified in 2.1.0-next.10
with the following:
<style>
.error {
--calcite-table-cell-background: rgba(200, 50, 20, 0.15);
}
</style>
<calcite-table caption="Simple table">
<calcite-table-row slot="table-header">
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
<calcite-table-header heading="Heading" description="Description"></calcite-table-header>
<calcite-table-header heading="Heading" alignment="end"></calcite-table-header>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell class="error">cell content</calcite-table-cell>
<calcite-table-cell>cell content</calcite-table-cell>
<calcite-table-cell class="error">cell content</calcite-table-cell>
<calcite-table-cell alignment="end">cell content</calcite-table-cell>
</calcite-table-row>
<calcite-table-row>
<calcite-table-cell>cell content</calcite-table-cell>
<calcite-table-cell>cell content</calcite-table-cell>
<calcite-table-cell>cell content</calcite-table-cell>
<calcite-table-cell alignment="end">cell content</calcite-table-cell>
</calcite-table-row>
Check existing issues
Actual Behavior
Applying
--calcite-table-cell-background
and--calcite-table-cell-border-color
does not work.Expected Behavior
Properties can be applied to a cell.
Reproduction Sample
https://codepen.io/anastasiia-zrh/pen/qBgvbYq?editors=1100
Reproduction Steps
Reproduction Version
v1.11.0
Relevant Info
No response
Regression?
No response
Priority impact
p0 - emergency
Impact
This feature is needed for the redesigned component that will be released in Feb 2024. Code freeze is in the first half of January.
Calcite package
Esri team
ArcGIS Urban