feat(segment): add default styles for ionic theme (#29897)

Issue number: internal

---------

## What is the current behavior?
The segment component does not have styles for the `"ionic"` theme and
uses `"md"` styles.

## What is the new behavior?
- Adds styles for both `<ion-segment>` and `<ion-segment-button>` styles
for the `"ionic"` theme
- Adds screenshot tests for the different icon layouts

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

Author: brandyscarney

core/api.txt

@@ -1958,16 +1958,12 @@ ion-segment-button,css-prop,--background,md
 ion-segment-button,css-prop,--background-checked,ionic
 ion-segment-button,css-prop,--background-checked,ios
 ion-segment-button,css-prop,--background-checked,md
-ion-segment-button,css-prop,--background-focused,ionic
 ion-segment-button,css-prop,--background-focused,ios
 ion-segment-button,css-prop,--background-focused,md
-ion-segment-button,css-prop,--background-focused-opacity,ionic
 ion-segment-button,css-prop,--background-focused-opacity,ios
 ion-segment-button,css-prop,--background-focused-opacity,md
-ion-segment-button,css-prop,--background-hover,ionic
 ion-segment-button,css-prop,--background-hover,ios
 ion-segment-button,css-prop,--background-hover,md
-ion-segment-button,css-prop,--background-hover-opacity,ionic
 ion-segment-button,css-prop,--background-hover-opacity,ios
 ion-segment-button,css-prop,--background-hover-opacity,md
 ion-segment-button,css-prop,--border-color,ionic
@@ -1988,10 +1984,9 @@ ion-segment-button,css-prop,--color,md
 ion-segment-button,css-prop,--color-checked,ionic
 ion-segment-button,css-prop,--color-checked,ios
 ion-segment-button,css-prop,--color-checked,md
-ion-segment-button,css-prop,--color-focused,ionic
+ion-segment-button,css-prop,--color-disabled,ionic
 ion-segment-button,css-prop,--color-focused,ios
 ion-segment-button,css-prop,--color-focused,md
-ion-segment-button,css-prop,--color-hover,ionic
 ion-segment-button,css-prop,--color-hover,ios
 ion-segment-button,css-prop,--color-hover,md
 ion-segment-button,css-prop,--indicator-box-shadow,ionic

core/src/components/segment-button/segment-button.scss renamed to core/src/components/segment-button/segment-button.common.scss

@@ -1,23 +1,16 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/functions.string";
+@import "../../themes/mixins";
 
-// Segment Button
+// Segment Button: Common
 // --------------------------------------------------
 
 :host {
   /**
    * @prop --background: Background of the segment button
    * @prop --background-checked: Background of the checked segment button
    *
-   * @prop --background-hover: Background of the segment button on hover
-   * @prop --background-focused: Background of the segment button when focused with the tab key
-   *
-   * @prop --background-hover-opacity: Opacity of the segment button background on hover
-   * @prop --background-focused-opacity: Opacity of the segment button background when focused with the tab key
-   *
    * @prop --color: Color of the segment button
    * @prop --color-checked: Color of the checked segment button
-   * @prop --color-hover: Color of the segment button on hover
-   * @prop --color-focused: Color of the segment button when focused with the tab key
    *
    * @prop --border-radius: Radius of the segment button border
    * @prop --border-color: Color of the segment button border
@@ -42,14 +35,6 @@
    * @prop --indicator-transition: Transition of the indicator for the checked segment button
    * @prop --indicator-transform: Transform of the indicator for the checked segment button
    */
-  --color: initial;
-  --color-hover: var(--color);
-  --color-checked: var(--color);
-  --color-disabled: var(--color);
-  --padding-start: 0;
-  --padding-end: 0;
-  --padding-top: 0;
-  --padding-bottom: 0;
 
   @include border-radius(var(--border-radius));
 
@@ -79,7 +64,6 @@
 
 .button-native {
   @include border-radius(0);
-  @include text-inherit();
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include transform(translate3d(0, 0, 0));
@@ -117,10 +101,6 @@
   z-index: 2;
 }
 
-.button-native::after {
-  @include button-state();
-}
-
 .button-inner {
   display: flex;
   position: relative;
@@ -151,42 +131,6 @@
   pointer-events: none;
 }
 
-// Segment Button: Focused
-// --------------------------------------------------
-
-:host(.ion-focused) .button-native {
-  color: var(--color-focused);
-
-  &::after {
-    background: var(--background-focused);
-
-    opacity: var(--background-focused-opacity);
-  }
-}
-
-:host(:focus) {
-  outline: none;
-}
-
-// Segment Button: Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
-  :host(:hover) .button-native {
-    color: var(--color-hover);
-
-    &::after {
-      background: var(--background-hover);
-
-      opacity: var(--background-hover-opacity);
-    }
-  }
-
-  :host(.segment-button-checked:hover) .button-native {
-    color: var(--color-checked);
-  }
-}
-
 // Segment Button Icon
 // --------------------------------------------------
 
@@ -208,8 +152,6 @@
 
   max-width: 100%;
 
-  line-height: 22px;
-
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -254,13 +196,6 @@
   display: none;
 }
 
-// Segment Button Ripple
-// --------------------------------------------------
-
-ion-ripple-effect {
-  color: var(--ripple-color, var(--color-checked));
-}
-
 // Segment Button: Indicator
 // --------------------------------------------------
 
@@ -284,6 +219,8 @@ ion-ripple-effect {
 
   transform: var(--indicator-transform);
 
+  background: var(--indicator-color);
+
   box-shadow: var(--indicator-box-shadow);
 
   pointer-events: none;

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

@@ -0,0 +1,114 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./segment-button.common";
+
+// Ionic Segment Button
+// --------------------------------------------------
+
+:host {
+  /**
+   * @prop --color-disabled: Color of the disabled segment button
+   */
+  --background: none;
+  --background-checked: var(--background);
+  --color: #{globals.$ionic-color-neutral-1000};
+  --color-checked: #{globals.$ionic-color-primary-base};
+  --color-disabled: #{globals.$ionic-color-neutral-500};
+  --border-width: #{globals.$ionic-border-size-025};
+  --border-color: #{globals.$ionic-color-neutral-300};
+  --border-style: #{globals.$ionic-border-style-solid};
+  --indicator-box-shadow: none;
+  --indicator-color: var(--color-checked);
+  --indicator-height: #{globals.$ionic-border-size-025};
+  --indicator-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --indicator-transform: none;
+  --padding-top: #{globals.$ionic-space-200};
+  --padding-end: #{globals.$ionic-space-200};
+  --padding-bottom: #{globals.$ionic-space-200};
+  --padding-start: #{globals.$ionic-space-200};
+  --transition: color 0.15s linear 0s, opacity 0.15s linear 0s;
+
+  min-width: globals.$ionic-scale-1200;
+  min-height: globals.$ionic-scale-1200;
+}
+
+.button-native {
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+
+  // Ensures the indicator moves correctly between segment buttons
+  z-index: 1;
+}
+
+.button-inner {
+  @include globals.padding(globals.$ionic-space-100, null, globals.$ionic-space-100, null);
+
+  gap: globals.$ionic-space-100;
+}
+
+// Segment Button Label
+// --------------------------------------------------
+
+::slotted(ion-label) {
+  @include globals.typography(globals.$ionic-action-md);
+
+  color: var(--color);
+}
+
+// Segment Button Icon
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+  width: globals.$ionic-scale-600;
+  height: globals.$ionic-scale-600;
+
+  color: var(--color);
+}
+
+// Segment Button: Checked
+// --------------------------------------------------
+
+:host(.segment-button-checked) ::slotted(ion-label),
+:host(.segment-button-checked) ::slotted(ion-icon) {
+  color: var(--color-checked);
+}
+
+// Segment Button: Disabled
+// --------------------------------------------------
+
+:host(.segment-button-disabled) ::slotted(ion-label),
+:host(.segment-button-disabled) ::slotted(ion-icon) {
+  color: var(--color-disabled);
+}
+
+// Segment Button: Indicator
+// --------------------------------------------------
+
+.segment-button-indicator {
+  @include globals.position(null, 0, 0, 0);
+
+  // Ensures the indicator displays correctly above the border
+  z-index: 2;
+}
+
+// Segment Button Layout
+// --------------------------------------------------
+
+// Segments with icons above or below the label
+// should have a fixed height of 72px
+:host(.segment-button-layout-icon-top),
+:host(.segment-button-layout-icon-bottom) {
+  height: globals.$ionic-scale-1800;
+}
+
+// Segments with icons at the start or end, or with only
+// icons or labels, should have a fixed height of 48px
+:host(.segment-button-has-label-only),
+:host(.segment-button-has-icon-only),
+:host(.segment-button-layout-icon-start),
+:host(.segment-button-layout-icon-end) {
+  height: globals.$ionic-scale-1200;
+}
+
+:host(.segment-button-layout-icon-start) .button-inner,
+:host(.segment-button-layout-icon-end) .button-inner {
+  gap: globals.$ionic-space-200;
+}

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

@@ -1,4 +1,4 @@
-@import "./segment-button";
+@import "./segment-button.native";
 @import "./segment-button.ios.vars";
 
 // iOS Segment Button
@@ -95,7 +95,7 @@
   @include margin-horizontal(0, 2px);
 }
 
-// Segment Button: Checked Indicator
+// Segment Button: Indicator
 // --------------------------------------------------
 
 .segment-button-indicator {
@@ -106,10 +106,6 @@
 .segment-button-indicator-background {
   @include border-radius(var(--border-radius));
 
-  background: var(--indicator-color);
-}
-
-.segment-button-indicator-background {
   transition: var(--indicator-transition);
 }
 

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

@@ -1,4 +1,4 @@
-@import "./segment-button";
+@import "./segment-button.native";
 @import "./segment-button.md.vars";
 
 // Material Design Segment Button
@@ -181,10 +181,6 @@
   @include position(null, 0, 0, 0);
 }
 
-.segment-button-indicator-background {
-  background: var(--indicator-color);
-}
-
 // Segment button indicator color should use the background checked variable with
 // a fallback to the default value of --indicator-color
 :host(.in-toolbar:not(.in-segment-color)) .segment-button-indicator-background {