rename Grid to grid to align to other elements

pyscript.core/src/stdlib/pyweb/ui/elements.py

@@ -308,10 +308,12 @@ _add_js_properties(
     "width",
 )
 
+
 # NOTE: Input is a reserved keyword in Python, so we use input_ instead
 class input_(ElementBase):
     tag = "input"
 
+
 # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
 _add_js_properties(
     input_,
@@ -352,11 +354,11 @@ _add_js_properties(
 
 
 # Custom Elements
-class Grid(ElementBase):
+class grid(TextElementBase):
     tag = "div"
 
-    def __init__(self, layout="", gap=None, **kwargs):
-        super().__init__(**kwargs)
+    def __init__(self, layout, content=None, gap=None, **kwargs):
+        super().__init__(content, **kwargs)
         self.style["display"] = "grid"
         self.style["grid-template-columns"] = layout
 

pyscript.core/test/ui/demo.py

@@ -4,8 +4,8 @@ import examples
 import styles
 from pyweb import pydom
 from pyweb.ui import elements as el
-from pyweb.ui.elements import a, button, div, Grid, h1, h2, h3, input_
 from pyweb.ui import shoelace
+from pyweb.ui.elements import a, button, div, grid, h1, h2, h3, input_
 from pyweb.ui.markdown import markdown
 
 from pyscript import when, window
@@ -42,7 +42,7 @@ def create_component_details(component_label, component):
 
     """
     # Get the example from the examples catalog
-    example = component['instance']
+    example = component["instance"]
     details = example.__doc__ or f"Details missing for component {component_label}"
 
     div = div(
@@ -117,14 +117,14 @@ def create_component_example(widget, code):
 
     """
     # Create the grid that splits the window in two columns (25% and 75%)
-    grid = Grid("25% 75%")
+    grid_ = grid("25% 75%")
     # Add the widget
-    grid.append(div(widget))
+    grid_.append(div(widget))
     # Add the code div
     widget_code = markdown(dedent(f"""```python\n{code}\n```"""))
-    grid.append(div(widget_code, style=styles.STYLE_CODE_BLOCK))
+    grid_.append(div(widget_code, style=styles.STYLE_CODE_BLOCK))
 
-    return grid
+    return grid_
 
 
 def create_main_area():
@@ -142,6 +142,7 @@ def create_main_area():
         ]
     )
 
+
 def create_markdown_components_page():
     """Create the basic components page.
 
@@ -191,14 +192,14 @@ def create_basic_components_page():
 
     for component_label, component in examples.kits["elements"].items():
         div_.append(h3(component_label))
-        div_.append(create_component_example(component['instance'], component['code']))
+        div_.append(create_component_example(component["instance"], component["code"]))
 
     return div_
 
 
 # ********** CREATE ALL THE LAYOUT **********
 
-grid = Grid("140px 20px auto", style={"min-height": "100%"})
+main_grid = grid("140px 20px auto", style={"min-height": "100%"})
 
 # ********** MAIN PANEL **********
 main_area = create_main_area()
@@ -272,9 +273,7 @@ for component_label, component in examples.kits["shoelace"].items():
 
 
 # ********** ADD LEFT AND MAIN PANEL TO MAIN **********
-grid.append(left_div)
-grid.append(shoelace.Divider(vertical=True))
-grid.append(main_area)
-
-
-pydom.body.append(grid)
+main_grid.append(left_div)
+main_grid.append(shoelace.Divider(vertical=True))
+main_grid.append(main_area)
+pydom.body.append(main_grid)

pyscript.core/test/ui/examples.py

@@ -1,5 +1,20 @@
 from pyweb import pydom
-from pyweb.ui.elements import a, button, code, div, Grid, h1, h2, h3, input_, p
+from pyweb.ui.elements import (
+    a,
+    button,
+    code,
+    div,
+    grid,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    img,
+    input_,
+    p,
+)
 from pyweb.ui.shoelace import (
     Alert,
     Button,
@@ -20,9 +35,7 @@ LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
 Details(LOREM_IPSUM, summary="Try me")
 """
 example_dialog_close_btn = Button("Close")
-example_dialog = Dialog(
-    div([p(LOREM_IPSUM), example_dialog_close_btn]), label="Try me"
-)
+example_dialog = Dialog(div([p(LOREM_IPSUM), example_dialog_close_btn]), label="Try me")
 example_dialog_btn = Button("Open Dialog")
 
 
@@ -112,20 +125,28 @@ Card(p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscri
             "code": code("Radio()"),
         },
     },
-    'elements':{
-        'button': {
-            'instance': btn,
-            'code': '''button("Click me!")
+    "elements": {
+        "button": {
+            "instance": btn,
+            "code": """button("Click me!")
 when('click', btn)(lambda: window.alert("Clicked!"))
-'''
+""",
         },
-        'div': {
-            'instance': div("This is a div", style={'text-align': 'center', 'margin': '0 auto', 'background-color': 'cornsilk'}),
-            'code': 'div("This is a div", style={"text-align": "center", "margin": "0 auto", "background-color": "cornsilk"})'
+        "div": {
+            "instance": div(
+                "This is a div",
+                style={
+                    "text-align": "center",
+                    "margin": "0 auto",
+                    "background-color": "cornsilk",
+                },
+            ),
+            "code": 'div("This is a div", style={"text-align": "center", "margin": "0 auto", "background-color": "cornsilk"})',
         },
-        'input':{
-            'instance': inputs_div,
-            'code': inputs_code
+        "input": {"instance": inputs_div, "code": inputs_code},
+        "grid": {
+            "instance": grid([div("This is a grid")]),
+            "code": 'grid([div("This is a grid")])',
         },
-    }
+    },
 }

pyscript.core/test/ui/gallery.py

@@ -3,12 +3,13 @@ from textwrap import dedent
 
 import styles
 import tictactoe
-from pyscript import when, window
 from pyweb import pydom
 from pyweb.ui import elements as el
 from pyweb.ui import shoelace
 from pyweb.ui.markdown import markdown
 
+from pyscript import when, window
+
 MAIN_PAGE_MARKDOWN = dedent(
     """
     This gallery is a collection of demos using the PyWeb.UI library. There are meant

pyscript.core/test/ui/index.html

@@ -11,7 +11,7 @@
         <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/lib/marked.umd.min.js"></script>
 
 
-        
+
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>