<!-- 
RSS generated by JIRA (9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b) at Mon Feb 12 05:44:13 CET 2024

It is possible to restrict the fields that are returned in this document by specifying the 'field' parameter in your request.
For example, to request only the issue key and summary append 'field=key&field=summary' to the URL of your request.
-->
<rss version="0.92" >
<channel>
    <title>Magnolia - Issue tracker</title>
    <link>https://jira.magnolia-cms.com</link>
    <description>This file is an XML representation of an issue</description>
    <language>en-uk</language>    <build-info>
        <version>9.4.2</version>
        <build-number>940002</build-number>
        <build-date>19-01-2023</build-date>
    </build-info>


<item>
            <title>[MGNLFE-97] Greenbars rendering with &quot;display: flex&quot; (Flexbox)</title>
                <link>https://jira.magnolia-cms.com/browse/MGNLFE-97</link>
                <project id="16792" key="MGNLFE">Magnolia Frontend Helpers</project>
                    <description>&lt;p&gt;&quot;display: flex&quot; css has become popular among front end developers.&lt;br/&gt;
 Flexbox is efficient way to lay out, align and distribute space among items in a container.&lt;/p&gt;

&lt;p&gt;Current rendering of Greenbars is making it hard/impossible to use Flexbox.&lt;br/&gt;
 Greenbars are added on the same dom level as components or areas and are affected by Flexbox.&lt;/p&gt;

&lt;p&gt;Eg.&lt;br/&gt;
 We can have code:&lt;br/&gt;
 &amp;lt;div style=&quot;display: flex&quot;&amp;gt;&lt;br/&gt;
 &lt;span class=&quot;error&quot;&gt;&amp;#91;@cms.area name=&amp;quot;foobar&amp;quot; /&amp;#93;&lt;/span&gt;&lt;br/&gt;
 &amp;lt;/div&amp;gt;&lt;/p&gt;

&lt;p&gt;Greenbars would be rendered next to components.&lt;/p&gt;

&lt;p&gt;Desired:&lt;br/&gt;
 &lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;a id=&quot;76903_thumb&quot; href=&quot;https://jira.magnolia-cms.com/secure/attachment/76903/76903_Screenshot+2021-03-01+at+13.53.02.png&quot; title=&quot;Screenshot 2021-03-01 at 13.53.02.png&quot; file-preview-type=&quot;image&quot; file-preview-id=&quot;76903&quot; file-preview-title=&quot;Screenshot 2021-03-01 at 13.53.02.png&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/thumbnail/76903/_thumb_76903.png&quot; style=&quot;border: 0px solid black&quot; role=&quot;presentation&quot;/&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Actual currently / problem:&lt;br/&gt;
 &lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;a id=&quot;76904_thumb&quot; href=&quot;https://jira.magnolia-cms.com/secure/attachment/76904/76904_Screenshot+2021-03-01+at+13.53.18.png&quot; title=&quot;Screenshot 2021-03-01 at 13.53.18.png&quot; file-preview-type=&quot;image&quot; file-preview-id=&quot;76904&quot; file-preview-title=&quot;Screenshot 2021-03-01 at 13.53.18.png&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/thumbnail/76904/_thumb_76904.png&quot; style=&quot;border: 0px solid black&quot; role=&quot;presentation&quot;/&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;In ftl we can go around it by adding custom templateScript for an area and wrap the component loop in div with flex.&lt;br/&gt;
 This is not ideal dev experience for ftl.&lt;br/&gt;
 This is &lt;b&gt;&lt;ins&gt;not possible&lt;/ins&gt;&lt;/b&gt; in headless scenario at all.&lt;/p&gt;


&lt;p&gt;&lt;b&gt;Create a simple page/app that illustrates the problem.&lt;/b&gt;&lt;/p&gt;</description>
                <environment></environment>
        <key id="96478">MGNLFE-97</key>
            <summary>Greenbars rendering with &quot;display: flex&quot; (Flexbox)</summary>
                <type id="4" iconUrl="https://jira.magnolia-cms.com/secure/viewavatar?size=xsmall&amp;avatarId=10890&amp;avatarType=issuetype">Improvement</type>
                                            <priority id="6" iconUrl="https://jira.magnolia-cms.com/images/icons/priorities/neutral.gif">Neutral</priority>
                        <status id="6" iconUrl="https://jira.magnolia-cms.com/images/icons/statuses/closed.png" description="The issue is considered finished, the resolution is correct. Issues which are not closed can be reopened.">Closed</status>
                    <statusCategory id="3" key="done" colorName="success"/>
                                    <resolution id="11">Done</resolution>
                                        <assignee username="canh.nguyen">Canh Nguyen</assignee>
                                    <reporter username="bstaryga">Bartosz Staryga</reporter>
                        <labels>
                            <label>VN-Analysis</label>
                            <label>VN-Implementation</label>
                            <label>VN-Testing</label>
                    </labels>
                <created>Mon, 1 Mar 2021 13:57:32 +0100</created>
                <updated>Thu, 6 Jan 2022 12:25:44 +0100</updated>
                            <resolved>Mon, 12 Jul 2021 16:21:25 +0200</resolved>
                                                    <fixVersion>1.1.0</fixVersion>
                                        <due></due>
                            <votes>0</votes>
                                    <watches>6</watches>
                                                    <progress percentage="100">
                                    <originalProgress>
                                                    <row percentage="0" backgroundColor="#89afd7"/>
                                                    <row percentage="100" backgroundColor="transparent"/>
                                            </originalProgress>
                                                    <currentProgress>
                                                    <row percentage="100" backgroundColor="#51a825"/>
                                                    <row percentage="0" backgroundColor="#ec8e00"/>
                                            </currentProgress>
                            </progress>
                                    <aggregateprogress percentage="100">
                                    <originalProgress>
                                                    <row percentage="0" backgroundColor="#89afd7"/>
                                                    <row percentage="100" backgroundColor="transparent"/>
                                            </originalProgress>
                                                    <currentProgress>
                                                    <row percentage="100" backgroundColor="#51a825"/>
                                                    <row percentage="0" backgroundColor="#ec8e00"/>
                                            </currentProgress>
                            </aggregateprogress>
                                            <timeestimate seconds="0">0d</timeestimate>
                            <timespent seconds="216900">7d 4.25h</timespent>
                                <comments>
                            <comment id="265958" author="bstaryga" created="Mon, 21 Jun 2021 11:17:01 +0200"  >&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=lam.nguyen&quot; class=&quot;user-hover&quot; rel=&quot;lam.nguyen&quot;&gt;lam.nguyen&lt;/a&gt; &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=canh.nguyen&quot; class=&quot;user-hover&quot; rel=&quot;canh.nguyen&quot;&gt;canh.nguyen&lt;/a&gt; if we do not want to touch the Magnolia bits then adding &lt;b&gt;templateScript&lt;/b&gt; should do the trick.&lt;/p&gt;

&lt;p&gt;So custom area, yes, but consistent syntax with what was in ftl &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/smile.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;&lt;/p&gt;

&lt;p&gt;I did a small test and it works with it like a charm.&lt;br/&gt;
I looked only at React one but should be similar in rest too.&lt;/p&gt;

&lt;p&gt;What I have tried is this:&lt;/p&gt;

&lt;p&gt;&lt;b&gt;Extended EditableArea.js&lt;/b&gt;&lt;br/&gt;
added &lt;b&gt;templateScript&lt;/b&gt; prop.&lt;/p&gt;

&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-javascript&quot;&gt;
  render() {
    &lt;span class=&quot;code-keyword&quot;&gt;const&lt;/span&gt; { content, className, elementType, children, templateScript } = &lt;span class=&quot;code-keyword&quot;&gt;this&lt;/span&gt;.props;
    &lt;span class=&quot;code-keyword&quot;&gt;const&lt;/span&gt; componentNames = content[&lt;span class=&quot;code-quote&quot;&gt;&apos;@nodes&apos;&lt;/span&gt;];
    &lt;span class=&quot;code-keyword&quot;&gt;const&lt;/span&gt; element = React.createElement(elementType || &lt;span class=&quot;code-quote&quot;&gt;&apos;div&apos;&lt;/span&gt;);

    &lt;span class=&quot;code-keyword&quot;&gt;return&lt;/span&gt; (
      &amp;lt;element.type
        ref={(node) =&amp;gt; (&lt;span class=&quot;code-keyword&quot;&gt;this&lt;/span&gt;.node = node)}
        key={content[&lt;span class=&quot;code-quote&quot;&gt;&apos;@id&apos;&lt;/span&gt;]}
        className={ComponentHelper.classnames(className)}
      &amp;gt;
        {children}
        {templateScript
          ? templateScript(content)
          : componentNames.map((name) =&amp;gt; &amp;lt;EditableComponent key={content[name][&lt;span class=&quot;code-quote&quot;&gt;&apos;@id&apos;&lt;/span&gt;]} content={content[name]} /&amp;gt;)}
      &amp;lt;/element.type&amp;gt;
    );
  }
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;&lt;b&gt;Using EditableArea&lt;/b&gt;&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-javascript&quot;&gt;
&lt;span class=&quot;code-keyword&quot;&gt;import&lt;/span&gt; React from &lt;span class=&quot;code-quote&quot;&gt;&apos;react&apos;&lt;/span&gt;;
&lt;span class=&quot;code-keyword&quot;&gt;import&lt;/span&gt; { EditableArea, EditableComponent } from &lt;span class=&quot;code-quote&quot;&gt;&apos;@magnolia/react-editor&apos;&lt;/span&gt;;

&lt;span class=&quot;code-keyword&quot;&gt;function&lt;/span&gt; templateScript(content) {
  &lt;span class=&quot;code-keyword&quot;&gt;return&lt;/span&gt; (
    &amp;lt;div style={{ display: &lt;span class=&quot;code-quote&quot;&gt;&apos;flex&apos;&lt;/span&gt; }}&amp;gt;
      {content[&lt;span class=&quot;code-quote&quot;&gt;&apos;@nodes&apos;&lt;/span&gt;].map((name) =&amp;gt; (
        &amp;lt;EditableComponent key={content[name][&lt;span class=&quot;code-quote&quot;&gt;&apos;@id&apos;&lt;/span&gt;]} content={content[name]} /&amp;gt;
      ))}
    &amp;lt;/div&amp;gt;
  );
}

&lt;span class=&quot;code-keyword&quot;&gt;function&lt;/span&gt; Home(props) {
  &lt;span class=&quot;code-keyword&quot;&gt;const&lt;/span&gt; { title, main, metadata } = props;

  &lt;span class=&quot;code-keyword&quot;&gt;return&lt;/span&gt; (
    &amp;lt;div&amp;gt;
      &amp;lt;h1&amp;gt;{title}&amp;lt;/h1&amp;gt;
      {main &amp;amp;&amp;amp; (
        &amp;lt;EditableArea content={main} parentTemplateId={metadata[&lt;span class=&quot;code-quote&quot;&gt;&apos;mgnl:template&apos;&lt;/span&gt;]} templateScript={templateScript} /&amp;gt;
      )}
    &amp;lt;/div&amp;gt;
  );
}

&lt;span class=&quot;code-keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;code-keyword&quot;&gt;default&lt;/span&gt; Home;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;And with this we have nice workaround for display flex as in ftl.&lt;/p&gt;





&lt;p&gt; &lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;a id=&quot;81270_thumb&quot; href=&quot;https://jira.magnolia-cms.com/secure/attachment/81270/81270_Screenshot+2021-06-21+at+11.15.50.png&quot; title=&quot;Screenshot 2021-06-21 at 11.15.50.png&quot; file-preview-type=&quot;image&quot; file-preview-id=&quot;81270&quot; file-preview-title=&quot;Screenshot 2021-06-21 at 11.15.50.png&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/thumbnail/81270/_thumb_81270.png&quot; style=&quot;border: 0px solid black&quot; role=&quot;presentation&quot;/&gt;&lt;/a&gt;&lt;/span&gt; &lt;/p&gt;</comment>
                            <comment id="265960" author="lam.nguyen" created="Mon, 21 Jun 2021 11:32:38 +0200"  >&lt;p&gt;Hi &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt;,&#160;&lt;/p&gt;

&lt;p&gt;It&apos;s great to hear from you. Actually, we tried to have solutions with minimal impact to page structure. So, I do believe that using custom template is a correct approach.&lt;/p&gt;

&lt;p&gt;Indeed, it must be supported for others as well.&#160;&lt;/p&gt;</comment>
                            <comment id="266050" author="canh.nguyen" created="Tue, 22 Jun 2021 06:31:44 +0200"  >&lt;p&gt;Hi &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt;, I&apos;m glad that it worked for you. I&apos;m aware of the templateScript of ftl but I would not recommend to support it in react-editor or the rest. The templateScript in template definition is processed on the server side and it is difficult to use it on SPA. Because react needs a component to render, not a string. It will be easier for both developer or Magnolia if we let developer decides what he wants to display the data by extending EditableEditor.&#160;&lt;/p&gt;

&lt;p&gt;It would be nice if we have a blog post for this problem on our website, so that our customers can learn from it. And I think we can close this ticket. WDYT?&lt;/p&gt;</comment>
                            <comment id="266501" author="bstaryga" created="Thu, 24 Jun 2021 09:03:51 +0200"  >&lt;p&gt;Hmmm... frankly I disagree with you &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/smile.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;&lt;br/&gt;
having default behaviour of looping over the components and the ability to overwrite it with &lt;b&gt;templateScript&lt;/b&gt; prop is very nice.&lt;br/&gt;
Code changes as can be seen in the examples I posted above are very minor for the editor libs.&lt;/p&gt;

&lt;p&gt;Let&apos;s remember that great bunch of devs using headless already know magnolia and also the idea of template script is natural for them.&lt;br/&gt;
The need to extend the classes seems like a missing feature and for me it is a workaround...&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=czimmermann&quot; class=&quot;user-hover&quot; rel=&quot;czimmermann&quot;&gt;czimmermann&lt;/a&gt; 5 cents from you?&lt;/p&gt;</comment>
                            <comment id="266744" author="czimmermann" created="Fri, 25 Jun 2021 15:53:56 +0200"  >&lt;p&gt;I&apos;d like to have as much frontender input on this as possible. &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=stas&quot; class=&quot;user-hover&quot; rel=&quot;stas&quot;&gt;stas&lt;/a&gt;&#160;your input here would be much appreciated!&lt;/p&gt;</comment>
                            <comment id="266876" author="JIRAUSER21672" created="Mon, 28 Jun 2021 12:08:25 +0200"  >&lt;p&gt;Not sure I fully understand the issue. Extending the EdititableArea (I guess that what &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=lam.nguyen&quot; class=&quot;user-hover&quot; rel=&quot;lam.nguyen&quot;&gt;lam.nguyen&lt;/a&gt; is suggesting) would be from my perspective counter productive. Also we need to document the&#160; approach and give the possibility, the actual extension point should be in the core of the product.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Having a templateScript property looks odd for me, I think there are some react patterns established on how to deal with this situations.&lt;/p&gt;

&lt;p&gt;I think if we go this route it might look like this:&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-javascript&quot;&gt;
&lt;span class=&quot;code-keyword&quot;&gt;import&lt;/span&gt; React from &lt;span class=&quot;code-quote&quot;&gt;&apos;react&apos;&lt;/span&gt;;
&lt;span class=&quot;code-keyword&quot;&gt;import&lt;/span&gt; { EditableArea, EditableComponent } from &lt;span class=&quot;code-quote&quot;&gt;&apos;@magnolia/react-editor&apos;&lt;/span&gt;;


&lt;span class=&quot;code-keyword&quot;&gt;function&lt;/span&gt; Home(props) {
  &lt;span class=&quot;code-keyword&quot;&gt;const&lt;/span&gt; { title, main, metadata } = props;

  &lt;span class=&quot;code-keyword&quot;&gt;return&lt;/span&gt; (
    &amp;lt;div&amp;gt;
      &amp;lt;h1&amp;gt;{title}&amp;lt;/h1&amp;gt;
      {main &amp;amp;&amp;amp; (
        &amp;lt;EditableArea content={main} parentTemplateId={metadata[&lt;span class=&quot;code-quote&quot;&gt;&apos;mgnl:template&apos;&lt;/span&gt;]}&amp;gt;
            {({content})=&amp;gt;(
                   &amp;lt;div style={{display: &lt;span class=&quot;code-quote&quot;&gt;&apos;flex&apos;&lt;/span&gt;}}&amp;gt;
                      {content[&lt;span class=&quot;code-quote&quot;&gt;&apos;@nodes&apos;&lt;/span&gt;].map((name) =&amp;gt; ( &amp;lt;EditableComponent key={content[name][&lt;span class=&quot;code-quote&quot;&gt;&apos;@id&apos;&lt;/span&gt;]} content={content[name]} /&amp;gt; ))}
                   &amp;lt;/div&amp;gt;
              )}
        &amp;lt;/EditableArea&amp;gt;
      )}
    &amp;lt;/div&amp;gt;
  );
}

&lt;span class=&quot;code-keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;code-keyword&quot;&gt;default&lt;/span&gt; Home;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;But honestly that&apos;s for me personally already to verbose. Perhaps something like that would be better:&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-javascript&quot;&gt;
&lt;span class=&quot;code-keyword&quot;&gt;import&lt;/span&gt; React from &lt;span class=&quot;code-quote&quot;&gt;&apos;react&apos;&lt;/span&gt;;
&lt;span class=&quot;code-keyword&quot;&gt;import&lt;/span&gt; { EditableArea, EditableAreaContent, EditableComponent } from &lt;span class=&quot;code-quote&quot;&gt;&apos;@magnolia/react-editor&apos;&lt;/span&gt;;


&lt;span class=&quot;code-keyword&quot;&gt;function&lt;/span&gt; Home(props) {
  &lt;span class=&quot;code-keyword&quot;&gt;const&lt;/span&gt; { title, main, metadata } = props;

  &lt;span class=&quot;code-keyword&quot;&gt;return&lt;/span&gt; (
    &amp;lt;div&amp;gt;
      &amp;lt;h1&amp;gt;{title}&amp;lt;/h1&amp;gt;
      {main &amp;amp;&amp;amp; (
        &amp;lt;EditableArea content={main} parentTemplateId={metadata[&lt;span class=&quot;code-quote&quot;&gt;&apos;mgnl:template&apos;&lt;/span&gt;]}&amp;gt;
            {({content})=&amp;gt;(
                   &amp;lt;div style={{display: &lt;span class=&quot;code-quote&quot;&gt;&apos;flex&apos;&lt;/span&gt;}}&amp;gt;
                      &amp;lt;EditableAreaContent content={content}/&amp;gt;
                   &amp;lt;/div&amp;gt;
              )}
        &amp;lt;/EditableArea&amp;gt;
      )}
    &amp;lt;/div&amp;gt;
  );
}

&lt;span class=&quot;code-keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;code-keyword&quot;&gt;default&lt;/span&gt; Home;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;</comment>
                            <comment id="267075" author="canh.nguyen" created="Wed, 30 Jun 2021 06:48:44 +0200"  >&lt;p&gt;I got the idea from Bartosz, I would introduce a new customView property than a templateScript. Because in this case it&apos;s not like the templateScript we used in ftl.&lt;/p&gt;

&lt;p&gt;Please check my commit here &lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/commits/ee5a0de02514f01232d29b225f4f553bfdc0a7ea#packages/react-editor/src/component/EditableArea/EditableArea.js&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/commits/ee5a0de02514f01232d29b225f4f553bfdc0a7ea#packages/react-editor/src/component/EditableArea/EditableArea.js&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is the custom view:&lt;/p&gt;

&lt;p&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/81654/81654_image-2021-06-30-11-40-53-565.png&quot; height=&quot;237&quot; width=&quot;775&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/81653/81653_image-2021-06-30-11-38-46-071.png&quot; height=&quot;392&quot; width=&quot;777&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;Here is the change in EditableArea&lt;/p&gt;

&lt;p&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/81655/81655_image-2021-06-30-11-43-14-139.png&quot; height=&quot;343&quot; width=&quot;776&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;I&apos;ve tried to remove the wrapping element and let the custom view deciding what would be displayed but it caused another issue. The editor will find elements in the annotation, if there is only one element, it will append the green bar inside that element.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;</comment>
                            <comment id="267088" author="lam.nguyen" created="Wed, 30 Jun 2021 08:39:51 +0200"  >&lt;p&gt;IMO, having a particular view for specific problem is not very nice. Later, views would be introduced for other cases. How&apos;s about having div as &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=stas&quot; class=&quot;user-hover&quot; rel=&quot;stas&quot;&gt;stas&lt;/a&gt;&apos;s example with a specific container style class id, then user can do whatever they want based on css.&lt;/p&gt;</comment>
                            <comment id="267106" author="canh.nguyen" created="Wed, 30 Jun 2021 09:25:10 +0200"  >&lt;p&gt;Hi &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=lam.nguyen&quot; class=&quot;user-hover&quot; rel=&quot;lam.nguyen&quot;&gt;lam.nguyen&lt;/a&gt; I&apos;m not sure if &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=stas&quot; class=&quot;user-hover&quot; rel=&quot;stas&quot;&gt;stas&lt;/a&gt;&apos;s solution is working. From my understanding, inside &lt;b&gt;EditableArea&lt;/b&gt; tag is another react component. That component requires a content parameter. In the &lt;b&gt;EditableArea&lt;/b&gt; we can get that component by accessing through &lt;b&gt;props.children .&lt;/b&gt;&#160;There are another problem that we should treat all children generally, and we don&apos;t know if each child needs any parameters to pass in.&lt;/p&gt;

&lt;p&gt;You can see this line &lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/react-editor/src/component/EditableArea/EditableArea.js#72&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/react-editor/src/component/EditableArea/EditableArea.js#72&lt;/a&gt;&#160;that we support to render&#160;&lt;b&gt;EditableArea&apos;s&lt;/b&gt; children.&lt;/p&gt;</comment>
                            <comment id="267121" author="JIRAUSER21672" created="Wed, 30 Jun 2021 09:58:10 +0200"  >&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=canh.nguyen&quot; class=&quot;user-hover&quot; rel=&quot;canh.nguyen&quot;&gt;canh.nguyen&lt;/a&gt;&#160;I think it is valid to discuss the approach, there are many pros and cons. The big pro for me is the developer experience, think we need to add that into account. There are certain things you expect from a library as a consumer and if we can make that more convenient I&apos;d rather rate it higher.&lt;/p&gt;

&lt;p&gt;The question I&apos;d have would be why should i add children to a EditableArea in the first palce. Do we have use-cases for that?&#160;&lt;/p&gt;

&lt;p&gt;From functionality perspective it sound odd to me, i can just add my custom components above EditableArea.&lt;/p&gt;

&lt;p&gt;If children is a map, that&apos;s the default case when nesting components nobody is expecting any magic property passing at all, but if you put in a function it&apos;s clear.&lt;/p&gt;

&lt;p&gt;A hacky working solution to demonstrate:&#160;&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-javascript&quot;&gt;
&lt;span class=&quot;code-comment&quot;&gt;// ....
&lt;/span&gt;render() {
    &lt;span class=&quot;code-keyword&quot;&gt;const&lt;/span&gt; {
      content, className, elementType, children
    } = &lt;span class=&quot;code-keyword&quot;&gt;this&lt;/span&gt;.props;
    &lt;span class=&quot;code-keyword&quot;&gt;const&lt;/span&gt; componentNames = content[&lt;span class=&quot;code-quote&quot;&gt;&apos;@nodes&apos;&lt;/span&gt;];
    &lt;span class=&quot;code-keyword&quot;&gt;const&lt;/span&gt; element = React.createElement(elementType || &lt;span class=&quot;code-quote&quot;&gt;&apos;div&apos;&lt;/span&gt;);
    &lt;span class=&quot;code-keyword&quot;&gt;return&lt;/span&gt; (
      &amp;lt;element.type ref={node =&amp;gt; &lt;span class=&quot;code-keyword&quot;&gt;this&lt;/span&gt;.node = node} key={content[&lt;span class=&quot;code-quote&quot;&gt;&apos;@id&apos;&lt;/span&gt;]} className={ComponentHelper.classnames(className)}&amp;gt;
     {&lt;span class=&quot;code-keyword&quot;&gt;typeof&lt;/span&gt; children === &lt;span class=&quot;code-quote&quot;&gt;&apos;&lt;span class=&quot;code-keyword&quot;&gt;function&lt;/span&gt;&apos;&lt;/span&gt; ? &lt;span class=&quot;code-keyword&quot;&gt;this&lt;/span&gt;.props.children({content}) :  children }

        { &lt;span class=&quot;code-keyword&quot;&gt;typeof&lt;/span&gt; children !== &lt;span class=&quot;code-quote&quot;&gt;&apos;&lt;span class=&quot;code-keyword&quot;&gt;function&lt;/span&gt;&apos;&lt;/span&gt; ? 
          componentNames.map((name) =&amp;gt; &amp;lt;EditableComponent key={content[name][&lt;span class=&quot;code-quote&quot;&gt;&apos;@id&apos;&lt;/span&gt;]} content={content[name]} /&amp;gt;)
        : &lt;span class=&quot;code-keyword&quot;&gt;null&lt;/span&gt;}
      &amp;lt;/element.type&amp;gt;
    );
  }
&lt;span class=&quot;code-comment&quot;&gt;//....&lt;/span&gt;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;Do not have any preference to be honest. Both works, the children as function will just speed up development I believe.&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=czimmermann&quot; class=&quot;user-hover&quot; rel=&quot;czimmermann&quot;&gt;czimmermann&lt;/a&gt;&#160;Do we have some partners who already are familiar with the spa editor to do a little survey?&#160;&lt;/p&gt;

&lt;p&gt;&#160;&lt;/p&gt;</comment>
                            <comment id="267277" author="czimmermann" created="Wed, 30 Jun 2021 19:51:23 +0200"  >&lt;p&gt;Great input everyone. Thank you! It&apos;s challenging!&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt;&#160;you wrote:&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;In ftl we can go around it by adding custom templateScript for an area and wrap the component loop in div with flex.&lt;br/&gt;
This is not ideal dev experience for ftl.&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;So far we&apos;ve been discussing adding templateScript kind of thing to the editor libraries... &lt;br/&gt;
But, do you see any other approach to make this nicer for developers... also in ftl?&lt;/p&gt;</comment>
                            <comment id="267278" author="czimmermann" created="Wed, 30 Jun 2021 19:52:37 +0200"  >&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=canh.nguyen&quot; class=&quot;user-hover&quot; rel=&quot;canh.nguyen&quot;&gt;canh.nguyen&lt;/a&gt;&#160;Is your customView the same as the templateScript approach, but just with a different name?&lt;/p&gt;</comment>
                            <comment id="267280" author="czimmermann" created="Wed, 30 Jun 2021 20:04:49 +0200"  >&lt;p&gt;I&apos;m not totally opposed to templateScript/customView approach, it seems useful. But it does feel a little clunky and confusing to me when I look at code samples.&#160;&lt;/p&gt;

&lt;p&gt;I have a feeling that wrapping with a div (or other element) with a custom class is the main use case by far... and maybe the only use case. Or does someone see another usecase for the area templateScript?&lt;/p&gt;

&lt;p&gt;If that is the case, what about adding a new property to the area like `wrapWithClass` or `wrapperClass`?&lt;/p&gt;

&lt;p&gt;Or two properties: `wrapperElement` and `wrapperClass`?&lt;/p&gt;</comment>
                            <comment id="267303" author="canh.nguyen" created="Thu, 1 Jul 2021 04:42:28 +0200"  >&lt;p&gt;TemplateScript is a function, and customView is a component. Actually, a component is also a function but following the framework standard. Developer can freely design their components to pass to EditableArea. Furthermore, I&apos;m not sure if we can do the same for VueJS and Angular with Senol Tas&apos; approach, but passing a component seem to be supported in all frameworks.&lt;/p&gt;</comment>
                            <comment id="267311" author="canh.nguyen" created="Thu, 1 Jul 2021 05:32:42 +0200"  >&lt;blockquote&gt;&lt;p&gt;TemplateScript is a function, and customView is a component. Actually, a component is also a function but following the framework standard. Developer can freely design their components to pass to EditableArea. Furthermore, I&apos;m not sure if we can do the same for VueJS and Angular with Senol Tas&apos; approach, but passing a component seem to be supported in all frameworks.&lt;/p&gt;&lt;/blockquote&gt;
&lt;p&gt;Sorry for my ignorance, I&apos;ve just check again and I know that Angular has &lt;b&gt;ContentChildren&lt;/b&gt; and Vue has &lt;b&gt;$slots&lt;/b&gt; that we may support Senol Tas&apos; approach in all frameworks.&lt;/p&gt;

&lt;p&gt;I&apos;m trying to implement this approach with VueJS.&lt;/p&gt;</comment>
                            <comment id="267328" author="canh.nguyen" created="Thu, 1 Jul 2021 08:25:56 +0200"  >&lt;p&gt;Please check Senol Tas&apos; approach on this commit &lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/commits/cec5d5332fe9bf45fb9805efc8662a37115fc06d&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/commits/cec5d5332fe9bf45fb9805efc8662a37115fc06d&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In order to make the function working, we must call &lt;b&gt;React#createElement&lt;/b&gt;&#160;or we just create a component like &lt;b&gt;FlexArea&lt;/b&gt; component in my example.&lt;/p&gt;

&lt;p&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/81769/81769_image-2021-07-01-13-18-53-064.png&quot; height=&quot;211&quot; width=&quot;770&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/81770/81770_image-2021-07-01-13-19-32-164.png&quot; height=&quot;533&quot; width=&quot;769&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/81771/81771_image-2021-07-01-13-21-26-089.png&quot; height=&quot;249&quot; width=&quot;754&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;With this implementation, we still support the &lt;b&gt;NoComponentArea&lt;/b&gt; that we just get the content from the Area dialog to display on the page.&lt;/p&gt;

&lt;p&gt;&lt;b&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/81772/81772_image-2021-07-01-13-25-06-062.png&quot; height=&quot;116&quot; width=&quot;444&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;</comment>
                            <comment id="267337" author="czimmermann" created="Thu, 1 Jul 2021 08:40:48 +0200"  >&lt;p&gt;It&apos;s too bad that the frontend developer has to put things in their component code that is specific to the editing experience. Up till now it&apos;s just our EditableArea component mostly.&lt;/p&gt;



&lt;p&gt;Would it make sense to instead of doing this wrapperDiv handling in the ffrontend devs components javascript code, that rather the area definition can specify the customView/template script - and then our editor libraries auto instantiate the component for areas just as it does for components? (Basically the same as the freemarker approach?)&lt;/p&gt;</comment>
                            <comment id="267344" author="bstaryga" created="Thu, 1 Jul 2021 09:00:37 +0200"  >&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=czimmermann&quot; class=&quot;user-hover&quot; rel=&quot;czimmermann&quot;&gt;czimmermann&lt;/a&gt; other uses includes every time you want to do sth extra with components. Wheater it is wrapping the whole area in div, or wrapping each component with an extra element. Another one is making an area with no components but rendering things based on what is in the area dialog. Both are heavily used in e.g. Swiss Re or Corp website and were deeply missed by me when doing headless demo sites &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/smile.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;&lt;/p&gt;

&lt;p&gt;I was pushing initially towards the templateScript naming and approach cause a great number of developers who try Magnolia in headless know already Magnolia and are familiar with the concept.&lt;br/&gt;
At headless training we want people to know basic of light modules, and with this developers gets exposed to this idea too.&lt;br/&gt;
For people who never saw Magnolia before, having to pass render prop is also nothing unusual (I&apos;d say even popular pattern, the whole discussion HOC vs render props &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/tongue.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;).&lt;/p&gt;

&lt;p&gt;Anyway having a render prop passed, or making use of `children` is equally nice. Bottom line we should have an easy solution that is built into the libs.&lt;/p&gt;

&lt;p&gt;A solution that allows custom rendering of areas.&lt;/p&gt;

</comment>
                            <comment id="267346" author="canh.nguyen" created="Thu, 1 Jul 2021 09:06:46 +0200"  >&lt;p&gt;WDYT that we add extra prop like this?&lt;/p&gt;
&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-java&quot;&gt;
[
  div: {
    cssClass: []
    
  },
  ul: {
    cssClass: []
  }
] &lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Then we will create extra wrapping elements for the content. The ul tag here is the div child, if we add more elements, the latter is the child of the previous one.&lt;/p&gt;</comment>
                            <comment id="267350" author="czimmermann" created="Thu, 1 Jul 2021 09:51:24 +0200"  >&lt;p&gt;Thanks &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt;, ok I am onboard for the utitlity of having a render prop or children, rather than my suggestion about `wrapperDiv` etc.&lt;/p&gt;

&lt;p&gt;For render props vs children, I cannot decide, I think Dominic should make the call based on all of the input and his experiments.&#160;&lt;/p&gt;

&lt;p&gt;If we went with a &quot;render prop&quot; (&lt;a href=&quot;https://reactjs.org/docs/render-props.html)&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;https://reactjs.org/docs/render-props.html)&lt;/a&gt;&#160;(I guess that was what Bartosz original proposal was I would prefer either &quot;render&quot; as the name, as that seems like an established pattern, or &quot;customView&quot;. I can see that &quot;templateScript&quot; has good consistancy with freemarker, but it really sounds odd to me in the frontend framework project.&#160;&lt;/p&gt;</comment>
                            <comment id="267360" author="canh.nguyen" created="Thu, 1 Jul 2021 10:39:09 +0200"  >&lt;p&gt;Someone on Stackoverflow recommends that we should use ChildComponent instead of passing a component as a parameter. So I will go with child component approach so that we will implement it to all libraries.&lt;/p&gt;</comment>
                            <comment id="267658" author="canh.nguyen" created="Mon, 5 Jul 2021 11:10:35 +0200"  >&lt;p&gt;I&apos;ve just added a commit that I implemented for Angular, please check it &lt;a href=&quot;https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/commits/0bc94f7852e97f3b59b1862f58fafebb5e58c35b#samples/spa-angular-minimal/src/app/pages/home.component.ts&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;here.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In Angular, we can use &lt;b&gt;ng-content&lt;/b&gt; to get html code that wrapped inside of EditableArea but we cannot access the data from&#160;EditableArea. There&apos;re two possible solutions which are &lt;b&gt;dynamic component&lt;/b&gt; (the same as we implemented for the angular-editor) and &lt;b&gt;ngTemplate&lt;/b&gt; and &lt;b&gt;ngTemplateOutlet.&lt;/b&gt;&#160;IMO the dynamic component is more complex than the second solution that I implemented. The ComponentChildren I mentioned above cannot be implemented in this case (maybe I haven&apos;t found the correct document).&lt;/p&gt;

&lt;p&gt;The&#160;&lt;b&gt;ngTemplate&lt;/b&gt; and &lt;b&gt;ngTemplateOutlet&lt;/b&gt;&#160;solution is that we create a template and name it, then pass it to EditableArea. This is similar to templateScript on FTL.&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=bstaryga&quot; class=&quot;user-hover&quot; rel=&quot;bstaryga&quot;&gt;bstaryga&lt;/a&gt; &lt;a href=&quot;https://jira.magnolia-cms.com/secure/ViewProfile.jspa?name=stas&quot; class=&quot;user-hover&quot; rel=&quot;stas&quot;&gt;stas&lt;/a&gt; have you experienced this problem with Angular before? I&apos;m trying to implement the same approach to all frameworks but it seems very hard to do so.&lt;/p&gt;</comment>
                    </comments>
                <issuelinks>
                            <issuelinktype id="10360">
                    <name>Problem/Incident</name>
                                            <outwardlinks description="causes">
                                        <issuelink>
            <issuekey id="106296">MGNLFE-159</issuekey>
        </issuelink>
                            </outwardlinks>
                                                        </issuelinktype>
                    </issuelinks>
                <attachments>
                            <attachment id="76903" name="Screenshot 2021-03-01 at 13.53.02.png" size="34069" author="bstaryga" created="Mon, 1 Mar 2021 13:53:43 +0100"/>
                            <attachment id="76904" name="Screenshot 2021-03-01 at 13.53.18.png" size="29803" author="bstaryga" created="Mon, 1 Mar 2021 13:53:43 +0100"/>
                            <attachment id="81270" name="Screenshot 2021-06-21 at 11.15.50.png" size="217884" author="bstaryga" created="Mon, 21 Jun 2021 11:16:50 +0200"/>
                            <attachment id="81653" name="image-2021-06-30-11-38-46-071.png" size="2988987" author="canh.nguyen" created="Wed, 30 Jun 2021 06:38:52 +0200"/>
                            <attachment id="81654" name="image-2021-06-30-11-40-53-565.png" size="122140" author="canh.nguyen" created="Wed, 30 Jun 2021 06:40:58 +0200"/>
                            <attachment id="81655" name="image-2021-06-30-11-43-14-139.png" size="134264" author="canh.nguyen" created="Wed, 30 Jun 2021 06:43:18 +0200"/>
                            <attachment id="81769" name="image-2021-07-01-13-18-53-064.png" size="89426" author="canh.nguyen" created="Thu, 1 Jul 2021 08:18:56 +0200"/>
                            <attachment id="81770" name="image-2021-07-01-13-19-32-164.png" size="3108858" author="canh.nguyen" created="Thu, 1 Jul 2021 08:19:38 +0200"/>
                            <attachment id="81771" name="image-2021-07-01-13-21-26-089.png" size="118697" author="canh.nguyen" created="Thu, 1 Jul 2021 08:21:30 +0200"/>
                            <attachment id="81772" name="image-2021-07-01-13-25-06-062.png" size="21237" author="canh.nguyen" created="Thu, 1 Jul 2021 08:25:08 +0200"/>
                    </attachments>
                <subtasks>
                    </subtasks>
                <customfields>
                                                                            <customfield id="customfield_14166" key="com.okapya.jira.checklist:checklist">
                        <customfieldname>Acceptance criteria</customfieldname>
                        <customfieldvalues>
                            
        <checklist>
        <![CDATA[
                            




                
                                    <div class="o-completion" style="display: flex; flex-shrink: 0;"><span  class="aui-lozenge aui-lozenge-complete" style="font-size: 12px; font-weight: normal; display: flex; flex-direction: row; align-items: center;" ><span style="padding-right: 4px; vertical-align: middle;"><svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" fill="white"><path clip-rule="evenodd" d="m10.41037,3.42544l-7.86501,0c-0.72395,0 -1.31084,0.58688 -1.31084,1.31084l0,7.86508c0,0.7239 0.58689,1.3108 1.31084,1.3108l7.86501,0c0.724,0 1.3109,-0.5869 1.3109,-1.3108l0,-7.86508c0,-0.72396 -0.5869,-1.31084 -1.3109,-1.31084zm-7.86501,-0.65542c-1.08593,0 -1.96626,0.88032 -1.96626,1.96626l0,7.86508c0,1.0859 0.88033,1.9662 1.96626,1.9662l7.86501,0c1.086,0 1.9663,-0.8803 1.9663,-1.9662l0,-7.86508c0,-1.08594 -0.8803,-1.96626 -1.9663,-1.96626l-7.86501,0z" fill-rule="evenodd"/><path d="m5.09049,10.18526l-1.82767,-1.82766l-0.78479,0.78479l2.61246,2.61246l5.38758,-5.38754l-0.78483,-0.78479l-4.60275,4.60274z"/></svg></span><span>Empty</span></span></div>
                        ]]>
    </checklist>


                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <customfield id="customfield_10111" key="com.atlassian.jira.toolkit:reporterdomain">
                        <customfieldname>Company</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>magnolia-cms.com</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                <customfield id="customfield_10031" key="com.atlassian.jira.ext.charting:firstresponsedate">
                        <customfieldname>Date of First Response</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>Wed, 16 Jun 2021 08:39:22 +0200</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_12730" key="com.atlassian.jira.plugins.jira-development-integration-plugin:devsummary">
                        <customfieldname>Development</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_14151" key="com.atlassian.jira.toolkit:message">
                        <customfieldname>Docu info</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                                            <customfield id="customfield_12130" key="com.atlassian.jira.plugin.system.customfieldtypes:multicheckboxes">
                        <customfieldname>Documentation update required</customfieldname>
                        <customfieldvalues>
                                <customfieldvalue key="13300"><![CDATA[Yes]]></customfieldvalue>
    
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                    <customfield id="customfield_10246" key="com.pyxis.greenhopper.jira:gh-epic-link">
                        <customfieldname>Epic Link</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>PAGES-218</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <customfield id="customfield_10061" key="com.atlassian.jira.toolkit:lastusercommented">
                        <customfieldname>Last comm is not jira-dev</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>true</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10071" key="com.atlassian.jira.toolkit:lastupdaterorcommenter">
                        <customfieldname>Last participant</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>czimmermann</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_13136" key="com.atlassian.jira.toolkit:LastCommentDate">
                        <customfieldname>Last public comment date</customfieldname>
                        <customfieldvalues>
                            2 years, 31 weeks, 6 days ago
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_10020" key="com.atlassian.jira.toolkit:attachments">
                        <customfieldname>Number of attachments</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>10.0</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10150" key="com.atlassian.jira.toolkit:comments">
                        <customfieldname>Number of comments</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>22.0</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <customfield id="customfield_10011" key="com.atlassian.jira.toolkit:participants">
                        <customfieldname>Participants</customfieldname>
                        <customfieldvalues>
                                        <customfieldvalue>bstaryga</customfieldvalue>
            <customfieldvalue>canh.nguyen</customfieldvalue>
            <customfieldvalue>czimmermann</customfieldvalue>
            <customfieldvalue>lam.nguyen</customfieldvalue>
            <customfieldvalue>stas</customfieldvalue>
    
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                <customfield id="customfield_10833" key="com.pyxis.greenhopper.jira:gh-lexo-rank">
                        <customfieldname>Rank</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>0|y04wv3:</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10244" key="com.pyxis.greenhopper.jira:gh-global-rank">
                        <customfieldname>Rank (Obsolete)</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>9223372036854775807</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                        <customfield id="customfield_10220" key="com.atlassian.jira.plugin.system.customfieldtypes:multicheckboxes">
                        <customfieldname>Release notes required</customfieldname>
                        <customfieldvalues>
                                <customfieldvalue key="10490"><![CDATA[Yes]]></customfieldvalue>
    
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                        <customfield id="customfield_10245" key="com.pyxis.greenhopper.jira:gh-sprint">
                        <customfieldname>Sprint</customfieldname>
                        <customfieldvalues>
                                <customfieldvalue id="1459">HL &amp; LD 32</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                            <customfield id="customfield_10242" key="com.atlassian.jira.plugin.system.customfieldtypes:float">
                        <customfieldname>Story Points</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>5.0</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                <customfield id="customfield_14168" key="com.okapya.jira.checklist:checklist">
                        <customfieldname>Task DoD</customfieldname>
                        <customfieldvalues>
                            
        <checklist>
        <![CDATA[
                            




                
                        
        <div style="margin-bottom: 8px;">
                            <div class="o-completion" style="display: flex; flex-shrink: 0;"><span title="Mandatory items are completed" class="aui-lozenge aui-lozenge-moved" style="font-size: 12px; font-weight: normal; display: flex; flex-direction: row; align-items: center;" ><span style="padding-right: 4px; vertical-align: middle;"><svg width="15" height="15" viewBox="0 0 15 15" fill="black" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.44414 2.77002H2.54536C1.45943 2.77002 0.579102 3.65034 0.579102 4.73628V12.6013C0.579102 13.6873 1.45943 14.5676 2.54536 14.5676H10.4104C11.4963 14.5676 12.3767 13.6873 12.3767 12.6013V6.70259H11.7212V12.6013C11.7212 13.3253 11.1344 13.9122 10.4104 13.9122H2.54536C1.8214 13.9122 1.23452 13.3253 1.23452 12.6013V4.73628C1.23452 4.01232 1.8214 3.42544 2.54536 3.42544H8.44414V2.77002Z" /><path d="M5.09049 10.1853L3.26282 8.3576L2.47803 9.14239L5.09049 11.7549L10.478 6.36731L9.69323 5.58252L5.09049 10.1853Z" /><path d="M14.4013 4.06384L12.9712 3.18904L14.4013 2.31423C14.4259 2.29915 14.4435 2.27493 14.4503 2.24685C14.457 2.21876 14.4523 2.18915 14.4373 2.16455L14.0171 1.47762C13.9858 1.42635 13.9187 1.41019 13.8674 1.44154L12.5022 2.27667V0.676237C12.5022 0.61615 12.4535 0.567383 12.3934 0.567383H11.5883C11.5282 0.567383 11.4794 0.61615 11.4794 0.676237V2.27667L10.1142 1.44159C10.0628 1.41024 9.99587 1.42635 9.96452 1.47768L9.54429 2.16461C9.52927 2.18921 9.52459 2.21881 9.53134 2.2469C9.53809 2.27498 9.55572 2.2992 9.58032 2.31428L11.0105 3.18904L9.58032 4.06384C9.55572 4.07887 9.53809 4.10314 9.53134 4.13117C9.52459 4.15931 9.52927 4.18892 9.54429 4.21352L9.96452 4.90039C9.99587 4.95166 10.0628 4.96788 10.1142 4.93653L11.4794 4.1014V5.70183C11.4794 5.76192 11.5282 5.81069 11.5883 5.81069H12.3934C12.4535 5.81069 12.5022 5.76192 12.5022 5.70183V4.10145L13.8674 4.93648C13.9187 4.96783 13.9858 4.95166 14.0171 4.90045L14.4374 4.21352C14.4524 4.18892 14.4571 4.15931 14.4503 4.13123C14.4436 4.10309 14.4259 4.07892 14.4013 4.06384Z" /></svg></span><span>5/6</span></span></div>
                    
            <div class="checklist-progress-bar-wrapper" style="">
        <div class="checklist-progress-bar" style="position: relative; width: 100%; background-color: #cccccc; margin-bottom: 2px; margin-top: 5px;">
                        <div class="checklist-progress" style="display: block; float: none; width: 83%; height: 2px; background: #14892c;">
                            </div>
        </div>
    </div>
        </div>
    
                                    <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="checked"><path d="m21.530642,5.91574l-2.18201,-1.33473l2.18193,-1.33473c0.03753,-0.023 0.06444,-0.05996 0.07473,-0.10281c0.0103,-0.04285 0.00316,-0.08802 -0.01976,-0.12555l-0.64117,-1.04808c-0.04774,-0.07822 -0.15013,-0.10288 -0.22836,-0.05505l-2.08286,1.27419l0,-2.44184c0,-0.09168 -0.0744,-0.16609 -0.16608,-0.16609l-1.22844,0c-0.09168,0 -0.16608,0.07441 -0.16608,0.16609l0,2.44184l-2.08294,-1.27411c-0.07839,-0.04783 -0.18053,-0.02325 -0.22836,0.05506l-0.64117,1.04807c-0.02292,0.03753 -0.03006,0.08271 -0.01976,0.12556c0.01029,0.04285 0.0372,0.0798 0.07473,0.1028l2.18201,1.33465l-2.18201,1.33473c-0.03753,0.02292 -0.06444,0.05996 -0.07473,0.10273c-0.0103,0.04293 -0.00316,0.0881 0.01976,0.12564l0.64117,1.04799c0.04783,0.07822 0.14997,0.10297 0.22836,0.05514l2.08294,-1.2742l0,2.44185c0,0.09167 0.0744,0.16608 0.16608,0.16608l1.22844,0c0.09168,0 0.16608,-0.07441 0.16608,-0.16608l0,-2.44177l2.08294,1.27403c0.07823,0.04783 0.18062,0.02317 0.22837,-0.05497l0.64116,-1.04807c0.02292,-0.03754 0.03006,-0.08271 0.01977,-0.12556c-0.01022,-0.04293 -0.03721,-0.0798 -0.07474,-0.10281z" fill="#778899" /><path clip-rule="evenodd" d="m12.4779,3.94141l-9.03649,0c-1.65686,0 -3,1.34315 -3,3.00001l0,12c0,1.6568 1.34314,3 3,3l11.99999,0c1.6569,0 3,-1.3432 3,-3l0,-9.01487c-0.1928,0.02079 -0.3886,0.03146 -0.5869,0.03146c-0.9504,0 -1.8435,-0.24504 -2.6197,-0.6754l0.2066,0.20658l-8.0813,8.08133l-3.91869,-3.9187l1.17718,-1.1772l2.74151,2.7415l6.7567,-6.75675c-1.0305,-0.98505 -1.6725,-2.37332 -1.6725,-3.91151c0,-0.20501 0.0114,-0.40736 0.0336,-0.60645z" fill="#778899" fill-rule="evenodd" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span style="text-decoration: line-through;">
                                                        <span>Doc/release notes changes? Comment present?</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="checked"><path d="m21.530642,5.91574l-2.18201,-1.33473l2.18193,-1.33473c0.03753,-0.023 0.06444,-0.05996 0.07473,-0.10281c0.0103,-0.04285 0.00316,-0.08802 -0.01976,-0.12555l-0.64117,-1.04808c-0.04774,-0.07822 -0.15013,-0.10288 -0.22836,-0.05505l-2.08286,1.27419l0,-2.44184c0,-0.09168 -0.0744,-0.16609 -0.16608,-0.16609l-1.22844,0c-0.09168,0 -0.16608,0.07441 -0.16608,0.16609l0,2.44184l-2.08294,-1.27411c-0.07839,-0.04783 -0.18053,-0.02325 -0.22836,0.05506l-0.64117,1.04807c-0.02292,0.03753 -0.03006,0.08271 -0.01976,0.12556c0.01029,0.04285 0.0372,0.0798 0.07473,0.1028l2.18201,1.33465l-2.18201,1.33473c-0.03753,0.02292 -0.06444,0.05996 -0.07473,0.10273c-0.0103,0.04293 -0.00316,0.0881 0.01976,0.12564l0.64117,1.04799c0.04783,0.07822 0.14997,0.10297 0.22836,0.05514l2.08294,-1.2742l0,2.44185c0,0.09167 0.0744,0.16608 0.16608,0.16608l1.22844,0c0.09168,0 0.16608,-0.07441 0.16608,-0.16608l0,-2.44177l2.08294,1.27403c0.07823,0.04783 0.18062,0.02317 0.22837,-0.05497l0.64116,-1.04807c0.02292,-0.03754 0.03006,-0.08271 0.01977,-0.12556c-0.01022,-0.04293 -0.03721,-0.0798 -0.07474,-0.10281z" fill="#778899" /><path clip-rule="evenodd" d="m12.4779,3.94141l-9.03649,0c-1.65686,0 -3,1.34315 -3,3.00001l0,12c0,1.6568 1.34314,3 3,3l11.99999,0c1.6569,0 3,-1.3432 3,-3l0,-9.01487c-0.1928,0.02079 -0.3886,0.03146 -0.5869,0.03146c-0.9504,0 -1.8435,-0.24504 -2.6197,-0.6754l0.2066,0.20658l-8.0813,8.08133l-3.91869,-3.9187l1.17718,-1.1772l2.74151,2.7415l6.7567,-6.75675c-1.0305,-0.98505 -1.6725,-2.37332 -1.6725,-3.91151c0,-0.20501 0.0114,-0.40736 0.0336,-0.60645z" fill="#778899" fill-rule="evenodd" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span style="text-decoration: line-through;">
                                                        <span>Downstream builds green?</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="checked"><path d="m21.530642,5.91574l-2.18201,-1.33473l2.18193,-1.33473c0.03753,-0.023 0.06444,-0.05996 0.07473,-0.10281c0.0103,-0.04285 0.00316,-0.08802 -0.01976,-0.12555l-0.64117,-1.04808c-0.04774,-0.07822 -0.15013,-0.10288 -0.22836,-0.05505l-2.08286,1.27419l0,-2.44184c0,-0.09168 -0.0744,-0.16609 -0.16608,-0.16609l-1.22844,0c-0.09168,0 -0.16608,0.07441 -0.16608,0.16609l0,2.44184l-2.08294,-1.27411c-0.07839,-0.04783 -0.18053,-0.02325 -0.22836,0.05506l-0.64117,1.04807c-0.02292,0.03753 -0.03006,0.08271 -0.01976,0.12556c0.01029,0.04285 0.0372,0.0798 0.07473,0.1028l2.18201,1.33465l-2.18201,1.33473c-0.03753,0.02292 -0.06444,0.05996 -0.07473,0.10273c-0.0103,0.04293 -0.00316,0.0881 0.01976,0.12564l0.64117,1.04799c0.04783,0.07822 0.14997,0.10297 0.22836,0.05514l2.08294,-1.2742l0,2.44185c0,0.09167 0.0744,0.16608 0.16608,0.16608l1.22844,0c0.09168,0 0.16608,-0.07441 0.16608,-0.16608l0,-2.44177l2.08294,1.27403c0.07823,0.04783 0.18062,0.02317 0.22837,-0.05497l0.64116,-1.04807c0.02292,-0.03754 0.03006,-0.08271 0.01977,-0.12556c-0.01022,-0.04293 -0.03721,-0.0798 -0.07474,-0.10281z" fill="#778899" /><path clip-rule="evenodd" d="m12.4779,3.94141l-9.03649,0c-1.65686,0 -3,1.34315 -3,3.00001l0,12c0,1.6568 1.34314,3 3,3l11.99999,0c1.6569,0 3,-1.3432 3,-3l0,-9.01487c-0.1928,0.02079 -0.3886,0.03146 -0.5869,0.03146c-0.9504,0 -1.8435,-0.24504 -2.6197,-0.6754l0.2066,0.20658l-8.0813,8.08133l-3.91869,-3.9187l1.17718,-1.1772l2.74151,2.7415l6.7567,-6.75675c-1.0305,-0.98505 -1.6725,-2.37332 -1.6725,-3.91151c0,-0.20501 0.0114,-0.40736 0.0336,-0.60645z" fill="#778899" fill-rule="evenodd" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span style="text-decoration: line-through;">
                                                        <span>Solution information and context easily available?</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="checked"><path d="m21.530642,5.91574l-2.18201,-1.33473l2.18193,-1.33473c0.03753,-0.023 0.06444,-0.05996 0.07473,-0.10281c0.0103,-0.04285 0.00316,-0.08802 -0.01976,-0.12555l-0.64117,-1.04808c-0.04774,-0.07822 -0.15013,-0.10288 -0.22836,-0.05505l-2.08286,1.27419l0,-2.44184c0,-0.09168 -0.0744,-0.16609 -0.16608,-0.16609l-1.22844,0c-0.09168,0 -0.16608,0.07441 -0.16608,0.16609l0,2.44184l-2.08294,-1.27411c-0.07839,-0.04783 -0.18053,-0.02325 -0.22836,0.05506l-0.64117,1.04807c-0.02292,0.03753 -0.03006,0.08271 -0.01976,0.12556c0.01029,0.04285 0.0372,0.0798 0.07473,0.1028l2.18201,1.33465l-2.18201,1.33473c-0.03753,0.02292 -0.06444,0.05996 -0.07473,0.10273c-0.0103,0.04293 -0.00316,0.0881 0.01976,0.12564l0.64117,1.04799c0.04783,0.07822 0.14997,0.10297 0.22836,0.05514l2.08294,-1.2742l0,2.44185c0,0.09167 0.0744,0.16608 0.16608,0.16608l1.22844,0c0.09168,0 0.16608,-0.07441 0.16608,-0.16608l0,-2.44177l2.08294,1.27403c0.07823,0.04783 0.18062,0.02317 0.22837,-0.05497l0.64116,-1.04807c0.02292,-0.03754 0.03006,-0.08271 0.01977,-0.12556c-0.01022,-0.04293 -0.03721,-0.0798 -0.07474,-0.10281z" fill="#778899" /><path clip-rule="evenodd" d="m12.4779,3.94141l-9.03649,0c-1.65686,0 -3,1.34315 -3,3.00001l0,12c0,1.6568 1.34314,3 3,3l11.99999,0c1.6569,0 3,-1.3432 3,-3l0,-9.01487c-0.1928,0.02079 -0.3886,0.03146 -0.5869,0.03146c-0.9504,0 -1.8435,-0.24504 -2.6197,-0.6754l0.2066,0.20658l-8.0813,8.08133l-3.91869,-3.9187l1.17718,-1.1772l2.74151,2.7415l6.7567,-6.75675c-1.0305,-0.98505 -1.6725,-2.37332 -1.6725,-3.91151c0,-0.20501 0.0114,-0.40736 0.0336,-0.60645z" fill="#778899" fill-rule="evenodd" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span style="text-decoration: line-through;">
                                                        <span><strong>Tests</strong></span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="checked"><path d="m21.530642,5.91574l-2.18201,-1.33473l2.18193,-1.33473c0.03753,-0.023 0.06444,-0.05996 0.07473,-0.10281c0.0103,-0.04285 0.00316,-0.08802 -0.01976,-0.12555l-0.64117,-1.04808c-0.04774,-0.07822 -0.15013,-0.10288 -0.22836,-0.05505l-2.08286,1.27419l0,-2.44184c0,-0.09168 -0.0744,-0.16609 -0.16608,-0.16609l-1.22844,0c-0.09168,0 -0.16608,0.07441 -0.16608,0.16609l0,2.44184l-2.08294,-1.27411c-0.07839,-0.04783 -0.18053,-0.02325 -0.22836,0.05506l-0.64117,1.04807c-0.02292,0.03753 -0.03006,0.08271 -0.01976,0.12556c0.01029,0.04285 0.0372,0.0798 0.07473,0.1028l2.18201,1.33465l-2.18201,1.33473c-0.03753,0.02292 -0.06444,0.05996 -0.07473,0.10273c-0.0103,0.04293 -0.00316,0.0881 0.01976,0.12564l0.64117,1.04799c0.04783,0.07822 0.14997,0.10297 0.22836,0.05514l2.08294,-1.2742l0,2.44185c0,0.09167 0.0744,0.16608 0.16608,0.16608l1.22844,0c0.09168,0 0.16608,-0.07441 0.16608,-0.16608l0,-2.44177l2.08294,1.27403c0.07823,0.04783 0.18062,0.02317 0.22837,-0.05497l0.64116,-1.04807c0.02292,-0.03754 0.03006,-0.08271 0.01977,-0.12556c-0.01022,-0.04293 -0.03721,-0.0798 -0.07474,-0.10281z" fill="#778899" /><path clip-rule="evenodd" d="m12.4779,3.94141l-9.03649,0c-1.65686,0 -3,1.34315 -3,3.00001l0,12c0,1.6568 1.34314,3 3,3l11.99999,0c1.6569,0 3,-1.3432 3,-3l0,-9.01487c-0.1928,0.02079 -0.3886,0.03146 -0.5869,0.03146c-0.9504,0 -1.8435,-0.24504 -2.6197,-0.6754l0.2066,0.20658l-8.0813,8.08133l-3.91869,-3.9187l1.17718,-1.1772l2.74151,2.7415l6.7567,-6.75675c-1.0305,-0.98505 -1.6725,-2.37332 -1.6725,-3.91151c0,-0.20501 0.0114,-0.40736 0.0336,-0.60645z" fill="#778899" fill-rule="evenodd" /></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span style="text-decoration: line-through;">
                                                        <span><strong>FixVersion</strong> filled and not yet released</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                                <div style="display: flex; align-items: flex-start; padding: 0; margin-left: 12px; float: none; font-size: 14px;">
                                                                <span style="padding-right: 5px; align-self: flex-start;">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="unchecked"><rect fill="#EFF4FB" height="17.5" rx="2.5" stroke="#ADBBD0" width="18" x="0.44141" y="3.94141"/></svg>
                        </span>
                                        <div style="cursor: default; text-align: left; flex-grow: 1; padding-right: 3px; margin-top: 2px;">
                                                
                                                
                                                <span >
                                                        <span>Architecture Decision Record (<strong>ADR</strong>)</span>

                        </span>
                    </div>
                                                                    <span style="padding-right: 1px; white-space: nowrap;">
                                                        
                                                        
                                                                                </span>
                                    </div>
                                            ]]>
    </checklist>


                        </customfieldvalues>
                    </customfield>
                                                                                                                                                    <customfield id="customfield_14145" key="com.intenso.jira.issue-templates:issue-templates-customfield">
                        <customfieldname>Template</customfieldname>
                        <customfieldvalues>
                            


                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_15131" key="com.onresolve.jira.groovy.groovyrunner:scripted-field">
                        <customfieldname>Time in Discovery</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>0</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10032" key="com.atlassian.jira.ext.charting:timeinstatus">
                        <customfieldname>Time in Status</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_13933" key="com.atlassian.jira.plugin.system.customfieldtypes:select">
                        <customfieldname>Urgency (resolution)</customfieldname>
                        <customfieldvalues>
                                <customfieldvalue key="15724"><![CDATA[Normal]]></customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                </customfields>
    </item>
</channel>
</rss>