Use classList.toggle

[jelbourn]

With Angular dropping IE11 support in version 13, we can now use classList.toggle with the second force param. Related to #7374

[crisbeto]

There's a tslint rule for this that we should get rid of.

[jelbourn]

Updated to remove tslint check

[crisbeto]

LGTM

[zarend]

this has a merge conflict, please resolve the conflict so we can run presubmit

[jelbourn]

@zarend rebased

[andrewseguin]

This failed some targets because either the list of classes to add/remove is an empty array or the array contains an empty string, which produces SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.

You can test this locally in the devtools by trying to add an empty list/token.

To fix, you'll want to filter out empty strings and only apply add/remove if the array has length != 0

[andrewseguin]

To make this pass internally, only overlay needs to be changed to something like:

  /** Toggles a single CSS class or an array of classes on an element. */
  private _toggleClasses(element: HTMLElement, cssClasses: string | string[], isAdd: boolean) {
    const classes = coerceArray(cssClasses || []).filter(c => !!c);

    if (classes.length) {
      isAdd ? element.classList.add(...classes) : element.classList.remove(...classes);
    }
  }

[jelbourn]

@andrewseguin updated PR with the fix for overlay, including additional checks in the unit tests for this case.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}