From 6e93770459c36756002018614dc2d3824dc70ffb Mon Sep 17 00:00:00 2001
From: "jeremy@jermolene.com" <jeremy@jermolene.com>
Date: Sun, 7 Mar 2021 10:23:14 +0000
Subject: [PATCH] Update RangeWidget and RadioWidget examples from #5158

@pmario we avoid using the details element because it doesn't remember its state across refreshes. It's not something that we should encourage people to use if they don't understand the limitations.

I also simplified the radio widget example because putting all the options on one line with a vertical bar separator is not a common way to display radio buttons.
---
 .../tiddlers/widgets/RadioWidget Example.tid  | 25 +++++++++++--------
 .../tiddlers/widgets/RangeWidget Example.tid  |  9 +++----
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/editions/tw5.com/tiddlers/widgets/RadioWidget Example.tid b/editions/tw5.com/tiddlers/widgets/RadioWidget Example.tid
index 64d8914c1..577ed7f16 100644
--- a/editions/tw5.com/tiddlers/widgets/RadioWidget Example.tid	
+++ b/editions/tw5.com/tiddlers/widgets/RadioWidget Example.tid	
@@ -1,5 +1,5 @@
 created: 20201130181015815
-modified: 20201130183426619
+modified: 20210307102027763
 tags: RadioWidget
 title: RadioWidget Example
 type: text/vnd.tiddlywiki
@@ -14,19 +14,22 @@ type: text/vnd.tiddlywiki
 
 !! Using Actions
 
-If you select an option, the value is written to $:/temp/test/value and the ''id'' field of tiddler: $:/temp/test will be updated. 
+When you select an option below the following acitons will occur:
 
-A notification showing the ''actionValue'' will be shown.
+* the value is written to $:/temp/test/value
+* the ''id'' field of tiddler: $:/temp/test will be updated
+* a notification showing the ''actionValue'' will be shown
 
 <$tiddler tiddler="$:/temp/test">
-	<$radio field="id" value="a" actions=<<radioActions>> > Option a </$radio>|
-	<$radio field="id" value="b" actions=<<radioActions>> > Option b </$radio>|
-	<$radio field="id" value="c" actions=<<radioActions>> > Option c </$radio>|
+
+<$radio field="id" value="a" actions=<<radioActions>> > Option a </$radio>
+
+<$radio field="id" value="b" actions=<<radioActions>> > Option b </$radio>
+
+<$radio field="id" value="c" actions=<<radioActions>> > Option c </$radio>
+
 </$tiddler>
 
----
+The wikitext of this example is shown below:
 
-<details>
-    <summary>Show the code [[RadioWidget Example]]</summary>
-    <pre><code><$view mode=text&><pre><code>
-</details>
+<$codeblock code={{RadioWidget Example!!text}}/>
diff --git a/editions/tw5.com/tiddlers/widgets/RangeWidget Example.tid b/editions/tw5.com/tiddlers/widgets/RangeWidget Example.tid
index 822313374..731ec41a7 100644
--- a/editions/tw5.com/tiddlers/widgets/RangeWidget Example.tid	
+++ b/editions/tw5.com/tiddlers/widgets/RangeWidget Example.tid	
@@ -1,5 +1,5 @@
 created: 20201130191618831
-modified: 20201130194441670
+modified: 20210307102027763
 tags: RangeWidget
 title: RangeWidget Example
 type: text/vnd.tiddlywiki
@@ -48,7 +48,6 @@ type: text/vnd.tiddlywiki
 
 ---
 
-<details>
-    <summary>Show the code [[RangeWidget Example]]</summary>
-    <pre><code><$view mode=text&><pre><code>
-</details>
+The wikitext of this example is shown below:
+
+<$codeblock code={{RangeWidget Example!!text}}/>