Merge pull request #769 from Textualize/button-docs

docs/widgets/Button

docs/examples/widgets/button.css

@@ -0,0 +1,12 @@
+Button {
+    margin: 1 2;
+}
+
+Horizontal > Vertical {
+    width: 24;
+}
+
+.header {
+    margin: 1 0 0 2;
+    text-style: bold;
+}

docs/examples/widgets/button.py

@@ -0,0 +1,34 @@
+from textual import layout
+from textual.app import App, ComposeResult
+from textual.widgets import Button, Static
+
+
+class ButtonsApp(App):
+    def compose(self) -> ComposeResult:
+        yield layout.Horizontal(
+            layout.Vertical(
+                Static("Standard Buttons", classes="header"),
+                Button("Default"),
+                Button("Primary!", variant="primary"),
+                Button.success("Success!"),
+                Button.warning("Warning!"),
+                Button.error("Error!"),
+            ),
+            layout.Vertical(
+                Static("Disabled Buttons", classes="header"),
+                Button("Default", disabled=True),
+                Button("Primary!", variant="primary", disabled=True),
+                Button.success("Success!", disabled=True),
+                Button.warning("Warning!", disabled=True),
+                Button.error("Error!", disabled=True),
+            ),
+        )
+
+    def on_button_pressed(self, _event: Button.Pressed) -> None:
+        self.app.bell()
+
+
+app = ButtonsApp(css_path="button.css")
+
+if __name__ == "__main__":
+    result = app.run()

docs/widgets/button.md

@@ -1 +1,59 @@
 # Button
+
+## Description
+
+A simple button widget which can be pressed using a mouse click or by pressing ++return++
+when it has focus.
+
+- [x] Focusable
+- [ ] Container
+
+## Example
+
+The example below shows each button variant, and its disabled equivalent.
+Clicking any of the non-disabled buttons in the example app below will result in a ring of the terminal bell.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/button.py"}
+    ```
+
+=== "button.py"
+
+    ```python
+    --8<-- "docs/examples/widgets/button.py"
+    ```
+
+=== "button.css"
+
+    ```css
+    --8<-- "docs/examples/widgets/button.css"
+    ```
+
+## Reactive Attributes
+
+| Name       | Type   | Default     | Description                                                                                                                       |
+|------------|--------|-------------|-----------------------------------------------------------------------------------------------------------------------------------|
+| `label`    | `str`  | `""`        | The text that appears inside the button.                                                                                          |
+| `variant`  | `str`  | `"default"` | Semantic styling variant. One of `default`, `primary`, `success`, `warning`, `error`.                                             |
+| `disabled` | `bool` | `False`     | Whether the button is disabled or not. Disabled buttons cannot be focused or clicked, and are styled in a way that suggests this. |
+
+## Events
+
+### Pressed
+
+The `Button.Pressed` event is sent when the button is pressed.
+
+- [x] Bubbles
+
+#### Attributes
+
+_No other attributes_
+
+## Additional Notes
+
+* The spacing between the text and the edges of a button are due to border, _not_ padding. To create a button with zero visible padding, use the `border: none;` declaration.
+
+## See Also
+
+* [Button](../reference/button.md) code reference

src/textual/layout.py

@@ -6,35 +6,39 @@ class Container(Widget):
 
     DEFAULT_CSS = """
     Container {
-        layout: vertical;       
+        layout: vertical;
         overflow: auto;
-      
-    }    
+    }
     """
 
 
-class Vertical(Container):
+class Vertical(Widget):
     """A container widget to align children vertically."""
 
-    # Blank CSS is important, otherwise you get a clone of Container
-    DEFAULT_CSS = ""
+    DEFAULT_CSS = """
+    Vertical {
+        layout: vertical;
+        overflow-y: auto;
+    }
+    """
 
 
-class Horizontal(Container):
+class Horizontal(Widget):
     """A container widget to align children horizontally."""
 
     DEFAULT_CSS = """
     Horizontal {
-        layout: horizontal;        
-    }    
+        layout: horizontal;
+        overflow-x: hidden;
+    }
     """
 
 
-class Center(Container):
+class Center(Widget):
     """A container widget to align children in the center."""
 
     DEFAULT_CSS = """
     Center {
-        layout: center;        
+        layout: center;
     }
     """