@descope/web-components-ui 3.6.0 → 3.7.0

package/src/components/descope-user-attribute/UserAttributeClass.js

@@ -1,6 +1,7 @@
 import { TextClass } from '@descope-ui/descope-text/class';
 import { ButtonClass } from '@descope-ui/descope-button/class';
 import { BadgeClass } from '@descope-ui/descope-badge/class';
+import { IconClass } from '@descope-ui/descope-icon/class';
 import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
@@ -24,12 +25,12 @@ class RawUserAttribute extends createBaseClass({
           <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
           <div class="btn-wrapper">
             <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
-            <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
-              <slot name="edit-icon"></slot>
-            </descope-button>
-            <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <descope-button size="sm" data-id="delete-btn" variant="link" mode="primary">
               <slot name="delete-icon"></slot>
             </descope-button>
+            <descope-button size="sm" data-id="edit-btn" variant="link" mode="primary">
+              <slot name="edit-icon"></slot>
+            </descope-button>
           </div>
         </div>
       </div>
@@ -48,7 +49,7 @@ class RawUserAttribute extends createBaseClass({
           height: 100%;
           align-items: center;
         }
-        
+
         ::slotted(*) {
           display: flex;
           align-items: center;
@@ -66,6 +67,14 @@ class RawUserAttribute extends createBaseClass({
           justify-content: space-between;
           align-items: center;
           flex-grow: 0;
+          flex-shrink: 0;
+        }
+
+        slot[name="edit-icon"],
+        slot[name="delete-icon"] {
+          display: inline-flex;
+          flex-shrink: 0;
+          align-items: center;
         }
 
         .content-wrapper {
@@ -102,6 +111,7 @@ class RawUserAttribute extends createBaseClass({
 
         .hidden {
           visibility: hidden;
+          width: 0;
         }
 
         descope-text[data-id="label-text"].required:after {
@@ -111,6 +121,7 @@ class RawUserAttribute extends createBaseClass({
 
         :host([readonly="true"]) descope-button {
           visibility: hidden;
+          width: 0;
         }
           `,
       this
@@ -150,6 +161,21 @@ class RawUserAttribute extends createBaseClass({
     this.badge.setAttribute('title', this.badgeTooltipText || this.badgeLabel);
   }
 
+  updateButtonLabel(btnRef, label) {
+    let textSpanEle = btnRef.querySelector('span.btn-label');
+
+    if (label) {
+      if (!textSpanEle) {
+        textSpanEle = document.createElement('span');
+        textSpanEle.classList.add('btn-label');
+        btnRef.appendChild(textSpanEle);
+      }
+      textSpanEle.innerText = label;
+    } else {
+      textSpanEle?.remove();
+    }
+  }
+
   onIsRequiredChange() {
     this.labelText.classList.toggle('required', this.isRequired);
   }
@@ -178,12 +204,26 @@ class RawUserAttribute extends createBaseClass({
     return this.getAttribute('badge-tooltip-text') || '';
   }
 
+  get editButtonLabel() {
+    return this.getAttribute('edit-button-label') || '';
+  }
+
+  get deleteButtonLabel() {
+    return this.getAttribute('delete-button-label') || '';
+  }
+
+  get isDeleteHidden() {
+    return this.getAttribute('hide-delete') === 'true';
+  }
+
   init() {
     this.onLabelChange();
     this.onValueOrPlaceholderChange();
     this.onIsRequiredChange();
     this.onBadgeLabelChange();
     this.onBadgeTooltipTextChange();
+    this.updateButtonLabel(this.editButton, this.editButtonLabel);
+    this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
     this.handleDeleteButtonVisibility();
 
     this.deleteButton.addEventListener('click', () =>
@@ -219,11 +259,17 @@ class RawUserAttribute extends createBaseClass({
       'required',
       'badge-label',
       'badge-tooltip-text',
+      'edit-button-label',
+      'delete-button-label',
+      'hide-delete',
     ].concat(super.observedAttributes);
   }
 
   handleDeleteButtonVisibility() {
-    this.deleteButton.classList.toggle('hidden', this.isRequired || !this.value);
+    this.deleteButton.classList.toggle(
+      'hidden',
+      this.isRequired || !this.value || this.isDeleteHidden
+    );
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -243,9 +289,13 @@ class RawUserAttribute extends createBaseClass({
       this.onBadgeLabelChange();
     } else if (name === 'badge-tooltip-text') {
       this.onBadgeTooltipTextChange();
+    } else if (name === 'edit-button-label') {
+      this.updateButtonLabel(this.editButton, this.editButtonLabel);
+    } else if (name === 'delete-button-label') {
+      this.updateButtonLabel(this.deleteButton, this.deleteButtonLabel);
     }
 
-    if (name === 'value' || name === 'required') {
+    if (name === 'value' || name === 'required' || name === 'hide-delete') {
       this.handleDeleteButtonVisibility();
     }
   }
@@ -276,6 +326,7 @@ export const UserAttributeClass = compose(
       contentMinWidth: { ...contentWrapper, property: 'min-width' },
       badgeMaxWidth: { ...badge, property: 'max-width' },
       itemsGap: [{ property: 'gap' }, { ...contentWrapper, property: 'gap' }],
+      iconColor: [{ selector: () => '::slotted(*)', property: IconClass.cssVarList.fill }],
     },
   }),
   draggableMixin,

package/src/theme/components/userAttribute.js

@@ -17,6 +17,7 @@ const userAttribute = {
   [vars.hostMinWidth]: '310px',
   [vars.hostWidth]: '530px',
   [vars.hostMaxWidth]: '100%',
+  [vars.iconColor]: 'currentcolor',
 
   _fullWidth: {
     [vars.hostWidth]: '100%',

package/stories/descope-user-attribute.stories.js

@@ -26,6 +26,9 @@ const Template = ({
   readonly,
   'badge-label': badgeLabel,
   'badge-tooltip-text': badgeTooltipText,
+  'edit-button-label': editButtonLabel,
+  'delete-button-label': deleteButtonLabel,
+  'hide-delete': hideDelete,
   customIcons,
 }) => `
   <descope-user-attribute
@@ -36,6 +39,9 @@ const Template = ({
     required="${required || 'false'}"
     badge-label="${badgeLabel || ''}"
     badge-tooltip-text="${badgeTooltipText || ''}"
+    edit-button-label="${editButtonLabel || ''}"
+    delete-button-label="${deleteButtonLabel || ''}"
+    hide-delete="${hideDelete || 'false'}"
     st-host-direction="${direction ?? ''}"
     readonly="${readonly || false}"
   >
@@ -65,6 +71,18 @@ export default {
       name: 'Badge Tooltip Text',
       control: { type: 'text' },
     },
+    'edit-button-label': {
+      name: 'Edit Button Label',
+      control: { type: 'text' },
+    },
+    'delete-button-label': {
+      name: 'Delete Button Label',
+      control: { type: 'text' },
+    },
+    'hide-delete': {
+      name: 'Hide Delete',
+      control: { type: 'boolean' },
+    },
     customIcons: {
       name: 'Custom Icons',
       control: { type: 'boolean' },