Merge branch 'next' into ROU-11445-select

Author: BenOsodrac

core/package-lock.json

@@ -66,7 +66,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.0.1",
+    "outsystems-design-tokens": "^1.1.2",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",

core/package.json

@@ -79,6 +79,13 @@
   color: var(--color-disabled);
 }
 
+// Segment Button: Focused
+// --------------------------------------------------
+
+:host(.ion-focused) .button-inner {
+  @include globals.focused-state();
+}
+
 // Segment Button: Indicator
 // --------------------------------------------------
 

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

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('segment: states'), () => {
+    test('should render focused segment correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-segment value="2">
+            <ion-segment-button value="1">
+            <ion-label>Bookmarks</ion-label>
+            </ion-segment-button>
+            <ion-segment-button class="ion-focused" value="2">
+            <ion-label>Reading List</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+            <ion-label>Shared Links</ion-label>
+            </ion-segment-button>
+        </ion-segment>
+        `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-focused`));
+    });
+  });
+});

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

@@ -175,10 +175,10 @@ $ion-bg-warning-subtle-press: var(--ion-bg-warning-subtle-press, #ffcfb1);
 $ion-bg-warning-subtle-press-rgb: var(--ion-bg-warning-subtle-press-rgb, 255, 207, 177);
 $ion-bg-body: var(--ion-bg-body, #f5f5f5);
 $ion-bg-body-rgb: var(--ion-bg-body-rgb, 245, 245, 245);
-$ion-bg-neutral-subtle-default: var(--ion-bg-neutral-subtle-default, #f5f5f5);
-$ion-bg-neutral-subtle-default-rgb: var(--ion-bg-neutral-subtle-default-rgb, 245, 245, 245);
-$ion-bg-neutral-subtle-press: var(--ion-bg-neutral-subtle-press, #cfcfcf);
-$ion-bg-neutral-subtle-press-rgb: var(--ion-bg-neutral-subtle-press-rgb, 207, 207, 207);
+$ion-bg-neutral-subtle-default: var(--ion-bg-neutral-subtle-default, #e7e7e7);
+$ion-bg-neutral-subtle-default-rgb: var(--ion-bg-neutral-subtle-default-rgb, 231, 231, 231);
+$ion-bg-neutral-subtle-press: var(--ion-bg-neutral-subtle-press, #b9b9b9);
+$ion-bg-neutral-subtle-press-rgb: var(--ion-bg-neutral-subtle-press-rgb, 185, 185, 185);
 $ion-bg-neutral-base-default: var(--ion-bg-neutral-base-default, #626262);
 $ion-bg-neutral-base-default-rgb: var(--ion-bg-neutral-base-default-rgb, 98, 98, 98);
 $ion-bg-neutral-base-press: var(--ion-bg-neutral-base-press, #3b3b3b);