chore(many): add tech debt tickets and remove unnecessary todos (#26266)

averyjohnston · web-flow · commit e3ef932ae111 · 2022-11-14T14:49:08.000-06:00
diff --git a/angular/src/directives/control-value-accessors/value-accessor.ts b/angular/src/directives/control-value-accessors/value-accessor.ts
@@ -83,14 +83,8 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
     }
 
     /**
-     * TODO Remove this in favor of https://github.com/angular/angular/issues/10887
-     * whenever it is implemented. Currently, Ionic's form status classes
-     * do not react to changes when developers manually call
-     * Angular form control methods such as markAsTouched.
-     * This results in Ionic's form status classes being out
-     * of sync with the ng form status classes.
-     * This patches the methods to manually sync
-     * the classes until this feature is implemented in Angular.
+     * TODO FW-2787: Remove this in favor of https://github.com/angular/angular/issues/10887
+     * whenever it is implemented.
      */
     const formControl = ngControl.control as any;
     if (formControl) {
diff --git a/angular/src/directives/navigation/stack-utils.ts b/angular/src/directives/navigation/stack-utils.ts
@@ -74,7 +74,6 @@ export const toSegments = (path: string): string[] => {
 
 export const destroyView = (view: RouteView | undefined): void => {
   if (view) {
-    // TODO lifecycle event
     view.ref.destroy();
     view.unlistenEvents();
   }
diff --git a/angular/src/util/overlay.ts b/angular/src/util/overlay.ts
@@ -11,7 +11,6 @@ export class OverlayBaseController<Opts, Overlay> implements ControllerShape<Opt
    * Creates a new overlay
    */
   create(opts?: Opts): Promise<Overlay> {
-    // TODO: next major release opts is not optional
     return this.ctrl.create((opts || {}) as any);
   }
 
diff --git a/angular/test/base/cypress/support/commands.js b/angular/test/base/cypress/support/commands.js
@@ -73,7 +73,7 @@ Cypress.Commands.add('ionPageDoesNotExist', (selector) => {
 });
 
 Cypress.Commands.add('ionTabClick', (tabText) => {
-  // TODO: Figure out how to get rid of wait. It's a workaround for flakiness in CI.
+  // TODO FW-2790: Figure out how to get rid of wait. It's a workaround for flakiness in CI.
   cy.wait(250);
   cy.contains('ion-tab-button', tabText).click({ force: true });
 });
diff --git a/core/src/components/accordion/test/a11y/accordion.e2e.ts b/core/src/components/accordion/test/a11y/accordion.e2e.ts
@@ -4,7 +4,7 @@ import { test } from '@utils/test/playwright';
 test.describe('accordion: a11y', () => {
   test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
     // TODO(FW-1764): remove skip once issue is resolved
-    skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25529');
+    skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
 
     await page.goto(`/src/components/accordion/test/a11y`);
     const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss
@@ -25,7 +25,6 @@
 // iOS Checkbox: Disabled
 // -----------------------------------------
 
-// TODO: .item-ios.item-checkbox-disabled ion-label
 :host(.checkbox-disabled) {
   opacity: $checkbox-ios-disabled-opacity;
 }
diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss
@@ -44,7 +44,6 @@
 // Material Design Checkbox: Disabled
 // --------------------------------------------------------
 
-// TODO .item-md.item-checkbox-disabled ion-label
 :host(.checkbox-disabled) {
   opacity: $checkbox-md-disabled-opacity;
 }
diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
@@ -54,7 +54,6 @@
   color: current-color(contrast);
 }
 
-// TODO we should remove outer-content in favor of a color
 :host(.outer-content) {
   --background: #{$background-color-step-50};
 }
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
@@ -280,7 +280,6 @@ export class Content implements ComponentInterface {
       if (easedT < 1) {
         // do not use DomController here
         // must use nativeRaf in order to fire in the next frame
-        // TODO: remove as any
         requestAnimationFrame(step);
       } else {
         resolve();
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -1038,7 +1038,7 @@ export class Datetime implements ComponentInterface {
       this.initializeListeners();
 
       /**
-       * TODO: Datetime needs a frame to ensure that it
+       * TODO FW-2793: Datetime needs a frame to ensure that it
        * can properly scroll contents into view. As a result
        * we hide the scrollable content until after that frame
        * so users do not see the content quickly shifting. The downside
diff --git a/core/src/components/datetime/test/parse.spec.ts b/core/src/components/datetime/test/parse.spec.ts
@@ -17,7 +17,7 @@ describe('getPartsFromCalendarDay()', () => {
   });
 });
 
-// TODO: parseDate()
+// TODO FW-2794: parseDate()
 
 describe('clampDate()', () => {
   const minParts = {
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
@@ -183,15 +183,6 @@
 }
 
 
-// TODO: MOVE FROM RADIO
-// iOS Radio Item Label: Checked
-// -----------------------------------------
-
-// :host(.item-radio-checked) ::slotted(ion-label) {
-//   color: $radio-ios-color-on;
-// }
-
-
 // iOS Slotted Label
 // --------------------------------------------------
 
@@ -208,7 +199,6 @@
   --min-height: 68px;
 }
 
-// TODO: refactor, ion-item and ion-textarea have the same CSS
 :host(.item-label-stacked) ::slotted(ion-select),
 :host(.item-label-floating) ::slotted(ion-select) {
   --padding-top: 8px;
@@ -224,32 +214,3 @@
 :host(.item-label-fixed) ::slotted(ion-datetime) {
   --padding-start: 0;
 }
-
-// FROM TEXTAREA
-// iOS Stacked & Floating Textarea
-// --------------------------------------------------
-
-// TODO
-// .item-ios.item-label-stacked .label-ios + .input + .cloned-input,
-// .item-ios.item-label-floating .label-ios + .input + .cloned-input {
-//   @include margin-horizontal(0, null);
-// }
-
-
-// iOS Input After Label
-// --------------------------------------------------
-
-// .label-ios + .input .native-input,
-// .label-ios + .input + .cloned-input {
-//   @include margin-horizontal($input-ios-by-label-margin-start, null);
-// }
-
-// iOS Textarea After Label
-// --------------------------------------------------
-
-// .label-ios + ion-textarea .native-textarea,
-// .label-ios + .input + .cloned-input {
-//   @include margin-horizontal($textarea-ios-by-label-margin-start, null);
-
-//   width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start});
-// }
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
@@ -168,7 +168,6 @@
 // Material Design Multi-line Item
 // --------------------------------------------------
 
-// TODO this works if manually adding the class / should it work with prop?
 // Multi-line items should align the slotted content at the top
 :host(.item-multi-line) ::slotted([slot="start"]),
 :host(.item-multi-line) ::slotted([slot="end"]) {
@@ -362,7 +361,6 @@
   --min-height: 55px;
 }
 
-// TODO: refactor, ion-item and ion-textarea have the same CSS
 :host(.item-label-stacked) ::slotted(ion-select),
 :host(.item-label-floating) ::slotted(ion-select) {
   --padding-top: 8px;
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
@@ -37,7 +37,7 @@ export class Menu implements ComponentInterface, MenuI {
   private blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
 
   isAnimating = false;
-  width!: number; // TODO
+  width!: number;
   _isOpen = false;
 
   backdropEl?: HTMLElement;
@@ -465,7 +465,6 @@ export class Menu implements ComponentInterface, MenuI {
     }
     if (this._isOpen) {
       return true;
-      // TODO error
     } else if (menuController._getOpenSync()) {
       return false;
     }
@@ -534,10 +533,9 @@ export class Menu implements ComponentInterface, MenuI {
     let newStepValue = shouldComplete ? 0.001 : -0.001;
 
     /**
-     * TODO: stepValue can sometimes return a negative
+     * stepValue can sometimes return a negative
      * value, but you can't have a negative time value
      * for the cubic bezier curve (at least with web animations)
-     * Not sure if the negative step value is an error or not
      */
     const adjustedStepValue = stepValue < 0 ? 0.01 : stepValue;
 
diff --git a/core/src/components/nav/view-controller.ts b/core/src/components/nav/view-controller.ts
@@ -81,13 +81,6 @@ export const convertToViews = (pages: NavComponentWithProps[]): ViewController[]
         return page;
       }
       if ('component' in page) {
-        /**
-         * TODO Ionic 6:
-         * Consider switching to just using `undefined` here
-         * as well as on the public interfaces and on
-         * `NavComponentWithProps`. Previously `pages` was
-         * of type `any[]` so TypeScript did not catch this.
-         */
         return convertToView(page.component, page.componentProps === null ? undefined : page.componentProps);
       }
       return convertToView(page, undefined);
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
@@ -239,8 +239,6 @@ export class PickerColumnCmp implements ComponentInterface {
     return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
   }
 
-  // TODO should this check disabled?
-
   private onStart(detail: GestureDetail) {
     // We have to prevent default in order to block scrolling under the picker
     // but we DO NOT have to stop propagation, since we still want
diff --git a/core/src/components/radio/test/basic/index.html b/core/src/components/radio/test/basic/index.html
@@ -208,10 +208,6 @@
         var radioValues = ['fruitRadio', 'pizzaRadio', 'veggiesRadio'];
         printRadioValues();
 
-        function printForm(ev) {
-          console.log('TODO get working with forms');
-        }
-
         function printRadioValues() {
           var html = 'Values:<br>';
 
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
@@ -714,8 +714,6 @@ export class Refresher implements ComponentInterface {
     // set that the refresh is actively cancelling/completing
     this.state = state;
     this.setCss(0, this.closeDuration, true, delay);
-
-    // TODO: stop gesture
   }
 
   private setCss(y: number, duration: string, overflowVisible: boolean, delay: string) {
diff --git a/core/src/components/refresher/test/basic/refresher.e2e.ts b/core/src/components/refresher/test/basic/refresher.e2e.ts
@@ -3,7 +3,7 @@ import { test } from '@utils/test/playwright';
 
 import { pullToRefresh } from '../test.utils';
 
-// TODO: Enable this test when touch events/gestures are better supported in Playwright: https://github.com/microsoft/playwright/issues/2903
+// TODO FW-2795: Enable this test when touch events/gestures are better supported in Playwright
 test.skip('refresher: basic', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/src/components/refresher/test/basic');
diff --git a/core/src/components/refresher/test/scroll-target/refresher.e2e.ts b/core/src/components/refresher/test/scroll-target/refresher.e2e.ts
@@ -3,7 +3,7 @@ import { test } from '@utils/test/playwright';
 
 import { pullToRefresh } from '../test.utils';
 
-// TODO: Enable this test when touch events/gestures are better supported in Playwright: https://github.com/microsoft/playwright/issues/2903
+// TODO FW-2795: Enable this test when touch events/gestures are better supported in Playwright
 test.skip('refresher: custom scroll target', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/src/components/refresher/test/scroll-target');
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
@@ -245,9 +245,6 @@ export class ReorderGroup implements ComponentInterface {
   private itemIndexForTop(deltaY: number): number {
     const heights = this.cachedHeights;
 
-    // TODO: since heights is a sorted array of integers, we can do
-    // speed up the search using binary search. Remember that linear-search is still
-    // faster than binary-search for small arrays (<64) due CPU branch misprediction.
     for (let i = 0; i < heights.length; i++) {
       if (heights[i] > deltaY) {
         return i;
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
@@ -493,7 +493,6 @@ export class Select implements ComponentInterface {
    * Close the select interface.
    */
   private close(): Promise<boolean> {
-    // TODO check !this.overlay || !this.isFocus()
     if (!this.overlay) {
       return Promise.resolve(false);
     }
diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx
@@ -353,7 +353,6 @@ export class Slides implements ComponentInterface {
 
   private normalizeOptions(): SwiperOptions {
     // Base options, can be changed
-    // TODO Add interface SwiperOptions
     const swiperOptions: SwiperOptions = {
       effect: undefined,
       direction: 'horizontal',
diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss
@@ -73,17 +73,6 @@
   opacity: $toggle-md-disabled-opacity;
 }
 
-// TODO: move to item
-// .item-md.item-toggle-disabled ion-label {
-//   opacity: $toggle-md-disabled-opacity;
-
-//   pointer-events: none;
-// }
-
-// .toggle-md.toggle-disabled ion-radio {
-//   opacity: $toggle-md-disabled-opacity;
-// }
-
 // Material Design Toggle Within An Item
 // ----------------------------------------------------------
 
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
@@ -25,11 +25,6 @@ body.backdrop-no-scroll {
   overflow: hidden;
 }
 
-// TODO: Block scrolling in ion-content, breaks inside ion-modal
-// body.backdrop-no-scroll .ion-page > ion-content {
-//   --overflow: hidden;
-// }
-
 // Modal - Card Style
 // --------------------------------------------------
 /**
@@ -253,7 +248,6 @@ ion-card-header.ion-color .ion-inherit-color {
 
 
 // Menu Styles
-// TODO: Find a better long term solution for this
 // --------------------------------------------------
 
 .menu-content {
diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
@@ -908,8 +908,6 @@ export const createAnimation = (animationId?: string): Animation => {
          * may be flickering if a new
          * animation is started on the same
          * element too quickly
-         *
-         * TODO: Is there a cleaner way to do this?
          */
         raf(() => {
           clearCSSAnimationPlayState();
diff --git a/core/src/utils/animation/cubic-bezier.ts b/core/src/utils/animation/cubic-bezier.ts
@@ -2,7 +2,6 @@
  * Based on:
  * https://stackoverflow.com/questions/7348009/y-coordinate-for-a-given-x-cubic-bezier
  * https://math.stackexchange.com/questions/26846/is-there-an-explicit-form-for-cubic-b%C3%A9zier-curves
- * TODO: Reduce rounding error
  */
 
 /**
diff --git a/core/src/utils/element-interface.ts b/core/src/utils/element-interface.ts
@@ -1,6 +1,3 @@
-// import { RouterDirection } from '../interface';
-
-// TODO router direction
 // The interfaces in this file are used to make sure our components
 // have the correct properties defined that are needed to pass to
 // the native HTML elements they render
@@ -10,11 +7,9 @@ export interface AnchorInterface {
   target: string | undefined;
   rel: string | undefined;
   download: string | undefined;
-  // routerDirection: RouterDirection;
 }
 
 export interface ButtonInterface {
   type: 'submit' | 'reset' | 'button';
   disabled: boolean;
-  // routerDirection: RouterDirection;
 }
diff --git a/core/src/utils/gesture/swipe-back.ts b/core/src/utils/gesture/swipe-back.ts
@@ -66,11 +66,6 @@ export const createSwipeBackGesture = (
       realDur = Math.min(dur, 540);
     }
 
-    /**
-     * TODO: stepValue can sometimes return negative values
-     * or values greater than 1 which should not be possible.
-     * Need to investigate more to find where the issue is.
-     */
     onEndHandler(shouldComplete, stepValue <= 0 ? 0.01 : clamp(0, stepValue, 0.9999), realDur);
   };
 
diff --git a/core/src/utils/input-shims/hacks/input-blurring.ts b/core/src/utils/input-shims/hacks/input-blurring.ts
@@ -41,7 +41,7 @@ export const enableInputBlurring = () => {
     }
 
     focused = false;
-    // TODO: find a better way, why 50ms?
+    // TODO FW-2796: find a better way, why 50ms?
     setTimeout(() => {
       if (!focused) {
         active.blur();
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
diff --git a/packages/react-router/src/ReactRouter/IonRouter.tsx b/packages/react-router/src/ReactRouter/IonRouter.tsx
diff --git a/packages/react-router/test-app/tests/e2e/specs/routing.cy.js b/packages/react-router/test-app/tests/e2e/specs/routing.cy.js
diff --git a/packages/react-router/test-app/tests/e2e/support/commands.js b/packages/react-router/test-app/tests/e2e/support/commands.js
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
diff --git a/packages/vue-router/src/router.ts b/packages/vue-router/src/router.ts
diff --git a/packages/vue-router/src/types.ts b/packages/vue-router/src/types.ts
diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
diff --git a/packages/vue/src/ionic-vue.ts b/packages/vue/src/ionic-vue.ts
diff --git a/packages/vue/src/utils.ts b/packages/vue/src/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,6 @@ export const toSegments = (path: string): string[] => {`
`74`	`74`
`75`	`75`	`export const destroyView = (view: RouteView \| undefined): void => {`
`76`	`76`	`if (view) {`
`77`		`- // TODO lifecycle event`
`78`	`77`	`view.ref.destroy();`
`79`	`78`	`view.unlistenEvents();`
`80`	`79`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,6 @@ export class OverlayBaseController<Opts, Overlay> implements ControllerShape<Opt`
`11`	`11`	`* Creates a new overlay`
`12`	`12`	`*/`
`13`	`13`	`create(opts?: Opts): Promise<Overlay> {`
`14`		`- // TODO: next major release opts is not optional`
`15`	`14`	`return this.ctrl.create((opts \|\| {}) as any);`
`16`	`15`	`}`
`17`	`16`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,6 @@`
`25`	`25`	`// iOS Checkbox: Disabled`
`26`	`26`	`// -----------------------------------------`
`27`	`27`
`28`		`-// TODO: .item-ios.item-checkbox-disabled ion-label`
`29`	`28`	`:host(.checkbox-disabled) {`
`30`	`29`	`opacity: $checkbox-ios-disabled-opacity;`
`31`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,6 @@`
`44`	`44`	`// Material Design Checkbox: Disabled`
`45`	`45`	`// --------------------------------------------------------`
`46`	`46`
`47`		`-// TODO .item-md.item-checkbox-disabled ion-label`
`48`	`47`	`:host(.checkbox-disabled) {`
`49`	`48`	`opacity: $checkbox-md-disabled-opacity;`
`50`	`49`	`}`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,6 @@`
`54`	`54`	`color: current-color(contrast);`
`55`	`55`	`}`
`56`	`56`
`57`		`-// TODO we should remove outer-content in favor of a color`
`58`	`57`	`:host(.outer-content) {`
`59`	`58`	`--background: #{$background-color-step-50};`
`60`	`59`	`}`