Update web tutorials for 0.5.0-build228 (#833)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>

templates/web-template/build.gradle.kts

@@ -5,7 +5,7 @@ plugins {
     // __KOTLIN_COMPOSE_VERSION__
     kotlin("multiplatform") version "1.5.10"
     // __LATEST_COMPOSE_RELEASE_VERSION__
-    id("org.jetbrains.compose") version ("0.5.0-build226")
+    id("org.jetbrains.compose") version ("0.5.0-build228")
 }
 
 repositories {

tutorials/Web/Building_UI/README.md

@@ -26,9 +26,9 @@ Let's have a look at the Composable for a `Div` tag (most other tags have the sa
 Div(
     attrs = {
         // specify attributes here
-    },
+        style {
-    style = {
+            // specify inline style here
-        // specify inline style here
+        }
     }
 ) {
     // div content goes here
@@ -40,9 +40,7 @@ For convenience, some tags like `Input`, `A`, `Form`, or `Img` allow you to spec
 ``` kotlin
 Input(
     type = InputType.Text, // All InputTypes supported
-    value = "", // sets the input value
+    attrs = {}
-    attrs = {},
-    style = {}
 )
 ```
 
@@ -64,7 +62,7 @@ If you want to apply styles to text, it needs to be wrapped in a container with
 
 ``` kotlin
 Span(
-    style = { color("red") } // inline style
+    attrs = { style { color("red") } } // inline style
 ) {
     Text("Red text")
 }
@@ -160,12 +158,14 @@ You can declare inline styles via the `style` block of a component:
 
 ``` kotlin
 Div(
-    style = {
+    attrs = {
-        display(DisplayStyle.Flex)
+        style {
-        padding(20.px)
+            display(DisplayStyle.Flex)
-        
+            padding(20.px)
-        // custom property
+            
-        property("font-family", "Arial, Helvetica, sans-serif")
+            // custom property
+            property("font-family", "Arial, Helvetica, sans-serif")
+        }
     }
 ) { /* content goes here */ }
 ```
@@ -196,12 +196,9 @@ fun main() {
 
         Input(
             type = InputType.Text, // All InputTypes supported
-            value = "", // sets the input value
             attrs = {}
         )
 
-        Input(attrs = { type(InputType.Text) })
-
         Text("Arbitrary text")
 
         Span({

tutorials/Web/Events_Handling/README.md

@@ -27,9 +27,8 @@ val text = remember { mutableStateOf("") }
 TextArea(
     value = text.value,
     attrs = {
-        onTextInput { wrappedTextInputEvent ->
+        onInput {
-            // wrappedTextInputEvent is of `WrappedTextInputEvent` type
+            text.value = it.value
-            text.value = wrappedTextInputEvent.inputValue
         }
     }
 )
@@ -84,9 +83,8 @@ fun main() {
         TextArea(
             value = text.value,
             attrs = {
-                onTextInput { wrappedTextInputEvent ->
+                onInput {
-                    // wrappedTextInputEvent is of `WrappedTextInputEvent` type
+                    text.value = it.value
-                    text.value = wrappedTextInputEvent.inputValue
                 }
             }
         )

tutorials/Web/Getting_Started/README.md

@@ -43,7 +43,7 @@ pluginManagement {
 // Add compose gradle plugin
 plugins {
     kotlin("multiplatform") version "1.5.10"
-    id("org.jetbrains.compose") version "0.5.0-build226"
+    id("org.jetbrains.compose") version "0.5.0-build228"
 }
 
 // Add maven repositories

web/gradle.properties

@@ -1,3 +1,3 @@
-COMPOSE_CORE_VERSION=0.5.0-build227
+COMPOSE_CORE_VERSION=0.5.0-build228
 COMPOSE_WEB_VERSION=0.0.16-SNAPSHOT
 COMPOSE_WEB_BUILD_WITH_EXAMPLES=false