replace Design enum with .tight() method

main.py

@@ -8,7 +8,7 @@ import docutils.core
 import re
 import asyncio
 from nicegui.elements.markdown import Markdown
-from nicegui.elements.element import Design, Element
+from nicegui.elements.element import Element
 from nicegui.globals import page_stack
 
 # add docutils css to webpage
@@ -277,7 +277,7 @@ with example(design):
     ui.button().props('icon=touch_app outline round').classes('shadow-lg ml-14')
 
 with example(ui.card):
-    with ui.card(design=Design.plain):
+    with ui.card().tight():
         ui.image('http://placeimg.com/640/360/nature')
         with ui.card_section():
             ui.label('Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...')

nicegui/elements/card.py

@@ -1,25 +1,14 @@
 import justpy as jp
-from .element import Design
 from .group import Group
 
 class Card(Group):
 
-    def __init__(self, design: Design = Design.default):
+    def __init__(self):
         """Card Element
 
         Provides a container with a dropped shadow.
-
-        :param design: `Design.plain` does not apply any stylings to the underlying Quasar card.
-            If ommitted, `Design.default` configures padding and spacing.
-            When using `Design.plain`, content expands to the edges.
-            To provide margins for other content you can use `ui.card_section`.
         """
-        if design == design.default:
-            view = jp.QCard(classes='column items-start q-pa-md', style='gap: 1em', delete_flag=False)
-        elif design == design.plain:
-            view = jp.QCard(delete_flag=False)
-        else:
-            raise Exception(f'unsupported design: {design}')
+        view = jp.QCard(classes='column items-start q-pa-md', style='gap: 1em', delete_flag=False)
         super().__init__(view)
 
 class CardSection(Group):

nicegui/elements/column.py

@@ -1,22 +1,12 @@
 import justpy as jp
-from .element import Design
 from .group import Group
 
 class Column(Group):
 
-    def __init__(self, design: Design = Design.default):
+    def __init__(self):
         '''Row Element
 
         Provides a container which arranges its child in a row.
-
-        :param design: `Design.plain` does not apply any stylings.
-            If ommitted, `Design.default` configures padding and spacing.
         '''
-        if design == design.default:
-            view = jp.QDiv(classes='column items-start', style='gap: 1em', delete_flag=False)
-        elif design == design.plain:
-            view = jp.QDiv(classes='column', delete_flag=False)
-        else:
-            raise Exception(f'unsupported design: {design}')
-
+        view = jp.QDiv(classes='column items-start', style='gap: 1em', delete_flag=False)
         super().__init__(view)

nicegui/elements/element.py

@@ -45,52 +45,48 @@ class Element:
         bind_to(self, 'visible', target_object, target_name, forward=forward)
         return self
 
-    def classes(self, add: str = '', *, remove: str = '', replace: str = ''):
+    def classes(self, add: str = None, *, remove: str = None, replace: str = None):
         '''HTML classes to modify the look of the element.
         Every class in the `remove` parameter will be removed from the element.
         Classes are seperated with a blank space.
         This can be helpful if the predefined classes by NiceGUI are not wanted in a particular styling.
         '''
-        class_list = [] if replace else self.view.classes.split()
-        class_list = [c for c in class_list if c not in remove]
-        class_list += add.split()
-        class_list += replace.split()
+        class_list = [] if replace is not None else self.view.classes.split()
+        class_list = [c for c in class_list if c not in (remove or '')]
+        class_list += (add or '').split()
+        class_list += (replace or '').split()
         self.view.classes = ' '.join(class_list)
 
         return self
 
-    def style(self, add: str = '', *, remove: str = '', replace: str = ''):
+    def style(self, add: str = None, *, remove: str = None, replace: str = None):
         '''CSS style sheet definitions to modify the look of the element.
         Every style in the `remove` parameter will be removed from the element.
         Styles are seperated with a semicolon.
         This can be helpful if the predefined style sheet definitions by NiceGUI are not wanted in a particular styling.
         '''
-        style_list = [] if replace else self.view.style.split(';')
-        style_list = [c for c in style_list if c not in remove.split(';')]
-        style_list += add.split(';')
-        style_list += replace.split(';')
+        style_list = [] if replace is not None else self.view.style.split(';')
+        style_list = [c for c in style_list if c not in (remove or '').split(';')]
+        style_list += (add or '').split(';')
+        style_list += (replace or '').split(';')
         self.view.style = ';'.join(style_list)
 
         return self
 
-    def props(self, add: str = '', *, remove: str = '', replace: str = ''):
+    def props(self, add: str = None, *, remove: str = None, replace: str = None):
         '''Quasar props https://quasar.dev/vue-components/button#design to modify the look of the element.
         Boolean props will automatically activated if they appear in the list of the `add` property.
         Props are seperated with a blank space.
         Every prop passed to the `remove` parameter will be removed from the element.
         This can be helpful if the predefined props by NiceGUI are not wanted in a particular styling.
         '''
-        for prop in remove.split() + replace.split():
+        for prop in (remove or '').split() + (replace or '').split():
             setattr(self.view, prop.split('=')[0], None)
 
-        for prop in add.split() + replace.split():
+        for prop in (add or '').split() + (replace or '').split():
             if '=' in prop:
                 setattr(self.view, *prop.split('='))
             else:
                 setattr(self.view, prop, True)
 
         return self
-
-class Design(Enum):
-    default = 1
-    plain = 2

nicegui/elements/group.py

@@ -1,3 +1,4 @@
+from __future__ import annotations
 from .element import Element
 from ..globals import view_stack
 
@@ -9,3 +10,6 @@ class Group(Element):
 
     def __exit__(self, *_):
         view_stack.pop()
+
+    def tight(self) -> Group:
+        return self.classes(replace='').style(replace='')

nicegui/elements/row.py

@@ -1,22 +1,12 @@
 import justpy as jp
-from .element import Design
 from .group import Group
 
 class Row(Group):
 
-    def __init__(self, design: Design = Design.default):
+    def __init__(self):
         '''Row Element
 
         Provides a container which arranges its child in a row.
-
-        :param design: `Design.plain` does not apply any stylings.
-            If ommitted, `Design.default` configures padding and spacing.
         '''
-        if design == design.default:
-            view = jp.QDiv(classes='row items-start', style='gap: 1em', delete_flag=False)
-        elif design == design.plain:
-            view = jp.QDiv(classes='row', delete_flag=False)
-        else:
-            raise Exception(f'unsupported design: {design}')
-
+        view = jp.QDiv(classes='row items-start', style='gap: 1em', delete_flag=False)
         super().__init__(view)