fix(segment-button): make layout default to icon-top (#16573)

- updates segment button so that when layout is not provided the following will happen
  - if both label and icon are there, it will apply icon-top
  - if only label or only icon, it will style as such

core/api.txt

@@ -877,7 +877,7 @@ ion-segment-button
 ion-segment-button,prop,checked,boolean,false,false
 ion-segment-button,prop,color,string | undefined,undefined,false
 ion-segment-button,prop,disabled,boolean,false,false
-ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false
+ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false
 ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false
 ion-segment-button,event,ionSelect,void,true

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

@@ -323,7 +323,7 @@ for (let i = 0; i < segmentButtons.length; i++) {
 | `checked`  | `checked`  | If `true`, the segment button is selected.                                                                                                                                                                                                                             | `boolean`                                                                                               | `false`               |
 | `color`    | `color`    | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`                                                                                   | `undefined`           |
 | `disabled` | `disabled` | If `true`, the user cannot interact with the segment button.                                                                                                                                                                                                           | `boolean`                                                                                               | `false`               |
-| `layout`   | `layout`   | Set the layout of the text and icon in the segment.                                                                                                                                                                                                                    | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined`           |
+| `layout`   | `layout`   | Set the layout of the text and icon in the segment.                                                                                                                                                                                                                    | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'`          |
 | `mode`     | `mode`     | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                                                                                         | `undefined`           |
 | `value`    | `value`    | The value of the segment button.                                                                                                                                                                                                                                       | `string`                                                                                                | `'ion-sb-' + (ids++)` |
 

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

@@ -93,6 +93,16 @@
   @include margin-horizontal(0, 8px);
 }
 
+// Layout: icon only
+:host(.segment-button-has-icon-only) ::slotted(ion-icon) {
+  @include margin(12px, null, 12px, null);
+}
+
+// Layout: label only
+:host(.segment-button-has-label-only) ::slotted(ion-label) {
+  @include margin(12px, null, 12px, null);
+}
+
 
 // Segment: Checked & Activated
 // --------------------------------------------------

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

@@ -149,7 +149,6 @@
 // --------------------------------------------------
 
 .segment-button-indicator {
-
   align-self: flex-end;
 
   width: 100%;
@@ -162,6 +161,14 @@
 }
 
 
+// Segment Button Icon
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+  order: -1;
+}
+
+
 // Segment Button Label
 // --------------------------------------------------
 
@@ -183,28 +190,19 @@
 // Segment Button Layout
 // --------------------------------------------------
 
-// Layout: icon top
+// Layout: icon start
-:host(.segment-button-layout-icon-top) ::slotted(ion-icon) {
+:host(.segment-button-layout-icon-start) {
-  order: -1;
-}
-
-// Layout: icon bottom
-:host(.segment-button-layout-icon-bottom) ::slotted(ion-icon) {
-  order: 1;
-}
-
-// Layout: icon start / end
-:host(.segment-button-layout-icon-start),
-:host(.segment-button-layout-icon-end) {
   flex-direction: row;
 }
 
-:host(.segment-button-layout-icon-start) ::slotted(ion-icon) {
+// Layout: icon end
-  order: -1;
+:host(.segment-button-layout-icon-end) {
+  flex-direction: row-reverse;
 }
 
-:host(.segment-button-layout-icon-end) ::slotted(ion-icon) {
+// Layout: icon bottom
-  order: 1;
+:host(.segment-button-layout-icon-bottom) {
+  flex-direction: column-reverse;
 }
 
 // Layout: icon hide

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

@@ -42,7 +42,7 @@ export class SegmentButton implements ComponentInterface {
   /**
    * Set the layout of the text and icon in the segment.
    */
-  @Prop() layout?: SegmentButtonLayout;
+  @Prop() layout?: SegmentButtonLayout = 'icon-top';
 
   /**
    * The value of the segment button.
@@ -65,17 +65,28 @@ export class SegmentButton implements ComponentInterface {
     this.checked = true;
   }
 
+  private get hasLabel() {
+    return !!this.el.querySelector('ion-label');
+  }
+
+  private get hasIcon() {
+    return !!this.el.querySelector('ion-icon');
+  }
+
   hostData() {
-    const { disabled, checked, color } = this;
+    const { disabled, checked, color, layout, hasIcon, hasLabel } = this;
     return {
       'ion-activatable': 'instant',
-      'aria-disabled': this.disabled ? 'true' : null,
+      'aria-disabled': disabled ? 'true' : null,
-
       class: {
         ...createColorClasses(color),
+        'segment-button-has-label': hasLabel,
+        'segment-button-has-icon': hasIcon,
+        'segment-button-has-label-only': hasLabel && !hasIcon,
+        'segment-button-has-icon-only': hasIcon && !hasLabel,
         'segment-button-disabled': disabled,
         'segment-button-checked': checked,
-        [`segment-button-layout-${this.layout}`]: this.layout !== undefined
+        [`segment-button-layout-${layout}`]: true
       }
     };
   }

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

@@ -64,15 +64,15 @@
 
       <!-- Icon top -->
       <ion-segment>
-        <ion-segment-button layout="icon-top">
+        <ion-segment-button>
           <ion-label>Item One</ion-label>
           <ion-icon name="call"></ion-icon>
         </ion-segment-button>
-        <ion-segment-button checked layout="icon-top">
+        <ion-segment-button checked>
           <ion-label>Item Two</ion-label>
           <ion-icon name="heart"></ion-icon>
         </ion-segment-button>
-        <ion-segment-button layout="icon-top">
+        <ion-segment-button>
           <ion-label>Item Three</ion-label>
           <ion-icon name="pin"></ion-icon>
         </ion-segment-button>