From e7a5922a0424eda72a63379413a30e618756814e Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Sun, 23 Jan 2022 09:04:57 +0100
Subject: [PATCH 1/3] add couple of remarks regarding inline/block usage of
 -if-

---
 .../release/components/conditional-content.md | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/guides/release/components/conditional-content.md b/guides/release/components/conditional-content.md
index 92328d49b4..0a5063d7fa 100644
--- a/guides/release/components/conditional-content.md
+++ b/guides/release/components/conditional-content.md
@@ -114,6 +114,24 @@ Like many programming languages, Ember also allows you to write `if else` and
 {{/if}}
 ```
 
+An important feature of `if` statement is that it can be used only inside an
+HTML element or another block. For example following snippet won't work
+because it uses ``if`` statement **on** the HTML element:
+
+```handlebars {data-filename="app/components/sign-in.hbs"}
+  {{!-- Won't work --}}
+  <button {{#if @disabled}} disabled {{/if}} class="btn">Sign In</button>
+```
+
+Correct usage:
+
+```handlebars {data-filename="app/components/sign-in.hbs"}
+  {{#if @disabled}}
+    <button disabled class="btn">Sign In</button>
+  {{else}}
+    <button class="btn">Sign In</button>
+  {{/if}}
+```
 
 ## Inline `if`
 
@@ -225,6 +243,30 @@ It looks similar to a ternary operator.
 {{if condition value1 value2}}
 ```
 
+Similarly to block `if`, you need to pay attention where inline `if` is placed
+otherwise ember will be confused. Inline `if` can be used only inside attributes values
+of HTML element. For example:
+
+```handlebars {data-filename="app/components/spinner.hbs"}
+  <span class="spinner {{if @inProgress 'visible' 'invisible'}}">
+  </span>
+```
+
+In example above, inline ``if`` is correctly used inside class attribute value.
+
+On the other hand, if you intend to use inline ``if`` to add "disabled"
+attribute to the HTML element:
+
+```handlebars {data-filename="app/components/spinner.hbs"}
+  {{!-- Won't work (!) --}}
+  <span {{if @disabled 'disabled' }}">
+  </span>
+```
+
+Ember will get confused and will complain with an error. In example above
+Ember will see `if` as modifier instead and complain about incorrect usage of
+modifier.
+
 
 ## Learn More
 

From d438c4ad20a46f2e04471628e39ecef735e8a4fb Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Mon, 6 Jun 2022 21:17:35 +0200
Subject: [PATCH 2/3] Update guides/release/components/conditional-content.md

Co-authored-by: Jen Weber <weberj10@gmail.com>
---
 .../release/components/conditional-content.md | 22 +++----------------
 1 file changed, 3 insertions(+), 19 deletions(-)

diff --git a/guides/release/components/conditional-content.md b/guides/release/components/conditional-content.md
index 0a5063d7fa..76a0046bfe 100644
--- a/guides/release/components/conditional-content.md
+++ b/guides/release/components/conditional-content.md
@@ -243,29 +243,13 @@ It looks similar to a ternary operator.
 {{if condition value1 value2}}
 ```
 
-Similarly to block `if`, you need to pay attention where inline `if` is placed
-otherwise ember will be confused. Inline `if` can be used only inside attributes values
-of HTML element. For example:
+Similarly to block `if`, you need to pay attention where inline `if` is placed.
+Inline `if` can be used only inside attribute values
+of HTML elements. For example:
 
 ```handlebars {data-filename="app/components/spinner.hbs"}
   <span class="spinner {{if @inProgress 'visible' 'invisible'}}">
   </span>
-```
-
-In example above, inline ``if`` is correctly used inside class attribute value.
-
-On the other hand, if you intend to use inline ``if`` to add "disabled"
-attribute to the HTML element:
-
-```handlebars {data-filename="app/components/spinner.hbs"}
-  {{!-- Won't work (!) --}}
-  <span {{if @disabled 'disabled' }}">
-  </span>
-```
-
-Ember will get confused and will complain with an error. In example above
-Ember will see `if` as modifier instead and complain about incorrect usage of
-modifier.
 
 
 ## Learn More

From e6d17d4d92ed6a95a9a9ccf0736675b9a7753d00 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Mon, 6 Jun 2022 21:17:43 +0200
Subject: [PATCH 3/3] Update guides/release/components/conditional-content.md

Co-authored-by: Jen Weber <weberj10@gmail.com>
---
 guides/release/components/conditional-content.md | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/guides/release/components/conditional-content.md b/guides/release/components/conditional-content.md
index 76a0046bfe..d502514b3d 100644
--- a/guides/release/components/conditional-content.md
+++ b/guides/release/components/conditional-content.md
@@ -114,16 +114,10 @@ Like many programming languages, Ember also allows you to write `if else` and
 {{/if}}
 ```
 
-An important feature of `if` statement is that it can be used only inside an
-HTML element or another block. For example following snippet won't work
-because it uses ``if`` statement **on** the HTML element:
+The block form of the `if` statement is typically used to wrap
+HTML elements or another block. If you want to use `if` inside of an HTML element, keep reading to learn about how to use inline `if` instead.
 
-```handlebars {data-filename="app/components/sign-in.hbs"}
-  {{!-- Won't work --}}
-  <button {{#if @disabled}} disabled {{/if}} class="btn">Sign In</button>
-```
-
-Correct usage:
+Here's an example of a block `if`, wrapping some HTML elements:
 
 ```handlebars {data-filename="app/components/sign-in.hbs"}
   {{#if @disabled}}
@@ -131,7 +125,6 @@ Correct usage:
   {{else}}
     <button class="btn">Sign In</button>
   {{/if}}
-```
 
 ## Inline `if`