diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ad6c7e5e..5a70c5390 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/stepper/step.ts b/src/components/stepper/step.ts index 464a6ac71..9362e8394 100644 --- a/src/components/stepper/step.ts +++ b/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'), }; } diff --git a/src/components/stepper/stepper.spec.ts b/src/components/stepper/stepper.spec.ts index 5134bb639..020a07510 100644 --- a/src/components/stepper/stepper.spec.ts +++ b/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; } }); diff --git a/src/components/stepper/stepper.ts b/src/components/stepper/stepper.ts index fb5913ac6..2f8a9c83a 100644 --- a/src/components/stepper/stepper.ts +++ b/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; }); } diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index e656266b5..afc512232 100644 --- a/src/components/textarea/textarea.ts +++ b/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)} diff --git a/src/components/types.ts b/src/components/types.ts index 4fe2ebcbf..473f3363d 100644 --- a/src/components/types.ts +++ b/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'; diff --git a/stories/stepper.stories.ts b/stories/stepper.stories.ts index 7939e21f4..58922fe0d 100644 --- a/stories/stepper.stories.ts +++ b/stories/stepper.stories.ts @@ -73,10 +73,11 @@ const metadata: Meta = { 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 = { 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; diff --git a/stories/tabs.stories.ts b/stories/tabs.stories.ts index f0a5c4295..67008b8ff 100644 --- a/stories/tabs.stories.ts +++ b/stories/tabs.stories.ts @@ -20,7 +20,7 @@ const metadata: Meta = { 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 `` component allows the user to navigate between multiple `` elements.\nIt supports keyboard navigation and provides API methods to control the selected tab.', }, }, actions: { handles: ['igcChange'] }, diff --git a/stories/textarea.stories.ts b/stories/textarea.stories.ts index ea1980c07..a61702e75 100644 --- a/stories/textarea.stories.ts +++ b/stories/textarea.stories.ts @@ -39,27 +39,16 @@ const metadata: Meta = { 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; /**