[card-group]: Borders / padding is LTR specific for the dds-card-group component #11755
Closed
2 tasks done
Labels
bug
Something isn't working
dev
Needs some dev work
owner: Innovation Team
used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants
v1
Comments
m4olivei
added
the
owner: Innovation Team
m4olivei
changed the title
kodiakhq bot
pushed a commit
that referenced
this issue
May 3, 2024
### Related Ticket(s) Closes #11755 ### Description We programmatically set borders & padding for cards within `<dds-card-group>` elements, and we've only been accounting for LTR writing directions. This PR uses logical properties so these borders and paddings look correct in RTL documents. While working on this I noticed an issue where certain tracked elements could be undefined, causing an error that halts execution. Ultimately this resulted in the "empty" elements we generate for certain card groups to fail to be created, and the dark gray background appearing when it shouldn't. I fixed this with simple optional accessors. ### Testing Verify the borders and gaps between Cards appear correctly in [the Card Group story in the RTL deploy preview](https://ibmdotcom-web-components-rtl.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11760/index.html?path=/story/components-card-group--default). Compare to [the Card Group in the default deploy preview](https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11760/index.html?path=/story/components-card-group--default) if necessary. Specifically check that no background is visible in the last row's empty space when using the "Outlined cards (1px border)" **Grid mode** option. ### Changelog **Changed** - `<dds-card-group>` children will receive correct border & padding values in RTL writing mode documents. - Prevents undefined elements from halting code execution and causing gray background to show when it shouldn't. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
The dds-card-group component has LTR specific padding hardcoded, leading to layout issue in RTL languages. This is v1 specific. v2 uses outlines to achive borders in a CSS logical porperties friendly way.
Affected code in v1: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1/packages/web-components/src/components/card-group/card-group.ts#L247-L299
Component(s) impacted
Browser
Chrome
Carbon for IBM.com version
v1.43.0
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.
Application/website
ibm.com
Package
@carbon/web-components
CodeSandbox example
https://author-p131558-e1282741.adobeaemcloud.com/content/adobe-cms/language-masters/ar/test-page1.html?wcmmode=disabled
Steps to reproduce the issue (if applicable)
No response
Release date (if applicable)
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: