Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
290 stars 75 forks source link

Calcite Table: Cell background and border styles do not work #8380

Closed Anastasiia-Boleiko closed 11 months ago

Anastasiia-Boleiko commented 11 months ago

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

  1. Create a table or use codepan example from the docs
  2. Try changing cell color and background using style parameters from the table cell docs

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

macandcheese commented 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

Screenshot 2023-12-08 at 2 22 17 PM

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.

Anastasiia-Boleiko commented 11 months ago

@macandcheese Thanks a lot for a quick response! 😊 I think the proposed workaround serves our case. Thanks a lot 👍

github-actions[bot] commented 11 months ago

Installed and assigned for verification.

geospatialem commented 11 months ago

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>