From 7770d63a240f661fec4223f05f2305ac12e11bb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <joao.manuel.ferreira@outsystems.com>
Date: Wed, 2 Apr 2025 15:26:40 +0100
Subject: [PATCH] create page to check ionic theme segment button

---
 .../segment/test/theme-ionic/index.html       | 400 ++++++++++++++++++
 1 file changed, 400 insertions(+)
 create mode 100644 core/src/components/segment/test/theme-ionic/index.html
diff --git a/core/src/components/segment/test/theme-ionic/index.html b/core/src/components/segment/test/theme-ionic/index.html
new file mode 100644
index 0000000000..4642986aa6
--- /dev/null
+++ b/core/src/components/segment/test/theme-ionic/index.html
@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segment - theme ionic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-segment value="Free" id="custom-radius">
+            <ion-segment-button value="Paid">
+              <ion-text>Paid</ion-text>
+            </ion-segment-button>
+            <ion-segment-button value="Free">
+              <ion-text>Free</ion-text>
+            </ion-segment-button>
+            <ion-segment-button value="Top">
+              <ion-text>Top</ion-text>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment value="Free" class="custom-checked">
+            <ion-segment-button value="Paid">
+              <ion-text>Paid</ion-text>
+            </ion-segment-button>
+            <ion-segment-button value="Free">
+              <ion-text>Free</ion-text>
+            </ion-segment-button>
+            <ion-segment-button value="Top">
+              <ion-text>Top</ion-text>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment class="custom-icon" value="instagram">
+            <ion-segment-button class="segment-button-facebook" value="facebook">
+              <ion-text>Facebook</ion-text>
+              <ion-icon name="logo-facebook"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button class="segment-button-instagram" value="instagram">
+              <ion-text>Instagram</ion-text>
+              <ion-icon name="logo-instagram"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button class="segment-button-slack" value="slack">
+              <ion-text>Slack</ion-text>
+              <ion-icon name="logo-slack"></ion-icon>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar class="themed">
+          <ion-segment value="delete">
+            <ion-segment-button value="create">
+              <ion-text>Create</ion-text>
+              <ion-icon name="create"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="delete">
+              <ion-text>Delete</ion-text>
+              <ion-icon name="trash"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="upload">
+              <ion-text>Upload</ion-text>
+              <ion-icon name="cloud-upload"></ion-icon>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment class="custom-states-color" value="disabled">
+            <ion-segment-button value="inactive">
+              <ion-text>Inactive</ion-text>
+            </ion-segment-button>
+            <ion-segment-button value="inactive2">
+              <ion-text>Inactive</ion-text>
+            </ion-segment-button>
+            <ion-segment-button value="disabled" disabled>
+              <ion-text>Disabled</ion-text>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment class="custom-states-background" value="checked">
+            <ion-segment-button value="checked">
+              <ion-text>Checked</ion-text>
+            </ion-segment-button>
+            <ion-segment-button value="inactive">
+              <ion-text>Inactive</ion-text>
+            </ion-segment-button>
+            <ion-segment-button value="disabled" disabled>
+              <ion-text>Disabled</ion-text>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment class="custom-color" value="dining">
+            <ion-segment-button value="dining">
+              <ion-text>Dining</ion-text>
+              <ion-icon name="cafe"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="travel">
+              <ion-text>Travel</ion-text>
+              <ion-icon name="airplane"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="entertainment">
+              <ion-text>Entertainment</ion-text>
+              <ion-icon name="radio"></ion-icon>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment class="custom-color" color="danger" value="dining">
+            <ion-segment-button value="dining">
+              <ion-text>Dining</ion-text>
+              <ion-icon name="cafe"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="travel">
+              <ion-text>Travel</ion-text>
+              <ion-icon name="airplane"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="entertainment">
+              <ion-text>Entertainment</ion-text>
+              <ion-icon name="radio"></ion-icon>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding-top">
+        <ion-segment class="custom-active" value="active">
+          <ion-segment-button value="active">
+            <ion-text>Active</ion-text>
+          </ion-segment-button>
+          <ion-segment-button value="disabled" disabled="true">
+            <ion-text>Disabled</ion-text>
+          </ion-segment-button>
+          <ion-segment-button value="inactive" disabled="false">
+            <ion-text>Inactive</ion-text>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment class="custom-icon" value="slack">
+          <ion-segment-button class="segment-button-facebook" value="facebook">
+            <ion-text>Facebook</ion-text>
+            <ion-icon name="logo-facebook"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button class="segment-button-instagram" value="instagram">
+            <ion-text>Instagram</ion-text>
+            <ion-icon name="logo-instagram"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button class="segment-button-slack" value="slack">
+            <ion-text>Slack</ion-text>
+            <ion-icon name="logo-slack"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment class="custom-color" value="dining">
+          <ion-segment-button value="dining">
+            <ion-text>Dining</ion-text>
+            <ion-icon name="cafe"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="travel">
+            <ion-text>Travel</ion-text>
+            <ion-icon name="airplane"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="entertainment">
+            <ion-text>Entertainment</ion-text>
+            <ion-icon name="radio"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment class="custom-color" color="danger" value="dining">
+          <ion-segment-button value="dining">
+            <ion-text>Dining</ion-text>
+            <ion-icon name="cafe"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="travel">
+            <ion-text>Travel</ion-text>
+            <ion-icon name="airplane"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="entertainment">
+            <ion-text>Entertainment</ion-text>
+            <ion-icon name="radio"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment class="custom-states-color" value="checked">
+          <ion-segment-button value="checked">
+            <ion-text>Checked</ion-text>
+          </ion-segment-button>
+          <ion-segment-button value="inactive">
+            <ion-text>Inactive</ion-text>
+          </ion-segment-button>
+          <ion-segment-button value="disabled" disabled>
+            <ion-text>Disabled</ion-text>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-segment class="custom-states-background" value="checked">
+          <ion-segment-button value="checked">
+            <ion-text>Checked</ion-text>
+          </ion-segment-button>
+          <ion-segment-button value="inactive">
+            <ion-text>Inactive</ion-text>
+          </ion-segment-button>
+          <ion-segment-button value="disabled" disabled>
+            <ion-text>Disabled</ion-text>
+          </ion-segment-button>
+        </ion-segment>
+      </ion-content>
+    </ion-app>
+  </body>
+
+  <style>
+    body {
+      margin: 0;
+    }
+
+    ion-segment {
+      margin-bottom: 10px;
+    }
+
+    ion-toolbar ion-segment {
+      margin-bottom: 0;
+    }
+
+    #custom-radius ion-segment-button {
+      --background: rgba(0, 0, 255, 0.1);
+      --background-checked: rgba(0, 0, 255, 0.3);
+      --border-radius: 10px;
+    }
+
+    /*
+   * Custom Checked Segment (Paid, Free, Top)
+   *
+   * This tests that the colors are able to be overridden on
+   * a segment inside of a toolbar
+   *
+   * Ripple color can be set on ion-segment
+   *
+   * Backgrounds / colors for the button must be set on the
+   * ion-segment-button
+   */
+    .custom-checked {
+      --ripple-color: purple;
+    }
+
+    .ios .custom-checked ion-segment-button {
+      --color-checked: magenta;
+      --indicator-color: red;
+      --indicator-height: 50%;
+    }
+
+    .md .custom-checked ion-segment-button {
+      --background-hover: rgba(17, 228, 10, 0.5);
+      --color-checked: purple;
+      --color-hover: blue;
+      --indicator-color: red;
+      --indicator-height: 5px;
+    }
+
+    /*
+   * Custom Themed Segment (Themed to Primary)
+   */
+    .themed {
+      --ion-toolbar-background: #3880ff;
+      --ion-toolbar-color: #fff;
+
+      /* Segment */
+      --ion-toolbar-segment-indicator-color: #ffffff;
+    }
+
+    /* Material Design Segment */
+    .md .themed {
+      --ion-toolbar-segment-color: rgba(255, 255, 255, 0.6);
+      --ion-toolbar-segment-color-checked: #ffffff;
+      --ion-toolbar-segment-background-hover: rgba(255, 255, 255, 0.04);
+    }
+
+    /* iOS Segment */
+    .ios .themed {
+      --ion-toolbar-segment-background: rgba(255, 255, 255, 0.065);
+      --ion-toolbar-segment-color: #ffffff;
+      --ion-toolbar-segment-color-checked: #3880ff;
+    }
+
+    /*
+   * Custom Active Segment (Active, Inactive, Disabled)
+   */
+    .custom-active {
+      --background: papayawhip;
+
+      --color: purple;
+      --color-disabled: rgba(0, 0, 0, 0.3);
+    }
+
+    .ios .custom-active {
+      --color-checked: papayawhip;
+      --indicator-color: navy;
+    }
+
+    .md .custom-active {
+      --color-checked: navy;
+      --indicator-color: navy;
+    }
+
+    /*
+   * Custom Icon Segment (Facebook, Instagram, Slack)
+   */
+    .custom-icon ion-icon {
+      font-size: 44px;
+    }
+
+    /*
+   * MD Custom Icon Segment (Facebook, Instagram, Slack)
+   */
+    .md .segment-button-facebook {
+      --background-hover: rgb(58, 61, 70, 0.04);
+      --color-checked: #3a3d46;
+      --indicator-color: #3a3d46;
+    }
+
+    .md .segment-button-instagram {
+      --background-hover: rgb(228, 64, 95, 0.04);
+      --color-checked: #e4405f;
+      --indicator-color: #e4405f;
+    }
+
+    .md .segment-button-slack {
+      --background-hover: rgb(58, 175, 133, 0.04);
+      --color-checked: #3aaf85;
+      --indicator-color: #3aaf85;
+    }
+
+    /*
+   * iOS Custom Icon Segment (Facebook, Instagram, Slack)
+   */
+    .ios .segment-button-facebook {
+      --color: #3a3d46;
+      --color-checked: #ffffff;
+      --indicator-color: #3a3d46;
+    }
+
+    .ios .segment-button-instagram {
+      --color: #e4405f;
+      --color-checked: #ffffff;
+      --indicator-color: #e4405f;
+    }
+
+    .ios .segment-button-slack {
+      --color: #3aaf85;
+      --color-checked: #ffffff;
+      --indicator-color: #3aaf85;
+    }
+
+    /* This CSS should not apply */
+    .custom-color {
+      --background: purple;
+      --color: blue;
+    }
+
+    .custom-states-color {
+      --color: red;
+      --color-disabled: blue;
+      --color-checked: indigo;
+      --color-hover: orange;
+    }
+
+    .custom-states-background ion-segment-button {
+      --indicator-color: transparent;
+      --indicator-box-shadow: none;
+      --color: white;
+
+      --background: red;
+      --background-disabled: blue;
+      --background-checked: indigo;
+      --background-hover: orange;
+    }
+
+    .custom-states-background ion-segment-button:hover {
+      opacity: 1;
+    }
+  </style>
+</html>
