Skip to content

Commit 6f48208

Browse files
authored
refactor: Enumerations with unset state changes (#1513)
1 parent 8edaf15 commit 6f48208

File tree

9 files changed

+30
-68
lines changed

9 files changed

+30
-68
lines changed

CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
77
## [6.0.0] - 2025-04-29
88
### Changed
99
- Minimum Node version required is now >= 20.
10+
- #### Stepper
11+
- Stepper Step's `titlePosition` now defaults to `auto`, instead of being undefined, which has the same behavior.
1012

1113
### Removed
1214
- #### Library

src/components/stepper/step.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export default class IgcStepComponent extends LitElement {
126126

127127
/** @hidden @internal @private */
128128
@property({ attribute: false })
129-
public titlePosition?: StepperTitlePosition;
129+
public titlePosition: StepperTitlePosition = 'auto';
130130

131131
/** @hidden @internal @private */
132132
@property({ attribute: false })
@@ -252,11 +252,11 @@ export default class IgcStepComponent extends LitElement {
252252
top: this.titlePosition === 'top',
253253
bottom:
254254
this.titlePosition === 'bottom' ||
255-
(this.orientation === 'horizontal' && !this.titlePosition),
255+
(this.orientation === 'horizontal' && this.titlePosition === 'auto'),
256256
start: this.titlePosition === 'start',
257257
end:
258258
this.titlePosition === 'end' ||
259-
(this.orientation === 'vertical' && !this.titlePosition),
259+
(this.orientation === 'vertical' && this.titlePosition === 'auto'),
260260
};
261261
}
262262

src/components/stepper/stepper.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -760,7 +760,7 @@ describe('Stepper', () => {
760760
PARTS.headerContainer
761761
) as HTMLElement;
762762

763-
expect(step.titlePosition).to.be.undefined;
763+
expect(step.titlePosition).to.equal('auto');
764764
expect(stepHeaderContainer.part.contains('bottom')).to.be.true;
765765
}
766766

@@ -781,7 +781,7 @@ describe('Stepper', () => {
781781
}
782782

783783
stepper.orientation = 'vertical';
784-
stepper.titlePosition = undefined;
784+
stepper.titlePosition = 'auto';
785785
await elementUpdated(stepper);
786786

787787
// test default title positions
@@ -791,7 +791,7 @@ describe('Stepper', () => {
791791
PARTS.headerContainer
792792
) as HTMLElement;
793793

794-
expect(step.titlePosition).to.be.undefined;
794+
expect(step.titlePosition).to.equal('auto');
795795
expect(stepHeaderContainer.part.contains('end')).to.be.true;
796796
}
797797

@@ -839,7 +839,7 @@ describe('Stepper', () => {
839839

840840
// set to the default title position
841841
stepper.orientation = 'horizontal';
842-
stepper.titlePosition = undefined;
842+
stepper.titlePosition = 'auto';
843843
await elementUpdated(stepper);
844844

845845
// test default title positions
@@ -849,7 +849,7 @@ describe('Stepper', () => {
849849
PARTS.headerContainer
850850
) as HTMLElement;
851851

852-
expect(step.titlePosition).to.be.undefined;
852+
expect(step.titlePosition).to.equal('auto');
853853
expect(stepHeaderContainer.part.contains('bottom')).to.be.true;
854854
}
855855

@@ -863,7 +863,7 @@ describe('Stepper', () => {
863863
PARTS.headerContainer
864864
) as HTMLElement;
865865

866-
expect(step.titlePosition).to.undefined;
866+
expect(step.titlePosition).to.equal('auto');
867867
expect(stepHeaderContainer.part.contains('end')).to.be.true;
868868
}
869869
});

src/components/stepper/stepper.ts

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -132,12 +132,12 @@ export default class IgcStepperComponent extends EventEmitterMixin<
132132
* Get/Set the position of the steps title.
133133
*
134134
* @remarks
135-
* The default value is undefined.
135+
* The default value is auto.
136136
* When the stepper is horizontally orientated the title is positioned below the indicator.
137137
* When the stepper is horizontally orientated the title is positioned on the right side of the indicator.
138138
*/
139139
@property({ reflect: false, attribute: 'title-position' })
140-
public titlePosition?: StepperTitlePosition;
140+
public titlePosition: StepperTitlePosition = 'auto';
141141

142142
@watch('orientation', { waitUntilFirstUpdate: true })
143143
protected orientationChange(): void {
@@ -158,16 +158,7 @@ export default class IgcStepperComponent extends EventEmitterMixin<
158158
@watch('titlePosition', { waitUntilFirstUpdate: true })
159159
protected titlePositionChange(): void {
160160
this.steps.forEach((step: IgcStepComponent) => {
161-
if (
162-
this.titlePosition !== 'bottom' &&
163-
this.titlePosition !== 'top' &&
164-
this.titlePosition !== 'end' &&
165-
this.titlePosition !== 'start'
166-
) {
167-
step.titlePosition = undefined;
168-
} else {
169-
step.titlePosition = this.titlePosition;
170-
}
161+
step.titlePosition = this.titlePosition;
171162
});
172163
}
173164

src/components/textarea/textarea.ts

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -150,13 +150,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
150150
* @attr
151151
*/
152152
@property()
153-
public override autocapitalize!:
154-
| 'off'
155-
| 'none'
156-
| 'on'
157-
| 'sentences'
158-
| 'words'
159-
| 'characters';
153+
public override autocapitalize!: string;
160154

161155
/**
162156
* 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(
167161
* @attr inputmode
168162
*/
169163
@property({ attribute: 'inputmode' })
170-
public override inputMode!:
171-
| 'none'
172-
| 'text'
173-
| 'decimal'
174-
| 'numeric'
175-
| 'tel'
176-
| 'search'
177-
| 'email'
178-
| 'url';
164+
public override inputMode!: string;
179165

180166
/**
181167
* The label for the control.
@@ -493,7 +479,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
493479
.value=${live(this.value)}
494480
.wrap=${this.wrap}
495481
autocomplete=${ifDefined(this.autocomplete as any)}
496-
autocapitalize=${ifDefined(this.autocapitalize)}
482+
autocapitalize=${ifDefined(this.autocapitalize as any)}
497483
inputmode=${ifDefined(this.inputMode)}
498484
spellcheck=${ifDefined(this.spellcheck)}
499485
minlength=${ifDefined(this.minLength)}

src/components/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export type SliderTickLabelRotation = 0 | 90 | -90;
4949
export type SliderTickOrientation = 'end' | 'mirror' | 'start';
5050
export type StepperOrientation = 'horizontal' | 'vertical';
5151
export type StepperStepType = 'full' | 'indicator' | 'title';
52-
export type StepperTitlePosition = 'bottom' | 'top' | 'end' | 'start';
52+
export type StepperTitlePosition = 'auto' | 'bottom' | 'top' | 'end' | 'start';
5353
export type StepperVerticalAnimation = 'grow' | 'fade' | 'none';
5454
export type TabsActivation = 'auto' | 'manual';
5555
export type TabsAlignment = 'start' | 'end' | 'center' | 'justify';

stories/stepper.stories.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,11 @@ const metadata: Meta<IgcStepperComponent> = {
7373
table: { defaultValue: { summary: '320' } },
7474
},
7575
titlePosition: {
76-
type: '"bottom" | "top" | "end" | "start"',
76+
type: '"auto" | "bottom" | "top" | "end" | "start"',
7777
description: 'Get/Set the position of the steps title.',
78-
options: ['bottom', 'top', 'end', 'start'],
78+
options: ['auto', 'bottom', 'top', 'end', 'start'],
7979
control: { type: 'select' },
80+
table: { defaultValue: { summary: 'auto' } },
8081
},
8182
},
8283
args: {
@@ -87,6 +88,7 @@ const metadata: Meta<IgcStepperComponent> = {
8788
verticalAnimation: 'grow',
8889
horizontalAnimation: 'slide',
8990
animationDuration: 320,
91+
titlePosition: 'auto',
9092
},
9193
};
9294

@@ -108,7 +110,7 @@ interface IgcStepperArgs {
108110
/** The animation duration in either vertical or horizontal mode. */
109111
animationDuration: number;
110112
/** Get/Set the position of the steps title. */
111-
titlePosition: 'bottom' | 'top' | 'end' | 'start';
113+
titlePosition: 'auto' | 'bottom' | 'top' | 'end' | 'start';
112114
}
113115
type Story = StoryObj<IgcStepperArgs>;
114116

stories/tabs.stories.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const metadata: Meta<IgcTabsComponent> = {
2020
docs: {
2121
description: {
2222
component:
23-
'`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.',
23+
'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.',
2424
},
2525
},
2626
actions: { handles: ['igcChange'] },

stories/textarea.stories.ts

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -39,27 +39,16 @@ const metadata: Meta<IgcTextareaComponent> = {
3939
control: 'text',
4040
},
4141
autocapitalize: {
42-
type: '"off" | "none" | "on" | "sentences" | "words" | "characters"',
42+
type: 'string',
4343
description:
4444
'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).',
45-
options: ['off', 'none', 'on', 'sentences', 'words', 'characters'],
46-
control: { type: 'select' },
45+
control: 'text',
4746
},
4847
inputMode: {
49-
type: '"none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"',
48+
type: 'string',
5049
description:
5150
'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)',
52-
options: [
53-
'none',
54-
'text',
55-
'decimal',
56-
'numeric',
57-
'tel',
58-
'search',
59-
'email',
60-
'url',
61-
],
62-
control: { type: 'select' },
51+
control: 'text',
6352
},
6453
label: {
6554
type: 'string',
@@ -190,22 +179,14 @@ interface IgcTextareaArgs {
190179
*
191180
* [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
192181
*/
193-
autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
182+
autocapitalize: string;
194183
/**
195184
* Hints at the type of data that might be entered by the user while editing the element or its contents.
196185
* This allows a browser to display an appropriate virtual keyboard.
197186
*
198187
* [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
199188
*/
200-
inputMode:
201-
| 'none'
202-
| 'text'
203-
| 'decimal'
204-
| 'numeric'
205-
| 'tel'
206-
| 'search'
207-
| 'email'
208-
| 'url';
189+
inputMode: string;
209190
/** The label for the control. */
210191
label: string;
211192
/**

0 commit comments

Comments
 (0)