diff --git a/sdk/python/examples/controls/badge/__init__.py b/sdk/python/examples/controls/badge/__init__.py new file mode 100644 index 0000000000..e69de29bb2 diff --git a/sdk/python/examples/controls/badge/basic.py b/sdk/python/examples/controls/badge/basic.py new file mode 100644 index 0000000000..2c2972e81e --- /dev/null +++ b/sdk/python/examples/controls/badge/basic.py @@ -0,0 +1,31 @@ +import flet as ft + + +def main(page: ft.Page): + page.title = "Badge example" + page.navigation_bar = ft.NavigationBar( + destinations=[ + ft.NavigationBarDestination( + icon=ft.Icon( + ft.Icons.EXPLORE, + badge=ft.Badge(small_size=10), + ), + label="Explore", + ), + ft.NavigationBarDestination( + icon=ft.Icons.COMMUTE, + label="Commute", + ), + ft.NavigationBarDestination( + icon=ft.Icon( + ft.Icons.PHONE, + badge="10", + ) + ), + ] + ) + page.add(ft.Text("Body!")) + + +if __name__ == "__main__": + ft.run(main) diff --git a/sdk/python/packages/flet/docs/controls/alertdialog.md b/sdk/python/packages/flet/docs/controls/alertdialog.md index 23c4d06562..aff62f9ea1 100644 --- a/sdk/python/packages/flet/docs/controls/alertdialog.md +++ b/sdk/python/packages/flet/docs/controls/alertdialog.md @@ -1,10 +1,11 @@ --- class_name: flet.AlertDialog examples: ../../examples/controls/alert_dialog -example_images: ../examples/controls/alert_dialog/media +example_images: ../test-images/examples/material/golden/macos/alert_dialog +example_media: ../examples/controls/alert_dialog/media --- -{{ class_summary(class_name) }} +{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic AlertDialog") }} ## Examples @@ -16,7 +17,7 @@ example_images: ../examples/controls/alert_dialog/media --8<-- "{{ examples }}/modal_and_non_modal.py" ``` -{{ image(example_images + "/modal_and_non_modal.gif", alt="modal-and-non-modal", width="80%") }} +{{ image(example_media + "/modal_and_non_modal.gif", alt="modal-and-non-modal", width="80%") }} {{ class_members(class_name) }} diff --git a/sdk/python/packages/flet/docs/controls/appbar.md b/sdk/python/packages/flet/docs/controls/appbar.md index 3315749766..205c076c7b 100644 --- a/sdk/python/packages/flet/docs/controls/appbar.md +++ b/sdk/python/packages/flet/docs/controls/appbar.md @@ -1,10 +1,11 @@ --- class_name: flet.AppBar examples: ../../examples/controls/app_bar -example_images: ../examples/controls/app_bar/media +example_images: ../test-images/examples/material/golden/macos/app_bar +example_media: ../examples/controls/app_bar/media --- -{{ class_summary(class_name) }} +{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic AppBar", image_width="100%") }} ## Examples @@ -16,7 +17,7 @@ example_images: ../examples/controls/app_bar/media --8<-- "{{ examples }}/actions_and_popup_menu.py" ``` -{{ image(example_images + "/actions_and_popup_menu.gif", alt="actions-and-popup-menu", width="80%") }} +{{ image(example_media + "/actions_and_popup_menu.gif", alt="actions-and-popup-menu", width="80%") }} ### Theme and Material Mode Toggles diff --git a/sdk/python/packages/flet/docs/controls/banner.md b/sdk/python/packages/flet/docs/controls/banner.md index 7a55786ebd..242aad0e43 100644 --- a/sdk/python/packages/flet/docs/controls/banner.md +++ b/sdk/python/packages/flet/docs/controls/banner.md @@ -1,10 +1,11 @@ --- class_name: flet.Banner examples: ../../examples/controls/banner -example_images: ../examples/controls/banner/media +example_images: ../test-images/examples/material/golden/macos/banner +example_media: ../examples/controls/banner/media --- -{{ class_summary(class_name) }} +{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Banner") }} ## Examples @@ -16,7 +17,7 @@ example_images: ../examples/controls/banner/media --8<-- "{{ examples }}/basic.py" ``` -{{ image(example_images + "/basic.gif", alt="basic", width="80%") }} +{{ image(example_media + "/basic.gif", alt="basic", width="80%") }} {{ class_members(class_name) }} diff --git a/sdk/python/packages/flet/docs/controls/dropdownm2.md b/sdk/python/packages/flet/docs/controls/dropdownm2.md index 75f745752a..ce4315e4f0 100644 --- a/sdk/python/packages/flet/docs/controls/dropdownm2.md +++ b/sdk/python/packages/flet/docs/controls/dropdownm2.md @@ -45,7 +45,7 @@ example_media: ../examples/controls/dropdown_m2/media --8<-- "{{ examples }}/add_and_delete_options.py" ``` -{{ image(example_images + "/add_and_delete_options.gif", alt="add-and-delete-options", width="80%") }} +{{ image(example_media + "/add_and_delete_options.gif", alt="add-and-delete-options", width="80%") }} {{ class_members(class_name) }} diff --git a/sdk/python/packages/flet/docs/controls/markdown.md b/sdk/python/packages/flet/docs/controls/markdown.md index ba761f464c..571e51640f 100644 --- a/sdk/python/packages/flet/docs/controls/markdown.md +++ b/sdk/python/packages/flet/docs/controls/markdown.md @@ -1,10 +1,11 @@ --- class_name: flet.Markdown examples: ../../examples/controls/markdown -example_images: ../examples/controls/markdown/media +example_images: ../test-images/examples/core/golden/macos/markdown +example_media: ../examples/controls/markdown/media --- -{{ class_summary(class_name) }} +{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Markdown") }} ## Examples @@ -16,7 +17,7 @@ example_images: ../examples/controls/markdown/media --8<-- "{{ examples }}/basic.py" ``` -{{ image(example_images + "/basic.gif", alt="basic", width="80%") }} +{{ image(example_media + "/basic.gif", alt="basic", width="80%") }} ### Code syntax highlight diff --git a/sdk/python/packages/flet/docs/types/badge.md b/sdk/python/packages/flet/docs/types/badge.md index 4fe124087f..323cc6c871 100644 --- a/sdk/python/packages/flet/docs/types/badge.md +++ b/sdk/python/packages/flet/docs/types/badge.md @@ -1,4 +1,10 @@ -{{ class_all_options("flet.Badge") }} +--- +class_name: flet.Badge +examples: ../../examples/controls/badge +example_images: ../test-images/examples/material/golden/macos/badge +--- + +{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Badge") }} ## Examples @@ -6,43 +12,11 @@ ### Badge decorating an icon on a NavigationBar - - - ```python -import flet as ft - - -def main(page: ft.Page): - page.title = "Badge example" - - page.navigation_bar = ft.NavigationBar( - destinations=[ - ft.NavigationBarDestination( - icon_content=ft.Icon( - ft.Icons.EXPLORE, - badge=ft.Badge(small_size=10), - ), - label="Explore", - ), - ft.NavigationBarDestination( - icon=ft.Icons.COMMUTE, - label="Commute", - ), - ft.NavigationBarDestination( - icon_content=ft.Icon( - ft.Icons.PHONE, - badge="10", - ) - ), - ] - ) - page.add(ft.Text("Body!")) - - -ft.run(main) +--8<-- "{{ examples }}/basic.py" ``` - - - + +{{ image(example_images + "/badge-navigation-bar.png", alt="badge-navigation-bar", width="80%") }} + +{{ class_members(class_name) }} diff --git a/sdk/python/packages/flet/integration_tests/examples/core/golden/macos/markdown/image_for_docs.png b/sdk/python/packages/flet/integration_tests/examples/core/golden/macos/markdown/image_for_docs.png new file mode 100644 index 0000000000..8d4217cb79 Binary files /dev/null and b/sdk/python/packages/flet/integration_tests/examples/core/golden/macos/markdown/image_for_docs.png differ diff --git a/sdk/python/packages/flet/integration_tests/examples/core/test_markdown.py b/sdk/python/packages/flet/integration_tests/examples/core/test_markdown.py new file mode 100644 index 0000000000..7e4135c9f8 --- /dev/null +++ b/sdk/python/packages/flet/integration_tests/examples/core/test_markdown.py @@ -0,0 +1,16 @@ +import pytest + +import flet as ft +import flet.testing as ftt + + +@pytest.mark.asyncio(loop_scope="function") +async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request): + flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT + await flet_app_function.assert_control_screenshot( + request.node.name, + ft.Markdown( + value="# Welcome\n\nThis is **Markdown** rendered in Flet.", + width=260, + ), + ) diff --git a/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/alert_dialog/image_for_docs.png b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/alert_dialog/image_for_docs.png new file mode 100644 index 0000000000..a3d03d385e Binary files /dev/null and b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/alert_dialog/image_for_docs.png differ diff --git a/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/app_bar/image_for_docs.png b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/app_bar/image_for_docs.png new file mode 100644 index 0000000000..60e853b38b Binary files /dev/null and b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/app_bar/image_for_docs.png differ diff --git a/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/badge/badge-navigation-bar.png b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/badge/badge-navigation-bar.png new file mode 100644 index 0000000000..05e2ca02c5 Binary files /dev/null and b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/badge/badge-navigation-bar.png differ diff --git a/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/badge/image_for_docs.png b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/badge/image_for_docs.png new file mode 100644 index 0000000000..8b4386a912 Binary files /dev/null and b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/badge/image_for_docs.png differ diff --git a/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/banner/image_for_docs.png b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/banner/image_for_docs.png new file mode 100644 index 0000000000..a8f39edd15 Binary files /dev/null and b/sdk/python/packages/flet/integration_tests/examples/material/golden/macos/banner/image_for_docs.png differ diff --git a/sdk/python/packages/flet/integration_tests/examples/material/test_alert_dialog.py b/sdk/python/packages/flet/integration_tests/examples/material/test_alert_dialog.py new file mode 100644 index 0000000000..acc687e0b7 --- /dev/null +++ b/sdk/python/packages/flet/integration_tests/examples/material/test_alert_dialog.py @@ -0,0 +1,27 @@ +import pytest + +import flet as ft +import flet.testing as ftt + + +@pytest.mark.asyncio(loop_scope="function") +async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request): + flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT + dialog = ft.AlertDialog( + title=ft.Text("Session expired"), + content=ft.Text("Please sign in again to continue."), + actions=[ft.TextButton("Dismiss")], + open=True, + ) + flet_app_function.page.enable_screenshots = True + flet_app_function.page.window.width = 350 + flet_app_function.page.window.height = 300 + flet_app_function.page.add(dialog) + flet_app_function.page.update() + await flet_app_function.tester.pump_and_settle() + flet_app_function.assert_screenshot( + "test_image_for_docs", + await flet_app_function.page.take_screenshot( + pixel_ratio=flet_app_function.screenshots_pixel_ratio + ), + ) diff --git a/sdk/python/packages/flet/integration_tests/examples/material/test_app_bar.py b/sdk/python/packages/flet/integration_tests/examples/material/test_app_bar.py new file mode 100644 index 0000000000..31fb96e3bc --- /dev/null +++ b/sdk/python/packages/flet/integration_tests/examples/material/test_app_bar.py @@ -0,0 +1,21 @@ +import pytest + +import flet as ft +import flet.testing as ftt + + +@pytest.mark.asyncio(loop_scope="function") +async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request): + flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT + await flet_app_function.assert_control_screenshot( + request.node.name, + ft.AppBar( + leading=ft.Icon(ft.Icons.MENU), + title=ft.Text("Dashboard"), + actions=[ + ft.IconButton(ft.Icons.SEARCH), + ft.IconButton(ft.Icons.MORE_VERT), + ], + bgcolor=ft.Colors.SURFACE_CONTAINER, + ), + ) diff --git a/sdk/python/packages/flet/integration_tests/examples/material/test_badge.py b/sdk/python/packages/flet/integration_tests/examples/material/test_badge.py new file mode 100644 index 0000000000..a1de4abd87 --- /dev/null +++ b/sdk/python/packages/flet/integration_tests/examples/material/test_badge.py @@ -0,0 +1,40 @@ +import pytest + +import flet as ft +import flet.testing as ftt +from examples.controls.badge import basic + + +@pytest.mark.asyncio(loop_scope="function") +async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request): + flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT + await flet_app_function.assert_control_screenshot( + request.node.name, + ft.Container( + padding=10, + content=ft.FilledIconButton( + icon=ft.Icons.PHONE, + badge=ft.Badge(label="3"), + ), + ), + ) + + +@pytest.mark.parametrize( + "flet_app_function", + [{"flet_app_main": basic.main}], + indirect=True, +) +@pytest.mark.asyncio(loop_scope="function") +async def test_basic(flet_app_function: ftt.FletTestApp): + flet_app_function.page.enable_screenshots = True + flet_app_function.page.window.width = 350 + flet_app_function.page.window.height = 300 + flet_app_function.page.update() + await flet_app_function.tester.pump_and_settle() + flet_app_function.assert_screenshot( + "badge-navigation-bar", + await flet_app_function.page.take_screenshot( + pixel_ratio=flet_app_function.screenshots_pixel_ratio + ), + ) diff --git a/sdk/python/packages/flet/integration_tests/examples/material/test_banner.py b/sdk/python/packages/flet/integration_tests/examples/material/test_banner.py new file mode 100644 index 0000000000..b7a6b5a3ce --- /dev/null +++ b/sdk/python/packages/flet/integration_tests/examples/material/test_banner.py @@ -0,0 +1,30 @@ +import pytest + +import flet as ft +import flet.testing as ftt + + +@pytest.mark.asyncio(loop_scope="function") +async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request): + page = flet_app_function.page + page.theme_mode = ft.ThemeMode.LIGHT + page.enable_screenshots = True + page.window.width = 400 + page.window.height = 200 + banner = ft.Banner( + leading=ft.Icon(ft.Icons.INFO_OUTLINED, color=ft.Colors.PRIMARY), + content=ft.Text("Backup completed successfully."), + actions=[ft.TextButton("Dismiss")], + bgcolor=ft.Colors.SURFACE_CONTAINER_LOW, + open=True, + ) + page.add(banner) + page.update() + await flet_app_function.tester.pump_and_settle() + flet_app_function.assert_screenshot( + "test_image_for_docs", + await flet_app_function.page.take_screenshot( + pixel_ratio=flet_app_function.screenshots_pixel_ratio + ), + ) + page.update() diff --git a/sdk/python/packages/flet/src/flet/controls/core/markdown.py b/sdk/python/packages/flet/src/flet/controls/core/markdown.py index 05e6af9c9a..6e50b8d802 100644 --- a/sdk/python/packages/flet/src/flet/controls/core/markdown.py +++ b/sdk/python/packages/flet/src/flet/controls/core/markdown.py @@ -233,6 +233,13 @@ class MarkdownCustomCodeTheme: class Markdown(LayoutControl): """ Renders text in markdown format. + + ```python + ft.Markdown( + value="# Welcome\\n\\nThis is **Markdown** rendered in Flet.", + width=260, + ) + ``` """ value: str = "" diff --git a/sdk/python/packages/flet/src/flet/controls/material/alert_dialog.py b/sdk/python/packages/flet/src/flet/controls/material/alert_dialog.py index 76b7ec70b1..e3058a2b9b 100644 --- a/sdk/python/packages/flet/src/flet/controls/material/alert_dialog.py +++ b/sdk/python/packages/flet/src/flet/controls/material/alert_dialog.py @@ -27,6 +27,15 @@ class AlertDialog(DialogControl): It has an optional [`title`][(c).] and an optional list of [`actions`][(c).] . The `title` is displayed above the [`content`][(c).] and the `actions` are displayed below the `content`. + + ```python + ft.AlertDialog( + title=ft.Text("Session expired"), + content=ft.Text("Please sign in again to continue."), + actions=[ft.TextButton("Dismiss")], + open=True, + ) + ``` """ content: Optional[Control] = None diff --git a/sdk/python/packages/flet/src/flet/controls/material/app_bar.py b/sdk/python/packages/flet/src/flet/controls/material/app_bar.py index 4e826eeb08..0de1546d87 100644 --- a/sdk/python/packages/flet/src/flet/controls/material/app_bar.py +++ b/sdk/python/packages/flet/src/flet/controls/material/app_bar.py @@ -18,6 +18,18 @@ class AppBar(AdaptiveControl): """ A material design app bar. + + ```python + ft.AppBar( + leading=ft.Icon(ft.Icons.MENU), + title=ft.Text("Dashboard"), + actions=[ + ft.IconButton(ft.Icons.SEARCH), + ft.IconButton(ft.Icons.MORE_VERT), + ], + bgcolor=ft.Colors.SURFACE_CONTAINER, + ) + ``` """ leading: Optional[Control] = None diff --git a/sdk/python/packages/flet/src/flet/controls/material/badge.py b/sdk/python/packages/flet/src/flet/controls/material/badge.py index f7f80c1651..69436d65af 100644 --- a/sdk/python/packages/flet/src/flet/controls/material/badge.py +++ b/sdk/python/packages/flet/src/flet/controls/material/badge.py @@ -16,6 +16,13 @@ class Badge(BaseControl): Badges are used to show notifications, counts, or status information on navigation items such as [`NavigationBar`][flet.] or [`NavigationRail`][flet.] destinations or a button's icon. + + ```python + ft.FilledIconButton( + icon=ft.Icons.PHONE, + badge=ft.Badge(label="3"), + ) + ``` """ label: Optional[StrOrControl] = None diff --git a/sdk/python/packages/flet/src/flet/controls/material/banner.py b/sdk/python/packages/flet/src/flet/controls/material/banner.py index 0d6046b10b..1305677b56 100644 --- a/sdk/python/packages/flet/src/flet/controls/material/banner.py +++ b/sdk/python/packages/flet/src/flet/controls/material/banner.py @@ -26,6 +26,17 @@ class Banner(DialogControl): Banners are displayed at the top of the screen, below a top app bar. They are persistent and non-modal, allowing the user to either ignore them or interact with them at any time. + + ```python + banner = ft.Banner( + leading=ft.Icon(ft.Icons.INFO_OUTLINED, color=ft.Colors.PRIMARY), + content=ft.Text("Backup completed successfully."), + actions=[ft.TextButton("Dismiss")], + bgcolor=ft.Colors.SURFACE_CONTAINER_LOW, + open=True, + ) + page.show_dialog(banner) + ``` """ content: StrOrControl