Owen/control docs p4 (#5757)

* add snackbar example tests and images

* add shader mask example tests and images

* fix failing shadermask tests/iamges

* add selection area example tests and images

* remove commented test

* fix shader mask image location and add code snippet

* add SegmentedButton example tests and images

* fix missing images, centered code snippet, add code snippets to slider, snackbar, verticaldivider

Author: OwenMcDonnell

sdk/python/examples/controls/chip/filter_chips.py

@@ -8,7 +8,12 @@ def handle_amenity_selection(e: ft.Event[ft.Chip]):
     amenities = ["Washer / Dryer", "Ramp access", "Dogs OK", "Cats OK", "Smoke-free"]
 
     page.add(
-        ft.Row(controls=[ft.Icon(ft.Icons.HOTEL_CLASS), ft.Text("Amenities")]),
+        ft.Row(
+            controls=[
+                ft.Icon(ft.Icons.HOTEL_CLASS),
+                ft.Text("Amenities"),
+            ]
+        ),
         ft.Row(
             controls=[
                 ft.Chip(

sdk/python/examples/controls/navigation_rail/basic.py

@@ -37,7 +37,7 @@ def main(page: ft.Page):
         ft.Row(
             expand=True,
             controls=[
-                rail,
+                ft.SelectionArea(content=rail),
                 ft.VerticalDivider(width=1),
                 ft.Column(
                     alignment=ft.MainAxisAlignment.START,

sdk/python/examples/controls/segmented_button/__init__.py

@@ -9,61 +9,62 @@ def handle_selection_change(e: ft.Event[ft.SegmentedButton]):
         ft.SegmentedButton(
             on_change=handle_selection_change,
             selected_icon=ft.Icon(ft.Icons.CHECK_SHARP),
-            selected=["1"],
+            selected=["1", "4"],
             allow_empty_selection=True,
             allow_multiple_selection=True,
             segments=[
                 ft.Segment(
                     value="1",
-                    label=ft.Text("1"),
+                    label=ft.Text("One"),
                     icon=ft.Icon(ft.Icons.LOOKS_ONE),
                 ),
                 ft.Segment(
                     value="2",
-                    label=ft.Text("2"),
+                    label=ft.Text("Two"),
                     icon=ft.Icon(ft.Icons.LOOKS_TWO),
                 ),
                 ft.Segment(
                     value="3",
-                    label=ft.Text("3"),
+                    label=ft.Text("Three"),
                     icon=ft.Icon(ft.Icons.LOOKS_3),
                 ),
                 ft.Segment(
                     value="4",
-                    label=ft.Text("4"),
+                    label=ft.Text("Four"),
                     icon=ft.Icon(ft.Icons.LOOKS_4),
                 ),
             ],
         ),
         ft.SegmentedButton(
             on_change=handle_selection_change,
-            selected_icon=ft.Icon(ft.Icons.ONETWOTHREE),
+            selected_icon=ft.Icon(ft.Icons.CHECK_SHARP),
             selected=["2"],
             allow_multiple_selection=False,
             segments=[
                 ft.Segment(
                     value="1",
-                    label=ft.Text("1"),
+                    label=ft.Text("One"),
                     icon=ft.Icon(ft.Icons.LOOKS_ONE),
                 ),
                 ft.Segment(
                     value="2",
-                    label=ft.Text("2"),
+                    label=ft.Text("Two"),
                     icon=ft.Icon(ft.Icons.LOOKS_TWO),
                 ),
                 ft.Segment(
                     value="3",
-                    label=ft.Text("3"),
+                    label=ft.Text("Three"),
                     icon=ft.Icon(ft.Icons.LOOKS_3),
                 ),
                 ft.Segment(
                     value="4",
-                    label=ft.Text("4"),
+                    label=ft.Text("Four"),
                     icon=ft.Icon(ft.Icons.LOOKS_4),
                 ),
             ],
         ),
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/segmented_button/basic.py renamed to sdk/python/examples/controls/segmented_button/single_multiple_selection.py

@@ -15,14 +15,27 @@ def main(page: ft.Page):
         ft.SelectionArea(
             content=ft.Column(
                 controls=[
-                    ft.Text("Selectable text", color=ft.Colors.GREEN, style=TEXT_STYLE),
+                    ft.Text(
+                        "Selectable text",
+                        color=ft.Colors.GREEN,
+                        style=TEXT_STYLE,
+                        key="selectable",
+                    ),
                     ft.Text("Also selectable", color=ft.Colors.GREEN, style=TEXT_STYLE),
                 ]
             )
         )
     )
 
-    page.add(ft.Text("Not selectable", color=ft.Colors.RED, style=TEXT_STYLE))
+    page.add(
+        ft.Text(
+            "Not selectable",
+            color=ft.Colors.RED,
+            style=TEXT_STYLE,
+            key="non-selectable",
+        )
+    )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)