feat(components): improve button states and add new css properties (#19440)

Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity. 

- changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button
- greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec
- updates the MD dark theme per their spec
- adds a component guide for internal use changing Ionic components

references #18279 fixes #20213 fixes #19965

BREAKING CHANGE:

*Activated Class*

The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS.

*CSS Variables*

The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:

```
--background-hover: rgba(44, 44, 44, 0.08);
```

You will likely not see a hover state anymore. It should be updated to only set the desired color:

```
--background-hover: rgba(44, 44, 44);
```

If the opacity desired is something other than what the spec asks for, use:

```
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;
```

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

@@ -14,10 +14,6 @@
   z-index: 0;
 }
 
-:host(.segment-disabled) {
-  opacity: $segment-button-ios-opacity-disabled;
-}
-
 
 // Segment: Color
 // --------------------------------------------------
@@ -26,10 +22,6 @@
   background: #{current-color(base, 0.065)};
 }
 
-:host(.ion-color) ::slotted(.segment-button-checked) {
-  color: #000;
-}
-
 
 // Segment: Activated
 // --------------------------------------------------
@@ -51,12 +43,6 @@
 // Default Segment, In a Toolbar
 :host(.in-toolbar:not(.ion-color)) {
   background: var(--ion-toolbar-segment-background, $segment-ios-background-color);
-  color: var(--ion-toolbar-segment-color, var(--color));
-}
-
-// Default Segment, In a Toolbar, Checked
-:host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked) {
-  color: var(--ion-toolbar-segment-color-checked, var(--color-checked));
 }
 
 
@@ -66,17 +52,4 @@
 // Toolbar with Color, Default Segment
 :host(.in-toolbar-color:not(.ion-color)) {
   background: #{current-color(contrast, 0.11)};
-  color: #{current-color(contrast)};
 }
-
-// Toolbar with Color, Default Segment, Checked
-:host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked) {
-  color: #{current-color(base)};
-}
-
-@media (any-hover: hover) {
-  // Toolbar with Color, Default Segment, Checked / Hover
-  :host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked:hover) {
-    color: #{current-color(base)};
-  }
-}

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

@@ -8,73 +8,6 @@
   --background: transparent;
 }
 
-:host(.segment-disabled) {
-  opacity: $segment-md-opacity-disabled;
-}
-
-// Segment: Color
-// --------------------------------------------------
-
-:host(.ion-color) ::slotted(ion-segment-button) {
-  --ripple-color: #{current-color(base)};
-  --indicator-color: #{current-color(base)};
-
-  background: transparent;
-  color: $segment-button-md-text-color;
-}
-
-:host(.ion-color) ::slotted(.segment-button-checked) {
-  color: #{current-color(base)};
-}
-
-@media (any-hover: hover) {
-  :host(.ion-color) ::slotted(ion-segment-button:hover) {
-    background: #{current-color(base, .04)};
-  }
-}
-
-// Segment: Default Toolbar
-// --------------------------------------------------
-
-// Default Segment, In a Toolbar
-:host(.in-toolbar:not(.ion-color)) ::slotted(ion-segment-button) {
-  --indicator-color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
-
-  background: #{var(--ion-toolbar-segment-background, var(--background))};
-  color: #{var(--ion-toolbar-segment-color, var(--color))};
-}
-
-// Default Segment, In a Toolbar, Checked
-:host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked) {
-  background: #{var(--ion-toolbar-segment-background-checked, var(--background-checked))};
-  color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
-}
-
-
-// Segment: Toolbar Color
-// --------------------------------------------------
-
-// Default Segment, In a Toolbar with Color
-:host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button) {
-  color: #{current-color(contrast, .6)};
-}
-
-// Default Segment, In a Toolbar with Color, Checked
-:host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked) {
-  color: #{current-color(contrast)};
-}
-
-
-// Segment: Toolbar Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
-  // Default Segment, In a Toolbar with Color, Hover
-  :host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button:hover) {
-    background: #{ion-color(primary, contrast, .04)};
-  }
-}
-
 
 // Segment: Scrollable
 // --------------------------------------------------

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

@@ -3,6 +3,3 @@
 
 // Material Design Segment
 // --------------------------------------------------
-
-/// @prop - Opacity of the disabled segment
-$segment-md-opacity-disabled:                         .3 !default;

core/src/components/segment/segment.scss

@@ -30,15 +30,6 @@
 }
 
 
-// Segment: Disabled
-// --------------------------------------------------
-
-:host(.segment-disabled),
-::slotted(.segment-button-disabled) {
-  pointer-events: none;
-}
-
-
 // Segment: Scrollable
 // --------------------------------------------------
 
@@ -53,19 +44,3 @@
 :host(.segment-scrollable::-webkit-scrollbar) {
   display: none;
 }
-
-// Segment Button: Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
-  // Default Segment, In a Default Toolbar, Hover
-  :host(.in-toolbar:not(.ion-color)) ::slotted(ion-segment-button:hover) {
-    background: var(--ion-toolbar-segment-background-hover, var(--background-hover));
-    color: var(--ion-toolbar-segment-color-hover, var(--color-hover, var(--ion-toolbar-segment-color, var(--color))));
-  }
-
-  // Default Segment, In a Default Toolbar, Checked / Hover
-  :host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked:hover) {
-    color: var(--ion-toolbar-segment-color-hover, var(--color-hover, var(--ion-toolbar-segment-color-checked, var(--color-checked))));
-  }
-}

core/src/components/segment/segment.tsx

@@ -70,6 +70,15 @@ export class Segment implements ComponentInterface {
 
   @Watch('disabled')
   disabledChanged() {
+    this.gestureChanged();
+
+    const buttons = this.getButtons();
+    for (const button of buttons) {
+      button.disabled = this.disabled;
+    }
+  }
+
+  private gestureChanged() {
     if (this.gesture && !this.scrollable) {
       this.gesture.enable(!this.disabled);
     }
@@ -97,7 +106,11 @@ export class Segment implements ComponentInterface {
       onEnd: ev => this.onEnd(ev),
     });
     this.gesture.enable(!this.scrollable);
-    this.disabledChanged();
+    this.gestureChanged();
+
+    if (this.disabled) {
+      this.disabledChanged();
+    }
     this.didInit = true;
   }
 

core/src/components/segment/test/basic/index.html

@@ -103,13 +103,13 @@
 
         <ion-segment color="dark" value="Reading List">
           <ion-segment-button value="Bookmarks">
-            <ion-icon name="md-book"></ion-icon>
+            <ion-icon name="book"></ion-icon>
           </ion-segment-button>
           <ion-segment-button value="Reading List">
             <ion-icon name="search"></ion-icon>
           </ion-segment-button>
           <ion-segment-button value="Shared Links">
-            <ion-icon name="md-time"></ion-icon>
+            <ion-icon name="time"></ion-icon>
           </ion-segment-button>
         </ion-segment>
 

core/src/components/segment/test/colors/e2e.ts

@@ -1,8 +1,8 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test('segment: basic', async () => {
+test('segment: colors', async () => {
   const page = await newE2EPage({
-    url: '/src/components/segment/test/basic?ionic:_testing=true'
+    url: '/src/components/segment/test/colors?ionic:_testing=true'
   });
 
   await page.waitFor(250);
@@ -11,9 +11,9 @@ test('segment: basic', async () => {
   expect(compare).toMatchScreenshot();
 });
 
-test('segment:rtl: basic', async () => {
+test('segment:rtl: colors', async () => {
   const page = await newE2EPage({
-    url: '/src/components/segment/test/basic?ionic:_testing=true&rtl=true'
+    url: '/src/components/segment/test/colors?ionic:_testing=true&rtl=true'
   });
 
   await page.waitFor(250);

core/src/components/segment/test/colors/index.html

@@ -23,6 +23,7 @@
     </ion-header>
 
     <ion-content class="ion-padding">
+      <!-- Default NO COLOR -->
       <ion-segment value="free">
         <ion-segment-button value="paid">
           Paid
@@ -35,135 +36,149 @@
         </ion-segment-button>
       </ion-segment>
 
-      <ion-segment color="primary" value="reading-list">
-        <ion-segment-button value="bookmarks">
-          Bookmarks
-        </ion-segment-button>
-        <ion-segment-button value="reading-list">
-          Reading List
-        </ion-segment-button>
-        <ion-segment-button value="shared-links">
-          Shared Links
-        </ion-segment-button>
-      </ion-segment>
+      <div class="customize-all">
+        <ion-segment value="free">
+          <ion-segment-button value="paid">
+            Custom
+          </ion-segment-button>
+          <ion-segment-button value="free">
+            Colors
+          </ion-segment-button>
+          <ion-segment-button value="top">
+            All
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="secondary" value="active">
-        <ion-segment-button value="active">
-          Active
-        </ion-segment-button>
-        <ion-segment-button value="disabled" disabled="true">
-          Disabled
-        </ion-segment-button>
-        <ion-segment-button value="inactive" disabled="false">
-          Inactive
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="primary" value="reading-list">
+          <ion-segment-button value="bookmarks">
+            Bookmarks
+          </ion-segment-button>
+          <ion-segment-button value="reading-list">
+            Reading List
+          </ion-segment-button>
+          <ion-segment-button value="shared-links">
+            Shared Links
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="tertiary" value="all">
-        <ion-segment-button value="all">
-          All
-        </ion-segment-button>
-        <ion-segment-button value="missed">
-          Missed
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="secondary" value="active">
+          <ion-segment-button value="active">
+            Active
+          </ion-segment-button>
+          <ion-segment-button value="disabled" disabled="true">
+            Disabled
+          </ion-segment-button>
+          <ion-segment-button value="inactive" disabled="false">
+            Inactive
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="success" value="330">
-        <ion-segment-button value="330">
-          <ion-label>330ml</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="440">
-          <ion-label>440ml</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="500">
-          <ion-label>500ml</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="custom">
-          <ion-icon name="create"></ion-icon>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="tertiary" value="all">
+          <ion-segment-button value="all">
+            All
+          </ion-segment-button>
+          <ion-segment-button value="missed">
+            Missed
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="warning" value="reading-list">
-        <ion-segment-button value="bookmarks">
-          <ion-icon name="book"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="reading-list">
-          <ion-icon name="glasses"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="shared-links">
-          <ion-icon name="at"></ion-icon>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="success" value="330">
+          <ion-segment-button value="330">
+            <ion-label>330ml</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="440">
+            <ion-label>440ml</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="500">
+            <ion-label>500ml</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="custom">
+            <ion-icon name="create"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="danger" value="bookmarks">
-        <ion-segment-button value="bookmarks">
-          <ion-label>Bookmarks</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="reading-list">
-          <ion-label>Reading List</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="shared-links">
-          <ion-label>Shared Links</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="warning" value="reading-list">
+          <ion-segment-button value="bookmarks">
+            <ion-icon name="book"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="reading-list">
+            <ion-icon name="glasses"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="shared-links">
+            <ion-icon name="at"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment color="danger" value="bookmarks">
+          <ion-segment-button value="bookmarks">
+            <ion-label>Bookmarks</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="reading-list">
+            <ion-label>Reading List</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="shared-links">
+            <ion-label>Shared Links</ion-label>
+          </ion-segment-button>
+        </ion-segment>
 
 
-      <ion-segment color="light" value="rainy">
-        <ion-segment-button value="sunny">
-          Sunny
-        </ion-segment-button>
-        <ion-segment-button value="rainy">
-          Rainy
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="light" value="rainy">
+          <ion-segment-button value="sunny">
+            Sunny
+          </ion-segment-button>
+          <ion-segment-button value="rainy">
+            Rainy
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="medium" value="seg1">
-        <ion-segment-button value="seg1">
-          <ion-label>Seg 1</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg2">
-          <ion-label>Seg 2</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg3">
-          <ion-label>Seg 3</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="medium" value="seg1">
+          <ion-segment-button value="seg1">
+            <ion-label>Seg 1</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg2">
+            <ion-label>Seg 2</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg3">
+            <ion-label>Seg 3</ion-label>
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment color="dark" value="seg22">
-        <ion-segment-button value="seg21">
-          <ion-label>Seg 2 1</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg22">
-          <ion-label>Seg 2 2</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg23">
-          <ion-label>Seg 2 3</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment color="dark" value="seg22">
+          <ion-segment-button value="seg21">
+            <ion-label>Seg 2 1</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg22">
+            <ion-label>Seg 2 2</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg23">
+            <ion-label>Seg 2 3</ion-label>
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment disabled color="danger" value="seg22">
-        <ion-segment-button  value="seg21">
-          <ion-label>Seg 2 1</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg22">
-          <ion-label>Seg 2 2</ion-label>
-        </ion-segment-button>
-        <ion-segment-button  value="seg23">
-          <ion-label>Seg 2 3</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment disabled color="danger" value="seg22">
+          <ion-segment-button value="seg21">
+            <ion-label>Seg 2 1</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg22">
+            <ion-label>Seg 2 2</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg23">
+            <ion-label>Seg 2 3</ion-label>
+          </ion-segment-button>
+        </ion-segment>
 
-      <ion-segment disabled color="medium" value="seg22">
-        <ion-segment-button value="seg21">
-          <ion-label>Seg 2 1</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg22">
-          <ion-label>Seg 2 2</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="seg23">
-          <ion-label>Seg 2 3</ion-label>
-        </ion-segment-button>
-      </ion-segment>
+        <ion-segment disabled color="medium" value="seg22">
+          <ion-segment-button value="seg21">
+            <ion-label>Seg 2 1</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg22">
+            <ion-label>Seg 2 2</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="seg23">
+            <ion-label>Seg 2 3</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
     </ion-content>
 
     <style>
@@ -171,6 +186,22 @@
         margin-bottom: 10px;
       }
 
+      .md .customize-all ion-segment-button {
+        --color: red;
+        --background: rgba(0, 0, 0, 0.2);
+        --ripple-color: red;
+        --indicator-color: red;
+      }
+
+      .ios .customize-all ion-segment {
+        --background: rgba(51, 17, 17, 0.15);
+      }
+
+      .ios .customize-all ion-segment-button {
+        --color: purple;
+        --indicator-color: lightpink;
+      }
+
     </style>
   </ion-app>
 </body>

core/src/components/segment/test/toolbar/index.html

@@ -126,7 +126,7 @@
       </ion-toolbar>
 
       <!-- Label only -->
-      <ion-toolbar color="primary">
+      <ion-toolbar color="warning">
         <ion-segment value="1">
           <ion-segment-button value="1">
             <ion-label>Item One</ion-label>