Skip to content

Commit d2ce854

Browse files
InesaFitsnerInesaFitsner
authored
Controls images for docs (#5706)
* Add Markdown example and integration test Updated Markdown documentation to include a new example image and code snippet. Added an integration test and golden image for Markdown rendering to improve test coverage and documentation clarity. * Add AlertDialog example and integration test Updated AlertDialog documentation to include a new example image and code snippet. Added an integration test and golden image for AlertDialog to improve test coverage and documentation clarity. * Update AppBar docs and add integration test Improved AppBar documentation with new example image and code snippet. Updated image paths in appbar.md and dropdownm2.md. Added an integration test for AppBar and a corresponding golden image for documentation. * Update Badge docs and add integration test Enhanced Badge documentation with example images and media references. Added an integration test and golden image for Badge control, and included a usage example in the Badge class docstring. * Add badge example and update documentation/tests Introduced a new badge example in sdk/python/examples/controls/badge/basic.py and referenced it in the documentation. Updated integration tests to use the new example and added a corresponding golden image for screenshot comparison. * Add Banner example and integration test Updated Banner documentation to include a new example image and code snippet. Added an integration test and golden image for Banner control to improve test coverage and documentation clarity.
1 parent f05d5f4 commit d2ce854

File tree

24 files changed

+240
-51
lines changed

24 files changed

+240
-51
lines changed

‎sdk/python/examples/controls/badge/__init__.py‎

Whitespace-only changes.

‎sdk/python/examples/controls/badge/basic.py‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import flet as ft
2+
3+
4+
def main(page: ft.Page):
5+
page.title = "Badge example"
6+
page.navigation_bar = ft.NavigationBar(
7+
destinations=[
8+
ft.NavigationBarDestination(
9+
icon=ft.Icon(
10+
ft.Icons.EXPLORE,
11+
badge=ft.Badge(small_size=10),
12+
),
13+
label="Explore",
14+
),
15+
ft.NavigationBarDestination(
16+
icon=ft.Icons.COMMUTE,
17+
label="Commute",
18+
),
19+
ft.NavigationBarDestination(
20+
icon=ft.Icon(
21+
ft.Icons.PHONE,
22+
badge="10",
23+
)
24+
),
25+
]
26+
)
27+
page.add(ft.Text("Body!"))
28+
29+
30+
if __name__ == "__main__":
31+
ft.run(main)

‎sdk/python/packages/flet/docs/controls/alertdialog.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
---
22
class_name: flet.AlertDialog
33
examples: ../../examples/controls/alert_dialog
4-
example_images: ../examples/controls/alert_dialog/media
4+
example_images: ../test-images/examples/material/golden/macos/alert_dialog
5+
example_media: ../examples/controls/alert_dialog/media
56
---
67

7-
{{ class_summary(class_name) }}
8+
{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic AlertDialog") }}
89

910
## Examples
1011

@@ -16,7 +17,7 @@ example_images: ../examples/controls/alert_dialog/media
1617
--8<-- "{{ examples }}/modal_and_non_modal.py"
1718
```
1819

19-
{{ image(example_images + "/modal_and_non_modal.gif", alt="modal-and-non-modal", width="80%") }}
20+
{{ image(example_media + "/modal_and_non_modal.gif", alt="modal-and-non-modal", width="80%") }}
2021

2122

2223
{{ class_members(class_name) }}

‎sdk/python/packages/flet/docs/controls/appbar.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
---
22
class_name: flet.AppBar
33
examples: ../../examples/controls/app_bar
4-
example_images: ../examples/controls/app_bar/media
4+
example_images: ../test-images/examples/material/golden/macos/app_bar
5+
example_media: ../examples/controls/app_bar/media
56
---
67

7-
{{ class_summary(class_name) }}
8+
{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic AppBar", image_width="100%") }}
89

910
## Examples
1011

@@ -16,7 +17,7 @@ example_images: ../examples/controls/app_bar/media
1617
--8<-- "{{ examples }}/actions_and_popup_menu.py"
1718
```
1819

19-
{{ image(example_images + "/actions_and_popup_menu.gif", alt="actions-and-popup-menu", width="80%") }}
20+
{{ image(example_media + "/actions_and_popup_menu.gif", alt="actions-and-popup-menu", width="80%") }}
2021

2122

2223
### Theme and Material Mode Toggles

‎sdk/python/packages/flet/docs/controls/banner.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
---
22
class_name: flet.Banner
33
examples: ../../examples/controls/banner
4-
example_images: ../examples/controls/banner/media
4+
example_images: ../test-images/examples/material/golden/macos/banner
5+
example_media: ../examples/controls/banner/media
56
---
67

7-
{{ class_summary(class_name) }}
8+
{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Banner") }}
89

910
## Examples
1011

@@ -16,7 +17,7 @@ example_images: ../examples/controls/banner/media
1617
--8<-- "{{ examples }}/basic.py"
1718
```
1819

19-
{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
20+
{{ image(example_media + "/basic.gif", alt="basic", width="80%") }}
2021

2122

2223
{{ class_members(class_name) }}

‎sdk/python/packages/flet/docs/controls/dropdownm2.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ example_media: ../examples/controls/dropdown_m2/media
4545
--8<-- "{{ examples }}/add_and_delete_options.py"
4646
```
4747

48-
{{ image(example_images + "/add_and_delete_options.gif", alt="add-and-delete-options", width="80%") }}
48+
{{ image(example_media + "/add_and_delete_options.gif", alt="add-and-delete-options", width="80%") }}
4949

5050

5151
{{ class_members(class_name) }}

‎sdk/python/packages/flet/docs/controls/markdown.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
---
22
class_name: flet.Markdown
33
examples: ../../examples/controls/markdown
4-
example_images: ../examples/controls/markdown/media
4+
example_images: ../test-images/examples/core/golden/macos/markdown
5+
example_media: ../examples/controls/markdown/media
56
---
67

7-
{{ class_summary(class_name) }}
8+
{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Markdown") }}
89

910
## Examples
1011

@@ -16,7 +17,7 @@ example_images: ../examples/controls/markdown/media
1617
--8<-- "{{ examples }}/basic.py"
1718
```
1819

19-
{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
20+
{{ image(example_media + "/basic.gif", alt="basic", width="80%") }}
2021

2122

2223
### Code syntax highlight

‎sdk/python/packages/flet/docs/types/badge.md‎

Lines changed: 12 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,22 @@
1-
{{ class_all_options("flet.Badge") }}
1+
---
2+
class_name: flet.Badge
3+
examples: ../../examples/controls/badge
4+
example_images: ../test-images/examples/material/golden/macos/badge
5+
---
6+
7+
{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Basic Badge") }}
28

39
## Examples
410

511
[Live example](https://flet-controls-gallery.fly.dev/displays/badge)
612

713
### Badge decorating an icon on a NavigationBar
814

9-
<Tabs groupId="language">
10-
<TabItem value="python" label="Python" default>
11-
1215
```python
13-
import flet as ft
14-
15-
16-
def main(page: ft.Page):
17-
page.title = "Badge example"
18-
19-
page.navigation_bar = ft.NavigationBar(
20-
destinations=[
21-
ft.NavigationBarDestination(
22-
icon_content=ft.Icon(
23-
ft.Icons.EXPLORE,
24-
badge=ft.Badge(small_size=10),
25-
),
26-
label="Explore",
27-
),
28-
ft.NavigationBarDestination(
29-
icon=ft.Icons.COMMUTE,
30-
label="Commute",
31-
),
32-
ft.NavigationBarDestination(
33-
icon_content=ft.Icon(
34-
ft.Icons.PHONE,
35-
badge="10",
36-
)
37-
),
38-
]
39-
)
40-
page.add(ft.Text("Body!"))
41-
42-
43-
ft.run(main)
16+
--8<-- "{{ examples }}/basic.py"
4417
```
45-
</TabItem>
46-
</Tabs>
4718

48-
<img src="/img/docs/controls/badge/badge-navigation-bar.png" className="screenshot-50" />
19+
20+
{{ image(example_images + "/badge-navigation-bar.png", alt="badge-navigation-bar", width="80%") }}
21+
22+
{{ class_members(class_name) }}

‎sdk/python/packages/flet/integration_tests/examples/core/golden/macos/markdown/image_for_docs.png‎

12.9 KB
Loading

‎sdk/python/packages/flet/integration_tests/examples/core/test_markdown.py‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import pytest
2+
3+
import flet as ft
4+
import flet.testing as ftt
5+
6+
7+
@pytest.mark.asyncio(loop_scope="function")
8+
async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request):
9+
flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT
10+
await flet_app_function.assert_control_screenshot(
11+
request.node.name,
12+
ft.Markdown(
13+
value="# Welcome\n\nThis is **Markdown** rendered in Flet.",
14+
width=260,
15+
),
16+
)

0 commit comments

Comments
 (0)