Update data select to support icon position

Note support a footer
Chips have a fixed line height

Author: MrEssex

docs/pages/components/data-select.md

@@ -16,14 +16,15 @@ layout: component
 
 ## Examples
 
-### Show Prefix
+### Icon Position
+
+Icon position can be set to `start` or `end`. The default is `none`.
 
 ```html:preview
 
 <div class="form-spacing">
-  <zn-data-select provider="country" name="country" show-prefix></zn-data-select>
-  <zn-data-select provider="currency" name="currency" show-prefix></zn-data-select>
-  <zn-data-select provider="color" name="color" show-prefix></zn-data-select>
+  <zn-data-select provider="country" name="country" icon-position="start"></zn-data-select>
+  <zn-data-select provider="country" name="country" icon-position="end"></zn-data-select>
 </div>
 ```
 

src/components/chip/chip.component.ts

@@ -50,7 +50,7 @@ export default class ZnChip extends ZincElement {
         ${this.hasSlotController.test('[default]') ? html`
           <slot></slot>` : ''}
         ${this.hasSlotController.test('action') ? html`
-          <slot name="action"></slot>` : ''}
+          <slot name="action" class="chip__action"></slot>` : ''}
       </div>
     `;
   }

src/components/chip/chip.scss

@@ -17,6 +17,7 @@
   justify-content: center;
   align-items: center;
   border: 1px solid transparent;
+  line-height: 24px;
 }
 
 .chip--primary {
@@ -60,3 +61,7 @@
   border-color: transparent;
   background: transparent;
 }
+
+.chip__action {
+  text-transform: unset;
+}

src/components/data-select/data-select.component.ts

@@ -6,7 +6,7 @@ import {
   emptyDataProvider,
   type LocalDataProvider,
 } from "./providers/provider";
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, unsafeCSS, PropertyValues} from 'lit';
 import {FormControlController} from "../../internal/form";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {LocalizeController} from '../../utilities/localize';
@@ -54,8 +54,7 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
   /** The provider of the select. */
   @property() provider: 'color' | 'currency' | 'country';
 
-  /** Whether we should show the prefix of the options, and the select. */
-  @property({attribute: 'show-prefix', type: Boolean}) showPrefix: boolean;
+  @property({attribute: 'icon-position'}) iconPosition: 'start' | 'end' | 'none' = 'none';
 
   /** An array of keys to use for filtering the options in the selected provider. */
   @property({
@@ -118,19 +117,31 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
     return this.select.setCustomValidity(message);
   }
 
+  protected async firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    await this.updateComplete;
+
+    if (this.prefix) this._updatePrefix(); // Update the prefix on first update
+  }
+
   @watch('value', {waitUntilFirstUpdate: true})
   async handleValueChange() {
     await this.updateComplete;
     this.formControlController.updateValidity();
+    this._updatePrefix();
+  }
 
+  private _updatePrefix() {
     // Set the prefix of the select to the selected values prefix
     const selectedOption = this.select.selectedOptions[0];
-    if (selectedOption && this.showPrefix) {
-      const prefix = selectedOption.querySelector('[slot="prefix"]');
+    if (selectedOption && (this.iconPosition !== 'none')) {
+      const slot = this.iconPosition === 'start'
+        ? selectedOption.querySelector('[slot="prefix"]')
+        : selectedOption.querySelector('[slot="suffix"]');
 
-      if (prefix) {
+      if (slot) {
         this.selectPrefix.innerHTML = '';
-        this.selectPrefix.appendChild(prefix.cloneNode(true));
+        this.selectPrefix.appendChild(slot.cloneNode(true));
       } else {
         this.selectPrefix.innerHTML = '';
       }
@@ -185,11 +196,12 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
                  value="${this.value}"
                  placeholder="Choose a ${localProvider.getName}"
                  exportparts="combobox,expand-icon,form-control-help-text,form-control-input">
-        ${this.showPrefix ? html`
+        ${this.iconPosition !== 'none' ? html`
           <div id="select__prefix" slot="prefix" class="select__prefix"></div>` : ''}
         ${data.map((item: DataProviderOption) => html`
           <zn-option class="select__option" value="${item.key}">
-            ${this.showPrefix ? html`<span slot="prefix">${item.prefix}</span>` : ''}
+            ${this.iconPosition !== 'none' ? html`<span
+              slot="${this.iconPosition === 'end' ? 'suffix' : 'prefix'}">${item.prefix}</span>` : ''}
             ${item.value}
           </zn-option>`)}
       </zn-select>

src/components/data-select/data-select.scss

@@ -33,3 +33,11 @@ $colors: (
 zn-select::part(listbox) {
   max-height: 300px;
 }
+
+.select__prefix {
+  font-size: 20px;
+
+  &:empty {
+    display: contents;
+  }
+}

src/components/inline-edit/inline-edit.component.ts

@@ -60,7 +60,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   @property({attribute: 'provider'}) selectProvider: string;
 
-  @property({attribute: 'show-prefix', type: Boolean}) showPrefix: boolean;
+  @property({attribute: 'icon-position', type: Boolean}) iconPosition: 'start' | 'end' | 'none' = 'none';
 
   /** The input's help text. If you need to display HTML, use the `help-text` slot instead. **/
   @property({attribute: 'help-text'}) helpText: string = '';
@@ -254,7 +254,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
       <zn-data-select class="ai__input"
                       name="${this.name}"
                       value="${this.value}"
-                      show-prefix="${ifDefined(this.showPrefix)}"
+                      icon-position="${ifDefined(this.iconPosition)}"
                       help-text="${ifDefined(this.helpText)}"
                       size="${this.size}"
                       provider="${this.selectProvider}"

src/components/note/note.component.ts

@@ -52,7 +52,8 @@ export default class ZnNote extends ZincElement {
             <small>${this.date}</small>
           </slot>
         </div>
-        <slot name="body" class="note__body">${this.body}</slot>
+        <slot class="note__body">${this.body}</slot>
+        <slot name="footer" class="note__footer"></slot>
       </div>
     `;
   }

src/components/note/note.scss

@@ -54,4 +54,11 @@ $colors: (
       border-left: 3px solid #{$color};
     }
   }
+
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--zn-spacing-x-small);
+  }
 }