fix(label): updated hbs props

src/patternfly/components/Label/examples/Label.md

@@ -10,69 +10,142 @@ import './Label.css'
 
 ### Filled
 ```hbs
-{{> __label-variants __label-variants--id="default" __label-variants--title="Grey"}}
+{{> label-template-variants
+    label-template-variants--title="Grey"
+    label-template-variants--id="default"}}
 
 <br><br>
-{{> __label-variants __label-variants--id="blue" __label-variants--title="Blue" label--color="blue"}}
+
+{{> label-template-variants
+    label-template-variants--title="Blue"
+    label-template-variants--id="blue"
+    label--color="blue"}}
 
 <br><br>
-{{> __label-variants __label-variants--id="green" __label-variants--title="Green" label--color="green"}}
+
+{{> label-template-variants
+    label-template-variants--title="Green"
+    label-template-variants--id="green"
+    label--color="green"}}
 
 <br><br>
-{{> __label-variants __label-variants--id="orange" __label-variants--title="Orange" label--color="orange"}}
+
+{{> label-template-variants
+    label-template-variants--title="Orange"
+    label-template-variants--id="orange"
+    label--color="orange"}}
 
 <br><br>
-{{> __label-variants __label-variants--id="red" __label-variants--title="Red" label--color="red"}}
+
+{{> label-template-variants
+    label-template-variants--title="Red"
+    label-template-variants--id="red"
+    label--color="red"}}
 
 <br><br>
-{{> __label-variants __label-variants--id="purple" __label-variants--title="Purple" label--color="purple"}}
+
+{{> label-template-variants
+    label-template-variants--title="Purple"
+    label-template-variants--id="purple"
+    label--color="purple"}}
 
 <br><br>
-{{> __label-variants __label-variants--id="cyan" __label-variants--title="Cyan" label--color="cyan"}}
+
+{{> label-template-variants
+    label-template-variants--title="Cyan"
+    label-template-variants--id="cyan"
+    label--color="cyan"}}
 
 <br><br>
-{{> __label-variants __label-variants--id="gold" __label-variants--title="Gold" label--color="gold"}}
+{{> label-template-variants
+    label-template-variants--title="Gold"
+    label-template-variants--id="gold"
+    label--color="gold"}}
 ```
 
 ### Outline
 
 ```hbs
-{{> __label-variants __label-variants--id="grey-outline" __label-variants--title="Grey" label--IsOutlined=true}}
+{{> label-template-variants
+    label-template-variants--title="Grey"
+    label-template-variants--id="grey-outline"
+    label--IsOutlined=true}}
+
 <br><br>
 
-{{> __label-variants __label-variants--id="blue-outline" __label-variants--title="Blue" label--color="blue" label--IsOutlined=true}}
+{{> label-template-variants
+    label-template-variants--title="Blue"
+    label-template-variants--id="blue-outline"
+    label--color="blue"
+    label--IsOutlined=true}}
 
 <br><br>
-{{> __label-variants __label-variants--id="green-outline" __label-variants--title="Green" label--color="green" label--IsOutlined=true}}
+
+{{> label-template-variants
+    label-template-variants--title="Green"
+    label-template-variants--id="green-outline"
+    label--color="green"
+    label--IsOutlined=true}}
 
 <br><br>
-{{> __label-variants __label-variants--id="orange-outline" __label-variants--title="Orange" label--color="orange" label--IsOutlined=true}}
+
+{{> label-template-variants
+    label-template-variants--title="Orange"
+    label-template-variants--id="orange-outline"
+    label--IsOutlined=true
+    label--color="orange"}}
 
 <br><br>
-{{> __label-variants __label-variants--id="red-outline" __label-variants--title="Red" label--color="red" label--IsOutlined=true}}
+
+{{> label-template-variants
+    label-template-variants--title="Red"
+    label-template-variants--id="red-outline"
+    label--color="red"
+    label--IsOutlined=true}}
 
 <br><br>
-{{> __label-variants __label-variants--id="purple-outline" __label-variants--title="Purple" label--color="purple" label--IsOutlined=true}}
+
+{{> label-template-variants
+    label-template-variants--title="Purple"
+    label-template-variants--id="purple-outline"
+    label--color="purple"
+    label--IsOutlined=true}}
 
 <br><br>
-{{> __label-variants __label-variants--id="cyan-outline" __label-variants--title="Cyan" label--color="cyan" label--IsOutlined=true}}
+
+{{> label-template-variants
+    label-template-variants--title="Cyan"
+    label-template-variants--id="cyan-outline"
+    label--color="cyan"
+    label--IsOutlined=true}}
 
 <br><br>
-{{> __label-variants __label-variants--id="gold-outline" __label-variants--title="Gold" label--color="gold" label--IsOutlined=true}}
+
+{{> label-template-variants
+    label-template-variants--title="Gold"
+    label-template-variants--id="gold-outline"
+    label--color="gold"
+    label--IsOutlined=true}}
 ```
 
 ### Compact
 
 ```hbs
-{{> __label-variants __label-variants--id="compact" __label-variants--title="Compact" label--IsCompact=true}}
+{{> label-template-variants
+    label-template-variants--title="Compact"
+    label-template-variants--id="compact"
+    label--IsCompact=true}}
 ```
 
 ### Overflow
 
 This style of label is used to indicate overflow within a label group.
 
 ```hbs
-{{> label label--id="overflow" label-text--text="Overflow" label--IsOverflow=true}}
+{{> label
+    label--id="overflow"
+    label--IsOverflow=true
+    label-text--value="Overflow"}}
 ```
 
 ### Editable
@@ -86,32 +159,53 @@ This style of label is used to indicate overflow within a label group.
 - Return keypress, when content is editable, should:
   - Be captured to prevent line wrapping and save updates to label text
   - Remove `.pf-m-editable-active` from `.pf-c-label`
-  - Change `.pf-c-label__editable-text` back from an input to a button and set the `currvalue` of the button to the contents of the input
 - Esc keypress, when content is editable, should:
   - Undo any update to label text
   - Remove `.pf-m-editable-active` from `.pf-c-label`
   - Change `.pf-c-label__editable-text` back to a button
 
 ```hbs isBeta
-{{> label label--id="editable-label" label-text--text="Editable label" label-editable-content--value="Editable label" label--color="blue" label--IsEditable=true label--isRemovable=true}}
-
-{{> label label--id="editable-label-active" label-text--text="Editable active" label-editable-content--value="Editable active" label--color="blue" label--IsEditable=true label--IsEditableActive=true}}
-
-{{> label label--id="compact-editable-label" label-text--text="Compact editable label" label-editable-content--value="Compact editable label" label--color="blue" label--IsEditable=true label--isRemovable=true label--IsCompact=true}}
-
-{{> label label--id="compact-editable-label-active" label-text--text="Compact editable active" label-editable-content--value="Compact editable active" label--color="blue" label--IsEditable=true label--IsEditableActive=true label--IsCompact=true}}
+{{> label
+    label--id="editable-label"
+    label--color="blue"
+    label--IsEditable=true
+    label--isRemovable=true
+    label-text--value="Editable label"
+    label-editable-content--value="Editable label"}}
+
+{{> label
+    label--id="editable-label-active"
+    label--color="blue"
+    label--IsEditable=true
+    label--IsEditableActive=true
+    label-text--value="Editable active"
+    label-editable-content--value="Editable active"}}
+
+{{> label
+    label--id="compact-editable-label"
+    label--color="blue"
+    label--IsEditable=true
+    label--isRemovable=true
+    label--IsCompact=true
+    label-text--value="Compact editable label"
+    label-editable-content--value="Compact editable label"}}
+
+{{> label
+    label--id="compact-editable-label-active"
+    label--color="blue"
+    label--IsEditable=true
+    label--IsEditableActive=true
+    label--IsCompact=true
+    label-text--value="Compact editable active"
+    label-editable-content--value="Compact editable active"}}
 ```
 
 ### Add label
 
 This style of label is used to add new labels to a label group.
 
 ```hbs isBeta
-{{#> label label--IsAdd=true}}
-  {{#> label-text}}
-    Add Label
-  {{/label-text}}
-{{/label}}
+{{> label label--IsAdd=true label-text--value="Add Label"}}
 ```
 
 ## Documentation

src/patternfly/components/Label/label-editable-content.hbs

@@ -3,8 +3,6 @@
   {{#if label--IsEditableActive}}
     type="text"
     value="{{label-editable-content--value}}"
-  {{else}}
-    currvalue="{{label-editable-content--value}}"
   {{/if}}
   {{#if label-editable-content--aria-label}}
     aria-label="{{label-editable-content--aria-label}}"

src/patternfly/components/Label/label-icon.hbs

@@ -2,5 +2,9 @@
   {{#if label-icon--attribute}}
     {{{label-icon--attribute}}}
   {{/if}}>
-  {{> @partial-block}}
+  {{#if label-icon--value}}
+    <i class="fas fa-fw fa-{{label-icon--value}}" aria-hidden="true"></i>
+  {{else if @partial-block}}
+    {{> @partial-block}}
+  {{/if}}
 </span>

src/patternfly/components/Label/label-text.hbs

@@ -2,8 +2,8 @@
   {{#if label-text--attribute}}
     {{{label-text--attribute}}}
   {{/if}}>
-  {{#if label-text--text}}
-    {{label-text--text}}
+  {{#if label-text--value}}
+    {{{label-text--value}}}
   {{else if @partial-block}}
     {{> @partial-block}}
   {{/if}}

src/patternfly/components/Label/label.hbs

@@ -16,9 +16,13 @@
     {{{label--attribute}}}
   {{/if}}>
   {{#> label-content}}
-    {{#if label-text--text}}
+    {{#if label-icon--value}}
+      {{> label-icon}}
+    {{/if}}
+    {{#if label-text--value}}
       {{> label-text}}
-    {{else if @partial-block}}
+    {{/if}}
+    {{#if @partial-block}}
       {{> @partial-block}}
     {{/if}}
   {{/label-content}}

src/patternfly/components/Label/label.scss

@@ -143,9 +143,6 @@
   // Text
   --pf-c-label__text--MaxWidth: 100%;
 
-  // Truncate
-  --pf-c-label__text--m-truncate--MaxWidth: 16ch;
-
   // Icon
   --pf-c-label__icon--Color: var(--pf-global--Color--100);
   --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
@@ -416,10 +413,6 @@
   @include pf-text-overflow;
 
   max-width: var(--pf-c-label__text--MaxWidth);
-
-  &.pf-m-truncate {
-    --pf-c-label__text--MaxWidth: var(--pf-c-label__text--m-truncate--MaxWidth);
-  }
 }
 
 .pf-c-label__content {

src/patternfly/components/Label/templates/label-template-variants.hbs

@@ -0,0 +1,47 @@
+{{> label
+    label--id=(concat label-template-variants--id '-default')
+    label-text--value=label-template-variants--title}}
+
+{{> label
+    label--id=(concat label-template-variants--id '-icon')
+    label-icon--value="info-circle"
+    label-text--value=(concat label-template-variants--title ' icon')}}
+
+{{> label
+    label--isRemovable=true
+    label--id=(concat label-template-variants--id '-removable')
+    label-text--value=(concat label-template-variants--title ' removable')}}
+
+{{> label
+    label--isRemovable=true
+    label--id=(concat label-template-variants--id '-icon-removable')
+    label-text--value=(concat label-template-variants--title ' icon removable')
+    label-icon--value="info-circle"}}
+
+{{> label
+    label--id=(concat label-template-variants--id '-link')
+    label-text--value=(concat label-template-variants--title ' link')
+    label-content--IsLink=true}}
+
+{{> label
+    label--isRemovable=true
+    label--id=(concat label-template-variants--id '-link-removable')
+    label-text--value=(concat label-template-variants--title ' link removable')
+    label-content--IsLink=true}}
+
+{{> label
+    label--id=(concat label-template-variants--id '-truncated')
+    label-text--value=(concat label-template-variants--title ' label, max-width truncation customization')
+    label-text--attribute='style="--pf-c-label__text--MaxWidth: 28ch"'
+    label-icon--value="info-circle"}}
+
+{{> label
+    label--isRemovable=true
+    label--id=(concat label-template-variants--id '-truncated-with-icon')
+    label-text--value=(concat label-template-variants--title ' label with icon and set max-width truncation customization')
+    label-text--attribute='style="--pf-c-label__text--MaxWidth: 38ch"'
+    label-icon--value="info-circle"}}
+
+{{#if @partial-block}}
+  {{> @partial-block}}
+{{/if}}