refactor(checkbox): remove legacy property and support for legacy syntax (#29043)

BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).

core/src/components/checkbox/checkbox.ios.scss

@@ -31,21 +31,3 @@
 :host(.checkbox-disabled) {
   opacity: $checkbox-ios-disabled-opacity;
 }
-
-
-// iOS Checkbox Within An Item
-// TODO(FW-3100): remove this
-// -----------------------------------------
-
-:host(.in-item.legacy-checkbox) {
-  // end position by default
-  @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
-
-  display: block;
-
-  position: static;
-}
-
-:host(.in-item.legacy-checkbox[slot="start"]) {
-  @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
-}

core/src/components/checkbox/checkbox.ios.vars.scss

@@ -26,29 +26,5 @@ $checkbox-ios-icon-border-radius:         50% !default;
 /// @prop - Opacity of the disabled checkbox
 $checkbox-ios-disabled-opacity:           $form-control-ios-disabled-opacity !default;
 
-/// @prop - Margin top of the left checkbox item
-$checkbox-ios-item-start-margin-top:      8px !default;
-
-/// @prop - Margin end of the left checkbox item
-$checkbox-ios-item-start-margin-end:      $item-ios-padding-end !default;
-
-/// @prop - Margin bottom of the left checkbox item
-$checkbox-ios-item-start-margin-bottom:   $checkbox-ios-item-start-margin-top !default;
-
-/// @prop - Margin start of the left checkbox item
-$checkbox-ios-item-start-margin-start:    2px !default;
-
-/// @prop - Margin top of the right checkbox item
-$checkbox-ios-item-end-margin-top:        10px !default;
-
-/// @prop - Margin end of the right checkbox item
-$checkbox-ios-item-end-margin-end:        8px !default;
-
-/// @prop - Margin bottom of the right checkbox item
-$checkbox-ios-item-end-margin-bottom:     9px !default;
-
-/// @prop - Margin start of the right checkbox item
-$checkbox-ios-item-end-margin-start:      0 !default;
-
 /// @prop - Checkmark width of the checkbox icon
 $checkbox-ios-icon-checkmark-width:       1.5px !default;

core/src/components/checkbox/checkbox.md.scss

@@ -44,7 +44,6 @@
 // opacity set by its spec, while the label
 // should match the other form controls
 
-:host(.legacy-checkbox.checkbox-disabled),
 :host(.checkbox-disabled) .label-text-wrapper {
   opacity: $checkbox-md-disabled-opacity;
 }
@@ -52,21 +51,3 @@
 :host(.checkbox-disabled) .native-wrapper {
   opacity: $checkbox-md-icon-disabled-opacity;
 }
-
-
-// Material Design Checkbox Within An Item
-// TODO(FW-3100): remove this
-// --------------------------------------------------------
-
-:host(.in-item.legacy-checkbox) {
-  // end position by default
-  @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
-
-  display: block;
-
-  position: static;
-}
-
-:host(.in-item.legacy-checkbox[slot="start"]) {
-  @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
-}

core/src/components/checkbox/checkbox.md.vars.scss

@@ -30,30 +30,6 @@ $checkbox-md-transition-duration:        180ms !default;
 /// @prop - Transition easing of the checkbox
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;
 
-/// @prop - Margin top of the start checkbox item
-$checkbox-md-item-start-margin-top:      18px !default;
-
-/// @prop - Margin end of the start checkbox item
-$checkbox-md-item-start-margin-end:      36px !default;
-
-/// @prop - Margin bottom of the start checkbox item
-$checkbox-md-item-start-margin-bottom:   $checkbox-md-item-start-margin-top !default;
-
-/// @prop - Margin start of the start checkbox item
-$checkbox-md-item-start-margin-start:    4px !default;
-
-/// @prop - Margin top of the end checkbox item
-$checkbox-md-item-end-margin-top:        18px !default;
-
-/// @prop - Margin end of the end checkbox item
-$checkbox-md-item-end-margin-end:        0 !default;
-
-/// @prop - Margin bottom of the end checkbox item
-$checkbox-md-item-end-margin-bottom:     $checkbox-md-item-end-margin-top !default;
-
-/// @prop - Margin start of the end checkbox item
-$checkbox-md-item-end-margin-start:      0 !default;
-
 /// @prop - Opacity of the disabled checkbox
 /// This value is used because the checkbox color is set to
 /// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be

core/src/components/checkbox/checkbox.scss

@@ -48,34 +48,17 @@
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot="start"]:not(.legacy-checkbox)),
-:host([slot="end"]:not(.legacy-checkbox)) {
+:host([slot="start"]),
+:host([slot="end"]) {
   width: auto;
 }
 
-// TODO(FW-3100): remove this
-:host(.legacy-checkbox) {
-  width: var(--size);
-  height: var(--size);
-}
-
 :host(.ion-color) {
   --checkbox-background-checked: #{current-color(base)};
   --border-color-checked: #{current-color(base)};
   --checkmark-color: #{current-color(contrast)};
 }
 
-// TODO(FW-3100): remove this
-:host(.legacy-checkbox) label {
-  @include input-cover();
-
-  display: flex;
-
-  align-items: center;
-
-  opacity: 0;
-}
-
 .checkbox-wrapper {
   display: flex;
 
@@ -96,7 +79,7 @@
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {
+:host(.in-item) .label-text-wrapper {
   @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
 }
 
@@ -132,6 +115,9 @@ input {
 
   position: relative;
 
+  width: var(--size);
+  height: var(--size);
+
   transition: var(--transition);
 
   border-width: var(--border-width);
@@ -143,20 +129,6 @@ input {
   box-sizing: border-box;
 }
 
-// TODO(FW-3100): remove this
-:host(.legacy-checkbox) .checkbox-icon {
-  display: block;
-
-  width: 100%;
-  height: 100%;
-}
-
-// TODO(FW-3100): merge this with other .checkbox-icon styles above
-:host(:not(.legacy-checkbox)) .checkbox-icon {
-  width: var(--size);
-  height: var(--size);
-}
-
 .checkbox-icon path {
   fill: none;
   stroke: var(--checkmark-color);

core/src/components/checkbox/checkbox.tsx

@@ -1,14 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
+import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
-import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
-import { printIonWarning } from '@utils/logging';
+import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
 import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import type { Color, Mode, StyleEventDetail } from '../../interface';
+import type { Color, Mode } from '../../interface';
 
 import type { CheckboxChangeEventDetail } from './checkbox-interface';
 
@@ -32,13 +29,8 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
 export class Checkbox implements ComponentInterface {
   private inputId = `ion-cb-${checkboxIds++}`;
   private focusEl?: HTMLElement;
-  private legacyFormController!: LegacyFormController; // TODO(FW-3100): remove this
   private inheritedAttributes: Attributes = {};
 
-  // TODO(FW-3100): remove this
-  // This flag ensures we log the deprecation warning at most once.
-  private hasLoggedDeprecationWarning = false;
-
   @Element() el!: HTMLIonCheckboxElement;
 
   /**
@@ -104,19 +96,6 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() alignment: 'start' | 'center' = 'center';
 
-  // TODO(FW-3100): remove this
-  /**
-   * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
-   * Ionic will only opt checkboxes in to the modern form markup when they are
-   * using either the `aria-label` attribute or have text in the default slot. As a result,
-   * the `legacy` property should only be used as an escape hatch when you want to
-   * avoid this automatic opt-in behavior.
-   *
-   * Note that this property will be removed in an upcoming major release
-   * of Ionic, and all form components will be opted-in to using the modern form markup.
-   */
-  @Prop() legacy?: boolean;
-
   /**
    * Emitted when the checked property has changed
    * as a result of a user action such as a click.
@@ -135,46 +114,10 @@ export class Checkbox implements ComponentInterface {
    */
   @Event() ionBlur!: EventEmitter<void>;
 
-  /**
-   * Emitted when the styles change.
-   * @internal
-   */
-  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
-
-  connectedCallback() {
-    this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
-  }
-
   componentWillLoad() {
-    this.emitStyle();
-
-    // TODO(FW-3100): remove check
-    if (!this.legacyFormController.hasLegacyControl()) {
-      this.inheritedAttributes = {
-        ...inheritAriaAttributes(this.el),
-      };
-    }
-  }
-
-  @Watch('checked')
-  @Watch('disabled')
-  protected styleChanged() {
-    this.emitStyle();
-  }
-
-  private emitStyle() {
-    const style: StyleEventDetail = {
-      'interactive-disabled': this.disabled,
-      // TODO(FW-3100): remove this
-      legacy: !!this.legacy,
+    this.inheritedAttributes = {
+      ...inheritAriaAttributes(this.el),
     };
-
-    // TODO(FW-3100): remove this
-    if (this.legacyFormController.hasLegacyControl()) {
-      style['checkbox-checked'] = this.checked;
-    }
-
-    this.ionStyle.emit(style);
   }
 
   private setFocus() {
@@ -221,14 +164,7 @@ export class Checkbox implements ComponentInterface {
     this.toggleChecked(ev);
   };
 
-  // TODO(FW-3100): run contents of renderCheckbox directly instead
   render() {
-    const { legacyFormController } = this;
-
-    return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
-  }
-
-  private renderCheckbox() {
     const {
       color,
       checked,
@@ -299,72 +235,6 @@ export class Checkbox implements ComponentInterface {
     );
   }
 
-  // TODO(FW-3100): remove this
-  private renderLegacyCheckbox() {
-    if (!this.hasLoggedDeprecationWarning) {
-      printIonWarning(
-        `ion-checkbox now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
-
-Example: <ion-checkbox>Label</ion-checkbox>
-Example with aria-label: <ion-checkbox aria-label="Label"></ion-checkbox>
-
-Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`,
-        this.el
-      );
-
-      if (this.legacy) {
-        printIonWarning(
-          `ion-checkbox is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
-Developers can dismiss this warning by removing their usage of the "legacy" property and using the new checkbox syntax.`,
-          this.el
-        );
-      }
-
-      this.hasLoggedDeprecationWarning = true;
-    }
-
-    const { color, checked, disabled, el, getSVGPath, indeterminate, inputId, name, value } = this;
-    const mode = getIonMode(this);
-    const { label, labelId, labelText } = getAriaLabel(el, inputId);
-    const path = getSVGPath(mode, indeterminate);
-
-    renderHiddenInput(true, el, name, checked ? value : '', disabled);
-
-    return (
-      <Host
-        aria-labelledby={label ? labelId : null}
-        aria-checked={`${checked}`}
-        aria-hidden={disabled ? 'true' : null}
-        role="checkbox"
-        class={createColorClasses(color, {
-          [mode]: true,
-          'in-item': hostContext('ion-item', el),
-          'checkbox-checked': checked,
-          'checkbox-disabled': disabled,
-          'checkbox-indeterminate': indeterminate,
-          'legacy-checkbox': true,
-          interactive: true,
-        })}
-        onClick={this.onClick}
-      >
-        <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
-          {path}
-        </svg>
-        <label htmlFor={inputId}>{labelText}</label>
-        <input
-          type="checkbox"
-          aria-checked={`${checked}`}
-          disabled={disabled}
-          id={inputId}
-          onChange={this.toggleChecked}
-          onFocus={() => this.onFocus()}
-          onBlur={() => this.onBlur()}
-          ref={(focusEl) => (this.focusEl = focusEl)}
-        />
-      </Host>
-    );
-  }
-
   private getSVGPath(mode: Mode, indeterminate: boolean): HTMLElement {
     let path = indeterminate ? (
       <path d="M6 12L18 12" part="mark" />

core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts

@@ -1,94 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('checkbox: basic (legacy)'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/checkbox/test/legacy/basic`, config);
-
-      await page.setIonViewport();
-
-      await expect(page).toHaveScreenshot(screenshot(`checkbox-legacy-basic`));
-    });
-  });
-});
-
-configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('checkbox: ionChange'), () => {
-    test('should fire ionChange when interacting with checkbox', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-checkbox value="my-checkbox"></ion-checkbox>
-      `,
-        config
-      );
-
-      const ionChange = await page.spyOnEvent('ionChange');
-      const checkbox = page.locator('ion-checkbox');
-
-      await checkbox.click();
-      await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: true });
-
-      await checkbox.click();
-      await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: false });
-    });
-
-    test('should fire ionChange when interacting with checkbox in item', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-item>
-          <ion-checkbox value="my-checkbox"></ion-checkbox>
-        </ion-item>
-      `,
-        config
-      );
-
-      const ionChange = await page.spyOnEvent('ionChange');
-      const item = page.locator('ion-item');
-
-      await item.click();
-      await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: true });
-
-      await item.click();
-      await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: false });
-    });
-
-    test('should not fire when programmatically setting a value', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-checkbox value="my-checkbox"></ion-checkbox>
-      `,
-        config
-      );
-
-      const ionChange = await page.spyOnEvent('ionChange');
-      const checkbox = page.locator('ion-checkbox');
-
-      await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
-      await expect(ionChange).not.toHaveReceivedEvent();
-    });
-
-    test('clicking padded space within item should click the checkbox', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-item>
-          <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
-        </ion-item>
-      `,
-        config
-      );
-      const itemNative = page.locator('.item-native');
-      const ionChange = await page.spyOnEvent('ionChange');
-
-      // Clicks the padded space within the item
-      await itemNative.click({
-        position: {
-          x: 5,
-          y: 5,
-        },
-      });
-
-      expect(ionChange).toHaveReceivedEvent();
-    });
-  });
-});

core/src/components/checkbox/test/legacy/basic/index.html

@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Checkbox - Basic</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-  <style>
-    ion-checkbox.checkbox-part::part(mark) {
-      transform: scale(0.5);
-      transform-origin: center;
-    }
-  </style>
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Checkbox - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-item>
-          <ion-label>Unchecked by Default</ion-label>
-          <ion-checkbox></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Checked by Default</ion-label>
-          <ion-checkbox checked></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Primary</ion-label>
-          <ion-checkbox checked color="primary" slot="end"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Secondary, disabled</ion-label>
-          <ion-checkbox disabled checked color="secondary"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Tertiary</ion-label>
-          <ion-checkbox checked color="tertiary"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Success</ion-label>
-          <ion-checkbox checked color="success"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Warning</ion-label>
-          <ion-checkbox checked color="warning"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Dark, --size</ion-label>
-          <ion-checkbox checked color="dark" style="--size: 100px"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Danger</ion-label>
-          <ion-checkbox checked color="danger" slot="start"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Light</ion-label>
-          <ion-checkbox checked color="light" slot="start"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Medium</ion-label>
-          <ion-checkbox checked color="medium" slot="start"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Checkmark width</ion-label>
-          <ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Checkmark ::part</ion-label>
-          <ion-checkbox checked color="dark" slot="start" class="checkbox-part"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Disabled</ion-label>
-          <ion-checkbox disabled></ion-checkbox>
-        </ion-item>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>

core/src/components/checkbox/test/legacy/indeterminate/checkbox.e2e.ts

@@ -1,13 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('checkbox: indeterminate (legacy)'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/checkbox/test/legacy/indeterminate`, config);
-
-      const content = page.locator('#checkboxes');
-      await expect(content).toHaveScreenshot(screenshot(`checkbox-legacy-indeterminate`));
-    });
-  });
-});

core/src/components/checkbox/test/legacy/indeterminate/index.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Checkbox - Indeterminate</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Checkbox - Indeterminate</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <div id="checkboxes">
-          <ion-item>
-            <ion-label>Indeterminate</ion-label>
-            <ion-checkbox slot="end" indeterminate></ion-checkbox>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Checked / Indeterminate</ion-label>
-            <ion-checkbox slot="end" checked indeterminate></ion-checkbox>
-          </ion-item>
-
-          <ion-list-header>
-            <ion-label> Colors </ion-label>
-          </ion-list-header>
-          <div class="ion-padding-start">
-            <ion-checkbox indeterminate></ion-checkbox>
-            <ion-checkbox indeterminate color="secondary"></ion-checkbox>
-            <ion-checkbox indeterminate color="tertiary"></ion-checkbox>
-            <ion-checkbox indeterminate color="success"></ion-checkbox>
-            <ion-checkbox indeterminate color="warning"></ion-checkbox>
-            <ion-checkbox indeterminate color="danger"></ion-checkbox>
-            <ion-checkbox indeterminate color="dark"></ion-checkbox>
-            <ion-checkbox indeterminate color="medium"></ion-checkbox>
-            <ion-checkbox indeterminate color="light"></ion-checkbox>
-          </div>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      var indeterminateCheckboxes = document.getElementsByClassName('indeterminate');
-
-      for (var i = 0; i < indeterminateCheckboxes.length; i++) {
-        var checkbox = indeterminateCheckboxes[i];
-        checkbox.indeterminate = true;
-      }
-    </script>
-  </body>
-</html>