From 6fec78859921530f777a1231e367679fbfcb3327 Mon Sep 17 00:00:00 2001
From: Nigel Breslaw <nigel.breslaw@slint.dev>
Date: Tue, 21 Jan 2025 10:45:49 +0200
Subject: [PATCH 1/4] Fix incorrect visible: false docs

---
 docs/astro/src/content/docs/reference/common.mdx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/docs/astro/src/content/docs/reference/common.mdx b/docs/astro/src/content/docs/reference/common.mdx
index 0a7a55b58c9..79b54fc460a 100644
--- a/docs/astro/src/content/docs/reference/common.mdx
+++ b/docs/astro/src/content/docs/reference/common.mdx
@@ -49,16 +49,13 @@ the element and its children with transparency.
 The opacity is applied to the tree of child elements as if they
 were first drawn into an intermediate layer, and then the whole layer is rendered with this opacity.
 
-:::tip[Tip]
-When an element has 0 opacity it will still take up layout space and any gesture handling will continue
-to work. If the intent is to hide an element so it has no gesture handling or no longer takes up layout space,
-use the `visible` property instead.
-:::
+
 </SlintProperty>
 
 ### visible
 <SlintProperty propName="visible" typeName="bool" defaultValue="true">
-When set to `false`, the element and all his children won't be drawn and not react to mouse input.
+When set to `false`, the element and all his children won't be drawn and not react to mouse input. The element
+will still take up layout space within any layout container.
 
 The following example demonstrates the `opacity` property with children. An opacity is applied to the red rectangle. Since the green rectangle is a child of the red one, you can see the gradient underneath it, but you can't see the red rectangle through the green one.
 <CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png"  imageWidth="200" imageHeight="200"  imageAlt='rectangle opacity'>

From 00ec1d78dcf3950b6703827aa46fa209fe3c5e4e Mon Sep 17 00:00:00 2001
From: Nigel Breslaw <nigel.breslaw@slint.dev>
Date: Tue, 21 Jan 2025 15:46:11 +0200
Subject: [PATCH 2/4] Fix opacity snippet

---
 .../src/content/docs/reference/common.mdx     | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/docs/astro/src/content/docs/reference/common.mdx b/docs/astro/src/content/docs/reference/common.mdx
index 79b54fc460a..b7bd217b9c4 100644
--- a/docs/astro/src/content/docs/reference/common.mdx
+++ b/docs/astro/src/content/docs/reference/common.mdx
@@ -58,24 +58,26 @@ When set to `false`, the element and all his children won't be drawn and not rea
 will still take up layout space within any layout container.
 
 The following example demonstrates the `opacity` property with children. An opacity is applied to the red rectangle. Since the green rectangle is a child of the red one, you can see the gradient underneath it, but you can't see the red rectangle through the green one.
-<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png"  imageWidth="200" imageHeight="200"  imageAlt='rectangle opacity'>
+<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" scale="3" imageWidth="100" imageHeight="100"  imageAlt='rectangle opacity'>
 ```slint
-Rectangle {
-    x: 10px;
-    y: 10px;
-    width: 180px;
-    height: 180px;
-    background: #315afd;
-    opacity: 0.5;
-}
-
-Rectangle {
-    x: 10px;
-    y: 210px;
-    width: 180px;
-    height: 180px;
-    background: green;
-    opacity: 0.5;
+export component Example inherits Window {
+    width: 100px;
+    height: 100px;
+    Rectangle {
+        opacity: 0.5;
+        background: red;
+        border-color: #822;
+        border-width: 5px;
+        width: 50px; height: 50px;
+        x: 10px; y: 10px;
+        Rectangle {
+            background: green;
+            border-color: #050;
+            border-width: 5px;
+            width: 50px; height: 50px;
+            x: 25px; y: 25px;
+        }
+    }
 }
 ```
 </CodeSnippetMD>

From 7ef2d2ef441884671a11ca2de2cc2b7cdb3fae49 Mon Sep 17 00:00:00 2001
From: Nigel Breslaw <nigel.breslaw@slint.dev>
Date: Tue, 21 Jan 2025 19:08:57 +0200
Subject: [PATCH 3/4] Clear up transparency

---
 .../src/content/docs/reference/common.mdx     | 67 ++++++++++++-------
 1 file changed, 43 insertions(+), 24 deletions(-)

diff --git a/docs/astro/src/content/docs/reference/common.mdx b/docs/astro/src/content/docs/reference/common.mdx
index b7bd217b9c4..a244bbfdced 100644
--- a/docs/astro/src/content/docs/reference/common.mdx
+++ b/docs/astro/src/content/docs/reference/common.mdx
@@ -49,38 +49,57 @@ the element and its children with transparency.
 The opacity is applied to the tree of child elements as if they
 were first drawn into an intermediate layer, and then the whole layer is rendered with this opacity.
 
-
-</SlintProperty>
-
-### visible
-<SlintProperty propName="visible" typeName="bool" defaultValue="true">
-When set to `false`, the element and all his children won't be drawn and not react to mouse input. The element
-will still take up layout space within any layout container.
-
-The following example demonstrates the `opacity` property with children. An opacity is applied to the red rectangle. Since the green rectangle is a child of the red one, you can see the gradient underneath it, but you can't see the red rectangle through the green one.
-<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" scale="3" imageWidth="100" imageHeight="100"  imageAlt='rectangle opacity'>
-```slint
+<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" scale="3" imageWidth="100" imageHeight="310"  imageAlt='rectangle opacity'>
+```slint playground
+component ImageInfo inherits Rectangle {
+    in property <float> img-opacity: 1.0;
+    background: transparent;
+    VerticalLayout {
+        spacing: 5px;
+        Image {
+            source: @image-url("elements/slint-logo.png");
+            opacity: img-opacity;
+        }
+        Text {
+            text: "opacity: " + img-opacity;
+            color: white;
+            horizontal-alignment: center;
+        }
+    }
+}
 export component Example inherits Window {
     width: 100px;
-    height: 100px;
+    height: 310px;
+    background: transparent;
     Rectangle {
-        opacity: 0.5;
-        background: red;
-        border-color: #822;
-        border-width: 5px;
-        width: 50px; height: 50px;
-        x: 10px; y: 10px;
-        Rectangle {
-            background: green;
-            border-color: #050;
-            border-width: 5px;
-            width: 50px; height: 50px;
-            x: 25px; y: 25px;
+        background: #141414df;
+        border-radius: 10px;
+    }
+    VerticalLayout {
+        spacing: 15px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        ImageInfo {
+            img-opacity: 1.0;
+        }
+        ImageInfo {
+            img-opacity: 0.5;
+        }
+        ImageInfo {
+            img-opacity: 0.1;
         }
     }
 }
 ```
 </CodeSnippetMD>
+
+</SlintProperty>
+
+### visible
+<SlintProperty propName="visible" typeName="bool" defaultValue="true">
+When set to `false`, the element and all his children won't be drawn and not react to mouse input. The element
+will still take up layout space within any layout container.
+
 </SlintProperty>
 
 ### absolute-position

From ea1caad8bd550a0e9d587ee18122d96395ac07e0 Mon Sep 17 00:00:00 2001
From: Nigel Breslaw <nigel.breslaw@slint.dev>
Date: Tue, 21 Jan 2025 19:15:14 +0200
Subject: [PATCH 4/4] Better fix

---
 docs/astro/src/content/docs/reference/common.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/astro/src/content/docs/reference/common.mdx b/docs/astro/src/content/docs/reference/common.mdx
index a244bbfdced..bbc1b202fb8 100644
--- a/docs/astro/src/content/docs/reference/common.mdx
+++ b/docs/astro/src/content/docs/reference/common.mdx
@@ -83,10 +83,10 @@ export component Example inherits Window {
             img-opacity: 1.0;
         }
         ImageInfo {
-            img-opacity: 0.5;
+            img-opacity: 0.6;
         }
         ImageInfo {
-            img-opacity: 0.1;
+            img-opacity: 0.3;
         }
     }
 }