chore: rename addMemberOnBlur and add-member-on-blur to `addOnBlu…

…r` and `add-on-blur` respectively

src/dev/pages/chip-field/chip-field.html

@@ -8,7 +8,7 @@
       { type: 'switch', label: 'Invalid', id: 'opt-invalid' },
       { type: 'switch', label: 'Disabled', id: 'opt-disabled' },
       { type: 'switch', label: 'Dense', id: 'opt-dense' },
-      { type: 'switch', label: 'Add member on blur', id: 'opt-member-on-blur' },
+      { type: 'switch', label: 'Add on blur', id: 'opt-add-on-blur' },
       { type: 'button', label: 'Populate chips', id: 'opt-btn-populate' },
       { type: 'button', label: 'Clear chips', id: 'opt-btn-clear' },
     ]

src/dev/pages/chip-field/chip-field.ts

@@ -20,7 +20,7 @@ const requiredToggle = document.querySelector('#opt-required') as ISwitchCompone
 const invalidToggle = document.querySelector('#opt-invalid') as ISwitchComponent;
 const disabledToggle = document.querySelector('#opt-disabled') as ISwitchComponent;
 const denseToggle = document.querySelector('#opt-dense') as ISwitchComponent;
-const onBlurToggle = document.querySelector('#opt-member-on-blur') as ISwitchComponent;
+const onBlurToggle = document.querySelector('#opt-add-on-blur') as ISwitchComponent;
 const populateButton = document.querySelector('#opt-btn-populate') as HTMLButtonElement;
 const clearButton = document.querySelector('#opt-btn-clear') as HTMLButtonElement;
 
@@ -182,8 +182,8 @@ function updateDenseState({ detail: isDense }: CustomEvent<boolean>): void {
   chips.forEach(({ dense }) => dense = isDense);
 }
 
-function updateOnBlurProperty({ detail: addMemberOnBlur }: CustomEvent<boolean>): void {
-  simpleChipField.addMemberOnBlur = addMemberOnBlur;
+function updateOnBlurProperty({ detail: addOnBlur }: CustomEvent<boolean>): void {
+  simpleChipField.addOnBlur = addOnBlur;
 }
 
 function setChipsDisabledState(isDisabled: boolean): void {

src/lib/chip-field/chip-field-constants.ts

@@ -29,7 +29,7 @@ const events = {
 };
 
 const attributes = {
-  ADD_MEMBER_ON_BLUR: 'add-member-on-blur'
+  ADD_ON_BLUR: 'add-on-blur'
 };
 
 export const CHIP_FIELD_CONSTANTS = {

src/lib/chip-field/chip-field-foundation.ts

@@ -4,11 +4,11 @@ import { CHIP_FIELD_CONSTANTS } from './chip-field-constants';
 import { IFieldFoundation, FieldFoundation } from '../field/field-foundation';
 
 export interface IChipFieldFoundation extends IFieldFoundation {
-  addMemberOnBlur: boolean;
+  addOnBlur: boolean;
 }
 
 export class ChipFieldFoundation extends FieldFoundation implements IChipFieldFoundation {
-  private _addMemberOnBlur = false;
+  private _addOnBlur = false;
   private _memberSlotListener: () => void;
   private _inputContainerMouseDownListener: (evt: MouseEvent) => void;
   private _handleRootKeyDown: (event: KeyboardEvent) => void;
@@ -39,14 +39,14 @@ export class ChipFieldFoundation extends FieldFoundation implements IChipFieldFo
   }
 
   /** Controls adding a member of entered text on blur. */
-  public get addMemberOnBlur(): boolean {
-    return this._addMemberOnBlur;
+  public get addOnBlur(): boolean {
+    return this._addOnBlur;
   }
-  public set addMemberOnBlur(value: boolean) {
+  public set addOnBlur(value: boolean) {
     value = Boolean(value);
-    if (this._addMemberOnBlur !== value) {
-      this._addMemberOnBlur = value;
-      this._adapter.toggleHostAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, this._addMemberOnBlur);
+    if (this._addOnBlur !== value) {
+      this._addOnBlur = value;
+      this._adapter.toggleHostAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, this._addOnBlur);
     }
   }
 
@@ -59,7 +59,7 @@ export class ChipFieldFoundation extends FieldFoundation implements IChipFieldFo
   protected _onBlur(event: FocusEvent): void {
     const input = event.target as HTMLInputElement;
 
-    if (this._addMemberOnBlur) {
+    if (this._addOnBlur) {
       this._addMember(input);
     }
 
@@ -102,7 +102,7 @@ export class ChipFieldFoundation extends FieldFoundation implements IChipFieldFo
         input.value = '';
         break;
       case 'Tab':
-        if (!this._addMemberOnBlur) {
+        if (!this._addOnBlur) {
           input.value = '';
         }
         break;

src/lib/chip-field/chip-field.ts

@@ -10,7 +10,7 @@ import styles from './chip-field.scss';
 import { FIELD_CONSTANTS } from '../field/field-constants';
 
 export interface IChipFieldComponent extends IFieldComponent {
-  addMemberOnBlur: boolean;
+  addOnBlur: boolean;
 }
 
 declare global {
@@ -37,7 +37,7 @@ export class ChipFieldComponent extends FieldComponent<ChipFieldFoundation> impl
   public static get observedAttributes(): string[] {
     return [
       ...Object.values(FIELD_CONSTANTS.attributes),
-      CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR
+      CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR
     ];
   }
 
@@ -49,14 +49,14 @@ export class ChipFieldComponent extends FieldComponent<ChipFieldFoundation> impl
 
   public attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     switch (name) {
-      case CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR:
-        this.addMemberOnBlur = coerceBoolean(newValue);
+      case CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR:
+        this.addOnBlur = coerceBoolean(newValue);
         return;
     }
     super.attributeChangedCallback(name, oldValue, newValue);
   }
 
   /** Controls whether or not the value should be set onBlur */
   @FoundationProperty()
-  public declare addMemberOnBlur: boolean;
+  public declare addOnBlur: boolean;
 }

src/stories/src/components/chip-field/chip-field-args.ts

@@ -14,7 +14,7 @@ export interface IChipFieldProps {
   hasLeading: boolean;
   hasTrailing: boolean;
   hasAddonEnd: boolean;
-  addMemberOnBlur: boolean;
+  addOnBlur: boolean;
 }
 
 export const argTypes = {
@@ -131,9 +131,9 @@ export const argTypes = {
       category: 'Slots',
     },
   },
-  addMemberOnBlur: {
+  addOnBlur: {
     control: 'boolean',
-    description: 'When set to true, pressing tab or clicking away from the field will set whatever you have typed as a value',
+    description: '',
     table: {
       category: 'Properties',
     },

src/stories/src/components/chip-field/chip-field.mdx

@@ -74,11 +74,11 @@ Valid values: `auto` (default), `always`.
 
 </PropertyDef>
 
-<PropertyDef name="addMemberOnBlur" type="boolean" defaultValue="false">
+<PropertyDef name="addOnBlur" type="boolean" defaultValue="false">
 
-Controls the behavior of the blur event with the chip field. When set to true, pressing tab or clicking away from the field will set whatever you have typed as a value
+Controls the behavior of the blur event. When set to true, pressing tab or clicking away from the field will emit the add member event with the current text value.
 
-This property should only be used with a simple chip field, not with an autocomplete.
+Note: This property should only be used with a simple chip field, not with an autocomplete.
 
 </PropertyDef>
 

src/stories/src/components/chip-field/chip-field.stories.tsx

@@ -30,7 +30,7 @@ export const Default: Story<IChipFieldProps> = ({
   hasTrailing = false,
   hasHelperText = false,
   hasAddonEnd = false,
-  addMemberOnBlur = false
+  addOnBlur = false
 }) => {
   const chipFieldRef = useRef<IChipFieldComponent>();
   const addMember = (evt: CustomEvent) => {
@@ -69,7 +69,7 @@ export const Default: Story<IChipFieldProps> = ({
       floatLabelType={floatLabelType}
       shape={shape}
       invalid={invalid}
-      addMemberOnBlur={addMemberOnBlur}
+      addOnBlur={addOnBlur}
       required={required}
       style={{width: '559px'}}>
 
@@ -111,7 +111,7 @@ Default.args = {
   hasTrailing: false,
   hasHelperText: false,
   hasAddonEnd: false,
-  addMemberOnBlur: false
+  addOnBlur: false
 } as IChipFieldProps;
 
 export const WithAutocomplete: Story<{}> = () => {

src/test/spec/chip-field/chip-field.spec.ts

@@ -82,17 +82,17 @@ describe('ChipFieldComponent', function(this: ITestContext) {
       expect(this.context.foundation['_isInitialized']).toBeTrue();
     });
 
-    it('should set the addMemberOnBlur property to false when the attribute is not applied', function(this: ITestContext) {
+    it('should set the addOnBlur property to false when the attribute is not applied', function(this: ITestContext) {
       this.context = setupTestContext();
 
-      expect(this.context.component.addMemberOnBlur).toBeFalse();
+      expect(this.context.component.addOnBlur).toBeFalse();
     });
 
-    it('should set the addMemberOnBlur property to true when the attribute is set to true', function(this: ITestContext) {
+    it('should set the addOnBlur property to true when the attribute is set to true', function(this: ITestContext) {
       this.context = setupTestContext();
-      this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, '');
+      this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, '');
 
-      expect(this.context.component.addMemberOnBlur).toBe(true);
+      expect(this.context.component.addOnBlur).toBe(true);
     });
 
     it('should float label if value is set before adding to DOM', async function(this: ITestContext) {
@@ -1205,27 +1205,27 @@ describe('ChipFieldComponent', function(this: ITestContext) {
         expect(inputIsActive).toBeTrue();
       });
 
-      it('should set the addMemberOnBlur property to true when the attribute is set to true', function(this: ITestContext) {
+      it('should set the addOnBlur property to true when the attribute is set to true', function(this: ITestContext) {
         this.context = setupTestContext();
-        this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, '');
+        this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, '');
 
-        expect(this.context.component.addMemberOnBlur).toBe(true);
+        expect(this.context.component.addOnBlur).toBe(true);
       });
 
-      it('should set the addMemberOnBlur property to false when the attribute is set to false', function(this: ITestContext) {
+      it('should set the addOnBlur property to false when the attribute is set to false', function(this: ITestContext) {
         this.context = setupTestContext();
 
-        this.context.component.addMemberOnBlur = true;
-        expect(this.context.component.addMemberOnBlur).toBeTrue();
+        this.context.component.addOnBlur = true;
+        expect(this.context.component.addOnBlur).toBeTrue();
 
-        this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, 'false');
-        expect(this.context.component.addMemberOnBlur).toBe(false);
+        this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, 'false');
+        expect(this.context.component.addOnBlur).toBe(false);
       });
 
-      it('chips should not be added when addMemberOnBlur is set to false and the "Tab" key is pressed', function(this: ITestContext) {
+      it('chips should not be added when addOnBlur is set to false and the "Tab" key is pressed', function(this: ITestContext) {
         this.context = setupTestContext();
 
-        expect(this.context.component.addMemberOnBlur).toBeFalse();
+        expect(this.context.component.addOnBlur).toBeFalse();
 
         const listener = jasmine.createSpy('add member listener');
         this.context.component.addEventListener(CHIP_FIELD_CONSTANTS.events.MEMBER_ADDED, listener);
@@ -1239,9 +1239,9 @@ describe('ChipFieldComponent', function(this: ITestContext) {
         expect(inputEl.value).withContext('the input value should have been cleared').toBe('');
       });
 
-      it('chips should be added when addMemberOnBlur is set to true and the mouse is clicked outside of the input', function(this: ITestContext) {
+      it('chips should be added when addOnBlur is set to true and the mouse is clicked outside of the input', function(this: ITestContext) {
         this.context = setupTestContext();
-        this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_MEMBER_ON_BLUR, 'true');
+        this.context.component.setAttribute(CHIP_FIELD_CONSTANTS.attributes.ADD_ON_BLUR, 'true');
         const listener = jasmine.createSpy('add member listener');
         this.context.component.addEventListener(CHIP_FIELD_CONSTANTS.events.MEMBER_ADDED, listener);
         getNativeInput(this.context.component).value = 'test';