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]: Card copy doesn't properly convert markdown to HTML #7481

Closed
2 tasks done
emyarod opened this issue Oct 21, 2021 · 1 comment
Closed
2 tasks done

[Card]: Card copy doesn't properly convert markdown to HTML #7481

emyarod opened this issue Oct 21, 2021 · 1 comment
Assignees
@IgnacioBecerra
Labels
bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed

Comments

@emyarod
Copy link
Member

emyarod commented Oct 21, 2021

Description

When passing markdown into the Card copy, the markdown should be converted to formatted HTML

image

Component(s) impacted

Card

Browser

No response

Carbon for IBM.com version

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

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://ibmdotcom-web-components-canary.mybluemix.net/?path=/story/components-card--default

Steps to reproduce the issue (if applicable)

Pass markdown into the Card copy and observe that it is not formatted as expected

Release date (if applicable)

No response

Code of Conduct
@emyarod emyarod added bug Something isn't working package: web components Work necessary for the IBM.com Library web components package labels Oct 21, 2021
@emyarod
Copy link
Member Author

emyarod commented Oct 21, 2021

this issue is also present in Content section

@RobertaJHahn RobertaJHahn added dev Needs some dev work severity 4 Affects minor functionality, no workaround needed labels Oct 26, 2021
@jeffchew jeffchew added this to the Sprint 21-25 milestone Oct 26, 2021
@IgnacioBecerra IgnacioBecerra self-assigned this Dec 6, 2021
@IgnacioBecerra IgnacioBecerra mentioned this issue Dec 13, 2021
Merged
@jeffchew jeffchew removed this from the Sprint 21-25 milestone Jan 5, 2022
kodiakhq bot pushed a commit that referenced this issue Jan 5, 2022
@IgnacioBecerra
fix(card): ensure copy can render markdown (#7871)
7b35d2d 
### Related Ticket(s)
#7481

### Description
This PR ensures that the copy elements in Card and Content Section can render markdown properly. The approach used in Card queries the slotted `p` tag and applies the markdown utility function. While a simpler method may be creating a `card-copy` component that extends `DDSMarkdown`, I refrained from doing so to avoid a breaking change for adopters using Card. Feel free to let me know what you think about doing that approach instead and simply mentioning it in the release notes.

Note: 
Testing markdown in Storybook seems to only work once (i.e. inputting `*test*`, deleting it, and trying the same thing will result in the text being wrapped in asterisks without formatting. 

However, if an adopter uses markdown in the copy of the Card component, it will render properly.

<img width="407" alt="Screen Shot 2021-12-13 at 3 10 55 PM" src="https://user-images.githubusercontent.com/24970122/145907648-f0c2d1d5-6ee5-4996-84aa-a3e33480bf0f.png">

### Changelog

**Changed**

- Card copy can now use markdown
- Content section copy now extends `DDSMarkdown` component

<!-- 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) -->
@jeffchew jeffchew closed this as completed Jan 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@IgnacioBecerra IgnacioBecerra

Labels
bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@kennylam @jeffchew @emyarod @shixiedesign @ljcarot @IgnacioBecerra @oliviaflory @RobertaJHahn