From e92d50b797792f3161fb0f70a1f30ac3c470c637 Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Mon, 12 Dec 2022 17:47:34 +0100
Subject: [PATCH 1/5] docs: Label

---
 content/sidebar.ts  |  12 ++--
 content/ui/label.md | 170 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 176 insertions(+), 6 deletions(-)
 create mode 100644 content/ui/label.md

diff --git a/content/sidebar.ts b/content/sidebar.ts
index 81475b82..04b91b3f 100644
--- a/content/sidebar.ts
+++ b/content/sidebar.ts
@@ -144,15 +144,15 @@ export default [
       //           { text: 'NavigationButton', link: '//#' },
       //         ],
       //       },
-      //       {
-      //         text: 'Components',
-      //         items: [
+            {
+              text: 'Components',
+              items: [
       //           { text: 'ActivityIndicator', link: '//#' },
       //           { text: 'Button', link: '//#' },
       //           { text: 'DatePicker', link: '//#' },
       //           { text: 'HtmlView', link: '//#' },
       //           { text: 'Image', link: '/' },
-      //           { text: 'Label', link: '//#' },
+                { text: 'Label', link: '/ui/label' },
       //           { text: 'ListPicker', link: '//#' },
       //           { text: 'ListView', link: '//#' },
       //           { text: 'Placeholder', link: '//#' },
@@ -179,8 +179,8 @@ export default [
   //           { text: 'PromptDialog', link: '//#' },
   //         ],
   //       },
-  //     ],
-  //   },
+      ],
+    },
   //   {
   //     text: 'Diving Deeper',
   //     items: [{ text: 'Architecture concepts', link: '//#' }],
diff --git a/content/ui/label.md b/content/ui/label.md
new file mode 100644
index 00000000..b1eff483
--- /dev/null
+++ b/content/ui/label.md
@@ -0,0 +1,170 @@
+---
+title: Label
+---
+
+`<Label>` is a UI component that displays read-only text.
+
+::: warning  :orange_circle: Note
+This `<Label>` is **not** the same as the HTML `<label>`.
+:::
+
+---
+
+### Simple label
+
+<!-- /// flavor plain -->
+
+```xml
+<Label text="Label" />
+```
+<!-- 
+///
+
+/// flavor angular
+
+```html
+<label text="Label"></label>
+```
+
+///
+
+/// flavor react
+
+```tsx
+<label>Label</label>
+```
+
+///
+
+/// flavor vue
+
+```html
+<label text="Label" />
+```
+
+///
+
+/// flavor svelte
+
+```html
+<label text="Label" />
+```
+
+/// -->
+
+### Styling the label
+
+If you need to style parts of the text, you can use a combination of a `FormattedString` and `Span` elements.
+
+<!-- /// flavor plain -->
+
+```xml
+<Label textWrap="true">
+  <FormattedString>
+    <Span text="This text has a " />
+    <Span text="red " style="color: red" />
+    <Span text="piece of text. " />
+    <Span text="Also, this bit is italic, " fontStyle="italic" />
+    <Span text="and this bit is bold." fontWeight="bold" />
+  </FormattedString>
+</Label>
+```
+
+<!-- ///
+
+/// flavor angular
+
+```html
+<label textWrap="true">
+  <FormattedString>
+    <span text="This text has a "></span>
+    <span text="red " style="color: red"></span>
+    <span text="piece of text. "></span>
+    <span text="Also, this bit is italic, " fontStyle="italic"></span>
+    <span text="and this bit is bold." fontWeight="bold"></span>
+  </FormattedString>
+</label>
+```
+
+///
+
+/// flavor react
+
+```tsx
+import { Color } from '@nativescript/core'
+;<label textWrap={true}>
+  <formattedString>
+    <span>This text has a </span>
+    <span color={new Color('red')}>red </span>
+    <span>piece of text. </span>
+    <span fontStyle="italic">Also, this bit is italic, </span>
+    <span fontWeight="bold">and this bit is bold.</span>
+  </formattedString>
+</label>
+```
+
+///
+
+/// flavor vue
+
+```html
+<label textWrap="true">
+  <FormattedString>
+    <span text="This text has a " />
+    <span text="red " style="color: red" />
+    <span text="piece of text. " />
+    <span text="Also, this bit is italic, " fontStyle="italic" />
+    <span text="and this bit is bold." fontWeight="bold" />
+  </FormattedString>
+</label>
+```
+
+///
+
+/// flavor svelte
+
+```html
+<label textWrap="{true}">
+  <formattedString>
+    <span text="This text has a " />
+    <span text="red " style="color: red" />
+    <span text="piece of text. " />
+    <span text="Also, this bit is italic, " fontStyle="italic" />
+    <span text="and this bit is bold." fontWeight="bold" />
+  </formattedString>
+</label>
+```
+
+/// -->
+
+## Label Reference(s)
+
+### Props
+
+| Name             | Type                                                             | Description                                                                                                                        |
+| ---------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `letterSpacing`  | `number`                                                         | Gets or sets letterSpace style property.                                                                                           |
+| `lineHeight`     | `number`                                                         | Gets or sets lineHeight style property.                                                                                            |
+| `text`           | `string`                                                         | Gets or sets the Label text.                                                                                                       |
+| `textAlignment`  | `initial`, `left`, `center`, `right`, `justify`                  | Gets or sets text-alignment style property.                                                                                        |
+| `textDecoration` | `none`, `underline`, `line-through`, `underline`, `line-through` | Gets or sets text swcoration style property.                                                                                       |
+| `textTransform`  | `initial`, `none`, `capitalize`, `uppercase`, `lowercase`        | Gets or sets text transform style property.                                                                                        |
+| `textWrap`       | `boolean`                                                        | Gets or sets whether the Label wraps text or not.                                                                                  |
+| `whiteSpace`     | `initial`, `normal`, `nowrap`                                    | Gets or sets the white space style.                                                                                                |
+| `...Inherited`   | `Inherited`                                                      | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/label) |
+
+<!-- TODO: fix links -->
+
+### Events
+
+| Name         | Description                             |
+| ------------ | --------------------------------------- |
+| `textChange` | Emitted when the label text is changed. |
+
+### Native component
+
+| Android                                                                                           | iOS                                                                  |
+| ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html) | [`UILabel`](https://developer.apple.com/documentation/uikit/uilabel) |
+
+<!-- TODO: reference link: https://github.com/nativescript-vue/nativescript-vue.org/tree/master/content/docs/en/elements/components -->

From 41572d511fa4eb33dd154b86a66c131baf148abd Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Mon, 12 Dec 2022 17:48:46 +0100
Subject: [PATCH 2/5] chore: update

---
 content/ui/label.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/ui/label.md b/content/ui/label.md
index b1eff483..6200805a 100644
--- a/content/ui/label.md
+++ b/content/ui/label.md
@@ -1,7 +1,7 @@
 ---
 title: Label
 ---
-
+<!-- TODO: Add flavors -->
 `<Label>` is a UI component that displays read-only text.
 
 ::: warning  :orange_circle: Note

From 71b63f6174278d5fbf45a7315354aef9d57d75d9 Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Mon, 19 Dec 2022 00:06:49 +0100
Subject: [PATCH 3/5] chore: WIP

---
 content/ui/label.md | 51 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/content/ui/label.md b/content/ui/label.md
index 6200805a..27b9d853 100644
--- a/content/ui/label.md
+++ b/content/ui/label.md
@@ -137,10 +137,57 @@ import { Color } from '@nativescript/core'
 
 /// -->
 
-## Label Reference(s)
+## Props
+### letterSpacing
 
-### Props
+Gets or sets [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) style property. 
 
+---
+### lineHeight
+Gets or sets [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) style property.
+
+---
+### text
+Gets or sets the text displayed or to be displayed by the Label instance.    
+
+---
+### textAlignment
+```xml
+<Label text="Hello there!" textAlignment="center" />
+```
+Gets or sets text-alignment style property. Valid values:
+`"initial"` | `"left"` | `"center"` | `"right"`. Defaults to `"left"`
+
+---
+### textDecoration
+```xml
+<Label text="Hello there!" textDecoration="underline" />
+```
+Gets or sets text decoration style property. See [TextDecorationType](https://docs.nativescript.org/api-reference/modules/coretypes#textdecorationtype) for valid values.
+
+---
+### textTransform
+```xml
+<Label text="Hello there!" textTransform="capitalize"/>
+```
+Gets or sets text transform style property. See [TextTransformType](https://docs.nativescript.org/api-reference/modules/coretypes#texttransformtype) for valid values. Defaults to `"initial"`.
+
+---
+### textWrap
+```xml
+<Label text="Hello there!" textWrap="true" />
+```
+Gets or sets whether the Label wraps text or not. Defaults to `false`. 
+
+---
+### whiteSpace
+
+Gets or sets the white space style. 
+Valid values: `"initial"` | `"normal"` | `"nowrap"`
+Defaults to `"initial"`.              
+
+---
+### ...Inherited
 | Name             | Type                                                             | Description                                                                                                                        |
 | ---------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | `letterSpacing`  | `number`                                                         | Gets or sets letterSpace style property.                                                                                           |

From fc86e88647acddd73315cace212eab5aabbac882 Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Mon, 19 Dec 2022 09:22:49 +0100
Subject: [PATCH 4/5] chore: update

---
 content/ui/label.md | 63 ++++++++++++++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 24 deletions(-)

diff --git a/content/ui/label.md b/content/ui/label.md
index 27b9d853..2903fa6f 100644
--- a/content/ui/label.md
+++ b/content/ui/label.md
@@ -139,15 +139,29 @@ import { Color } from '@nativescript/core'
 
 ## Props
 ### letterSpacing
+```xml
+<Label text="Hello there!" letterSpacing="1"/>
+```
+_Type_: `number`
 
 Gets or sets [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) style property. 
 
 ---
 ### lineHeight
+
+```xml
+<Label text="Hello there!" lineHeight="10"/>
+```
+_Type_: `number`
+
 Gets or sets [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) style property.
 
 ---
 ### text
+```xml
+<Label text="Hello there!" />
+```
+_Type_: `string`
 Gets or sets the text displayed or to be displayed by the Label instance.    
 
 ---
@@ -163,7 +177,7 @@ Gets or sets text-alignment style property. Valid values:
 ```xml
 <Label text="Hello there!" textDecoration="underline" />
 ```
-Gets or sets text decoration style property. See [TextDecorationType](https://docs.nativescript.org/api-reference/modules/coretypes#textdecorationtype) for valid values.
+Gets or sets text decoration style property. See [TextDecorationType](https://docs.nativescript.org/api-reference/modules/coretypes#textdecorationtype) for valid values. Defaults to `"none"`.
 
 ---
 ### textTransform
@@ -175,12 +189,15 @@ Gets or sets text transform style property. See [TextTransformType](https://docs
 ---
 ### textWrap
 ```xml
-<Label text="Hello there!" textWrap="true" />
+<Label text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available." textWrap="true"/>
 ```
-Gets or sets whether the Label wraps text or not. Defaults to `false`. 
+Gets or sets whether the text breaks and renders on the next line if the current runs out of space. Defaults to `false`. 
 
 ---
 ### whiteSpace
+```xml
+<Label text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available." whiteSpace="normal"/>
+```
 
 Gets or sets the white space style. 
 Valid values: `"initial"` | `"normal"` | `"nowrap"`
@@ -188,30 +205,28 @@ Defaults to `"initial"`.
 
 ---
 ### ...Inherited
-| Name             | Type                                                             | Description                                                                                                                        |
-| ---------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `letterSpacing`  | `number`                                                         | Gets or sets letterSpace style property.                                                                                           |
-| `lineHeight`     | `number`                                                         | Gets or sets lineHeight style property.                                                                                            |
-| `text`           | `string`                                                         | Gets or sets the Label text.                                                                                                       |
-| `textAlignment`  | `initial`, `left`, `center`, `right`, `justify`                  | Gets or sets text-alignment style property.                                                                                        |
-| `textDecoration` | `none`, `underline`, `line-through`, `underline`, `line-through` | Gets or sets text swcoration style property.                                                                                       |
-| `textTransform`  | `initial`, `none`, `capitalize`, `uppercase`, `lowercase`        | Gets or sets text transform style property.                                                                                        |
-| `textWrap`       | `boolean`                                                        | Gets or sets whether the Label wraps text or not.                                                                                  |
-| `whiteSpace`     | `initial`, `normal`, `nowrap`                                    | Gets or sets the white space style.                                                                                                |
-| `...Inherited`   | `Inherited`                                                      | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/label) |
-
-<!-- TODO: fix links -->
+For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/label).
 
-### Events
-
-| Name         | Description                             |
-| ------------ | --------------------------------------- |
-| `textChange` | Emitted when the label text is changed. |
+## Event(s)
+### textChange
+```xml
+    <Label text="{{ greeting }}" loaded="{{ onLabelLoaded }}"/>
+```
+```ts
+onLabelLoaded(args: EventData) {
+    const label = args.object as Label
+
+    label.on("textChange", (textChangeEvent: PropertyChangeData)=>{
+      
+    console.log(textChangeEvent.eventName)
+    })
+}
+```
+Emitted when the label text is changed.
 
-### Native component
+---
+## Native component
 
 | Android                                                                                           | iOS                                                                  |
 | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
 | [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html) | [`UILabel`](https://developer.apple.com/documentation/uikit/uilabel) |
-
-<!-- TODO: reference link: https://github.com/nativescript-vue/nativescript-vue.org/tree/master/content/docs/en/elements/components -->

From 133553d24cbba95e25abf0be0fbfeffb2402a0f9 Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Mon, 30 Jan 2023 18:29:30 +0100
Subject: [PATCH 5/5] feat: screenshots

---
 content/ui/label.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/content/ui/label.md b/content/ui/label.md
index 2903fa6f..b23fd643 100644
--- a/content/ui/label.md
+++ b/content/ui/label.md
@@ -9,6 +9,17 @@ This `<Label>` is **not** the same as the HTML `<label>`.
 :::
 
 ---
+<div>
+<div class="flex flex-wrap p-4 sm:p-8">
+<div  class="w-full sm:w-1/2">
+ <img  src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/Label.png" alt="Android Label Example"/> 
+</div>
+
+<div  class="w-full sm:w-1/2 sm:pl-8">
+<img alt="iOS Label Example" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/Label.png" />
+</div>
+</div>
+</div>
 
 ### Simple label