fix(segment): checked can be changed dynamically

core/src/components.d.ts

@@ -5422,7 +5422,6 @@ declare global {
 
   namespace StencilComponents {
     interface IonSegmentButton {
-      'activated': boolean;
       /**
        * If true, the segment button is selected. Defaults to `false`.
        */
@@ -5466,7 +5465,6 @@ declare global {
   }
   namespace JSXElements {
     export interface IonSegmentButtonAttributes extends HTMLAttributes {
-      'activated'?: boolean;
       /**
        * If true, the segment button is selected. Defaults to `false`.
        */

core/src/components/segment-button/readme.md

@@ -8,11 +8,6 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen
 
 ## Properties
 
-#### activated
-
-boolean
-
-
 #### checked
 
 boolean
@@ -58,11 +53,6 @@ The value of the segment button.
 
 ## Attributes
 
-#### activated
-
-boolean
-
-
 #### checked
 
 boolean

core/src/components/segment-button/segment-button.ios.scss

@@ -42,18 +42,18 @@ ion-segment-button {
     line-height: $segment-button-ios-icon-line-height;
   }
 
-  &.segment-activated {
+  &.segment-checked {
     color: $segment-button-ios-text-color;
     background-color: $segment-button-ios-background-color-activated;
     transition: $segment-button-ios-transition-activated;
   }
 
-  &:hover:not(.segment-activated) {
+  &:hover:not(.segment-checked) {
     background-color: $segment-button-ios-background-color-hover;
     transition: $segment-button-ios-transition-hover;
   }
 
-  &:active:not(.segment-activated) {
+  &:active:not(.segment-checked) {
     background-color: $segment-button-ios-background-color-active;
     transition: $segment-button-ios-transition-active;
   }
@@ -116,15 +116,15 @@ ion-segment-button {
       border-color: $color-base;
       color: $color-base;
 
-      &:hover:not(.segment-activated) {
+      &:hover:not(.segment-checked) {
         background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-hover);
       }
 
-      &:active:not(.segment-activated) {
+      &:active:not(.segment-checked) {
         background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-active);
       }
 
-      &.segment-activated {
+      &.segment-checked {
         color: $color-contrast;
         background-color: $color-base;
       }
@@ -145,7 +145,7 @@ ion-segment-button {
 
   @include ios-segment-button($color-name);
 
-  .toolbar-ios-#{$color-name} .segment-button-ios.segment-activated {
+  .toolbar-ios-#{$color-name} .segment-button-ios.segment-checked {
     color: $color-base;
   }
 }

core/src/components/segment-button/segment-button.md.scss

@@ -31,7 +31,7 @@
   }
 
   &.activated,
-  &.segment-activated {
+  &.segment-checked {
     border-color: $segment-button-md-border-color-activated;
     opacity: $segment-button-md-opacity-activated;
   }
@@ -58,7 +58,7 @@
     color: $color-base;
 
     &.activated,
-    &.segment-activated {
+    &.segment-checked {
       border-color: $color-base;
       color: $color-base;
     }

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 import { Mode } from '../../interface';
 import { createThemedClasses, getElementClassMap } from '../../utils/theme';
 
@@ -15,8 +15,6 @@ export class SegmentButton {
 
   @Element() el!: HTMLElement;
 
-  @Prop({ mutable: true }) activated = false;
-
   /**
    * The color to use for the text color.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -32,7 +30,7 @@ export class SegmentButton {
   /**
    * If true, the segment button is selected. Defaults to `false`.
    */
-  @Prop() checked = false;
+  @Prop({mutable: true}) checked = false;
 
   /*
    * If true, the user cannot interact with the segment button. Default false.
@@ -55,12 +53,12 @@ export class SegmentButton {
    */
   @Event() ionSelect!: EventEmitter<void>;
 
-  /**
-   * Emit the click event to the parent segment
-   */
-  private onClick() {
+  @Watch('checked')
+  checkedChanged(checked: boolean, prev: boolean) {
+    if (checked && !prev) {
       this.ionSelect.emit();
     }
+  }
 
   render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
@@ -68,7 +66,7 @@ export class SegmentButton {
 
     const buttonClasses = {
       'segment-button-disabled': this.disabled,
-      'segment-activated': this.activated,
+      'segment-checked': this.checked,
       ...themedClasses,
       ...hostClasses,
     };
@@ -81,11 +79,11 @@ export class SegmentButton {
     return [
       <TagType
        {...attrs}
-        aria-pressed={this.activated}
+        aria-pressed={this.checked}
         class={buttonClasses}
         disabled={this.disabled}
         href={this.href}
-        onClick={this.onClick.bind(this)}>
+        onClick={() => this.checked = true }>
           <slot></slot>
           { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
       </TagType>

core/src/components/segment/segment.tsx

@@ -40,7 +40,7 @@ export class Segment {
 
   @Watch('value')
   protected valueChanged(value: string | undefined) {
-    this.selectButton();
+    this.update();
     this.ionChange.emit({value});
   }
 
@@ -56,20 +56,21 @@ export class Segment {
   }
 
   componentDidLoad() {
-    this.selectButton();
+    if (this.value === undefined) {
+      const buttons = Array.from(this.el.querySelectorAll('ion-segment-button'));
+      const checked = buttons.find(b => b.checked);
+      if (checked) {
+        this.value = checked.value;
+      }
+    }
+    this.update();
   }
 
-  private selectButton() {
+  private update() {
     const value = this.value;
     const buttons = Array.from(this.el.querySelectorAll('ion-segment-button'));
     for (const button of buttons) {
-      button.activated = (button.value === value);
-
-      // If there is no value set on the segment and a button
-      // is checked we should activate it
-      if (!value && button.checked) {
-        button.activated = button.checked;
-      }
+      button.checked = (button.value === value);
     }
   }