Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Card Group]: Cards no longer have 1px border & Extra border on Gray90 & Gray100 (Regression) #8335

Closed
2 tasks done
proeung opened this issue Feb 18, 2022 · 0 comments · Fixed by #8373
Closed
2 tasks done

[Card Group]: Cards no longer have 1px border & Extra border on Gray90 & Gray100 (Regression) #8335

proeung opened this issue Feb 18, 2022 · 0 comments · Fixed by #8373
Assignees
@jkaeser
Labels
adopter: AEM used when component or pattern will be used by this adopter bug Something isn't working dev Needs some dev work follow-up: DDS engineering owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants severity 3 Affects minor functionality, has a workaround

Comments

@proeung
Copy link
Contributor

proeung commented Feb 18, 2022 •
edited
Loading

Engineering info:

Description


Screen Shot 2022-02-16 at 8 38 00 AM

Component(s) impacted

Card Group

Browser

Chrome, Safari, Firefox, Microsoft Edge

Carbon for IBM.com version

v1.31.0

Severity

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

Application/website

AEM

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://carbon-design-system.github.io/carbon-for-ibm-dotcom/next/web-components/?path=/story/components-card-group--default

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct
@proeung proeung added the bug Something isn't working label Feb 18, 2022
@proeung proeung added adopter: AEM used when component or pattern will be used by this adopter follow-up: DDS engineering owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants labels Feb 18, 2022
@proeung proeung added the severity 3 Affects minor functionality, has a workaround label Feb 18, 2022
This was referenced Feb 18, 2022
Merged
Closed
@proeung proeung changed the title [Card Group]: Cards within the Card Group no longer have 1px border (Regression) [Card Group]: Cards no longer have 1px border & Extra border on Gray90 & Gray100 (Regression) Feb 21, 2022
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 24, 2022
@jkaeser
fix(card-group): get grid mode knob working (carbon-design-system#8335)
d589460
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 24, 2022
@jkaeser
fix(card-group): prevent incorrect border color (carbon-design-system…
92a6e37 
…#8335)

This does not fix in Safari, which appears to exhibit a bug where the visibly
rendered border color does not match what the dev tools expect it to be when
using a custom property.
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 24, 2022
@jkaeser
fix(card-group): refactor borders (carbon-design-system#8335)
c6cd287 
Leveraging the CSS grid spec's "gap" property gives us the exact behavior we are
looking for while removing the need for complex inline border style logic.
@jkaeser jkaeser mentioned this issue Feb 24, 2022
Merged
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
Revert "fix(card-group): refactor borders (carbon-design-system#8335)"
6f9b94a 
This reverts commit c6cd287.
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
fix(card-group): remove empty cards when appropriate (carbon-design-s…
8e7837c 
…ystem#8335)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
fix(card-group): make border adjustments more readable (carbon-design…
cd4d75c 
…-system#8335)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
fix(storybook): do not prevent reload on theme change by default (car…
287e74b 
…bon-design-system#8335)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
fix(card-group): provide alternative re-render option (carbon-design-…
f8a9550 
…system#8335)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
fix(card-group): set dynamic border color value (carbon-design-system…
e699929 
…#8335)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
fix(card-group): update all instances of elements (carbon-design-syst…
bc08d4d 
…em#8335)
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
Revert "fix(card-group): update all instances of elements (carbon-des…
4c5f8df 
…ign-system#8335)"

This reverts commit bc08d4d.
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
Revert "fix(card-group): provide alternative re-render option (carbon…
4220e45 
…-design-system#8335)"

This reverts commit f8a9550.
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Feb 25, 2022
@jkaeser
Revert "fix(storybook): do not prevent reload on theme change by defa…
a301c3d 
…ult (carbon-design-system#8335)"

This reverts commit 287e74b.
@jeffchew jeffchew added the dev Needs some dev work label Mar 1, 2022
@jkaeser jkaeser mentioned this issue Mar 1, 2022
Closed
2 tasks
jkaeser added a commit to jkaeser/carbon-for-ibm-dotcom that referenced this issue Mar 2, 2022
@jkaeser
fix(card-group): prevent incorrect background on knob change (carbon-…
a1cbf3b 
…design-system#8335)
@kodiakhq kodiakhq bot closed this as completed in #8373 Mar 8, 2022
kodiakhq bot pushed a commit that referenced this issue Mar 8, 2022
@jkaeser
fix(card-group): fix grid mode knob and prevent incorrect border colo…
815ed71 
…rs (#8373)

### Related Ticket(s)

Resolves #8335 and #8301

### Description

This PR solves two problems: 
1. The default `DDSCardGroup` story's "grid mode" knob was not actually updating the grid mode, which resulted in what looked like a visual regression with the "outlined" mode.
2. There were circumstances in Storybook where changing the Carbon theme caused the wrong color border to be used on some grid items.

Additionally, it tidies up some related `DDSCardGroup` code.

### Changelog

**Changed**

- Fixes attribute name to make "grid mode" knob work.
- Prevents incorrect border colors on `DDSCardGroup` grid items.
- Update methods to clean up empty card items when appropriate.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "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
Assignees

@jkaeser jkaeser

Labels
adopter: AEM used when component or pattern will be used by this adopter bug Something isn't working dev Needs some dev work follow-up: DDS engineering owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants severity 3 Affects minor functionality, has a workaround
Projects
None yet
Milestone
No milestone
7 participants
@jeffchew @proeung @jkaeser @RichKummer @ljcarot @IgnacioBecerra @oliviaflory