From 3a5689a0b6770d5ba22dfc71e8b177365b83561b Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 10:54:36 +0300 Subject: [PATCH 01/12] Change default widget opacity to 1 --- ui/appui-react/src/appui-react/layout/_widgetopacity.scss | 2 +- ui/appui-react/src/appui-react/theme/ThemeId.ts | 2 +- ui/core-react/src/core-react/layout-variables.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/appui-react/src/appui-react/layout/_widgetopacity.scss b/ui/appui-react/src/appui-react/layout/_widgetopacity.scss index e6bc9fc3496..dab9408acf9 100644 --- a/ui/appui-react/src/appui-react/layout/_widgetopacity.scss +++ b/ui/appui-react/src/appui-react/layout/_widgetopacity.scss @@ -5,7 +5,7 @@ @forward "~@itwin/core-react/lib/core-react/style/themecolors"; @mixin nz-widget-opacity { - opacity: var(--buic-widget-opacity, 0.9); + opacity: var(--buic-widget-opacity, 1); transition: opacity var(--iui-duration-1) ease; &:hover, diff --git a/ui/appui-react/src/appui-react/theme/ThemeId.ts b/ui/appui-react/src/appui-react/theme/ThemeId.ts index ff836c5cc4c..041a576eecc 100644 --- a/ui/appui-react/src/appui-react/theme/ThemeId.ts +++ b/ui/appui-react/src/appui-react/theme/ThemeId.ts @@ -40,7 +40,7 @@ export type ThemeId = `${ColorTheme}` | (string & {}); /** The default widget opacity. * @public */ -export const WIDGET_OPACITY_DEFAULT = 0.9; +export const WIDGET_OPACITY_DEFAULT = 1; /** The default widget opacity. * @public diff --git a/ui/core-react/src/core-react/layout-variables.scss b/ui/core-react/src/core-react/layout-variables.scss index 7859201434b..b83b15efb1f 100644 --- a/ui/core-react/src/core-react/layout-variables.scss +++ b/ui/core-react/src/core-react/layout-variables.scss @@ -6,7 +6,7 @@ :root { /** Default Widget Opacity */ - --buic-widget-opacity: 0.9; + --buic-widget-opacity: 1; /** Default Toolbar Opacity */ --buic-toolbar-opacity: 0.5; From a87056db61ab2474b3081e7938f36c809826f932 Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 10:54:51 +0300 Subject: [PATCH 02/12] Ability to invalidate settings stored via AppUiSettings --- .../src/appui-react/uistate/AppUiSettings.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts b/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts index 7c1773af12e..8b3a6eea0d3 100644 --- a/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts +++ b/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts @@ -51,6 +51,11 @@ export class AppUiSettings implements UserSettingsProvider { private _settings: Array> = []; private _applyingLocalSettings = false; + /** Bump this to invalidate stored settings. */ + private static _currentVersion = 1; + private _storedVersion = 0; + private _version: UiStateEntry; + public colorTheme: UiStateEntry; public dragInteraction: UiStateEntry; public widgetOpacity: UiStateEntry; @@ -67,6 +72,16 @@ export class AppUiSettings implements UserSettingsProvider { }; constructor(defaults: Partial) { + this._version = new UiStateEntry( + AppUiSettings._settingNamespace, + "_version", + () => AppUiSettings._currentVersion, + (value: number) => { + this._storedVersion = value; + }, + 0 + ); + this._settings = []; this.colorTheme = new UiStateEntry( @@ -186,6 +201,16 @@ export class AppUiSettings implements UserSettingsProvider { public async apply(storage: UiStateStorage): Promise { this._applyingLocalSettings = true; + + // Invalidate previously stored settings if the persisted version is outdated. + await this._version.getSettingAndApplyValue(storage); + if (this._storedVersion !== AppUiSettings._currentVersion) { + for (const setting of this._settings) { + await setting.deleteSetting(storage); + } + await this._version.saveSetting(storage); + } + for (const setting of this._settings) { await setting.getSettingAndApplyValue(storage); } From d1696ac024ddb35ab8107b9ec25c9be16b6fad9b Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 11:23:15 +0300 Subject: [PATCH 03/12] Deprecate opacity settings --- common/api/appui-react.api.md | 21 ++++++++++++------- common/api/components-react.api.md | 2 +- common/api/summary/appui-react.exports.csv | 2 ++ .../api/summary/components-react.exports.csv | 1 + .../ConfigurableUiContent.stories.tsx | 3 ++- .../configurableui/ConfigurableUiContent.tsx | 12 +++++++++-- .../framework/FrameworkVisibility.ts | 4 +++- .../src/appui-react/popup/CardPopup.tsx | 1 + .../src/appui-react/popup/ToolbarPopup.tsx | 1 + .../src/appui-react/theme/ThemeId.ts | 2 ++ .../src/appui-react/toolbar/Toolbar.tsx | 5 ++++- .../appui-react/toolbar/ToolbarComposer.tsx | 9 ++++++-- .../toolbar/ToolbarWithOverflow.tsx | 5 ++++- .../toolbar/new-toolbars/Surface.tsx | 1 + .../src/appui-react/uistate/AppUiSettings.ts | 2 ++ .../widgets/NavigationWidgetComposer.tsx | 2 ++ .../widgets/ToolWidgetComposer.tsx | 1 + .../toolbar/InternalToolbarComponent.tsx | 5 +++++ .../src/components-react/toolbar/Items.tsx | 3 +++ .../toolbar/OverflowPanel.tsx | 3 +++ .../src/components-react/toolbar/Toolbar.tsx | 1 + .../toolbar/ToolbarWithOverflow.tsx | 1 + 22 files changed, 70 insertions(+), 17 deletions(-) diff --git a/common/api/appui-react.api.md b/common/api/appui-react.api.md index fcf576dfc80..35471eb251e 100644 --- a/common/api/appui-react.api.md +++ b/common/api/appui-react.api.md @@ -994,10 +994,12 @@ export interface ConfigurableUiContentProps extends CommonProps { }) => React_2.ReactNode; showActiveWidgetLabel?: boolean; toolAsToolSettingsLabel?: boolean; + // @deprecated toolbarOpacity?: number; // @deprecated viewOverlay?: boolean; widgetIcon?: boolean; + // @deprecated widgetOpacity?: number; } @@ -2259,6 +2261,7 @@ export interface FrameworkVisibility { showHidePanels: boolean; showUiAndCancelTimer(): void; showUiAndResetTimer(): void; + // @deprecated snapWidgetOpacity: boolean; // @deprecated useProximityOpacity: boolean; @@ -2683,11 +2686,11 @@ export interface InitialAppUiSettings { dragInteraction: boolean; // (undocumented) showWidgetIcon?: boolean; - // (undocumented) + // @deprecated (undocumented) toolbarOpacity: number; // (undocumented) useToolAsToolSettingsLabel?: boolean; - // (undocumented) + // @deprecated (undocumented) widgetOpacity: number; } @@ -3906,7 +3909,7 @@ export const SessionStateActions: { setNumItemsSelected: (numSelected: number) => ActionWithPayload; setIModelConnection: (iModelConnection: any) => ActionWithPayload; setSelectionScope: (activeSelectionScope: string) => ActionWithPayload; - updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => ActionWithPayload | DeepReadonlyObject>; + updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => ActionWithPayload | DeepReadonlyObject>; }; // @beta @deprecated @@ -3944,7 +3947,7 @@ export const sessionStateMapDispatchToProps: { setNumItemsSelected: (numSelected: number) => ActionWithPayload; setIModelConnection: (iModelConnection: any) => ActionWithPayload; setSelectionScope: (activeSelectionScope: string) => ActionWithPayload; - updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => ActionWithPayload | DeepReadonlyObject>; + updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => ActionWithPayload | DeepReadonlyObject>; }; // @public @deprecated @@ -4736,7 +4739,7 @@ export interface ToolAssistanceFieldProps extends CommonProps { // @beta export function Toolbar(props: ToolbarProps): React_2.JSX.Element; -// @public +// @public @deprecated export const TOOLBAR_OPACITY_DEFAULT = 0.5; // @public @@ -4944,6 +4947,7 @@ export interface ToolbarProps extends CommonProps, NoChildrenProps { onItemExecuted?: OnItemExecutedFunc; onKeyDown?: (e: React_2.KeyboardEvent) => void; panelAlignment?: ToolbarPanelAlignment; + // @deprecated toolbarOpacitySetting?: ToolbarOpacitySetting; useDragInteraction?: boolean; } @@ -4965,6 +4969,7 @@ export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps { onKeyDown?: (e: React_2.KeyboardEvent) => void; overflowExpandsTo?: Direction; panelAlignment?: ToolbarPanelAlignment; + // @deprecated toolbarOpacitySetting?: ToolbarOpacitySetting; useDragInteraction?: boolean; } @@ -5421,7 +5426,7 @@ export function useUiStateStorageHandler(): UiStateStorage; // @public export function useWidget(): { state: WidgetState; - widgetLocation: "popout" | "docked" | "floating"; + widgetLocation: "popout" | "floating" | "docked"; setState: (widgetState: Omit) => void; }; @@ -5613,8 +5618,8 @@ export interface Widget { readonly useSavedState?: boolean; } -// @public -export const WIDGET_OPACITY_DEFAULT = 0.9; +// @public @deprecated +export const WIDGET_OPACITY_DEFAULT = 1; // @alpha export function WidgetAction(props: WidgetActionProps): React_2.JSX.Element; diff --git a/common/api/components-react.api.md b/common/api/components-react.api.md index a8c302fbc09..71dbcd30f9d 100644 --- a/common/api/components-react.api.md +++ b/common/api/components-react.api.md @@ -2780,7 +2780,7 @@ export interface ToolbarButtonItemProps extends CommonProps { // @public @deprecated export type ToolbarItem = ActionButton | GroupButton | CustomToolbarItem; -// @public +// @public @deprecated export enum ToolbarOpacitySetting { Defaults = 0, Proximity = 1, diff --git a/common/api/summary/appui-react.exports.csv b/common/api/summary/appui-react.exports.csv index 1eac4df3279..f45b91d4083 100644 --- a/common/api/summary/appui-react.exports.csv +++ b/common/api/summary/appui-react.exports.csv @@ -682,6 +682,7 @@ public;function;ToolAssistanceField public;interface;ToolAssistanceFieldProps beta;function;Toolbar public;const;TOOLBAR_OPACITY_DEFAULT +deprecated;const;TOOLBAR_OPACITY_DEFAULT public;interface;ToolbarActionItem public;class;ToolbarButtonHelper public;function;ToolbarComposer @@ -800,6 +801,7 @@ deprecated;interface;ViewToolWidgetComposerProps public;class;ViewUtilities public;interface;Widget public;const;WIDGET_OPACITY_DEFAULT +deprecated;const;WIDGET_OPACITY_DEFAULT alpha;function;WidgetAction alpha;function;WidgetActions public;interface;WidgetConfig diff --git a/common/api/summary/components-react.exports.csv b/common/api/summary/components-react.exports.csv index df937977086..12b89d63191 100644 --- a/common/api/summary/components-react.exports.csv +++ b/common/api/summary/components-react.exports.csv @@ -417,6 +417,7 @@ public;interface;ToolbarButtonItemProps public;type;ToolbarItem deprecated;type;ToolbarItem public;enum;ToolbarOpacitySetting +deprecated;enum;ToolbarOpacitySetting public;enum;ToolbarPanelAlignment public;const;ToolbarPopupAutoHideContext public;const;ToolbarPopupContext diff --git a/docs/storybook/src/frontstage/ConfigurableUiContent.stories.tsx b/docs/storybook/src/frontstage/ConfigurableUiContent.stories.tsx index 8ea9128049d..4c4d5d4c30b 100644 --- a/docs/storybook/src/frontstage/ConfigurableUiContent.stories.tsx +++ b/docs/storybook/src/frontstage/ConfigurableUiContent.stories.tsx @@ -91,7 +91,8 @@ export const Default: Story = { }, }; -export const SemiTransparentWidgets: Story = { +export const TransparentWidgets: Story = { + name: "Transparent Widgets (deprecated)", args: { widgetOpacity: 0.5, }, diff --git a/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx b/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx index 525be2440aa..a9ac0523cef 100644 --- a/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx +++ b/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx @@ -73,7 +73,9 @@ export interface ConfigurableUiContentProps extends CommonProps { * @deprecated in 4.16.0. View overlay visibility should be controlled by the components used in {@link ContentProps.content}. */ viewOverlay?: boolean; - /** Describes the opacity of widgets. Uses redux store as a fallback. Defaults to {@link WIDGET_OPACITY_DEFAULT}. */ + /** Describes the opacity of widgets. Uses redux store as a fallback. Defaults to {@link WIDGET_OPACITY_DEFAULT}. + * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + */ widgetOpacity?: number; /** Controls if the widget icons should be displayed. Uses redux store as a fallback. Defaults to `true`. */ widgetIcon?: boolean; @@ -85,7 +87,9 @@ export interface ConfigurableUiContentProps extends CommonProps { animateToolSettings?: boolean; /** Controls if the tool settings label should be set based on activated tool. Uses redux store as a fallback. Defaults to `false`. */ toolAsToolSettingsLabel?: boolean; - /** Describes the opacity of toolbars. Uses redux store as a fallback. Defaults to {@link TOOLBAR_OPACITY_DEFAULT}. */ + /** Describes the opacity of toolbars. Uses redux store as a fallback. Defaults to {@link TOOLBAR_OPACITY_DEFAULT}. + * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + */ toolbarOpacity?: number; /** Component to wrap all popout widgets and other child windows opened via {@link UiFramework.childWindows}. */ childWindow?: React.ComponentType; @@ -169,7 +173,9 @@ export function StandardLayout(props: StandardLayoutProps) { const context = React.useContext(ConfigurableUiContext); const { appBackstage, + // eslint-disable-next-line @typescript-eslint/no-deprecated widgetOpacity, + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacity, idleTimeout, intervalTimeout, @@ -266,6 +272,7 @@ function useWidgetOpacity( // eslint-disable-next-line @typescript-eslint/no-deprecated return state?.configurableUiState.widgetOpacity; }); + // eslint-disable-next-line @typescript-eslint/no-deprecated const opacity = widgetOpacity ?? reduxWidgetOpacity ?? WIDGET_OPACITY_DEFAULT; React.useEffect(() => { @@ -292,6 +299,7 @@ function useToolbarOpacity( }); const opacity = + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacity ?? reduxToolbarOpacity ?? TOOLBAR_OPACITY_DEFAULT; React.useEffect(() => { diff --git a/ui/appui-react/src/appui-react/framework/FrameworkVisibility.ts b/ui/appui-react/src/appui-react/framework/FrameworkVisibility.ts index f797e2d5672..036a08b8667 100644 --- a/ui/appui-react/src/appui-react/framework/FrameworkVisibility.ts +++ b/ui/appui-react/src/appui-react/framework/FrameworkVisibility.ts @@ -30,7 +30,9 @@ export interface FrameworkVisibility { */ useProximityOpacity: boolean; - /** Determines whether the opacity of a toolbar should change immediately when the mouse gets close. Defaults to `false`. */ + /** Determines whether the opacity of a toolbar should change immediately when the mouse gets close. Defaults to `false`. + * @deprecated in 5.35.0. Do not customize and rely on default configuration. + */ snapWidgetOpacity: boolean; /** Handler for when a Frontstage is ready */ diff --git a/ui/appui-react/src/appui-react/popup/CardPopup.tsx b/ui/appui-react/src/appui-react/popup/CardPopup.tsx index ac15afb261f..71927a16812 100644 --- a/ui/appui-react/src/appui-react/popup/CardPopup.tsx +++ b/ui/appui-react/src/appui-react/popup/CardPopup.tsx @@ -184,6 +184,7 @@ export function Card(props: CardProps) { panelAlignment={ToolbarPanelAlignment.Start} items={props.items} useDragInteraction={true} + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting={ToolbarOpacitySetting.Transparent} onItemExecuted={props.onItemExecuted} /> diff --git a/ui/appui-react/src/appui-react/popup/ToolbarPopup.tsx b/ui/appui-react/src/appui-react/popup/ToolbarPopup.tsx index 5354c8d174d..7132dd575c4 100644 --- a/ui/appui-react/src/appui-react/popup/ToolbarPopup.tsx +++ b/ui/appui-react/src/appui-react/popup/ToolbarPopup.tsx @@ -121,6 +121,7 @@ export class ToolbarPopup extends React.PureComponent< panelAlignment={ToolbarPanelAlignment.Start} items={this.props.items} useDragInteraction={true} + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting={ToolbarOpacitySetting.Defaults} onItemExecuted={this.props.onItemExecuted} /> diff --git a/ui/appui-react/src/appui-react/theme/ThemeId.ts b/ui/appui-react/src/appui-react/theme/ThemeId.ts index 041a576eecc..0fb6e9a873b 100644 --- a/ui/appui-react/src/appui-react/theme/ThemeId.ts +++ b/ui/appui-react/src/appui-react/theme/ThemeId.ts @@ -38,11 +38,13 @@ export enum ColorTheme { export type ThemeId = `${ColorTheme}` | (string & {}); /** The default widget opacity. + * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. * @public */ export const WIDGET_OPACITY_DEFAULT = 1; /** The default widget opacity. + * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. * @public */ export const TOOLBAR_OPACITY_DEFAULT = 0.5; diff --git a/ui/appui-react/src/appui-react/toolbar/Toolbar.tsx b/ui/appui-react/src/appui-react/toolbar/Toolbar.tsx index b8d993299fe..a4408f9c785 100644 --- a/ui/appui-react/src/appui-react/toolbar/Toolbar.tsx +++ b/ui/appui-react/src/appui-react/toolbar/Toolbar.tsx @@ -38,7 +38,10 @@ export interface ToolbarProps extends CommonProps, NoChildrenProps { panelAlignment?: ToolbarPanelAlignment; /** Use drag interaction to open popups with nested toolbar buttons. */ useDragInteraction?: boolean; - /** Determines whether to use mouse proximity to alter the opacity of the toolbar */ + /** Determines whether to use mouse proximity to alter the opacity of the toolbar. + * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + */ + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting?: ToolbarOpacitySetting; /** Optional function to call on any item execution */ onItemExecuted?: OnItemExecutedFunc; diff --git a/ui/appui-react/src/appui-react/toolbar/ToolbarComposer.tsx b/ui/appui-react/src/appui-react/toolbar/ToolbarComposer.tsx index 568b72ad53a..fda3ad7e277 100644 --- a/ui/appui-react/src/appui-react/toolbar/ToolbarComposer.tsx +++ b/ui/appui-react/src/appui-react/toolbar/ToolbarComposer.tsx @@ -173,11 +173,13 @@ const useProximityOpacitySetting = () => { const useSnapWidgetOpacitySetting = () => { const [snapWidgetOpacity, setSnapWidgetOpacity] = React.useState( + // eslint-disable-next-line @typescript-eslint/no-deprecated UiFramework.visibility.snapWidgetOpacity ); React.useEffect(() => { UiFramework.onUiVisibilityChanged.addListener(() => + // eslint-disable-next-line @typescript-eslint/no-deprecated setSnapWidgetOpacity(UiFramework.visibility.snapWidgetOpacity) ); }, []); @@ -245,11 +247,14 @@ export function ToolbarComposer(props: ExtensibleToolbarProps) { panelAlignment={panelAlignment} items={items} useDragInteraction={isDragEnabled} + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting={ (useProximityOpacity || snapWidgetOpacity) && !ProcessDetector.isMobileBrowser - ? ToolbarOpacitySetting.Proximity - : ToolbarOpacitySetting.Defaults + ? // eslint-disable-next-line @typescript-eslint/no-deprecated + ToolbarOpacitySetting.Proximity + : // eslint-disable-next-line @typescript-eslint/no-deprecated + ToolbarOpacitySetting.Defaults } /> ); diff --git a/ui/appui-react/src/appui-react/toolbar/ToolbarWithOverflow.tsx b/ui/appui-react/src/appui-react/toolbar/ToolbarWithOverflow.tsx index e40940a339e..47eb15d566b 100644 --- a/ui/appui-react/src/appui-react/toolbar/ToolbarWithOverflow.tsx +++ b/ui/appui-react/src/appui-react/toolbar/ToolbarWithOverflow.tsx @@ -32,7 +32,10 @@ export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps { panelAlignment?: ToolbarPanelAlignment; /** Use Drag Interaction to open popups with nest action buttons */ useDragInteraction?: boolean; - /** Determines whether to use mouse proximity to alter the opacity of the toolbar */ + /** Determines whether to use mouse proximity to alter the opacity of the toolbar. + * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + */ + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting?: ToolbarOpacitySetting; /** Optional function to call on any item execution */ onItemExecuted?: OnItemExecutedFunc; diff --git a/ui/appui-react/src/appui-react/toolbar/new-toolbars/Surface.tsx b/ui/appui-react/src/appui-react/toolbar/new-toolbars/Surface.tsx index 0a8d4ba0cb2..aaa36a1cca5 100644 --- a/ui/appui-react/src/appui-react/toolbar/new-toolbars/Surface.tsx +++ b/ui/appui-react/src/appui-react/toolbar/new-toolbars/Surface.tsx @@ -38,6 +38,7 @@ export const Surface = React.forwardRef( const calculateOpacity = useConditionalValue(() => { if (ProcessDetector.isMobileBrowser) return false; + // eslint-disable-next-line @typescript-eslint/no-deprecated if (UiFramework.visibility.snapWidgetOpacity) return true; return false; }, [SyncUiEventId.ShowHideManagerSettingChange]); diff --git a/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts b/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts index 8b3a6eea0d3..02fd32c061b 100644 --- a/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts +++ b/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts @@ -24,12 +24,14 @@ import { ConfigurableUiActionId } from "../redux/ConfigurableUiState.js"; export interface InitialAppUiSettings { colorTheme: ThemeId; dragInteraction: boolean; + /** @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. */ widgetOpacity: number; showWidgetIcon?: boolean; /** @alpha */ autoCollapseUnpinnedPanels?: boolean; animateToolSettings?: boolean; useToolAsToolSettingsLabel?: boolean; + /** @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. */ toolbarOpacity: number; } diff --git a/ui/appui-react/src/appui-react/widgets/NavigationWidgetComposer.tsx b/ui/appui-react/src/appui-react/widgets/NavigationWidgetComposer.tsx index a7cfcb18513..1d990c2cb76 100644 --- a/ui/appui-react/src/appui-react/widgets/NavigationWidgetComposer.tsx +++ b/ui/appui-react/src/appui-react/widgets/NavigationWidgetComposer.tsx @@ -152,6 +152,7 @@ export function NavigationAidHost(props: NavigationAidHostProps) { if ( (UiFramework.visibility.useProximityOpacity || // eslint-disable-line @typescript-eslint/no-deprecated + // eslint-disable-next-line @typescript-eslint/no-deprecated UiFramework.visibility.snapWidgetOpacity) && !ProcessDetector.isMobileBrowser ) { @@ -232,6 +233,7 @@ export function NavigationWidgetComposer(props: NavigationWidgetComposerProps) { const [elementSet] = React.useState(new WidgetElementSet()); const proximityScale = useProximityToMouse( elementSet, + // eslint-disable-next-line @typescript-eslint/no-deprecated UiFramework.visibility.snapWidgetOpacity ); const uiIsVisible = useUiVisibility(); diff --git a/ui/appui-react/src/appui-react/widgets/ToolWidgetComposer.tsx b/ui/appui-react/src/appui-react/widgets/ToolWidgetComposer.tsx index 72d694883b5..47bd1845b1f 100644 --- a/ui/appui-react/src/appui-react/widgets/ToolWidgetComposer.tsx +++ b/ui/appui-react/src/appui-react/widgets/ToolWidgetComposer.tsx @@ -44,6 +44,7 @@ export function ToolWidgetComposer(props: ToolWidgetComposerProps) { const [elementSet] = React.useState(new WidgetElementSet()); const proximityScale = useProximityToMouse( elementSet, + // eslint-disable-next-line @typescript-eslint/no-deprecated UiFramework.visibility.snapWidgetOpacity ); const uiIsVisible = useUiVisibility(); diff --git a/ui/components-react/src/components-react/toolbar/InternalToolbarComponent.tsx b/ui/components-react/src/components-react/toolbar/InternalToolbarComponent.tsx index 9a470bb48d3..79013fbf570 100644 --- a/ui/components-react/src/components-react/toolbar/InternalToolbarComponent.tsx +++ b/ui/components-react/src/components-react/toolbar/InternalToolbarComponent.tsx @@ -109,6 +109,7 @@ export enum ToolbarPanelAlignment { } /** Enumeration of Toolbar Opacity setting. + * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. * @public */ export enum ToolbarOpacitySetting { @@ -148,6 +149,7 @@ export interface ToolbarOverflowContextProps { readonly overflowDirection: OrthogonalDirection; readonly panelAlignment: ToolbarPanelAlignment; readonly useDragInteraction: boolean; + // eslint-disable-next-line @typescript-eslint/no-deprecated readonly toolbarOpacitySetting: ToolbarOpacitySetting; readonly openPopupCount: number; readonly onPopupPanelOpenClose: (isOpening: boolean) => void; @@ -168,6 +170,7 @@ export const ToolbarWithOverflowDirectionContext = overflowDirection: OrthogonalDirection.Vertical, panelAlignment: ToolbarPanelAlignment.Start, useDragInteraction: false, + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting: ToolbarOpacitySetting.Proximity, openPopupCount: 0, onPopupPanelOpenClose: (_isOpening: boolean) => {}, @@ -426,6 +429,7 @@ export interface InternalToolbarComponentProps /** Use Drag Interaction to open popups with nest action buttons. */ useDragInteraction?: boolean; /** Determines whether to use mouse proximity to alter the opacity of the toolbar. */ + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting?: ToolbarOpacitySetting; /** Optional function to call on any item execution. */ onItemExecuted?: OnItemExecutedFunc; @@ -622,6 +626,7 @@ export function InternalToolbarComponent(props: InternalToolbarComponentProps) { panelAlignment, useDragInteraction, toolbarOpacitySetting: + // eslint-disable-next-line @typescript-eslint/no-deprecated props.toolbarOpacitySetting ?? ToolbarOpacitySetting.Proximity, overflowDirection: direction === OrthogonalDirection.Horizontal diff --git a/ui/components-react/src/components-react/toolbar/Items.tsx b/ui/components-react/src/components-react/toolbar/Items.tsx index 587f52dc673..3be50c7c12c 100644 --- a/ui/components-react/src/components-react/toolbar/Items.tsx +++ b/ui/components-react/src/components-react/toolbar/Items.tsx @@ -46,6 +46,7 @@ export function ToolbarItems(props: ToolbarItemsProps) { const { toolbarOpacitySetting, openPopupCount, overflowDisplayActive } = useToolbarWithOverflowDirectionContext(); const useTransparentBackground = + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting === ToolbarOpacitySetting.Transparent; let toolbarOpacity = useTransparentBackground @@ -62,11 +63,13 @@ export function ToolbarItems(props: ToolbarItemsProps) { ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT; let showSeparators = + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true; const { ref, proximityScale } = useWidgetOpacityContext(); if ( + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive diff --git a/ui/components-react/src/components-react/toolbar/OverflowPanel.tsx b/ui/components-react/src/components-react/toolbar/OverflowPanel.tsx index 3e7f987ed93..44d69ced24f 100644 --- a/ui/components-react/src/components-react/toolbar/OverflowPanel.tsx +++ b/ui/components-react/src/components-react/toolbar/OverflowPanel.tsx @@ -56,6 +56,7 @@ export function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) { const { proximityScale } = useWidgetOpacityContext(); const useTransparentBackground = + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting === ToolbarOpacitySetting.Transparent; let toolbarOpacity = useTransparentBackground ? 0 : TOOLBAR_OPACITY_DEFAULT; let boxShadowOpacity = useTransparentBackground @@ -65,9 +66,11 @@ export function ToolbarOverflowPanel(props: ToolbarOverflowPanelProps) { ? 0 : TOOLBAR_BACKDROP_FILTER_BLUR_DEFAULT; let showSeparators = + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting === ToolbarOpacitySetting.Transparent ? false : true; if ( + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting === ToolbarOpacitySetting.Proximity && openPopupCount < 1 && !overflowDisplayActive diff --git a/ui/components-react/src/components-react/toolbar/Toolbar.tsx b/ui/components-react/src/components-react/toolbar/Toolbar.tsx index 034a43ccef7..d1d40368c80 100644 --- a/ui/components-react/src/components-react/toolbar/Toolbar.tsx +++ b/ui/components-react/src/components-react/toolbar/Toolbar.tsx @@ -35,6 +35,7 @@ export interface ToolbarProps extends CommonProps, NoChildrenProps { /** Use Drag Interaction to open popups with nest action buttons */ useDragInteraction?: boolean; /** Determines whether to use mouse proximity to alter the opacity of the toolbar */ + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting?: ToolbarOpacitySetting; /** Optional function to call on any item execution */ onItemExecuted?: OnItemExecutedFunc; diff --git a/ui/components-react/src/components-react/toolbar/ToolbarWithOverflow.tsx b/ui/components-react/src/components-react/toolbar/ToolbarWithOverflow.tsx index c28bca3a03a..a1203d2753a 100644 --- a/ui/components-react/src/components-react/toolbar/ToolbarWithOverflow.tsx +++ b/ui/components-react/src/components-react/toolbar/ToolbarWithOverflow.tsx @@ -37,6 +37,7 @@ export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps { /** Use Drag Interaction to open popups with nest action buttons */ useDragInteraction?: boolean; /** Determines whether to use mouse proximity to alter the opacity of the toolbar */ + // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting?: ToolbarOpacitySetting; /** Optional function to call on any item execution */ onItemExecuted?: OnItemExecutedFunc; From 13458042b8050b6b21d0875df81fa57ca3cfc16d Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 11:47:04 +0300 Subject: [PATCH 04/12] Remove test-app defaults --- apps/test-app/src/frontend/AppInitializer.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/test-app/src/frontend/AppInitializer.tsx b/apps/test-app/src/frontend/AppInitializer.tsx index 13292832fd3..867414ddc72 100644 --- a/apps/test-app/src/frontend/AppInitializer.tsx +++ b/apps/test-app/src/frontend/AppInitializer.tsx @@ -161,10 +161,8 @@ function createInitializer() { new AppUiSettings({ colorTheme: lastTheme ?? SYSTEM_PREFERRED_COLOR_THEME, dragInteraction: false, - widgetOpacity: 0.8, showWidgetIcon: true, autoCollapseUnpinnedPanels: false, - toolbarOpacity: 0.5, }) ); From 4fdf491b406eb3fcd11927dd77a0ff9ccc36c400 Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 12:02:25 +0300 Subject: [PATCH 05/12] Remove glass effect --- .../src/appui-react/toolbar/new-toolbars/Surface.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/ui/appui-react/src/appui-react/toolbar/new-toolbars/Surface.scss b/ui/appui-react/src/appui-react/toolbar/new-toolbars/Surface.scss index 6622ccfc06b..65b7f654aad 100644 --- a/ui/appui-react/src/appui-react/toolbar/new-toolbars/Surface.scss +++ b/ui/appui-react/src/appui-react/toolbar/new-toolbars/Surface.scss @@ -15,12 +15,7 @@ // TODO: fixes an issues on Safari where borders and backgrounds are overlapped by the viewport. position: relative; - @supports (backdrop-filter: blur(5px)) { - background-color: hsl( - var(--iui-color-background-hsl) / var(--iui-opacity-2) - ); - backdrop-filter: blur(5px); - } + background-color: var(--iui-color-background); &.uifw-vertical { flex-direction: column; From e95d22904d3cbb4a951ccd615d1371c74a93ae08 Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 12:16:23 +0300 Subject: [PATCH 06/12] Reword deprecation message --- .../src/appui-react/configurableui/ConfigurableUiContent.tsx | 4 ++-- .../src/appui-react/framework/FrameworkVisibility.ts | 2 +- ui/appui-react/src/appui-react/theme/ThemeId.ts | 4 ++-- ui/appui-react/src/appui-react/toolbar/Toolbar.tsx | 2 +- .../src/appui-react/toolbar/ToolbarWithOverflow.tsx | 2 +- ui/appui-react/src/appui-react/uistate/AppUiSettings.ts | 4 ++-- .../src/components-react/toolbar/InternalToolbarComponent.tsx | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx b/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx index a9ac0523cef..878079f4721 100644 --- a/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx +++ b/ui/appui-react/src/appui-react/configurableui/ConfigurableUiContent.tsx @@ -74,7 +74,7 @@ export interface ConfigurableUiContentProps extends CommonProps { */ viewOverlay?: boolean; /** Describes the opacity of widgets. Uses redux store as a fallback. Defaults to {@link WIDGET_OPACITY_DEFAULT}. - * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + * @deprecated in 5.35.0. Use the default configuration. */ widgetOpacity?: number; /** Controls if the widget icons should be displayed. Uses redux store as a fallback. Defaults to `true`. */ @@ -88,7 +88,7 @@ export interface ConfigurableUiContentProps extends CommonProps { /** Controls if the tool settings label should be set based on activated tool. Uses redux store as a fallback. Defaults to `false`. */ toolAsToolSettingsLabel?: boolean; /** Describes the opacity of toolbars. Uses redux store as a fallback. Defaults to {@link TOOLBAR_OPACITY_DEFAULT}. - * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + * @deprecated in 5.35.0. Use the default configuration. */ toolbarOpacity?: number; /** Component to wrap all popout widgets and other child windows opened via {@link UiFramework.childWindows}. */ diff --git a/ui/appui-react/src/appui-react/framework/FrameworkVisibility.ts b/ui/appui-react/src/appui-react/framework/FrameworkVisibility.ts index 036a08b8667..a30f4ca1e3e 100644 --- a/ui/appui-react/src/appui-react/framework/FrameworkVisibility.ts +++ b/ui/appui-react/src/appui-react/framework/FrameworkVisibility.ts @@ -31,7 +31,7 @@ export interface FrameworkVisibility { useProximityOpacity: boolean; /** Determines whether the opacity of a toolbar should change immediately when the mouse gets close. Defaults to `false`. - * @deprecated in 5.35.0. Do not customize and rely on default configuration. + * @deprecated in 5.35.0. Use the default configuration. */ snapWidgetOpacity: boolean; diff --git a/ui/appui-react/src/appui-react/theme/ThemeId.ts b/ui/appui-react/src/appui-react/theme/ThemeId.ts index 0fb6e9a873b..76f4e7f3e7b 100644 --- a/ui/appui-react/src/appui-react/theme/ThemeId.ts +++ b/ui/appui-react/src/appui-react/theme/ThemeId.ts @@ -38,13 +38,13 @@ export enum ColorTheme { export type ThemeId = `${ColorTheme}` | (string & {}); /** The default widget opacity. - * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + * @deprecated in 5.35.0. Use the default configuration. * @public */ export const WIDGET_OPACITY_DEFAULT = 1; /** The default widget opacity. - * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + * @deprecated in 5.35.0. Use the default configuration. * @public */ export const TOOLBAR_OPACITY_DEFAULT = 0.5; diff --git a/ui/appui-react/src/appui-react/toolbar/Toolbar.tsx b/ui/appui-react/src/appui-react/toolbar/Toolbar.tsx index a4408f9c785..021aa4b8d66 100644 --- a/ui/appui-react/src/appui-react/toolbar/Toolbar.tsx +++ b/ui/appui-react/src/appui-react/toolbar/Toolbar.tsx @@ -39,7 +39,7 @@ export interface ToolbarProps extends CommonProps, NoChildrenProps { /** Use drag interaction to open popups with nested toolbar buttons. */ useDragInteraction?: boolean; /** Determines whether to use mouse proximity to alter the opacity of the toolbar. - * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + * @deprecated in 5.35.0. Use the default configuration. */ // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting?: ToolbarOpacitySetting; diff --git a/ui/appui-react/src/appui-react/toolbar/ToolbarWithOverflow.tsx b/ui/appui-react/src/appui-react/toolbar/ToolbarWithOverflow.tsx index 47eb15d566b..64c57789853 100644 --- a/ui/appui-react/src/appui-react/toolbar/ToolbarWithOverflow.tsx +++ b/ui/appui-react/src/appui-react/toolbar/ToolbarWithOverflow.tsx @@ -33,7 +33,7 @@ export interface ToolbarWithOverflowProps extends CommonProps, NoChildrenProps { /** Use Drag Interaction to open popups with nest action buttons */ useDragInteraction?: boolean; /** Determines whether to use mouse proximity to alter the opacity of the toolbar. - * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + * @deprecated in 5.35.0. Use the default configuration. */ // eslint-disable-next-line @typescript-eslint/no-deprecated toolbarOpacitySetting?: ToolbarOpacitySetting; diff --git a/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts b/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts index 02fd32c061b..6b3b36af8f5 100644 --- a/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts +++ b/ui/appui-react/src/appui-react/uistate/AppUiSettings.ts @@ -24,14 +24,14 @@ import { ConfigurableUiActionId } from "../redux/ConfigurableUiState.js"; export interface InitialAppUiSettings { colorTheme: ThemeId; dragInteraction: boolean; - /** @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. */ + /** @deprecated in 5.35.0. Use the default configuration. */ widgetOpacity: number; showWidgetIcon?: boolean; /** @alpha */ autoCollapseUnpinnedPanels?: boolean; animateToolSettings?: boolean; useToolAsToolSettingsLabel?: boolean; - /** @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. */ + /** @deprecated in 5.35.0. Use the default configuration. */ toolbarOpacity: number; } diff --git a/ui/components-react/src/components-react/toolbar/InternalToolbarComponent.tsx b/ui/components-react/src/components-react/toolbar/InternalToolbarComponent.tsx index 79013fbf570..94a2373430b 100644 --- a/ui/components-react/src/components-react/toolbar/InternalToolbarComponent.tsx +++ b/ui/components-react/src/components-react/toolbar/InternalToolbarComponent.tsx @@ -109,7 +109,7 @@ export enum ToolbarPanelAlignment { } /** Enumeration of Toolbar Opacity setting. - * @deprecated in 5.35.0. Do not customize and rely on default opacity configuration. + * @deprecated in 5.35.0. Use the default configuration. * @public */ export enum ToolbarOpacitySetting { From 837a8c49983bcd2fb49db8caa2ce29113e913512 Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 12:24:16 +0300 Subject: [PATCH 07/12] pnpm changeset --- .changeset/four-toys-think.md | 12 ++++++++++++ .changeset/full-cloths-wait.md | 5 +++++ .changeset/humble-loops-brake.md | 5 +++++ .changeset/khaki-candles-grab.md | 5 +++++ .changeset/young-roses-try.md | 5 +++++ 5 files changed, 32 insertions(+) create mode 100644 .changeset/four-toys-think.md create mode 100644 .changeset/full-cloths-wait.md create mode 100644 .changeset/humble-loops-brake.md create mode 100644 .changeset/khaki-candles-grab.md create mode 100644 .changeset/young-roses-try.md diff --git a/.changeset/four-toys-think.md b/.changeset/four-toys-think.md new file mode 100644 index 00000000000..03313767213 --- /dev/null +++ b/.changeset/four-toys-think.md @@ -0,0 +1,12 @@ +--- +"@itwin/core-react": minor +--- + +Deprecated toolbar and widget opacity APIs. + +- `toolbarOpacity` and `widgetOpacity` props of `ConfigurableUiContent` component. +- `snapWidgetOpacity` property of `FrameworkVisibility` interface. +- `TOOLBAR_OPACITY_DEFAULT` and `WIDGET_OPACITY_DEFAULT` constants. +- `toolbarOpacitySetting` prop of `Toolbar` and `ToolbarWithOverflow` components. + +Use the default configuration instead. diff --git a/.changeset/full-cloths-wait.md b/.changeset/full-cloths-wait.md new file mode 100644 index 00000000000..2a388a3fe1e --- /dev/null +++ b/.changeset/full-cloths-wait.md @@ -0,0 +1,5 @@ +--- +"@itwin/appui-react": minor +--- + +Removed the glass styling effect from `Toolbar` component. diff --git a/.changeset/humble-loops-brake.md b/.changeset/humble-loops-brake.md new file mode 100644 index 00000000000..2ea8cd48b16 --- /dev/null +++ b/.changeset/humble-loops-brake.md @@ -0,0 +1,5 @@ +--- +"@itwin/appui-react": minor +--- + +Invalidated the settings stored via the deprecated `AppUiSettings` class. diff --git a/.changeset/khaki-candles-grab.md b/.changeset/khaki-candles-grab.md new file mode 100644 index 00000000000..a70949c6c69 --- /dev/null +++ b/.changeset/khaki-candles-grab.md @@ -0,0 +1,5 @@ +--- +"@itwin/components-react": minor +--- + +Deprecated `ToolbarOpacitySetting` enum. Use the default configuration instead. diff --git a/.changeset/young-roses-try.md b/.changeset/young-roses-try.md new file mode 100644 index 00000000000..4193902d387 --- /dev/null +++ b/.changeset/young-roses-try.md @@ -0,0 +1,5 @@ +--- +"@itwin/appui-react": minor +--- + +Changed the default widget opacity to `1`. From f9b742302e296f7e27dfe6d886c6dcfb6202e326 Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 12:40:02 +0300 Subject: [PATCH 08/12] npm run extract-api --- common/api/appui-react.api.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/common/api/appui-react.api.md b/common/api/appui-react.api.md index 35471eb251e..5b2930a88be 100644 --- a/common/api/appui-react.api.md +++ b/common/api/appui-react.api.md @@ -3909,7 +3909,7 @@ export const SessionStateActions: { setNumItemsSelected: (numSelected: number) => ActionWithPayload; setIModelConnection: (iModelConnection: any) => ActionWithPayload; setSelectionScope: (activeSelectionScope: string) => ActionWithPayload; - updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => ActionWithPayload | DeepReadonlyObject>; + updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => ActionWithPayload | DeepReadonlyObject>; }; // @beta @deprecated @@ -3947,7 +3947,7 @@ export const sessionStateMapDispatchToProps: { setNumItemsSelected: (numSelected: number) => ActionWithPayload; setIModelConnection: (iModelConnection: any) => ActionWithPayload; setSelectionScope: (activeSelectionScope: string) => ActionWithPayload; - updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => ActionWithPayload | DeepReadonlyObject>; + updateCursorMenu: (cursorMenuData: CursorMenuData | CursorMenuPayload) => ActionWithPayload | DeepReadonlyObject>; }; // @public @deprecated @@ -5426,7 +5426,7 @@ export function useUiStateStorageHandler(): UiStateStorage; // @public export function useWidget(): { state: WidgetState; - widgetLocation: "popout" | "floating" | "docked"; + widgetLocation: "popout" | "docked" | "floating"; setState: (widgetState: Omit) => void; }; From 4f8851ae00b42bff0133f964470ea7655371d3b4 Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 12:41:03 +0300 Subject: [PATCH 09/12] Fix unit test --- ui/appui-react/src/test/settings/UiSettingsPage.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/appui-react/src/test/settings/UiSettingsPage.test.tsx b/ui/appui-react/src/test/settings/UiSettingsPage.test.tsx index 60bb2d45cb4..4d0c197d130 100644 --- a/ui/appui-react/src/test/settings/UiSettingsPage.test.tsx +++ b/ui/appui-react/src/test/settings/UiSettingsPage.test.tsx @@ -86,8 +86,8 @@ describe("UiSettingsPage", () => { const wrapper = render(); const thumb = wrapper.getAllByRole("slider")[1]; - expect(UiFramework.getWidgetOpacity()).toEqual(0.9); - expect(thumb.getAttribute("aria-valuenow")).toEqual("0.9"); + expect(UiFramework.getWidgetOpacity()).toEqual(1); + expect(thumb.getAttribute("aria-valuenow")).toEqual("1"); act(() => { UiFramework.setWidgetOpacity(0.5); From 407c6534dad1e370fbe29c949b89cdf05c736785 Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 12:51:28 +0300 Subject: [PATCH 10/12] Update snap --- ...avigation-widget-test-1-chromium-linux.png | Bin 5926 -> 6363 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/e2e-tests/tests/widget/basic-navigation-widget.test.ts-snapshots/basic-navigation-widget-test-1-chromium-linux.png b/e2e-tests/tests/widget/basic-navigation-widget.test.ts-snapshots/basic-navigation-widget-test-1-chromium-linux.png index 97bc5e64a22f9216dfbe920bb63de30c9b380445..9c362865e266e69a31d6ddc86c788e1d2091cfe9 100644 GIT binary patch literal 6363 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 literal 5926 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 SC@cZ=kU-S+)Jj!sLjMC6JUU7M From 8a03cf7b7b6c6ad496aff9da48c99fe9b56f95ea Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 16:17:24 +0300 Subject: [PATCH 11/12] Fix changeset --- .changeset/four-toys-think.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/four-toys-think.md b/.changeset/four-toys-think.md index 03313767213..a72e15a1288 100644 --- a/.changeset/four-toys-think.md +++ b/.changeset/four-toys-think.md @@ -1,5 +1,5 @@ --- -"@itwin/core-react": minor +"@itwin/appui-react": minor --- Deprecated toolbar and widget opacity APIs. From 753c13693b82f416f9252ead5c28e9f33421c236 Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Wed, 9 Sep 2026 16:53:08 +0300 Subject: [PATCH 12/12] Changeset for core-react --- .changeset/young-roses-try.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/young-roses-try.md b/.changeset/young-roses-try.md index 4193902d387..4b004948718 100644 --- a/.changeset/young-roses-try.md +++ b/.changeset/young-roses-try.md @@ -1,5 +1,6 @@ --- "@itwin/appui-react": minor +"@itwin/core-react": minor --- Changed the default widget opacity to `1`.