chore(colorClass): update createColorClasses() for ts4 (#21896)

Change the createColorClasses() fn so the returned type and jsx class property work well with typescript 4
2026-03-13 10:22:08 +08:00 · 2020-08-10 09:18:41 -05:00
parent 7fc13ffb2a
commit 753fd2f910
34 changed files with 81 additions and 116 deletions
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -122,10 +122,8 @@ export class BackButton implements ComponentInterface, ButtonInterface {
    return (
      <Host
        onClick={this.onClick}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
          [mode]: true,
-
          'button': true, // ion-buttons target .button
          'back-button-disabled': disabled,
          'back-button-has-icon-only': hasIconOnly,
@@ -134,7 +132,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
          'ion-activatable': true,
          'ion-focusable': true,
          'show-back-button': showBackButton
-        }}
+        })}
      >
        <button
          type={type}
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -27,10 +27,9 @@ export class Badge implements ComponentInterface {
    const mode = getIonMode(this);
    return (
      <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
-        }}
+        })}
      >
        <slot></slot>
      </Host>
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -204,8 +204,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
      <Host
        onClick={this.handleClick}
        aria-disabled={disabled ? 'true' : null}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
          [mode]: true,
          [buttonType]: true,
          [`${buttonType}-${expand}`]: expand !== undefined,
@@ -219,7 +218,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
          'button-disabled': disabled,
          'ion-activatable': true,
          'ion-focusable': true,
-        }}
+        })}
      >
        <TagType
          {...attrs}
--- a/core/src/components/card-header/card-header.tsx
+++ b/core/src/components/card-header/card-header.tsx
@@ -34,12 +34,11 @@ export class CardHeader implements ComponentInterface {
    const mode = getIonMode(this);
    return (
      <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          'card-header-translucent': this.translucent,
          'ion-inherit-color': true,
          [mode]: true
-        }}
+        })}
      >
        <slot></slot>
      </Host>
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -29,11 +29,10 @@ export class CardSubtitle implements ComponentInterface {
      <Host
        role="heading"
        aria-level="3"
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          'ion-inherit-color': true,
          [mode]: true
-        }}
+        })}
      >
        <slot></slot>
      </Host>
--- a/core/src/components/card-title/card-title.tsx
+++ b/core/src/components/card-title/card-title.tsx
@@ -29,11 +29,10 @@ export class CardTitle implements ComponentInterface {
      <Host
        role="heading"
        aria-level="2"
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          'ion-inherit-color': true,
          [mode]: true
-        }}
+        })}
      >
        <slot></slot>
      </Host>
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -122,13 +122,11 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
    const mode = getIonMode(this);
    return (
      <Host
-        class={{
+        class={createColorClasses(this.color, {
          [mode]: true,
-
-          ...createColorClasses(this.color),
          'card-disabled': this.disabled,
          'ion-activatable': this.isClickable()
-        }}
+        })}
      >
        {this.renderCard(mode)}
      </Host>
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -155,15 +155,14 @@ export class Checkbox implements ComponentInterface {
        aria-disabled={disabled ? 'true' : null}
        aria-checked={`${checked}`}
        aria-labelledby={labelId}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
          [mode]: true,
          'in-item': hostContext('ion-item', el),
          'checkbox-checked': checked,
          'checkbox-disabled': disabled,
          'checkbox-indeterminate': indeterminate,
          'interactive': true
-        }}
+        })}
      >
        <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
          {path}
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -33,12 +33,11 @@ export class Chip implements ComponentInterface {

    return (
      <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          'chip-outline': this.outline,
          'ion-activatable': true,
-        }}
+        })}
      >
        <slot></slot>
        {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -313,12 +313,11 @@ export class Content implements ComponentInterface {

    return (
      <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          'content-sizing': hostContext('ion-popover', this.el),
          'overscroll': forceOverscroll,
-        }}
+        })}
        style={{
          '--offset-top': `${this.cTop}px`,
          '--offset-bottom': `${this.cBottom}px`,
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -142,8 +142,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
    return (
      <Host
        aria-disabled={disabled ? 'true' : null}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
          [mode]: true,
          'fab-button-in-list': inList,
          'fab-button-translucent-in-list': inList && translucent,
@@ -154,7 +153,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
          'ion-activatable': true,
          'ion-focusable': true,
          [`fab-button-${size}`]: size !== undefined,
-        }}
+        })}
      >

        <TagType
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -368,12 +368,11 @@ export class Input implements ComponentInterface {
    return (
      <Host
        aria-disabled={this.disabled ? 'true' : null}
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          'has-value': this.hasValue(),
          'has-focus': this.hasFocus
-        }}
+        })}
      >
        <input
          class="native-input"
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@@ -43,12 +43,11 @@ export class ItemDivider implements ComponentInterface {
    const mode = getIonMode(this);
    return (
      <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          'item-divider-sticky': this.sticky,
          'item': true,
-        }}
+        })}
      >
        <slot name="start"></slot>
        <div class="item-divider-inner">
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -100,14 +100,12 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
    return (
      <Host
        onClick={this.onClick}
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
-
          'item-option-disabled': disabled,
          'item-option-expandable': expandable,
          'ion-activatable': true,
-        }}
+        })}
      >
        <TagType
          {...attrs}
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -201,15 +201,16 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
        aria-disabled={disabled ? 'true' : null}
        class={{
          ...childStyles,
-          ...createColorClasses(this.color),
-          'item': true,
-          [mode]: true,
-          [`item-lines-${lines}`]: lines !== undefined,
-          'item-disabled': disabled,
-          'in-list': hostContext('ion-list', this.el),
-          'item-multiple-inputs': this.multipleInputs,
-          'ion-activatable': canActivate,
-          'ion-focusable': true,
+          ...createColorClasses(this.color, {
+            'item': true,
+            [mode]: true,
+            [`item-lines-${lines}`]: lines !== undefined,
+            'item-disabled': disabled,
+            'in-list': hostContext('ion-list', this.el),
+            'item-multiple-inputs': this.multipleInputs,
+            'ion-activatable': canActivate,
+            'ion-focusable': true,
+          })
        }}
      >
          <TagType
--- a/core/src/components/label/label.tsx
+++ b/core/src/components/label/label.tsx
@@ -69,12 +69,11 @@ export class Label implements ComponentInterface {
    const mode = getIonMode(this);
    return (
      <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          [`label-${position}`]: position !== undefined,
          [`label-no-animate`]: (this.noAnimate)
-        }}
+        })}
      >
      </Host>
    );
--- a/core/src/components/list-header/list-header.tsx
+++ b/core/src/components/list-header/list-header.tsx
@@ -35,11 +35,11 @@ export class ListHeader implements ComponentInterface {

    return (
      <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          [`list-header-lines-${lines}`]: lines !== undefined,
-        }}
+        }
+        )}
      >
        <div class="list-header-inner">
          <slot></slot>
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -83,11 +83,8 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
        onClick={this.onClick}
        aria-disabled={disabled ? 'true' : null}
        aria-hidden={hidden ? 'true' : null}
-        class={{
+        class={createColorClasses(color, {
          [mode]: true,
-
-          ...createColorClasses(color),
-
          'button': true,  // ion-buttons target .button
          'menu-button-hidden': hidden,
          'menu-button-disabled': disabled,
@@ -95,7 +92,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
          'ion-activatable': true,
          'ion-focusable': true
-        }}
+        })}
      >
        <button
          {...attrs}
--- a/core/src/components/note/note.tsx
+++ b/core/src/components/note/note.tsx
@@ -27,10 +27,9 @@ export class Note implements ComponentInterface {
    const mode = getIonMode(this);
    return (
      <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
-        }}
+        })}
      >
        <slot></slot>
      </Host>
--- a/core/src/components/progress-bar/progress-bar.tsx
+++ b/core/src/components/progress-bar/progress-bar.tsx
@@ -60,13 +60,12 @@ export class ProgressBar implements ComponentInterface {
        aria-valuenow={type === 'determinate' ? value : null}
        aria-valuemin="0"
        aria-valuemax="1"
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
          [mode]: true,
          [`progress-bar-${type}`]: true,
          'progress-paused': paused,
          'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
-        }}
+        })}
      >
        {type === 'indeterminate'
          ? renderIndeterminate()
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -130,14 +130,13 @@ export class Radio implements ComponentInterface {
        aria-disabled={disabled ? 'true' : null}
        aria-checked={`${checked}`}
        aria-labelledby={labelId}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
          [mode]: true,
          'in-item': hostContext('ion-item', el),
          'interactive': true,
          'radio-checked': checked,
          'radio-disabled': disabled,
-        }}
+        })}
      >
        <div class="radio-icon" part="container">
          <div class="radio-inner" part="mark" />
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -422,14 +422,13 @@ export class Range implements ComponentInterface {
      <Host
        onFocusin={this.onFocus}
        onFocusout={this.onBlur}
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          'in-item': hostContext('ion-item', el),
          'range-disabled': disabled,
          'range-pressed': pressedKnob !== undefined,
          'range-has-pin': pin
-        }}
+        })}
      >

        <slot name="start"></slot>
--- a/core/src/components/router-link/router-link.tsx
+++ b/core/src/components/router-link/router-link.tsx
@@ -63,11 +63,10 @@ export class RouterLink implements ComponentInterface {
    return (
      <Host
        onClick={this.onClick}
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          'ion-activatable': true
-        }}
+        })}
      >
        <a {...attrs}>
          <slot></slot>
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -452,8 +452,7 @@ export class Searchbar implements ComponentInterface {
      <Host
        role="search"
        aria-disabled={this.disabled ? 'true' : null}
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          'searchbar-animated': animated,
          'searchbar-disabled': this.disabled,
@@ -462,7 +461,7 @@ export class Searchbar implements ComponentInterface {
          'searchbar-left-aligned': this.shouldAlignLeft,
          'searchbar-has-focus': this.focused,
          'searchbar-should-show-cancel': this.shouldShowCancelButton()
-        }}
+        })}
      >

        <div class="searchbar-input-container">
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -389,19 +389,17 @@ export class Segment implements ComponentInterface {

  render() {
    const mode = getIonMode(this);
-
    return (
      <Host
        onClick={this.onClick}
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
          'in-toolbar': hostContext('ion-toolbar', this.el),
          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
          'segment-activated': this.activated,
          'segment-disabled': this.disabled,
          'segment-scrollable': this.scrollable
-        }}
+        })}
      >
        <slot></slot>
      </Host>
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -67,12 +67,11 @@ export class Spinner implements ComponentInterface {

    return (
      <Host
-        class={{
-          ...createColorClasses(self.color),
+        class={createColorClasses(self.color, {
          [mode]: true,
          [`spinner-${spinnerName}`]: true,
          'spinner-paused': !!self.paused || config.getBoolean('_testing')
-        }}
+        })}
        role="progressbar"
        style={spinner.elmDuration ? { animationDuration: duration + 'ms' } : {}}
      >
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -75,12 +75,11 @@ export class TabBar implements ComponentInterface {
      <Host
        role="tablist"
        aria-hidden={keyboardVisible ? 'true' : null}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
          [mode]: true,
          'tab-bar-translucent': translucent,
          'tab-bar-hidden': keyboardVisible,
-        }}
+        })}
      >
        <slot></slot>
      </Host>
--- a/core/src/components/text/text.tsx
+++ b/core/src/components/text/text.tsx
@@ -25,10 +25,9 @@ export class Text implements ComponentInterface {
    const mode = getIonMode(this);
    return (
      <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
-        }}
+        })}
      >
        <slot></slot>
      </Host>
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -322,10 +322,9 @@ export class Textarea implements ComponentInterface {
    return (
      <Host
        aria-disabled={this.disabled ? 'true' : null}
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
          [mode]: true,
-        }}
+        })}
      >
        <div
          class="textarea-wrapper"
--- a/core/src/components/title/title.tsx
+++ b/core/src/components/title/title.tsx
@@ -61,12 +61,10 @@ export class ToolbarTitle implements ComponentInterface {

    return (
      <Host
-        class={{
+        class={createColorClasses(this.color, {
          [mode]: true,
          [`title-${size}`]: true,
-
-          ...createColorClasses(this.color),
-        }}
+        })}
      >
        <div class="toolbar-title">
          <slot></slot>
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -269,13 +269,11 @@ export class Toast implements ComponentInterface, OverlayInterface {
        style={{
          zIndex: `${60000 + this.overlayIndex}`,
        }}
-        class={{
+        class={createColorClasses(this.color, {
          [mode]: true,
-
-          ...createColorClasses(this.color),
          ...getClassMap(this.cssClass),
          'toast-translucent': this.translucent
-        }}
+        })}
        tabindex="-1"
        onIonToastWillDismiss={this.dispatchCancelHandler}
      >
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -193,15 +193,14 @@ export class Toggle implements ComponentInterface {
        aria-disabled={disabled ? 'true' : null}
        aria-checked={`${checked}`}
        aria-labelledby={labelId}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
          [mode]: true,
          'in-item': hostContext('ion-item', el),
          'toggle-activated': activated,
          'toggle-checked': checked,
          'toggle-disabled': disabled,
          'interactive': true
-        }}
+        })}
      >
        <div class="toggle-icon" part="track">
          <div class="toggle-icon-wrapper">
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -89,10 +89,11 @@ export class Toolbar implements ComponentInterface {
    return (
      <Host
        class={{
-          'in-toolbar': hostContext('ion-toolbar', this.el),
-          [mode]: true,
          ...childStyles,
-          ...createColorClasses(this.color),
+          ...createColorClasses(this.color, {
+            [mode]: true,
+            'in-toolbar': hostContext('ion-toolbar', this.el),
+          }),
        }}
      >
        <div class="toolbar-background"></div>
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -7,11 +7,12 @@ export const hostContext = (selector: string, el: HTMLElement): boolean => {
 /**
 * Create the mode and color classes for the component based on the classes passed in
 */
-export const createColorClasses = (color: Color | undefined | null): CssClassMap | undefined => {
+export const createColorClasses = (color: Color | undefined | null, cssClassMap: CssClassMap): CssClassMap => {
  return (typeof color === 'string' && color.length > 0) ? {
    'ion-color': true,
-    [`ion-color-${color}`]: true
-  } : undefined;
+    [`ion-color-${color}`]: true,
+    ...cssClassMap
+  } : cssClassMap;
 };

 export const getClassList = (classes: string | (string | null | undefined)[] | undefined): string[] => {