code review; merge tests

nicegui/elements/list.py

@@ -17,9 +17,9 @@ class List(Element):
         super().__init__('q-list')
 
 
-class ListItem(DisableableElement):
+class Item(DisableableElement):
 
-    def __init__(self, on_click: Optional[Callable[..., Any]] = None) -> None:
+    def __init__(self, *, on_click: Optional[Callable[..., Any]] = None) -> None:
         """List Item
 
         Creates a list item based on Quasar's `QItem <https://quasar.dev/vue-components/list-and-list-items#qitem-api>`_ component.
@@ -29,10 +29,10 @@ class ListItem(DisableableElement):
 
         if on_click:
             self._props['clickable'] = True
-            self.on('click', lambda e: handle_event(on_click, ClickEventArguments(sender=self, client=self.client)))
+            self.on('click', lambda _: handle_event(on_click, ClickEventArguments(sender=self, client=self.client)))
 
 
-class ListItemSection(Element):
+class ItemSection(Element):
 
     def __init__(self) -> None:
         """
@@ -41,11 +41,10 @@ class ListItemSection(Element):
         Creates an item section based on Quasar's `QItemList <https://quasar.dev/vue-components/list-and-list-items#qitemsection-api>`_ component.
         The section should be placed inside a list item element.
         """
-
         super().__init__('q-item-section')
 
 
-class ListItemLabel(TextElement):
+class ItemLabel(TextElement):
 
     def __init__(self, text: str = '') -> None:
         """
@@ -53,7 +52,6 @@ class ListItemLabel(TextElement):
 
         Creates an item label based on Quasar's `QItemLabel <https://quasar.dev/vue-components/list-and-list-items#qitemlabel-api>`_ component.
 
-        :param text: text to be displayed (default: '')
+        :param text: text to be displayed (default: "")
         """
-
         super().__init__(tag='q-item-label', text=text)

nicegui/ui.py

@@ -152,10 +152,10 @@ from .elements.leaflet import Leaflet as leaflet
 from .elements.line_plot import LinePlot as line_plot
 from .elements.link import Link as link
 from .elements.link import LinkTarget as link_target
+from .elements.list import Item as item
+from .elements.list import ItemLabel as item_label
+from .elements.list import ItemSection as item_section
 from .elements.list import List as list  # pylint: disable=redefined-builtin
-from .elements.list import ListItem as item
-from .elements.list import ListItemLabel as item_label
-from .elements.list import ListItemSection as item_section
 from .elements.log import Log as log
 from .elements.markdown import Markdown as markdown
 from .elements.menu import Menu as menu

tests/test_list.py

@@ -2,48 +2,23 @@ from nicegui import ui
 from nicegui.testing import Screen
 
 
-def test_list(screen: Screen):
-    with ui.button('List'):
-        with ui.list():
-            with ui.item():
-                ui.item_label('Test')
-
-    screen.open('/')
-    screen.click('List')
-    screen.should_contain('Test')
-
-
 def test_clicking_items(screen: Screen):
-    label = ui.label()
     with ui.list():
-        with ui.item(on_click=lambda: label.set_text('Clicked item 1')):
-            ui.item_label('Item 1')
-        with ui.item(on_click=lambda: label.set_text('Clicked item 2')):
-            ui.item_label('Item 2')
+        with ui.item(on_click=lambda: ui.notify('Clicked item 1')):
+            with ui.item_section():
+                ui.item_label('Item 1')
+        with ui.item(on_click=lambda: ui.notify('Clicked item 2')):
+            with ui.item_section():
+                ui.item_label('Item 2')
+            with ui.item_section():
+                ui.button('Button').on('click.stop', lambda: ui.notify('Clicked button!'))
 
     screen.open('/')
-    screen.should_contain('Item 1')
-    screen.should_contain('Item 2')
-
     screen.click('Item 1')
     screen.should_contain('Clicked item 1')
 
-
-def test_clicking_nested_sections(screen: Screen):
-    label = ui.label()
-    with ui.list():
-        with ui.item(on_click=lambda: label.set_text('Clicked!')):
-            with ui.item_section().props('avatar'):
-                ui.button('Button').on('click.stop', lambda: label.set_text('Clicked button!'))
-            with ui.item_section():
-                ui.item_label('Item')
-
-    screen.open('/')
-    screen.should_contain('Button')
-    screen.should_contain('Item')
+    screen.click('Item 2')
+    screen.should_contain('Clicked item 2')
 
     screen.click('Button')
     screen.should_contain('Clicked button!')
-
-    screen.click('Item')
-    screen.should_contain('Clicked!')

website/documentation/content/list_documentation.py

@@ -20,14 +20,15 @@ def main_demo() -> None:
                 ui.item_label('13 Walnuts')
 
 
-@doc.demo('Use List Items and List Sections to Structure Content', '''
-    Items use item sections to structure their content. Item labels take different positions depending on their props.
-    ''')
+@doc.demo('Items, Sections and Labels', '''
+    List items use item sections to structure their content.
+    Item labels take different positions depending on their props.
+''')
 def contact_list():
     with ui.list().props('bordered separator'):
         ui.item_label('Contacts').props('header').classes('text-bold')
         ui.separator()
-        with ui.item(on_click=lambda: contact.set_text('Selected contact 1')):
+        with ui.item(on_click=lambda: ui.notify('Selected contact 1')):
             with ui.item_section().props('avatar'):
                 ui.icon('person')
             with ui.item_section():
@@ -35,7 +36,7 @@ def contact_list():
                 ui.item_label('name').props('caption')
             with ui.item_section().props('side'):
                 ui.icon('chat')
-        with ui.item(on_click=lambda: contact.set_text('Selected contact 2')):
+        with ui.item(on_click=lambda: ui.notify('Selected contact 2')):
             with ui.item_section().props('avatar'):
                 ui.icon('person')
             with ui.item_section():
@@ -43,7 +44,9 @@ def contact_list():
                 ui.item_label('name').props('caption')
             with ui.item_section().props('side'):
                 ui.icon('chat')
-    contact = ui.label()
 
 
-doc.reference(ui.list)
+doc.reference(ui.list, title='Reference for ui.list')
+doc.reference(ui.item, title='Reference for ui.item')
+doc.reference(ui.item_section, title='Reference for ui.item_section')
+doc.reference(ui.item_label, title='Reference for ui.item_label')

website/documentation/content/section_page_layout.py

@@ -34,6 +34,7 @@ doc.intro(card_documentation)
 doc.intro(column_documentation)
 doc.intro(row_documentation)
 doc.intro(grid_documentation)
+doc.intro(list_documentation)
 
 
 @doc.demo('Clear Containers', '''
@@ -77,4 +78,3 @@ doc.intro(tooltip_documentation)
 doc.intro(notify_documentation)
 doc.intro(notification_documentation)
 doc.intro(dialog_documentation)
-doc.intro(list_documentation)