<table><tr><td style="">davidedmundson added inline comments.
</td><a style="text-decoration: none; padding: 4px 8px; margin: 0 8px 8px; float: right; color: #464C5C; font-weight: bold; border-radius: 3px; background-color: #F7F7F9; background-image: linear-gradient(to bottom,#fff,#f1f0f1); display: inline-block; border: 1px solid rgba(71,87,120,.2);" href="https://phabricator.kde.org/D8641" rel="noreferrer">View Revision</a></tr></table><br /><div><strong>INLINE COMMENTS</strong><div><div style="margin: 6px 0 12px 0;"><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D8641#inline-38217" rel="noreferrer">View Inline</a><span style="color: #4b4d51; font-weight: bold;">FormLayout.qml:71</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #004012">itemContainer</span><span class="p">.</span><span style="color: #004012">parent</span> <span style="color: #aa2211">=</span> <span style="color: #004012">lay</span><span class="p">;</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #74777d">//if section, wee need another placeholder</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">if</span> <span class="p">(</span><span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">FormData</span><span class="p">.</span><span style="color: #004012">isSection</span><span class="p">)</span> <span class="p">{</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">typo</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D8641#inline-38218" rel="noreferrer">View Inline</a><span style="color: #4b4d51; font-weight: bold;">FormLayout.qml:85-86</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #004012">property</span> <span style="color: #aa4000">var</span> <span style="color: #004012">item</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">implicitWidth:</span> <span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">implicitWidth</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Layout.preferredHeight:</span> <span style="color: #304a96">Math</span><span class="p">.</span><span style="color: #004012">max</span><span class="p">(</span><span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Layout</span><span class="p">.</span><span style="color: #004012">preferredHeight</span><span class="p">,</span> <span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">implicitHeight</span><span class="p">)</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">why do something different for width and height?</p>
<p style="padding: 0; margin: 8px;">Also I think we're better off doing</p>
<p style="padding: 0; margin: 8px;">implicitheight: item.implicitHeight<br />
Layout.preferredheight: item.Layout.preferredHeight</p>
<p style="padding: 0; margin: 8px;">For layouts. Layout.preferred takes precedence over implicit if set, I think it makes sense to just copy that.</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D8641#inline-38221" rel="noreferrer">View Inline</a><span style="color: #4b4d51; font-weight: bold;">FormLayout.qml:113</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">id: buddyComponent</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">Heading</span> <span class="p">{</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">id: labelItem</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">I'd like it if we can make this on the desktop style look the same as QGroupBox looks in flat mode. Even if that means changing our QStyle.</p>
<p style="padding: 0; margin: 8px;">Currently this means spanning both columns and then centre aligning.</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D8641#inline-38216" rel="noreferrer">View Inline</a><span style="color: #4b4d51; font-weight: bold;">FormLayout.qml:117</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">text:</span> <span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">FormData</span><span class="p">.</span><span style="color: #004012">label</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);">
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">level:</span> <span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">FormData</span><span class="p">.</span><span style="color: #004012">isSection</span> <span style="color: #aa2211">?</span> <span style="color: #601200">3</span> <span style="color: #aa2211">:</span> <span style="color: #601200">5</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">visible: item.visible might make sense.</p>
<p style="padding: 0; margin: 8px;">it allows a dev to hide a UI component and label if it's not relevantl together</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D8641#inline-38215" rel="noreferrer">View Inline</a><span style="color: #4b4d51; font-weight: bold;">FormLayout.qml:120</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Layout.preferredHeight:</span> <span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">FormData</span><span class="p">.</span><span style="color: #004012">label</span><span class="p">.</span><span style="color: #004012">length</span> <span style="color: #aa2211">></span> <span style="color: #601200">0</span> <span style="color: #aa2211">?</span> <span style="color: #aa4000">implicitHeight :</span> <span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">Units</span><span class="p">.</span><span style="color: #004012">smallSpacing</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Layout.alignment:</span> <span style="color: #004012">root</span><span class="p">.</span><span style="color: #004012">wideMode</span> <span style="color: #aa2211">?</span> <span class="p">(</span><span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignRight</span> <span style="color: #aa2211">|</span> <span class="p">(</span><span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">FormData</span><span class="p">.</span><span style="color: #004012">buddyFor</span><span class="p">.</span><span style="color: #004012">height</span> <span style="color: #aa2211">></span> <span style="color: #004012">height</span> <span style="color: #aa2211">*</span> <span style="color: #601200">2</span> <span style="color: #aa2211">?</span> <span style="color: #aa4000">Qt.AlignTop :</span> <span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignVCenter</span><span class="p">))</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">why are we giving it a height if it's empty?</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D8641#inline-38223" rel="noreferrer">View Inline</a><span style="color: #4b4d51; font-weight: bold;">FormLayout.qml:121</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Layout.preferredHeight:</span> <span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">FormData</span><span class="p">.</span><span style="color: #004012">label</span><span class="p">.</span><span style="color: #004012">length</span> <span style="color: #aa2211">></span> <span style="color: #601200">0</span> <span style="color: #aa2211">?</span> <span style="color: #aa4000">implicitHeight :</span> <span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">Units</span><span class="p">.</span><span style="color: #004012">smallSpacing</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Layout.alignment:</span> <span style="color: #004012">root</span><span class="p">.</span><span style="color: #004012">wideMode</span> <span style="color: #aa2211">?</span> <span class="p">(</span><span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignRight</span> <span style="color: #aa2211">|</span> <span class="p">(</span><span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">FormData</span><span class="p">.</span><span style="color: #004012">buddyFor</span><span class="p">.</span><span style="color: #004012">height</span> <span style="color: #aa2211">></span> <span style="color: #004012">height</span> <span style="color: #aa2211">*</span> <span style="color: #601200">2</span> <span style="color: #aa2211">?</span> <span style="color: #aa4000">Qt.AlignTop :</span> <span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignVCenter</span><span class="p">))</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa2211">:</span> <span class="p">(</span><span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignLeft</span> <span style="color: #aa2211">|</span> <span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignBottom</span><span class="p">)</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">In general with text, I think it's better to set the item to occupy the whole space it /can/ take up, then use the Text.Alignment property to position the text within it.</p>
<p style="padding: 0; margin: 8px;">Otherwise if this wraps, your second line would start on the left not the right.</p>
<p style="padding: 0; margin: 8px;">Related; what should happen if a user sets a really really really long label?</p></div></div><br /><div style="border: 1px solid #C7CCD9; border-radius: 3px;"><div style="padding: 0; background: #F7F7F7; border-color: #e3e4e8; border-style: solid; border-width: 0 0 1px 0; margin: 0;"><div style="color: #74777d; background: #eff2f4; padding: 6px 8px; overflow: hidden;"><a style="float: right; text-decoration: none;" href="https://phabricator.kde.org/D8641#inline-38219" rel="noreferrer">View Inline</a><span style="color: #4b4d51; font-weight: bold;">FormLayout.qml:121-123</span></div>
<div style="font: 11px/15px "Menlo", "Consolas", "Monaco", monospace; white-space: pre-wrap; clear: both; padding: 4px 0; margin: 0;"><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Layout.alignment:</span> <span style="color: #004012">root</span><span class="p">.</span><span style="color: #004012">wideMode</span> <span style="color: #aa2211">?</span> <span class="p">(</span><span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignRight</span> <span style="color: #aa2211">|</span> <span class="p">(</span><span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">FormData</span><span class="p">.</span><span style="color: #004012">buddyFor</span><span class="p">.</span><span style="color: #004012">height</span> <span style="color: #aa2211">></span> <span style="color: #004012">height</span> <span style="color: #aa2211">*</span> <span style="color: #601200">2</span> <span style="color: #aa2211">?</span> <span style="color: #aa4000">Qt.AlignTop :</span> <span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignVCenter</span><span class="p">))</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa2211">:</span> <span class="p">(</span><span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignLeft</span> <span style="color: #aa2211">|</span> <span style="color: #004012">Qt</span><span class="p">.</span><span style="color: #004012">AlignBottom</span><span class="p">)</span>
</div><div style="padding: 0 8px; margin: 0 4px; background: rgba(151, 234, 151, .6);"> <span style="color: #aa4000">Layout.topMargin:</span> <span style="color: #004012">item</span><span class="p">.</span><span style="color: #004012">Kirigami</span><span class="p">.</span><span style="color: #004012">FormData</span><span class="p">.</span><span style="color: #004012">buddyFor</span><span class="p">.</span><span style="color: #004012">height</span> <span style="color: #aa2211">></span> <span style="color: #004012">height</span> <span style="color: #aa2211">*</span> <span style="color: #601200">2</span> <span style="color: #aa2211">?</span> <span style="color: #aa4000">Kirigami.Units.smallSpacing :</span> <span style="color: #601200">0</span>
</div></div></div>
<div style="margin: 8px 0; padding: 0 12px;"><p style="padding: 0; margin: 8px;">What's the rationale for this "if buddy.height > height *2" stuff?</p></div></div></div></div></div><br /><div><strong>REPOSITORY</strong><div><div>R169 Kirigami</div></div></div><br /><div><strong>REVISION DETAIL</strong><div><a href="https://phabricator.kde.org/D8641" rel="noreferrer">https://phabricator.kde.org/D8641</a></div></div><br /><div><strong>To: </strong>mart, Plasma, Kirigami, hein<br /><strong>Cc: </strong>colomar, ngraham, davidedmundson, plasma-devel, ZrenBot, progwolff, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol, mart, hein<br /></div>