fix(segment-button): color property is now reactive if previously undefined (#22405)

resolves #20831

core/src/components/segment-button/segment-button.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Host, Prop, State, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Host, Prop, State, forceUpdate, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { SegmentButtonLayout } from '../../interface';
@@ -55,6 +55,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     if (segmentEl) {
       this.updateState();
       addEventListener(segmentEl, 'ionSelect', this.updateState);
+      addEventListener(segmentEl, 'ionStyle', this.updateStyle);
     }
   }
 
@@ -62,6 +63,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     const segmentEl = this.segmentEl;
     if (segmentEl) {
       removeEventListener(segmentEl, 'ionSelect', this.updateState);
+      removeEventListener(segmentEl, 'ionStyle', this.updateStyle);
       this.segmentEl = null;
     }
   }
@@ -74,6 +76,10 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     return !!this.el.querySelector('ion-icon');
   }
 
+  private updateStyle = () => {
+    forceUpdate(this);
+  }
+
   private updateState = () => {
     if (this.segmentEl) {
       this.checked = this.segmentEl.value === this.value;
@@ -81,8 +87,9 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
   }
 
   render() {
-    const { checked, type, disabled, hasIcon, hasLabel, layout } = this;
+    const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
     const mode = getIonMode(this);
+    const hasSegmentColor = () => segmentEl !== null && segmentEl.color !== undefined;
     return (
       <Host
         aria-disabled={disabled ? 'true' : null}
@@ -91,7 +98,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
           'in-toolbar': hostContext('ion-toolbar', this.el),
           'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'in-segment': hostContext('ion-segment', this.el),
-          'in-segment-color': hostContext('ion-segment[color]', this.el),
+          'in-segment-color': hasSegmentColor(),
           'segment-button-has-label': hasLabel,
           'segment-button-has-icon': hasIcon,
           'segment-button-has-label-only': hasLabel && !hasIcon,

core/src/components/segment/segment.tsx

@@ -36,6 +36,22 @@ export class Segment implements ComponentInterface {
    * For more information on colors, see [theming](/docs/theming/basics).
    */
   @Prop() color?: Color;
+  @Watch('color')
+  protected colorChanged(value?: Color, oldValue?: Color) {
+
+    /**
+     * If color is set after not having
+     * previously been set (or vice versa),
+     * we need to emit style so the segment-buttons
+     * can apply their color classes properly.
+     */
+    if (
+      (oldValue === undefined && value !== undefined) ||
+      (oldValue !== undefined && value === undefined)
+    ) {
+      this.emitStyle();
+    }
+  }
 
   /**
    * If `true`, the user cannot interact with the segment.