code review

nicegui/elements/avatar.py

@@ -1,36 +1,44 @@
-from typing import Literal
+from typing import Literal, Optional
 
 from ..element import Element
 
 
 class Avatar(Element):
-    def __init__(self, icon: str = "", color: str = "primary", text_color: str | None = None, size: str | None = None,
-                 font_size: str | None = None, shape: Literal['roundend', 'square'] | None = None) -> None:
+
+    def __init__(self,
+                 icon: str = 'none', *,
+                 color: str = 'primary',
+                 text_color: Optional[str] = None,
+                 size: Optional[str] = None,
+                 font_size: Optional[str] = None,
+                 square: bool = False,
+                 rounded: bool = False,
+                 ) -> None:
         """Avatar
 
         A avatar element wrapping Quasar's
         `QAvatar <https://quasar.dev/vue-components/avatar>`_ component.
 
-        :param icon: the name of the icon or icon path (img:path/to/some_image.png)
-        :param color: color name for component from the Quasar Color Palette, examples: primary, teal-10.
-        :param text_color: color name from the Quasar Color Palette, examples: primary, teal-10.
-        :param size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl), examples: 16px, 2rem.
-        :param font_size: size in CSS units, including unit name, of the content (icon, text), examples: 18px, 2rem.
-        :param shape: shape of the avatar, examples: roundend, square.
+        :param icon: name of the icon or image path with "img:" prefix (e.g. "map", "img:path/to/image.png")
+        :param color: color name for component from the Quasar Color Palette (e.g. "primary", "teal-10")
+        :param text_color: color name from the Quasar Color Palette (e.g. "primary", "teal-10")
+        :param size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) (e.g. "16px", "2rem")
+        :param font_size: size in CSS units, including unit name, of the content (icon, text) (e.g. "18px", "2rem")
+        :param square: removes border-radius so borders are squared (default: False)
+        :param rounded: applies a small standard border-radius for a squared shape of the component (default: False)
         """
-        super().__init__("q-avatar")
+        super().__init__('q-avatar')
 
-        self._props["icon"] = icon
-        self._props["color"] = color
+        self._props['icon'] = icon
+        self._props['color'] = color
+        self._props['square'] = square
+        self._props['rounded'] = rounded
 
         if text_color is not None:
-            self._props["text-color"] = text_color
+            self._props['text-color'] = text_color
 
         if size is not None:
-            self._props["size"] = size
+            self._props['size'] = size
 
         if font_size is not None:
-            self._props["font-size"] = font_size
-
-        if shape is not None:
-            self._props[shape] = True
+            self._props['font-size'] = font_size

website/reference.py

@@ -73,20 +73,15 @@ def create_full(menu: ui.element) -> None:
     def label_example():
         ui.label('some label')
 
-    AVATAR_LINK = 'img:https://github.com/zauberzeug/nicegui/raw/main/website/static/logo.png'
-
-    @example(ui.avatar, menu)
-    def avatar_example():
-        avatar_icon = ui.avatar(
-            icon='favorite_border', shape='square',
-            color='teal-9', text_color='grey-11'
-        )
-        avatar_img = ui.avatar(icon=AVATAR_LINK)
-
     @example(ui.icon, menu)
     def icon_example():
         ui.icon('thumb_up')
 
+    @example(ui.avatar, menu)
+    def avatar_example():
+        ui.avatar('favorite_border', text_color='grey-11', square=True)
+        ui.avatar('img:https://nicegui.io/logo.png', color='blue-2')
+
     @example(ui.link, menu)
     def link_example():
         ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')