patternfly
[feat] Ship pfe-markdown with typography styles
Currently the pfe-markdown component does not include any basic HTML styles... it just converts markdown to markup. But once it becomes markup, shouldn't it match the design system? If a page-builder adds:
<pfe-markdown >
<h3> hello world</h3>
</pfe-markdown>
the H3 doesn't pick up the styles unless pfe-base.css is also loaded on the page. Needing to load another stylesheet is a different requirement than most PFE components.
We could make the styles opt in, so that the PFE typographical styles are only applied if the page-builder adds the pfe-c-content class on it (or some other attribute) it can pick up the standard styles. Though it's also worth asking if the default styles should be opt-out. 🤔
<pfe-markdown class="pfe-c-content">
<h3> hello world</h3>
</pfe-markdown>
Basically add lines 12-35 to the sass file:
which results in 1KB minified, gzipped CSS.
Needing to load another stylesheet is a different requirement than most PFE components.
The following components also require external stylesheets:
- pfe-band
- pfe-card
- pfe-tab-panel
- pfe-accordion-panel
- pfe-datetime / pfe-number
- pfe-jump-links-panel
- pfe-modal
There might be others as well that I'm not seeing. Looking at that list, I would say a majority of our components have at least one region that does not provide any styling. Might be worth a discussion on the team level if that is desired or if we want to update all components to ship some amount of base styling.
Since these are all light-dom elements, the surrounding css context should apply. if the problem described is primarily taking place on CMS pages, can we solve it at that level by ensuring styles are applied from without?
Alternately, we may prefer to limit the use of (js-requiring) pfe-markdown in favour of server-side markdown rendering on CMS pages.
@zhawkins any of that resonate with you?
