search

carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://carbon-for-ibm-products.netlify.app/
Apache License 2.0
89 stars 127 forks source link

Data table extensions, scrolling: Code and Figma border colors for frozen column are incorrect #5324

Open jjennings7 opened 1 month ago

jjennings7 commented 1 month ago

Note this issue is to fix the issue in Figma, and we will only be updating it in the (v11) C4IP All Theme Figma Kit and the v(v11) Gray theme Figma Kit. We also have a code issue for Storybook

Package

Carbon for IBM Products

Description

In Carbon 10 and 11, the frozen column border color is incorrect in both Figma and the Storybook code.

Figma

The border color in both v10 and v11 kits are incorrect. One is too dark and one is too light. Neither matches the original specs. Screenshot 2024-05-22 at 4 01 18 PM

Expected behavior The right border should be $active-light-ui in v10 which seems to translate to $border-subtle in v11.

Correct border color Screenshot 2024-05-22 at 4 16 06 PM

Storybook / code

In v1.72.3 (Carbon 10), the border color is the correct hex value, #c6c6c6, but the wrong token is assigned, $disabled-02. In addition, the border does not extend into the header cell. Screenshot 2024-05-22 at 3 50 35 PM

In 2.39.0 (Carbon 11), the border color is the correct hex value, #c6c6c6, but the wrong token is assigned, $disabled-02. Screenshot 2024-05-22 at 3 50 50 PM

Expected behavior The right border should be $active-light-ui in v10 which seems to translate to $border-subtle in v11. The border should be present on the entire frozen column, including the header cell.

Resources In issues #1980 and #2509, $active-light-ui is indicated as the correct border color. This information is also published in the PAL guidance.

Component(s) impacted

Figma (v10) Gray 10 - IBM Products (v11) Gray 10 - IBM Products

Storybook v1.72.3 (Carbon 10) - Datagrid - Frozen columns 2.39.0 (Carbon 11) - Datagrid - Frozen columns

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

all

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

DataStage

CodeSandbox or Stackblitz example

https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-datagrid--frozen-columns&globals=viewport:basic

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

elycheea commented 1 month ago

(Ignore that design issue. Realized we could probably use this parent issue for Figma kit after I split off the code portion into a separate issue.)