Deprecated toolbar and widget opacity settings

.changeset/four-toys-think.md

@@ -0,0 +1,12 @@
+---
+"@itwin/appui-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.

.changeset/full-cloths-wait.md

@@ -0,0 +1,5 @@
+---
+"@itwin/appui-react": minor
+---
+
+Removed the glass styling effect from `Toolbar` component.

.changeset/humble-loops-brake.md

@@ -0,0 +1,5 @@
+---
+"@itwin/appui-react": minor
+---
+
+Invalidated the settings stored via the deprecated `AppUiSettings` class.

.changeset/khaki-candles-grab.md

@@ -0,0 +1,5 @@
+---
+"@itwin/components-react": minor
+---
+
+Deprecated `ToolbarOpacitySetting` enum. Use the default configuration instead.

.changeset/young-roses-try.md

@@ -0,0 +1,6 @@
+---
+"@itwin/appui-react": minor
+"@itwin/core-react": minor
+---
+
+Changed the default widget opacity to `1`.

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,
       })
     );
 

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;
 }
 
@@ -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;
 }
@@ -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;

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,

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

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

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,
   },

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. Use the default 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. Use the default 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(() => {

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. Use the default configuration.
+   */
   snapWidgetOpacity: boolean;
 
   /** Handler for when a Frontstage is ready */

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,

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}
           />

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}
             />

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. Use the default configuration.
  * @public
  */
-export const WIDGET_OPACITY_DEFAULT = 0.9;
+export const WIDGET_OPACITY_DEFAULT = 1;
 
 /** The default widget opacity.
+ * @deprecated in 5.35.0. Use the default configuration.
  * @public
  */
 export const TOOLBAR_OPACITY_DEFAULT = 0.5;

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. Use the default configuration.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   toolbarOpacitySetting?: ToolbarOpacitySetting;
   /** Optional function to call on any item execution */
   onItemExecuted?: OnItemExecutedFunc;

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
       }
     />
   );

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. Use the default configuration.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   toolbarOpacitySetting?: ToolbarOpacitySetting;
   /** Optional function to call on any item execution */
   onItemExecuted?: OnItemExecutedFunc;

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;

ui/appui-react/src/appui-react/toolbar/new-toolbars/Surface.tsx

@@ -38,6 +38,7 @@ export const Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(
 
     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]);

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. Use the default configuration. */
   widgetOpacity: number;
   showWidgetIcon?: boolean;
   /** @alpha */
   autoCollapseUnpinnedPanels?: boolean;
   animateToolSettings?: boolean;
   useToolAsToolSettingsLabel?: boolean;
+  /** @deprecated in 5.35.0. Use the default configuration. */
   toolbarOpacity: number;
 }
 
@@ -51,6 +53,11 @@ export class AppUiSettings implements UserSettingsProvider {
   private _settings: Array<UiStateEntry<any>> = [];
   private _applyingLocalSettings = false;
 
+  /** Bump this to invalidate stored settings. */
+  private static _currentVersion = 1;
+  private _storedVersion = 0;
+  private _version: UiStateEntry<number>;
+
   public colorTheme: UiStateEntry<ThemeId>;
   public dragInteraction: UiStateEntry<boolean>;
   public widgetOpacity: UiStateEntry<number>;
@@ -67,6 +74,16 @@ export class AppUiSettings implements UserSettingsProvider {
   };
 
   constructor(defaults: Partial<InitialAppUiSettings>) {
+    this._version = new UiStateEntry<number>(
+      AppUiSettings._settingNamespace,
+      "_version",
+      () => AppUiSettings._currentVersion,
+      (value: number) => {
+        this._storedVersion = value;
+      },
+      0
+    );
+
     this._settings = [];
 
     this.colorTheme = new UiStateEntry<ThemeId>(
@@ -186,6 +203,16 @@ export class AppUiSettings implements UserSettingsProvider {
 
   public async apply(storage: UiStateStorage): Promise<void> {
     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);
     }