refactor: Enumerations with unset state changes (#1513)

Author: damyanpetev

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [6.0.0] - 2025-04-29
 ### Changed
 - Minimum Node version required is now >= 20.
+- #### Stepper
+  - Stepper Step's `titlePosition` now defaults to `auto`, instead of being undefined, which has the same behavior.
 
 ### Removed
 - #### Library

src/components/stepper/step.ts

@@ -126,7 +126,7 @@ export default class IgcStepComponent extends LitElement {
 
   /** @hidden @internal @private */
   @property({ attribute: false })
-  public titlePosition?: StepperTitlePosition;
+  public titlePosition: StepperTitlePosition = 'auto';
 
   /** @hidden @internal @private */
   @property({ attribute: false })
@@ -252,11 +252,11 @@ export default class IgcStepComponent extends LitElement {
       top: this.titlePosition === 'top',
       bottom:
         this.titlePosition === 'bottom' ||
-        (this.orientation === 'horizontal' && !this.titlePosition),
+        (this.orientation === 'horizontal' && this.titlePosition === 'auto'),
       start: this.titlePosition === 'start',
       end:
         this.titlePosition === 'end' ||
-        (this.orientation === 'vertical' && !this.titlePosition),
+        (this.orientation === 'vertical' && this.titlePosition === 'auto'),
     };
   }
 

src/components/stepper/stepper.spec.ts

@@ -760,7 +760,7 @@ describe('Stepper', () => {
           PARTS.headerContainer
         ) as HTMLElement;
 
-        expect(step.titlePosition).to.be.undefined;
+        expect(step.titlePosition).to.equal('auto');
         expect(stepHeaderContainer.part.contains('bottom')).to.be.true;
       }
 
@@ -781,7 +781,7 @@ describe('Stepper', () => {
       }
 
       stepper.orientation = 'vertical';
-      stepper.titlePosition = undefined;
+      stepper.titlePosition = 'auto';
       await elementUpdated(stepper);
 
       // test default title positions
@@ -791,7 +791,7 @@ describe('Stepper', () => {
           PARTS.headerContainer
         ) as HTMLElement;
 
-        expect(step.titlePosition).to.be.undefined;
+        expect(step.titlePosition).to.equal('auto');
         expect(stepHeaderContainer.part.contains('end')).to.be.true;
       }
 
@@ -839,7 +839,7 @@ describe('Stepper', () => {
 
       // set to the default title position
       stepper.orientation = 'horizontal';
-      stepper.titlePosition = undefined;
+      stepper.titlePosition = 'auto';
       await elementUpdated(stepper);
 
       // test default title positions
@@ -849,7 +849,7 @@ describe('Stepper', () => {
           PARTS.headerContainer
         ) as HTMLElement;
 
-        expect(step.titlePosition).to.be.undefined;
+        expect(step.titlePosition).to.equal('auto');
         expect(stepHeaderContainer.part.contains('bottom')).to.be.true;
       }
 
@@ -863,7 +863,7 @@ describe('Stepper', () => {
           PARTS.headerContainer
         ) as HTMLElement;
 
-        expect(step.titlePosition).to.undefined;
+        expect(step.titlePosition).to.equal('auto');
         expect(stepHeaderContainer.part.contains('end')).to.be.true;
       }
     });

src/components/stepper/stepper.ts

@@ -132,12 +132,12 @@ export default class IgcStepperComponent extends EventEmitterMixin<
    * Get/Set the position of the steps title.
    *
    * @remarks
-   * The default value is undefined.
+   * The default value is auto.
    * When the stepper is horizontally orientated the title is positioned below the indicator.
    * When the stepper is horizontally orientated the title is positioned on the right side of the indicator.
    */
   @property({ reflect: false, attribute: 'title-position' })
-  public titlePosition?: StepperTitlePosition;
+  public titlePosition: StepperTitlePosition = 'auto';
 
   @watch('orientation', { waitUntilFirstUpdate: true })
   protected orientationChange(): void {
@@ -158,16 +158,7 @@ export default class IgcStepperComponent extends EventEmitterMixin<
   @watch('titlePosition', { waitUntilFirstUpdate: true })
   protected titlePositionChange(): void {
     this.steps.forEach((step: IgcStepComponent) => {
-      if (
-        this.titlePosition !== 'bottom' &&
-        this.titlePosition !== 'top' &&
-        this.titlePosition !== 'end' &&
-        this.titlePosition !== 'start'
-      ) {
-        step.titlePosition = undefined;
-      } else {
-        step.titlePosition = this.titlePosition;
-      }
+      step.titlePosition = this.titlePosition;
     });
   }
 

src/components/textarea/textarea.ts

@@ -150,13 +150,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
    * @attr
    */
   @property()
-  public override autocapitalize!:
-    | 'off'
-    | 'none'
-    | 'on'
-    | 'sentences'
-    | 'words'
-    | 'characters';
+  public override autocapitalize!: string;
 
   /**
    * Hints at the type of data that might be entered by the user while editing the element or its contents.
@@ -167,15 +161,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
    * @attr inputmode
    */
   @property({ attribute: 'inputmode' })
-  public override inputMode!:
-    | 'none'
-    | 'text'
-    | 'decimal'
-    | 'numeric'
-    | 'tel'
-    | 'search'
-    | 'email'
-    | 'url';
+  public override inputMode!: string;
 
   /**
    * The label for the control.
@@ -493,7 +479,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
         .value=${live(this.value)}
         .wrap=${this.wrap}
         autocomplete=${ifDefined(this.autocomplete as any)}
-        autocapitalize=${ifDefined(this.autocapitalize)}
+        autocapitalize=${ifDefined(this.autocapitalize as any)}
         inputmode=${ifDefined(this.inputMode)}
         spellcheck=${ifDefined(this.spellcheck)}
         minlength=${ifDefined(this.minLength)}

src/components/types.ts

@@ -49,7 +49,7 @@ export type SliderTickLabelRotation = 0 | 90 | -90;
 export type SliderTickOrientation = 'end' | 'mirror' | 'start';
 export type StepperOrientation = 'horizontal' | 'vertical';
 export type StepperStepType = 'full' | 'indicator' | 'title';
-export type StepperTitlePosition = 'bottom' | 'top' | 'end' | 'start';
+export type StepperTitlePosition = 'auto' | 'bottom' | 'top' | 'end' | 'start';
 export type StepperVerticalAnimation = 'grow' | 'fade' | 'none';
 export type TabsActivation = 'auto' | 'manual';
 export type TabsAlignment = 'start' | 'end' | 'center' | 'justify';

stories/stepper.stories.ts

@@ -73,10 +73,11 @@ const metadata: Meta<IgcStepperComponent> = {
       table: { defaultValue: { summary: '320' } },
     },
     titlePosition: {
-      type: '"bottom" | "top" | "end" | "start"',
+      type: '"auto" | "bottom" | "top" | "end" | "start"',
       description: 'Get/Set the position of the steps title.',
-      options: ['bottom', 'top', 'end', 'start'],
+      options: ['auto', 'bottom', 'top', 'end', 'start'],
       control: { type: 'select' },
+      table: { defaultValue: { summary: 'auto' } },
     },
   },
   args: {
@@ -87,6 +88,7 @@ const metadata: Meta<IgcStepperComponent> = {
     verticalAnimation: 'grow',
     horizontalAnimation: 'slide',
     animationDuration: 320,
+    titlePosition: 'auto',
   },
 };
 
@@ -108,7 +110,7 @@ interface IgcStepperArgs {
   /** The animation duration in either vertical or horizontal mode. */
   animationDuration: number;
   /** Get/Set the position of the steps title. */
-  titlePosition: 'bottom' | 'top' | 'end' | 'start';
+  titlePosition: 'auto' | 'bottom' | 'top' | 'end' | 'start';
 }
 type Story = StoryObj<IgcStepperArgs>;
 

stories/tabs.stories.ts

@@ -20,7 +20,7 @@ const metadata: Meta<IgcTabsComponent> = {
     docs: {
       description: {
         component:
-          '`IgcTabsComponent` provides a wizard-like workflow by dividing content into logical tabs.\n\nThe tabs component allows the user to navigate between multiple tabs.\nIt supports keyboard navigation and provides API methods to control the selected tab.',
+          'Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\n\nThe `<igc-tabs>` component allows the user to navigate between multiple `<igc-tab>` elements.\nIt supports keyboard navigation and provides API methods to control the selected tab.',
       },
     },
     actions: { handles: ['igcChange'] },

stories/textarea.stories.ts

@@ -39,27 +39,16 @@ const metadata: Meta<IgcTextareaComponent> = {
       control: 'text',
     },
     autocapitalize: {
-      type: '"off" | "none" | "on" | "sentences" | "words" | "characters"',
+      type: 'string',
       description:
         'Controls whether and how text input is automatically capitalized as it is entered/edited by the user.\n\n[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).',
-      options: ['off', 'none', 'on', 'sentences', 'words', 'characters'],
-      control: { type: 'select' },
+      control: 'text',
     },
     inputMode: {
-      type: '"none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"',
+      type: 'string',
       description:
         'Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.\n\n[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)',
-      options: [
-        'none',
-        'text',
-        'decimal',
-        'numeric',
-        'tel',
-        'search',
-        'email',
-        'url',
-      ],
-      control: { type: 'select' },
+      control: 'text',
     },
     label: {
       type: 'string',
@@ -190,22 +179,14 @@ interface IgcTextareaArgs {
    *
    * [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
    */
-  autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+  autocapitalize: string;
   /**
    * Hints at the type of data that might be entered by the user while editing the element or its contents.
    * This allows a browser to display an appropriate virtual keyboard.
    *
    * [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
    */
-  inputMode:
-    | 'none'
-    | 'text'
-    | 'decimal'
-    | 'numeric'
-    | 'tel'
-    | 'search'
-    | 'email'
-    | 'url';
+  inputMode: string;
   /** The label for the control. */
   label: string;
   /**