Do not use Tailwind CSS class names in prop enum values
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3557500. -->
Reported by: [balintbrews](https://www.drupal.org/user/613760)
Related to !114
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>Many components offer a string prop with enum values for users to pick between different styling options.</p>
<p>✅ For example, the <code>font_size</code> prop from <code>hero-full-width.component</code>:</p>
<pre>font_size:<br> type: string<br> title: Font Size<br> description: Select Font Size<br> enum:<br> - default<br> - heading-responsive-8xl<br> # …<br> - heading-responsive-2xl<br> - heading-responsive-xl<br> meta:enum:<br> default: Default<br> heading-responsive-8xl: 8xl 72px<br> # …<br> heading-responsive-2xl: 2xl 24px<br> heading-responsive-xl: xl 20px</pre><p>The enum values (<code>default</code>, <code>heading-responsive-8xl</code>, etc.) are then mapped to Tailwind CSS classes in the Twig template. This is the correct pattern.</p>
<p>❌ However, several components use Tailwind CSS class names directly as the enum values. For example, the <code>height</code> prop from <code>hero-billboard.component</code>:</p>
<pre>height:<br> type: string<br> title: Hero height<br> enum:<br> - hg:h-dvh<br> - hg:h-3/4 hg:min-h-[500px] hg:md:max-h-[600px] hg:xl:max-h-[800px]<br> - hg:h-1/2 hg:md:min-h-[400px] hg:md:max-h-[450px] hg:xl:max-h-[600px]<br> meta:enum:<br> hg:h-dvh: Full screen<br> hg:h-3/4 hg:min-h-[500px] hg:md:max-h-[600px] hg:xl:max-h-[800px]: Large<br> hg:h-1/2 hg:md:min-h-[400px] hg:md:max-h-[450px] hg:xl:max-h-[600px]: Ribbon</pre><p>This is already sub-optimal from maintainability perspective, because styling needs to happen outside of the template or even a CSS file. What makes this pattern a major problem is that <strong>styling code is getting tied to the data model in Canvas</strong>. Styling updates would mean component metadata changes, which would result in Canvas calculating a new version hash for all tracked components.</p>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>Remove this pattern from the codebase, and use the first pattern mentioned in the description.</p>
<h3 id="summary-remaining-tasks">Remaining tasks</h3>
<p>The list of the offending components:</p>
<pre>$ awk '/enum:/ {found=1; line=NR} found && NR<=line+5 && /hg:/ {print FILENAME; found=0; nextfile}' $(find . -name "*.component.yml")<br><br>./components/hero-side-by-side/hero-side-by-side.component.yml<br>./components/section/section.component.yml<br>./components/group/group.component.yml<br>./components/heading/heading.component.yml<br>./components/image/image.component.yml<br>./components/tile-icon/tile-icon.component.yml<br>./components/text/text.component.yml<br>./components/hero-billboard/hero-billboard.component.yml</pre><p>(Please verify manually, too.)</p>
<h3 id="summary-ui-changes">User interface changes</h3>
<p>None.</p>
issue