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

[Carousel]: mixture of dds-card and dds-card-cta causing heading alignment issue - DPO Consulting #8247

Closed
2 tasks done
proeung opened this issue Feb 10, 2022 · 3 comments · Fixed by #8336
Closed
2 tasks done

[Carousel]: mixture of dds-card and dds-card-cta causing heading alignment issue - DPO Consulting #8247

proeung opened this issue Feb 10, 2022 · 3 comments · Fixed by #8336
Assignees
@proeung @IgnacioBecerra
Labels
adopter: AEM used when component or pattern will be used by this adopter adopter support 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 package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround

Comments

@proeung
Copy link
Contributor

proeung commented Feb 10, 2022 •
edited
Loading

Engineering info:

Description

  • The AEM team is noticing an alignment issue when there's a mixture of <dds-card> and <dds-card-cta> within the <dds-carousel> component.
  • If one of the first two cards has a heading with three lines, then the copy text of all cards align again, however, if a video card has the longest heading, then they do not align.
  • This might be an issue related to the sameHeight function is not calculating the video heading compared to the regular headings.

image-2022-02-09-17-15-11-703

Component(s) impacted

dds-carousel

Browser

Chrome, Safari, Firefox, Microsoft Edge

Carbon for IBM.com version

v1.30, Canary

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

AEM

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://codesandbox.io/s/gifted-blackburn-uk21f?file=/index.html

Steps to reproduce the issue (if applicable)

See CodeSandbox link to view the issue.

Release date (if applicable)

No response

Code of Conduct
@proeung proeung added the bug Something isn't working label Feb 10, 2022
@proeung proeung added adopter: AEM used when component or pattern will be used by this adopter owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants follow-up: innovation team severity 3 Affects minor functionality, has a workaround labels Feb 10, 2022
@jeffchew jeffchew added adopter support dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package and removed follow-up: innovation team labels Feb 14, 2022
@jeffchew
Copy link
Member

Should create a test scenario issue for this.

@proeung
Copy link
Contributor Author

proeung commented Feb 15, 2022

@jeffchew Yep! I'll create a new issue for adding a new SB variant that includes a mixture of dds-card and dds-card-cta so that we can use it in the e2e testing of this component. We'll account for this work in a separate ticket.

@proeung proeung mentioned this issue Feb 17, 2022
Closed
@proeung
Copy link
Contributor Author

proeung commented Feb 17, 2022 •
edited
Loading

@jeffchew @kennylam Here's an issue for the Carousel e2e testing (#8330), which should include a test for this variant so that we won't run into this alignment issue again. We'll take a look at this issue sometime next week.

@proeung proeung assigned proeung and unassigned andy-blum Feb 18, 2022
@proeung proeung mentioned this issue Feb 18, 2022
Merged
@proeung proeung linked a pull request Feb 18, 2022 that will close this issue
fix(carousel): apply same height function to heading used in dds-card-cta #8336
Merged
@IgnacioBecerra IgnacioBecerra self-assigned this Feb 24, 2022
@proeung proeung changed the title [Carousel]: mixture of dds-card and dds-card-cta causing heading alignment issue [Carousel]: mixture of dds-card and dds-card-cta causing heading alignment issue - DPO Consulting Feb 24, 2022
@kodiakhq kodiakhq bot closed this as completed in #8336 Mar 3, 2022
kodiakhq bot pushed a commit that referenced this issue Mar 3, 2022
@proeung
fix(carousel): apply same height function to heading used in dds-card…
a7f11f6 
…-cta (#8336)

### Related Ticket(s)

#8247

### Description

- This PR addresses the alignment issue seen when there's a mixture of `<dds-card>` and `<dds-card-cta>` within the `<dds-carousel>` component.

### Changelog

**New**

- Add a new SB variant called Carousel > Cards with Media - https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8336/index.html?path=/story/components-carousel--cards-with-media

**Removed**

- Removed `<dds-card-heading>` from `CardsWithVideos` as the card heading should be coming from the Mediacenter/Kaltura because this is the content usage when displaying a card with a video button.

<!-- 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

@proeung proeung

@IgnacioBecerra IgnacioBecerra

Labels
adopter: AEM used when component or pattern will be used by this adopter adopter support 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 package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Projects
None yet
Milestone
No milestone
7 participants
@jeffchew @proeung @emyarod @ljcarot @IgnacioBecerra @andy-blum @oliviaflory