Textarea: Fix Build issue caused with autocapitalize (#2610)

* Fix Textarea Build issue * Fix Textarea Build issue * Remove autocapitalize from Storybook
trimble-oss · Jun 17, 2024 · ab0b0cd · ab0b0cd
1 parent 8a7ecae
commit ab0b0cd
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 187 deletions.
diff --git a/stencil-workspace/package-lock.json b/stencil-workspace/package-lock.json
diff --git a/stencil-workspace/package.json b/stencil-workspace/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@trimble-oss/modus-web-components",
- "version": "0.31.0",
+ "version": "0.31.1",
  "description": "Trimble Modus Web Component Library",
  "homepage": "https://modus-web-components.trimble.com/",
  "bugs": {
@@ -74,5 +74,8 @@
  "node": ">=16",
  "npm": ">=8"
  },
+ "volta": {
+ "node": "16.20.2"
+ },
  "license": "MIT"
 }
diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts
@@ -548,6 +548,8 @@ export namespace Components {
  */
  "label": string;
  }
+ interface ModusDivider {
+ }
  interface ModusDropdown {
  /**
  * Whether to apply list opening animation.
@@ -1481,10 +1483,6 @@ export namespace Components {
  * (optional) Sets autofocus on the input.
  */
  "autoFocusInput": boolean;
- /**
- * (optional) Capitalization behavior when using a non-traditional keyboard (e.g. microphone, touch screen)
- */
- "autocapitalize": boolean | 'none' | 'off' | 'sentences' | 'on' | 'words' | 'characters';
  /**
  * (optional) Whether to activate automatic correction while the user is editing this field in Safari.
  */
@@ -1666,6 +1664,16 @@ export namespace Components {
  */
  "type": 'danger' | 'dark' | 'default' | 'primary' | 'secondary' | 'success' | 'warning';
  }
+ interface ModusToolbar {
+ /**
+ * (optional) The button's aria-label.
+ */
+ "ariaLabel": string | null;
+ /**
+ * (optional) Disables the button.
+ */
+ "disabled": boolean;
+ }
  interface ModusTooltip {
  /**
  * (optional) The tooltip's aria-label.
@@ -2147,6 +2155,12 @@ declare global {
  prototype: HTMLModusDatePickerElement;
  new (): HTMLModusDatePickerElement;
  };
+ interface HTMLModusDividerElement extends Components.ModusDivider, HTMLStencilElement {
+ }
+ var HTMLModusDividerElement: {
+ prototype: HTMLModusDividerElement;
+ new (): HTMLModusDividerElement;
+ };
  interface HTMLModusDropdownElementEventMap {
  "dropdownClose": any;
  }
@@ -2696,6 +2710,12 @@ declare global {
  prototype: HTMLModusToastElement;
  new (): HTMLModusToastElement;
  };
+ interface HTMLModusToolbarElement extends Components.ModusToolbar, HTMLStencilElement {
+ }
+ var HTMLModusToolbarElement: {
+ prototype: HTMLModusToolbarElement;
+ new (): HTMLModusToolbarElement;
+ };
  interface HTMLModusTooltipElement extends Components.ModusTooltip, HTMLStencilElement {
  }
  var HTMLModusTooltipElement: {
@@ -2757,6 +2777,7 @@ declare global {
  "modus-data-table": HTMLModusDataTableElement;
  "modus-date-input": HTMLModusDateInputElement;
  "modus-date-picker": HTMLModusDatePickerElement;
+ "modus-divider": HTMLModusDividerElement;
  "modus-dropdown": HTMLModusDropdownElement;
  "modus-file-dropzone": HTMLModusFileDropzoneElement;
  "modus-icon": HTMLModusIconElement;
@@ -2797,6 +2818,7 @@ declare global {
  "modus-textarea-input": HTMLModusTextareaInputElement;
  "modus-time-picker": HTMLModusTimePickerElement;
  "modus-toast": HTMLModusToastElement;
+ "modus-toolbar": HTMLModusToolbarElement;
  "modus-tooltip": HTMLModusTooltipElement;
  "modus-tree-view": HTMLModusTreeViewElement;
  "modus-tree-view-item": HTMLModusTreeViewItemElement;
@@ -3367,6 +3389,8 @@ declare namespace LocalJSX {
  */
  "label"?: string;
  }
+ interface ModusDivider {
+ }
  interface ModusDropdown {
  /**
  * Whether to apply list opening animation.
@@ -4439,10 +4463,6 @@ declare namespace LocalJSX {
  * (optional) Sets autofocus on the input.
  */
  "autoFocusInput"?: boolean;
- /**
- * (optional) Capitalization behavior when using a non-traditional keyboard (e.g. microphone, touch screen)
- */
- "autocapitalize"?: boolean | 'none' | 'off' | 'sentences' | 'on' | 'words' | 'characters';
  /**
  * (optional) Whether to activate automatic correction while the user is editing this field in Safari.
  */
@@ -4632,6 +4652,16 @@ declare namespace LocalJSX {
  */
  "type"?: 'danger' | 'dark' | 'default' | 'primary' | 'secondary' | 'success' | 'warning';
  }
+ interface ModusToolbar {
+ /**
+ * (optional) The button's aria-label.
+ */
+ "ariaLabel"?: string | null;
+ /**
+ * (optional) Disables the button.
+ */
+ "disabled"?: boolean;
+ }
  interface ModusTooltip {
  /**
  * (optional) The tooltip's aria-label.
@@ -4767,6 +4797,7 @@ declare namespace LocalJSX {
  "modus-data-table": ModusDataTable;
  "modus-date-input": ModusDateInput;
  "modus-date-picker": ModusDatePicker;
+ "modus-divider": ModusDivider;
  "modus-dropdown": ModusDropdown;
  "modus-file-dropzone": ModusFileDropzone;
  "modus-icon": ModusIcon;
@@ -4807,6 +4838,7 @@ declare namespace LocalJSX {
  "modus-textarea-input": ModusTextareaInput;
  "modus-time-picker": ModusTimePicker;
  "modus-toast": ModusToast;
+ "modus-toolbar": ModusToolbar;
  "modus-tooltip": ModusTooltip;
  "modus-tree-view": ModusTreeView;
  "modus-tree-view-item": ModusTreeViewItem;
@@ -4831,6 +4863,7 @@ declare module "@stencil/core" {
  "modus-data-table": LocalJSX.ModusDataTable & JSXBase.HTMLAttributes<HTMLModusDataTableElement>;
  "modus-date-input": LocalJSX.ModusDateInput & JSXBase.HTMLAttributes<HTMLModusDateInputElement>;
  "modus-date-picker": LocalJSX.ModusDatePicker & JSXBase.HTMLAttributes<HTMLModusDatePickerElement>;
+ "modus-divider": LocalJSX.ModusDivider & JSXBase.HTMLAttributes<HTMLModusDividerElement>;
  "modus-dropdown": LocalJSX.ModusDropdown & JSXBase.HTMLAttributes<HTMLModusDropdownElement>;
  "modus-file-dropzone": LocalJSX.ModusFileDropzone & JSXBase.HTMLAttributes<HTMLModusFileDropzoneElement>;
  "modus-icon": LocalJSX.ModusIcon & JSXBase.HTMLAttributes<HTMLModusIconElement>;
@@ -4874,6 +4907,7 @@ declare module "@stencil/core" {
  "modus-textarea-input": LocalJSX.ModusTextareaInput & JSXBase.HTMLAttributes<HTMLModusTextareaInputElement>;
  "modus-time-picker": LocalJSX.ModusTimePicker & JSXBase.HTMLAttributes<HTMLModusTimePickerElement>;
  "modus-toast": LocalJSX.ModusToast & JSXBase.HTMLAttributes<HTMLModusToastElement>;
+ "modus-toolbar": LocalJSX.ModusToolbar & JSXBase.HTMLAttributes<HTMLModusToolbarElement>;
  "modus-tooltip": LocalJSX.ModusTooltip & JSXBase.HTMLAttributes<HTMLModusTooltipElement>;
  "modus-tree-view": LocalJSX.ModusTreeView & JSXBase.HTMLAttributes<HTMLModusTreeViewElement>;
  "modus-tree-view-item": LocalJSX.ModusTreeViewItem & JSXBase.HTMLAttributes<HTMLModusTreeViewItemElement>;

diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx
@@ -258,7 +258,6 @@ export class ModusAutocomplete {
  this.disableFiltering = this.disableCloseOnSelect;
  this.focusItemIndex = this.visibleOptions.findIndex((el) => el.id === option.id);
  this.handleSearchChange(option.value);
-
  }
 
  this.hasFocus = this.disableCloseOnSelect;

diff --git a/stencil-workspace/src/components/modus-textarea-input/modus-textarea-input.spec.tsx b/stencil-workspace/src/components/modus-textarea-input/modus-textarea-input.spec.tsx
@@ -21,25 +21,6 @@ describe('modus-textarea-input', () => {
  `);
  });
 
- it('renders autocapitalize', async () => {
- const page = await newSpecPage({
- components: [ModusTextareaInput],
- html: '<modus-textarea-input autocapitalize="words"></modus-textarea-input>',
- });
- expect(page.root).toEqualHtml(`
- <modus-textarea-input autocapitalize="words">
- <mock:shadow-root>
- <div class="modus-textarea-input">
- <div class="input-container medium" part="input-container">
- <textarea class="text-align-left" id="mwc_id_1_textarea_input" rows="3" tabindex="0" autocapitalize="words">
- </textarea>
- </div>
- </div>
- </mock:shadow-root>
- </modus-textarea-input>
- `);
- });
-
  it('renders autocorrect', async () => {
  const page = await newSpecPage({
  components: [ModusTextareaInput],
@@ -50,7 +31,7 @@ describe('modus-textarea-input', () => {
  <mock:shadow-root>
  <div class="modus-textarea-input">
  <div class="input-container medium" part="input-container">
- <textarea class="text-align-left" id="mwc_id_2_textarea_input" rows="3" tabindex="0" autocorrect="on">
+ <textarea class="text-align-left" id="mwc_id_1_textarea_input" rows="3" tabindex="0" autocorrect="on">
  </textarea>
  </div>
  </div>
@@ -69,7 +50,7 @@ describe('modus-textarea-input', () => {
  <mock:shadow-root>
  <div class="modus-textarea-input">
  <div class="input-container medium" part="input-container">
- <textarea class="text-align-left" id="mwc_id_3_textarea_input" rows="3" tabindex="0" enterkeyhint="done">
+ <textarea class="text-align-left" id="mwc_id_2_textarea_input" rows="3" tabindex="0" enterkeyhint="done">
  </textarea>
  </div>
  </div>
@@ -88,7 +69,7 @@ describe('modus-textarea-input', () => {
  <mock:shadow-root>
  <div class="modus-textarea-input">
  <div class="input-container medium" part="input-container">
- <textarea class="text-align-left" id="mwc_id_4_textarea_input" rows="3" tabindex="0" spellcheck>
+ <textarea class="text-align-left" id="mwc_id_3_textarea_input" rows="3" tabindex="0" spellcheck>
  </textarea>
  </div>
  </div>
@@ -97,18 +78,6 @@ describe('modus-textarea-input', () => {
  `);
  });
 
- it('should set autocapitalize on the input to "on" when "true" is passed in', async () => {
- const modusTextInput = new ModusTextareaInput();
- modusTextInput.autocapitalize = true;
- expect(modusTextInput.inputAutocapitalize).toEqual('on');
- });
-
- it('should set autocapitalize on the input to "off" when "false" is passed in', async () => {
- const modusTextInput = new ModusTextareaInput();
- modusTextInput.autocapitalize = false;
- expect(modusTextInput.inputAutocapitalize).toEqual('off');
- });
-
  it('should set autocorrect on the input to "on" when "true" is passed in', async () => {
  const modusTextInput = new ModusTextareaInput();
  modusTextInput.autocorrect = true;

diff --git a/stencil-workspace/src/components/modus-textarea-input/modus-textarea-input.tsx b/stencil-workspace/src/components/modus-textarea-input/modus-textarea-input.tsx
@@ -12,9 +12,6 @@ export class ModusTextareaInput {
  /** (optional) The input's aria-label. */
  @Prop() ariaLabel: string | null;
 
- /** (optional) Capitalization behavior when using a non-traditional keyboard (e.g. microphone, touch screen) */
- @Prop() autocapitalize: boolean | 'none' | 'off' | 'sentences' | 'on' | 'words' | 'characters';
-
  /** (optional) Whether to activate automatic correction while the user is editing this field in Safari. */
  @Prop() autocorrect: boolean | 'off' | 'on';
 
@@ -112,15 +109,6 @@ export class ModusTextareaInput {
  this.valueChange.emit(value);
  }
 
- get inputAutocapitalize() {
- if (this.autocapitalize === true) {
- return 'on';
- } else if (this.autocapitalize === false) {
- return 'off';
- }
- return this.autocapitalize;
- }
-
  get inputAutocorrect() {
  if (this.autocorrect === true) {
  return 'on';
@@ -174,7 +162,6 @@ export class ModusTextareaInput {
  aria-invalid={!!this.errorText}
  aria-label={this.ariaLabel}
  aria-required={this.required?.toString()}
- autoCapitalize={this.inputAutocapitalize}
  autocorrect={this.autocorrect as string}
  class={buildTextInputClassNames()}
  disabled={this.disabled}