Merge branch 'master' into fix-editor-double-commit

common/changes/@itwin/appui-react/change-selection-count-padding_2024-07-26-16-49.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Adjust SelectionCount padding values.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}

common/changes/@itwin/appui-react/fix-893_2024-07-31-08-02.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Fix an issue where styles of complex shorthand properties were not copied correctly to a popout window.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}

common/changes/@itwin/appui-react/link-discussions_2024-07-31-12-45.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}

docs/changehistory/NextVersion.md

@@ -219,15 +219,17 @@ Table of contents:
 - Bump `AccuDrawWidget`, `SheetNavigationAid`, `StandardRotationNavigationAid` components to `@public`. [#888](https://github.com/iTwin/appui/pull/888)
 - No more transitions when toggling themes. [#905](https://github.com/iTwin/appui/pull/905)
 - Updated `ToolSettingsPopup` to not rely on event propagation for cancellation. [#928](https://github.com/iTwin/appui/pull/928)
+- Adjusted `SelectionCount` styling to improve its visuals in various scenarios. [#936](https://github.com/iTwin/appui/pull/936)
 
 ### Fixes
 
 - Fixed `AccuDrawInputField` to correctly specify keyboard event modifiers in `UiFramework.keyboardShortcuts.processKey()`. [#894](https://github.com/iTwin/appui/pull/894)
 - Fixed icon alignment and warning status color of notification manager in `MessageCenterField` component. [#901](https://github.com/iTwin/appui/pull/901)
 - Fixed the unintentional "flying-in" of floating elements like Tooltips and ComboBox menus when the page first loads. [#905](https://github.com/iTwin/appui/pull/905)
+- Fixed standard content tools throwing uncaught exception with transient elements. [#934](https://github.com/iTwin/appui/pull/934)
 - Fixed `ToolAssistanceField` icon size. [#937](https://github.com/iTwin/appui/pull/937)
 - Fixed [mixed-decls](https://sass-lang.com/documentation/breaking-changes/mixed-decls/) Sass warnings. [#939](https://github.com/iTwin/appui/pull/939)
-- Fixed standard content tools throwing uncaught exception with transient elements. [#934](https://github.com/iTwin/appui/pull/934)
+- Fixed an issue where styles of complex shorthand properties were not copied correctly to a popout window. [#940](https://github.com/iTwin/appui/pull/940)
 
 ## @itwin/components-react
 

e2e-tests/tests/popout-widget.test.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { test, expect, Locator, BrowserContext } from "@playwright/test";
+import { test, expect, Locator } from "@playwright/test";
 import assert from "assert";
 import {
   WidgetState,
@@ -23,41 +23,40 @@ test.describe("popout widget", () => {
     await page.goto(`${baseURL}?frontstage=appui-test-providers:WidgetApi`);
   });
 
-  test("should popout a widget", async ({ context, page }) => {
+  test("should popout a widget", async ({ page }) => {
     const widget = floatingWidgetLocator({
       page,
       id: "appui-test-providers:ViewAttributesWidget",
     });
     const tab = tabLocator(page, "View Attributes");
     await expect(tab).toBeVisible();
 
-    const popoutPage = await popoutWidget(context, widget);
+    const popoutPage = await popoutWidget(widget);
     await expect(popoutPage).toHaveTitle(/View Attributes/);
 
     await expect(tab).not.toBeVisible();
     expect(await popoutPage.title()).toEqual("View Attributes");
   });
 
-  test("should apply styles to popout", async ({ context, page }) => {
+  test("should apply styles to popout", async ({ page }) => {
     const widget = floatingWidgetLocator({
       page,
       id: "appui-test-providers:ViewAttributesWidget",
     });
     const tab = tabLocator(page, "View Attributes");
     await expect(tab).toBeVisible();
 
-    const popoutPage = await popoutWidget(context, widget);
+    const popoutPage = await popoutWidget(widget);
     await expect(popoutPage.locator("body")).toHaveScreenshot();
   });
 
   test("should float a popout widget (after frontstage change)", async ({
-    context,
     page,
   }) => {
     const tab = tabLocator(page, "View Attributes");
     const widget = widgetLocator({ tab });
 
-    const popoutPage = await popoutWidget(context, widget);
+    const popoutPage = await popoutWidget(widget);
     await expect.poll(async () => popoutPage.isClosed()).toBe(false);
 
     await openFrontstage(page, "appui-test-app:main-stage");
@@ -77,7 +76,7 @@ test.describe("popout widget", () => {
     const tab = tabLocator(page, "WT-2");
     const widget = widgetLocator({ tab });
 
-    const popoutPage = await popoutWidget(context, widget);
+    const popoutPage = await popoutWidget(widget);
     await expect.poll(async () => popoutPage.isClosed()).toBe(false);
 
     await openFrontstage(page, "appui-test-app:main-stage");
@@ -90,12 +89,12 @@ test.describe("popout widget", () => {
     await expect(locator).toBeVisible();
   });
 
-  test("should maintain popout widget bounds", async ({ context, page }) => {
+  test("should maintain popout widget bounds", async ({ page }) => {
     const tab = tabLocator(page, "View Attributes");
     const widget = widgetLocator({ tab });
 
     // Popout the widget w/ default size.
-    let popoutPage = await popoutWidget(context, widget);
+    let popoutPage = await popoutWidget(widget);
     await expect(popoutPage).toHaveTitle(/View Attributes/);
 
     const size = popoutPage.viewportSize();
@@ -114,7 +113,7 @@ test.describe("popout widget", () => {
     await tab.click();
     await expect(tab).toHaveClass(/nz-active/);
 
-    popoutPage = await popoutWidget(context, widget);
+    popoutPage = await popoutWidget(widget);
     expect(popoutPage.viewportSize()).toEqual({
       height: 400,
       width: 300,
@@ -128,7 +127,7 @@ test.describe("popout widget", () => {
     const tab = tabLocator(page, "View Attributes");
     const widget = widgetLocator({ tab });
 
-    let popoutPage = await popoutWidget(context, widget);
+    let popoutPage = await popoutWidget(widget);
     await expect(popoutPage).toHaveTitle(/View Attributes/);
 
     // Update widget size and close the popout.
@@ -150,24 +149,20 @@ test.describe("popout widget", () => {
 
     await page.reload();
 
-    popoutPage = await popoutWidget(context, widget);
+    popoutPage = await popoutWidget(widget);
     expect(popoutPage.viewportSize()).toEqual({
       height: 400,
       width: 300,
     });
   });
 
-  test("should close a popout (when floating a widget)", async ({
-    context,
-    page,
-  }) => {
+  test("should close a popout (when floating a widget)", async ({ page }) => {
     const widget = floatingWidgetLocator({
       page,
       id: "appui-test-providers:ViewAttributesWidget",
     });
 
-    const popoutPage = await popoutWidget(context, widget);
-    await popoutPage.waitForLoadState(); // TODO: childWindow is only added after 'load' event
+    const popoutPage = await popoutWidget(widget);
     await expect.poll(async () => popoutPage.isClosed()).toBe(false);
 
     await setWidgetState(
@@ -178,18 +173,15 @@ test.describe("popout widget", () => {
     await expect.poll(async () => popoutPage.isClosed()).toBe(true);
   });
 
-  test("should unmount when popped out widget is closed", async ({
-    context,
-    page,
-  }) => {
+  test("should unmount when popped out widget is closed", async ({ page }) => {
     const id = "appui-test-providers:PopoutMountUnmountWidget";
     const widget = floatingWidgetLocator({
       page,
       id,
     });
     await expect(widget).toBeVisible();
     const widgetLifecycle = trackWidgetLifecycle(page, id);
-    const popoutPage = await popoutWidget(context, widget);
+    const popoutPage = await popoutWidget(widget);
     await expect.poll(async () => popoutPage.isClosed()).toBe(false);
 
     await popoutPage.close();
@@ -199,7 +191,20 @@ test.describe("popout widget", () => {
   });
 });
 
-async function popoutWidget(context: BrowserContext, widget: Locator) {
+test("should copy styles", async ({ baseURL, page }) => {
+  assert(baseURL);
+  await page.goto(`${baseURL}?frontstage=appui-test-app:TestPopout`);
+
+  const tab = tabLocator(page, "Widget 1");
+  const widget = widgetLocator({ tab });
+
+  const popoutPage = await popoutWidget(widget);
+  const borders = popoutPage.locator("#border-test");
+  await expect(borders).toHaveScreenshot();
+});
+
+async function popoutWidget(widget: Locator) {
+  const context = widget.page().context();
   const popoutButton = popoutButtonLocator(widget);
   const [popoutPage] = await Promise.all([
     context.waitForEvent("page"),

e2e-tests/tests/stage-panel.test.ts

@@ -65,7 +65,7 @@ test.describe("WidgetApi", () => {
 
 test("should initialize defaults", async ({ baseURL, page }) => {
   assert(baseURL);
-  await page.goto(`${baseURL}?frontstage=appui-test-providers:TestFrontstage`);
+  await page.goto(`${baseURL}?frontstage=appui-test-app:TestPanel`);
 
   const panel = panelLocator({ page, side: "left" });
   await expect(panel).toBeVisible();
@@ -74,9 +74,7 @@ test("should initialize defaults", async ({ baseURL, page }) => {
 
 test("should initialize size", async ({ baseURL, page }) => {
   assert(baseURL);
-  await page.goto(
-    `${baseURL}?frontstage=appui-test-providers:TestFrontstage&size=500`
-  );
+  await page.goto(`${baseURL}?frontstage=appui-test-app:TestPanel&size=500`);
 
   const panel = panelLocator({ page, side: "left" });
   await expect(panel).toBeVisible();
@@ -86,7 +84,7 @@ test("should initialize size", async ({ baseURL, page }) => {
 test("should initialize minimized", async ({ baseURL, page }) => {
   assert(baseURL);
   await page.goto(
-    `${baseURL}?frontstage=appui-test-providers:TestFrontstage&defaultState=${StagePanelState.Minimized}`
+    `${baseURL}?frontstage=appui-test-app:TestPanel&defaultState=${StagePanelState.Minimized}`
   );
 
   const panel = panelLocator({ page, side: "left" });
@@ -97,9 +95,7 @@ test("should initialize minimized", async ({ baseURL, page }) => {
 
 test("should initialize resizable", async ({ baseURL, page }) => {
   assert(baseURL);
-  await page.goto(
-    `${baseURL}?frontstage=appui-test-providers:TestFrontstage&resizable=0`
-  );
+  await page.goto(`${baseURL}?frontstage=appui-test-app:TestPanel&resizable=0`);
 
   const panel = panelLocator({ page, side: "left" });
   const handle = handleLocator(panel);
@@ -108,7 +104,7 @@ test("should initialize resizable", async ({ baseURL, page }) => {
 
 test("should resize (single panel)", async ({ baseURL, page }) => {
   assert(baseURL);
-  await page.goto(`${baseURL}?frontstage=appui-test-providers:TestFrontstage`);
+  await page.goto(`${baseURL}?frontstage=appui-test-app:TestPanel`);
 
   const panel = panelLocator({ page, side: "left" });
   const handle = handleLocator(panel);

test-apps/appui-test-app/appui-test-providers/src/appui-test-providers.ts

@@ -23,7 +23,6 @@ export * from "./ui/frontstages/CustomFrontstageProvider";
 export * from "./ui/frontstages/PopoutWindowsFrontstage";
 export * from "./ui/frontstages/registerCustomFrontstage";
 export * from "./ui/frontstages/SynchronizedFloatingViewport";
-export * from "./ui/frontstages/TestFrontstageProvider";
 export * from "./ui/frontstages/WidgetApiStage";
 
 export * from "./ui/ViewportContent";

test-apps/appui-test-app/standalone/src/frontend/appui/frontstages/TestPanelFrontstage.tsx

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { Frontstage } from "@itwin/appui-react";
+import { createTestFrontstage } from "./createTestFrontstage";
+
+/** Used in e2e tests to test different panel configurations. */
+export const createTestPanelFrontstage = () => {
+  {
+    const urlParams = new URLSearchParams(window.location.search);
+    const size = urlParams.get("size");
+    const defaultState = urlParams.get("defaultState");
+    const resizable = urlParams.get("resizable");
+
+    const frontstage = createTestFrontstage({
+      id: "appui-test-app:TestPanel",
+    });
+
+    return {
+      ...frontstage,
+      leftPanel: {
+        sizeSpec: size ? Number(size) : undefined,
+        defaultState: defaultState ? Number(defaultState) : undefined,
+        resizable: resizable ? Boolean(Number(resizable)) : undefined,
+        sections: {
+          start: [
+            {
+              id: "widget-1",
+              label: "Widget 1",
+              content: (
+                <>
+                  Frontstage provided widget: <b>widget-1</b>
+                </>
+              ),
+            },
+          ],
+        },
+      },
+    } satisfies Frontstage;
+  }
+};

test-apps/appui-test-app/standalone/src/frontend/appui/frontstages/TestPopoutFrontstage.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+#border-test {
+  --border-color: red;
+  border: 5px solid var(--border-color);
+  border-bottom: 5px solid blue;
+  height: 20px;
+  width: 100px;
+}

test-apps/appui-test-app/standalone/src/frontend/appui/frontstages/TestPopoutFrontstage.tsx

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./TestPopoutFrontstage.scss";
+import * as React from "react";
+import { Frontstage } from "@itwin/appui-react";
+import { createTestFrontstage } from "./createTestFrontstage";
+
+export const createTestPopoutFrontstage = () => {
+  {
+    const frontstage = createTestFrontstage({
+      id: "appui-test-app:TestPopout",
+    });
+
+    return {
+      ...frontstage,
+      leftPanel: {
+        sections: {
+          start: [
+            {
+              id: "widget-1",
+              label: "Widget 1",
+              canPopout: true,
+              content: (
+                <>
+                  <div>Widget 1 content</div>
+                  <div id="border-test" />
+                </>
+              ),
+            },
+          ],
+        },
+      },
+    } satisfies Frontstage;
+  }
+};
+
+(() => {
+  const sheet = new CSSStyleSheet();
+  // Shorthand `border` property from `adoptedStyleSheets` will not be copied to a popout widget correctly.
+  sheet.replaceSync(`
+    #border-test {
+      --border-top-color: yellow;
+      border-top: 5px solid var(--border-top-color);
+      border-right: 5px solid green;
+    }
+  `);
+  document.adoptedStyleSheets.push(sheet);
+})();