Implement designs for Paragraph component within Olivero for XB

ckrina → credited Alyciamjones → .

Adding credits to @jwitkowski79 and @Alyciamjones for the designs.

ckrina → credited jwitkowski79 → .

Adding some more info for the implementation.

Escalating to critical because @ckrina told me it is a must-have issue for the Experience Builder preview to be viable. I am not calling it a stable blocker, though, since the XB preview is not itself a stable blocker.

Hi @phenaproxima !

I created a new paragraph component with a size propriety and a content slot both are required.

I was able to test them using the below Twig

{% embed "drupal_cms_olivero:paragraph" with {
  size: 'xl',
  } only %}
  {% block content %}
    Lead Paragraph L it's urgent, but we don't have time in the next two years to test it, but we must prioritize it. At least we don't need to obfuscate it.
  {% endblock %}
{% endembed %}

Depending on the size, a different class name get assigned to each paragraph (paragraph-xl, paragraph-lg, ..)

Génial! Assigning to @pameeela for review.

Figma link added.

This need works -- I should replace slots with props and align it with XB

I saved without refreshing the issue and lost some data. Adding them back.

Hi @pameeela !

This issue is ready for testing.

I kept content as a slot and added examples.

** Font sizes stay the same in both Mobile and Desktop (XL: 24px, L: 16px, Base: 18px, S: 16px)

@boulaffasae thanks again :)

I pushed up a few tweaks, one to the naming just to make it a bit more clear. But I also think we need a prop for the text? Not sure how else this can work as that's the only way to modify it right? Or is there another component that would be used in the content slot? I couldn't figure it out at least.

I would recommend using a prop, there is multi-line string prop support in XB. No WYSIWYG editor yet, but this is the closest thing we have.

Ahh thank you, I was wondering but forgot to ask -- that is much better!

I applied the patch and checked the outcome.
I can see 4 styles available for paragraph.
I can see that 3/10 grid column is used.
Only the bottom margins seem to be varying for different styles.
Please check the attached screenshots.

Not sure what else needs to happen here, so reassigning to @pameeela.

I worked on it last so didn't RTBC. Anyone should feel free!

Taking a look...

Minor changes:

1. Removed attributes as it's auto-injected into SDCs, see 📌 Update SDDS SDCs attributes prop to align with XB Fixed for more details.
2. Moved textarea to be same as placement on feature component MR.
3. Changed the status to "experimental" per other discussions (though maybe the status will be removed).

Regarding HeikkiY's comment about variable usage in some cases and not in others, I too find this odd. But, given the timeline, I think that can be sorted in a follow-up issue post-launch. IMO the most pressing items are UX related and prop structure.

Given this, assuming my changes are okay, then I think this can be RTBCed.

Here's what it looks like with all styles:

desktop

mobile

I think we should park the CSS variable here:

📌 Post-launch Olivero CSS cleanup Active

I can't RTBC this issue because I update the MR. I'll see if I can find someone.

@kristen pol, I RTBC and commit my own stuff all the time. If it's had overall sign-off from someone else (@mherchel?) or you've only made a few relatively minor changes, I'm fine merging it.

Cool... let's do it :)

phenaproxima → credited heikkiy → .

Here's to moar components! Moar moar moar! Merged into 1.x.