Fix Quasar's layout rules for `ui.card` that remove children's borders and shadows (#3444)

* remove Quasar's rule for borders and shadows inside QCard

* modify rules to apply to tight cards only

* add pytest

* update documentation

nicegui/elements/card.py

@@ -16,10 +16,9 @@ class Card(Element):
         It provides a container with a dropped shadow.
 
         Note:
-        There are subtle differences between the Quasar component and this element.
-        In contrast to this element, the original QCard has no padding by default and hides outer borders of nested elements.
+        In contrast to this element,
+        the original QCard has no padding by default and hides outer borders and shadows of nested elements.
         If you want the original behavior, use the `tight` method.
-        If you want the padding and borders for nested children, move the children into another container.
 
         :param align_items: alignment of the items in the card (default: `None`)
         """

nicegui/static/nicegui.js

@@ -383,3 +383,12 @@ function createApp(elements, options) {
     config: options.quasarConfig,
   }));
 }
+
+// HACK: remove Quasar's rules for divs in QCard (#2265, #2301)
+for (let sheet of document.styleSheets) {
+  if (/\/quasar(?:\.prod)?\.css$/.test(sheet.href)) {
+    for (let rule of sheet.cssRules) {
+      if (/\.q-card > div/.test(rule.selectorText)) rule.selectorText = ".nicegui-card-tight" + rule.selectorText;
+    }
+  }
+}

tests/test_card.py

@@ -0,0 +1,13 @@
+from nicegui import ui
+from nicegui.testing import Screen
+
+
+def test_preserve_borders(screen: Screen):
+    with ui.card():
+        ui.label('A').classes('border shadow')
+    with ui.card().tight():
+        ui.label('B').classes('border shadow')
+
+    screen.open('/')
+    assert screen.find('A').value_of_css_property('border') == '1px solid rgb(229, 231, 235)'
+    assert screen.find('B').value_of_css_property('border') == '0px none rgb(0, 0, 0)'

website/documentation/content/card_documentation.py

@@ -14,25 +14,21 @@ def main_demo() -> None:
 @doc.demo('Card without shadow', '''
     You can remove the shadow from a card by adding the `no-shadow` class.
     The following demo shows a 1 pixel wide border instead.
+
+    Alternatively, you can use Quasar's "flat" and "bordered" props to achieve the same effect.
 ''')
 def card_without_shadow() -> None:
     with ui.card().classes('no-shadow border-[1px]'):
         ui.label('See, no shadow!')
 
+    with ui.card().props('flat bordered'):
+        ui.label('Also no shadow!')
 
-@doc.demo('The issue with nested borders', '''
-    The following example shows a table nested in a card.
-    Cards have a default padding in NiceGUI, so the table is not flush with the card's border.
-    The table has the `flat` and `bordered` props set, so it should have a border.
-    However, due to the way QCard is designed, the border is not visible (first card).
-    There are two ways to fix this:
-
-    - To get the original QCard behavior, use the `tight` method (second card).
-        It removes the padding and the table border collapses with the card border.
-
-    - To preserve the padding _and_ the table border, move the table into another container like a `ui.row` (third card).
 
-    See https://github.com/zauberzeug/nicegui/issues/726 for more information.
+@doc.demo('Tight card layout', '''
+    By default, cards have a padding.
+    You can remove the padding and gaps between nested elements by using the `tight` method.
+    This also hides outer borders and shadows of nested elements, like in an original QCard.
 ''')
 def custom_context_menu() -> None:
     columns = [{'name': 'age', 'label': 'Age', 'field': 'age'}]
@@ -45,9 +41,5 @@ def custom_context_menu() -> None:
         with ui.card().tight():
             ui.table(columns, rows).props('flat bordered')
 
-        with ui.card():
-            with ui.row():
-                ui.table(columns, rows).props('flat bordered')
-
 
 doc.reference(ui.card)