First Roots docs

Author: lisandroct

_auto_docs/rish/00-quick-start.md

@@ -161,4 +161,4 @@ Rish is a UI library, not a rigid or opinionated framework. We're trying not to
 
 However, if you want a head start, we have created **Roots**, a collection of ready-to-use elements built with Rish.
 
-[Check out the Roots documentantion](/docs/roots/1.0.0/quick-start)
+[Check out the Roots documentantion](/docs/roots/quick-start)

_auto_docs/rish/01-installation.md

@@ -113,4 +113,4 @@ public partial class App : IApp
 {% endhighlight %}
 
 ## Next Steps
-Now that you have the library installed, we recommend installing [**Roots**](/docs/roots/1.0.0/quick-start) and importing its samples to see working code in action.
+Now that you have the library installed, we recommend installing [**Roots**](/docs/roots/quick-start) and importing its samples to see working code in action.

_auto_docs/rish/03-visualelements.md

@@ -68,7 +68,7 @@ protected override Element Render() => Div.Create(
 <div class="callout-block callout-block-warning">
     <div class="content">
         <h4 class="callout-title"><i class="fa-solid fa-circle-info"></i>Best Practice</h4>
-        <p>Favor <strong>USS stylesheets</strong> (via <code>className</code>) over inline styles. Unity optimizes stylesheets better (and supports live reloading of USS assets) and it keeps your style and layout logic separate from your code.</p>
+        <p>Favor <strong>USS style sheets</strong> (via <code>className</code>) over inline styles. Unity optimizes style sheets better (and supports live reloading of USS assets) and it keeps your style and layout logic separate from your code.</p>
         <p>Use <strong>Inline Styles</strong> only when the style depends on dynamic data from Props or State.</p>
     </div>
 </div>

_docs/rish/3.0.0/00-quick-start.md

@@ -161,4 +161,4 @@ Rish is a UI library, not a rigid or opinionated framework. We're trying not to
 
 However, if you want a head start, we have created **Roots**, a collection of ready-to-use elements built with Rish.
 
-[Check out the Roots documentantion](/docs/roots/1.0.0/quick-start)
+[Check out the Roots documentantion](/docs/roots/quick-start)

_docs/rish/3.0.0/01-installation.md

@@ -7,9 +7,9 @@ sections:
 icon: download
 ---
 
-Installing Rish is simple. You can add the package via the Unity Package Manager using the Git URL, or by modifying your manifest.json file directly.
+Installing Rish is simple. You can add the package via the Unity Package Manager using the Git URL, or by modifying your `manifest.json` file directly.
 
-Add the following package URL: `https://github.com/clockworklabs/rish#[target-version]`
+Add the following package URL: `https://github.com/clockworklabs/rish#[target-version]`.
 
 #### Dependencies
 Rish requires the following dependencies to function correctly:
@@ -52,6 +52,7 @@ To set up a Rish App in your scene:
 2. Add the `RishRoot` component to it. This will automatically add a `UIDocument` component if one is missing.
 3. Assign your **Panel Settings** to the `UIDocument`.
 4. Create a class that implements `IApp` and assign it to the `RishRoot`.
+5. Assign all the USS style sheets your app will need to the `RishRoot`. 
 
 ### Defining an App
 A Rish App is the entry point for your UI. It is not an Element itself; rather, it defines the root element for the entire tree.
@@ -113,4 +114,4 @@ public partial class App : IApp
 {% endhighlight %}
 
 ## Next Steps
-Now that you have the library installed, we recommend installing [**Roots**](/docs/roots/1.0.0/quick-start) and importing its samples to see working code in action.
+Now that you have the library installed, we recommend installing [**Roots**](/docs/roots/quick-start) and importing its samples to see working code in action.

_docs/rish/3.0.0/03-visualelements.md

@@ -68,7 +68,7 @@ protected override Element Render() => Div.Create(
 <div class="callout-block callout-block-warning">
     <div class="content">
         <h4 class="callout-title"><i class="fa-solid fa-circle-info"></i>Best Practice</h4>
-        <p>Favor <strong>USS stylesheets</strong> (via <code>className</code>) over inline styles. Unity optimizes stylesheets better (and supports live reloading of USS assets) and it keeps your style and layout logic separate from your code.</p>
+        <p>Favor <strong>USS style sheets</strong> (via <code>className</code>) over inline styles. Unity optimizes style sheets better (and supports live reloading of USS assets) and it keeps your style and layout logic separate from your code.</p>
         <p>Use <strong>Inline Styles</strong> only when the style depends on dynamic data from Props or State.</p>
     </div>
 </div>

_docs/rish/3.0.0/09-best-practices.md

@@ -438,7 +438,7 @@ public partial class NestedElementsExample : RishElement
 More complex Elements are defined in separate files.
 
 <figure>
-    <figcaption>File 1</figcaption>
+    <figcaption>NestedElementsExample.cs</figcaption>
 {% highlight csharp %}
 public partial class NestedElementsExample : RishElement<NestedElementsExampleProps>
 {
@@ -458,7 +458,7 @@ public struct NestedElementsExampleProps {
 </figure>
 
 <figure>
-    <figcaption>File 2</figcaption>
+    <figcaption>Nested.cs</figcaption>
 {% highlight csharp %}
 public partial class NestedElementsExample
 {

_docs/rish/3.0.0/10-labels.md

@@ -0,0 +1,35 @@
+---
+title: Labels
+slug: labels
+sections:
+  - Inputs
+icon: align-left
+---
+
+`Label` is the _only_ element shipped with Rish. It's a foundational VisualElement. It inherits from `UnityEngine.UIElements.Label`.
+
+A `string` or `RishString` can be implicitly converted into an `Element`. So, similarly to HTML, you can treat text as a UI Element.
+
+<figure>
+    <figcaption>HTML</figcaption>
+{% highlight html %}
+<div class="container">Hello, world.</div>
+{% endhighlight %}
+</figure>
+
+<figure>
+    <figcaption>C# Rish</figcaption>
+{% highlight csharp %}
+Div.Create(className: "container", children: "Hello, world.");
+{% endhighlight %}
+</figure>
+
+We recommend creating wrappers for different label styles (like `Body`, `H1`, `H2`...).
+
+## Inputs
+- `RishString text`: The text to render.
+- `LengthRange? widthRange`: Optional width size range. If set, UI Toolkit will use for the reported preferred size in the layouting phase.
+- `LengthRange? heightRange`: Optional height size range. If set, UI Toolkit will use for the reported preferred size in the layouting phase.
+- `bool? enableRichText`: Whether or not rich text tags get parsed or not.
+- `bool? parseEscapeSequences`: Wheter or not escape sequences get parsed or not.
+- `Action<bool> onElided`: Callback that reports when the text is ellided or not.

_docs/roots/1.0.0/00-quick-start.md

@@ -2,7 +2,19 @@
 title: Quick Start
 slug: quick-start
 sections:
+  - Why Roots?
 icon: handshake
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus condimentum nisl id vulputate. Praesent aliquet varius eros interdum suscipit. Donec eu purus sed nibh convallis bibendum quis vitae turpis. Duis vestibulum diam lorem, vitae dapibus nibh facilisis a. Fusce in malesuada odio.
+Roots is a UI toolkit built on top of [Rish](/docs/rish/quick-start). Rish is very thin and provides no elements out of the box. Roots is a great foundation for your UI app.
+
+## Setup
+
+
+
+
+It provides 
+- Unity Components to structure and setup your Rish App.
+- Low-level abstract elements.
+- High-level reference or starting-point elements.
+

_docs/roots/1.0.0/01-installation.md

@@ -8,4 +8,31 @@ sections:
 icon: download
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus condimentum nisl id vulputate. Praesent aliquet varius eros interdum suscipit. Donec eu purus sed nibh convallis bibendum quis vitae turpis. Duis vestibulum diam lorem, vitae dapibus nibh facilisis a. Fusce in malesuada odio.
+Installing Roots is simple. You can add the package via the Unity Package Manager using the Git URL, or by modifying your `manifest.json` file directly.
+
+Add the following package URL: `https://github.com/clockworklabs/roots#[target-version]`.
+
+#### Dependencies
+Roots requires the following dependencies to function correctly:
+- [Rish](/docs/rish/quick-start): `io.clockworklabs.rish` (version `3.0.0+`).
+- [Motion](https://github.com/clockworklabs/motion): `io.clockworklabs.motion` (version `1.7.9+`).
+
+## Setup
+Roots requires minimal setup for all of its moving parts to work:
+1. Add `RootsSetup` component to the GameObject that contains your App's `RishRoot`.
+  - This component is only needed to use the more advanced `ResponsiveStyleSheets`.
+2. Add an `AssetsLoader` component to bridge between your app's assets pipeline and your UI app.
+  - `AssetsLoader` is an abstract class. Roots provides a `ResourcesLoader` implementation that loads assets from Resources. You can implement your own loader that works for your app.
+3. Animated elements use [Motion](https://github.com/clockworklabs/motion). For your motions to be stepped, add a `MotionAutoUpdate` component (in more advanced scenarios, you may want to manually call `DoMotion.Step`).
+
+## Samples
+Roots comes with samples showing a wide range of UI Elements (from simple buttons to complex scroll views or responsive layouts).
+
+1. Open the **Package Manager**.
+2. Select the **Roots** package.
+3. Go to the **Samples** tab and import **Rootstrap** and **Samples**.
+4. Open the newly imported `Samples` scene and enter Play Mode.
+
+The Samples scene supports changing the dimensions of the samples container to interact with responsive elements. It also has a button to see the relevant code for each sample.
+
+We encourage you to play around.