karlbaumhauer commented 9 months ago

User Story

As a user of the Solid Design System, I would like to have a component, which formats default HTML elements like a, ul etc. without adding further classes on those elements, so that data from e. g. CKEditor or similar can be used without much processing. In addition spacing rules will be incorporated.

Documentation / Hand-off

Figma Branch

Example

<div class="sd-prose">
   <a href="#">I'm a link that looks like a sd-link</a>
   <ul>
       <li>I'm a list element that looks like sd-list</li>
       <li>I'm a list element that looks like sd-list</li>
   </ul>
</div>

Here all spacings between elements etc. would be fine and in addition the ul would look like sd-list sd-list--unordered and a like sd-link etc.

Technical Information

Check out this branch in the refinement: https://github.com/solid-design-system/solid/pull/930 => this branch is the basis and all declarations and samples from Figma need to be added to these files.
We use Tailwind typography plugin more or less as a base. See https://play.tailwindcss.com/8sZEQjKuQy for an example. => check out the Full Prose CSS below to find missing edge cases

Full Prose CSS


.prose{
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-bold);
  font-weight: 600
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  font-weight: 400;
  color: var(--tw-prose-counters)
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  color: var(--tw-prose-bullets)
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: open-quote
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: close-quote
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 900;
  color: inherit
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 800;
  color: inherit
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  display: block;
  margin-top: 2em;
  margin-bottom: 2em
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: "`"
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: "`"
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.875em
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.9em
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: none
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: none
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders)
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders)
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 0
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: baseline
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders)
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: top
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em
}

.prose{
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  margin-bottom: 0.5em
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0.375em
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0.375em
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em
}

.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em
}

.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em
}

.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em
}

.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  padding-left: 1.625em
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-right: 0
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-right: 0
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0
}

The functionality from ui-richtext will be completely replaced. Missing elements or special cases have to be incorporated in the project, e. g. columns.

This should be done by adapting the current styles, to make them work with .sd-prose, like e. g. shown here: https://github.com/solid-design-system/solid/pull/930/files#diff-c66aa3dc3413a1fe584db126911a3a3eb72f791486e81a0e2094b42c0b0cffbb

NOTE:

floating feature will not be implemented

columns feature will not be implemented

NOTE 2 - Know Bug in sd-list Currently our sd-list cannot combine a ul and ol due to some CSS issues. This need to be fixed first within this ticket before it can be added to sd-prose.

NOTE 3 - new feature in sd-copyright Currently our sd-copyright needs to be updated in order to get a new color token as it currently uses the same as the sd-paragraph => no differentiation possible.

Components detailed requirements

Like in Figma displayed, these are some more details about the requirements for the sd-prose:

[x] Nested lists (even mixture of ul and ol) work with sd-prose and sd-list (https://github.com/solid-design-system/solid/pull/930/files#diff-d33b1f0c4f5c1c619a9fd9c6d7e79d5e1d9ccc5d622a24f11ccaa9613ba8c28b)
[x] Spacing - all elements have spacings as decribed in figma
[x] Spacing - certain combinations have certain spacing to each other => see figma
[x] First child - no margin
[x] <hr> - horizontal rule -> sd-divider
[x] <h1> to <h5>
[x] <blockquote> quotation-marks
[x] <table> -> standard table formatting
[x] Compare provided styles with those from TailwindCSS to watch out for missing things
[x] Provide sd-prose as new style
[x] Inverted mode (but not for tables! => note in the docs, that tables cannot be used in inverted mode) (Example: https://github.com/solid-design-system/solid/pull/930/files#diff-c66aa3dc3413a1fe584db126911a3a3eb72f791486e81a0e2094b42c0b0cffbbR104-R107)
[x] CSS is structured in a way, that the file size of the styles are not getting super big – have a close look on final CSS definitions!
[x] Update <figcaption> in sd-media using additional text color (text.neutral-700)

Stories

[x] default - "Kitchen Sink" => shows all features in one story
[x] Inverted - shows the default story in inverted mode

Samples

[x] cover all displayed combination-samples (not single parts) from figma into one sample story.

Subtasks

[x] #1027
[x] #1026
[x] #1028
[ ] #1094
[ ] #1115

DoR

[x] Item has business value
[x] All subtasks have been estimated by the team
[x] Item is clear and well-defined
[x] Item dependencies have been identified

DoD

[ ] All subtasks have been closed

mariohamann commented 9 months ago

I believe that we will implement lists etc. as styles, too. Therefore this should be a style. As we already discussed introducing a sd-prose class (like TailwindCSS does es described here https://tailwindcss.com/docs/typography-plugin and shown e. g. here https://play.tailwindcss.com/uj1vGACRJA?layout=preview), this could be a great place to do this.

Only thing which would have to be considered is implement basic a styles, as this is currently only handled in sd-link or sd-interactive.

JasminaIlic commented 9 months ago

Hi:) Comment from my side as we are/will be using ui-richtext on different places: components we get/need transformation are: <h>, <a> , <p> and lists <ul>/<ol>. Sometimes ofcourse we get ui-link/sd-link because of icon info. Possibility to pass font size and text color would be appreciated (as richtext would be good fit for footnotes for example). There is also possibility of passing an anchor element to richtext (probably as component because of shadow doms).

karlbaumhauer commented 9 months ago

I believe that we will implement lists etc. as styles, too. Therefore this should be a style. As we already discussed introducing a sd-prose class (like TailwindCSS does es described here https://tailwindcss.com/docs/typography-plugin and shown e. g. here https://play.tailwindcss.com/uj1vGACRJA?layout=preview), this could be a great place to do this.

So we would have the following (previously components in the CL and used here for transformation):

headline
lists
link
paragraph

Is this correct? Isn't the paragraph already covered in the sd-display?

Only thing which would have to be considered is implement basic a styles, as this is currently only handled in sd-link or sd-interactive.

If we add the link as styles as well, couldn't this then be used in the sd-link and sd-interactive? Or was this your plan?

In general I still see kind of a need for a component that transforms / adds the style classes to the native HTML elements coming from a WYSYWIG editor. Or would you like the users to add the classes globally to their project?

coraliefeil commented 4 months ago

Topic is aligned with brand

sd-prose style based on https://tailwindcss.com/docs/typography-plugin like suggested No buttons No links Prevent text wrapping around images

Migration guide: Use CMS-text-image-video (maybe rename to e.g. CMS-text-media)

yoezlem commented 4 months ago

How do we handle the HTML tags? for example: if you use an anchor -> <a href="#"></a> this should automatically changed to sd-link.

mariohamann commented 4 months ago

Yah, so a will get the styles of sd-link (without the icon stuff). Some for the headlines: They will be h2 but will have the style of lg or whatever.

karlbaumhauer commented 4 months ago

Yah, so a will get the styles of sd-link (without the icon stuff). Some for the headlines: They will be h2 but will have the style of lg or whatever.

@mariohamann we discussed that last week and agreed on moving this responsibility to the users in case of interactive components => see description.

So <h2> will get sd-headline--lg class but <a> needs to be replaced in a translation-helper in the implementation code.

If you don't see any (further) major issues, pls move the issue to "refinement".

mariohamann commented 4 months ago

I see this a big issue.

What this reads like

Currently the ui-richtext component is exactly this transformer:

CleanShot 2024-03-11 at 13 24 26@2x

I understand the last concept of people needing to set the classes as expected:

Example:

<div class="sd-prose">
  <h1 class="sd-headline sd-headline--level-1">Headline</h1>
  <p class="sd-paragraph">Blabla</p>
</div>

Here sd-prose would just bheave as a "spacing" helper, to set the correct margins.

My understanding

The idea of a prose or richtext style has the concept of NOT needing to set additional classes or changing the tags but instead take only the semantics to style things.

Example:

<div class="sd-prose">
  <h1>Headline</h1>
  <p>Blabla</p>
</div>

Here sd-prose would do the magic.

Evaluation

The first would IMO offload too much or actually wouldn't be a big replacement but really just a thing for spacings. The latter would be a more or less drop-in replacement. Of course the latter takes more time, too – but might be more what people aim for.

karlbaumhauer commented 4 months ago

I see this a big issue.

What this reads like

Currently the ui-richtext component is exactly this transformer:

I understand the last concept of people needing to set the classes as expected:

Example:
<div class="sd-prose">
  <h1 class="sd-headline sd-headline--level-1">Headline</h1>
  <p class="sd-paragraph">Blabla</p>
</div>
Here sd-prose would just bheave as a "spacing" helper, to set the correct margins.

I think there is a misunderstanding. The sd-prose should be taking care of everything. So inside the sd-prose, we cover all styles with/from our style-components (headline, paragraph, list, meta etc).

My understanding

The idea of a prose or richtext style has the concept of NOT needing to set additional classes or changing the tags but instead take only the semantics to style things.

Example:
<div class="sd-prose">
  <h1>Headline</h1>
  <p>Blabla</p>
</div>
Here sd-prose would do the magic.

This is exactly what I would expect from sd-prose.

The only thing as a change to the ui-richtext is the transformation of HTML elements. I would leave this to the users as the link and the interactive would be the only components which need JS-Magic. If we leave this to the users, we can cover all with a style-component (not nice but helps us a lot).

@mariohamann If you agree to this and like, pls rewrite the ticket accordingly.

yoezlem commented 3 months ago

Lets talk about that in our pre-refinement on friday.

karlbaumhauer commented 3 months ago

Lets talk about that in our pre-refinement on friday.

As I will not be there on Friday: I strongly vote for an no-JS-solution and just provide a pattern in addition on how to implement the transformation-JS-stuff.

If we are possible to just provide a sd-prose style, we would cover a bunch of requirements with a very lightweight style component.

coraliefeil commented 3 months ago

@EllaELSA I would like to talk to you about spacing requirement, pairings used often, etc. ... Let’s have a session on that

Figma Branch

mariohamann commented 3 months ago

I'm done with refining @karlbaumhauer @yoezlem @coraliefeil

karlbaumhauer commented 3 months ago

thx @mariohamann

I still have 2 questions:

I have in mind that we agreed to leave tables out of the scope for now (just not providing/communicating it but leaving it in the CSS for later implementation) as it is not part of the ui-richtext component.
from what I read, we just make an <a> tag look like an sd-link. If we leave the transformation to the project teams, shouldnt we also exclude the link and all interactive elemtns out of the prose? Then, the users see that they forgot something and dont just leave it looking like a link but not behave like one.

coraliefeil commented 2 months ago

Ready for review / approval Figma Branch

coraliefeil commented 2 months ago

Ella gave her go ... issue can be pre-refined on Friday.

yoezlem commented 2 months ago

Draft PR from Mario: https://github.com/solid-design-system/solid/pull/930

yoezlem commented 1 month ago

@mariohamann is the only missing thing in your draft the documentation? Since we are a bit under time pressure, could you take on the ticket and finish it up?

mariohamann commented 1 month ago

No. There's more missing and I really wrote it more like "this is how it works". If no one feels comfortable with it, of course I could take over.

yoezlem commented 1 month ago

It is not that no one of the devs feel comfortable with it. Both of them are full with other Tickets. So I thought we could maybe solve this one faster with you.

Thx @mariohamann!

solid-design-system / solid

feat: ✨ add sd-prose - CSS style #417

User Story

Documentation / Hand-off

Example

Technical Information

Components detailed requirements

Stories

Samples

Subtasks

DoR

DoD

What this reads like

My understanding

Evaluation

What this reads like

My understanding