Change selection count padding (#936)

* Adjust SelectionCount paddings * Fix css classnames * Update changelog * Add context based styling * Clean up code
iTwin · Jul 31, 2024 · af9606f · af9606f
1 parent d6750f4
commit af9606f
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 68 deletions.
diff --git a/common/changes/@itwin/appui-react/change-selection-count-padding_2024-07-26-16-49.json b/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"
+}
diff --git a/docs/changehistory/NextVersion.md b/docs/changehistory/NextVersion.md
@@ -219,6 +219,7 @@ 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
 

diff --git a/ui/appui-react/src/appui-react/statusbar/StatusBar.scss b/ui/appui-react/src/appui-react/statusbar/StatusBar.scss
@@ -21,37 +21,37 @@
   }
 }
 
-.uifw-statusbar-space-between {
+.uifw-statusBar-space-between {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
-.uifw-statusbar-left {
+.uifw-statusBar-left {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
 }
 
-.uifw-statusbar-center {
+.uifw-statusBar-center {
   display: flex;
   flex-direction: row;
   justify-content: center;
 }
 
-.uifw-statusbar-right {
+.uifw-statusBar-right {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
 }
 
-.uifw-statusbar-docked {
+.uifw-statusBar-docked {
   width: 100%;
   background-color: var(--iui-color-background);
 
-  .uifw-statusbar-item-container {
+  .uifw-statusBar-item-container {
     @include for-medium-desktop-up {
       padding-left: var(--iui-size-m);
     }
@@ -67,20 +67,20 @@
     &:has(.uifw-statusBar-separator) {
       padding-left: 0;
 
-      + .uifw-statusbar-item-container {
+      + .uifw-statusBar-item-container {
         padding-left: 0;
       }
     }
   }
 
-  .uifw-statusbar-left .uifw-statusbar-item-container {
+  .uifw-statusBar-left .uifw-statusBar-item-container {
     &:first-child {
       padding-left: 0;
     }
   }
 }
 
-.uifw-statusbar-item-container {
+.uifw-statusBar-item-container {
   height: 100%;
   display: flex;
   flex-direction: row;

diff --git a/ui/appui-react/src/appui-react/statusbar/StatusBar.tsx b/ui/appui-react/src/appui-react/statusbar/StatusBar.tsx
@@ -64,7 +64,7 @@ export function StatusBarSpaceBetween(props: CommonDivProps) {
   return (
     <Div
       {...divProps}
-      mainClassName={className ? className : "uifw-statusbar-space-between"}
+      mainClassName={className ? className : "uifw-statusBar-space-between"}
     />
   );
 }
@@ -77,7 +77,7 @@ export function StatusBarLeftSection(props: CommonDivProps) {
   return (
     <Div
       {...divProps}
-      mainClassName={className ? className : "uifw-statusbar-left"}
+      mainClassName={className ? className : "uifw-statusBar-left"}
     />
   );
 }
@@ -90,7 +90,7 @@ export function StatusBarCenterSection(props: CommonDivProps) {
   return (
     <Div
       {...divProps}
-      mainClassName={className ? className : "uifw-statusbar-center"}
+      mainClassName={className ? className : "uifw-statusBar-center"}
     />
   );
 }
@@ -103,7 +103,7 @@ export function StatusBarRightSection(props: CommonDivProps) {
   return (
     <Div
       {...divProps}
-      mainClassName={className ? className : "uifw-statusbar-right"}
+      mainClassName={className ? className : "uifw-statusBar-right"}
     />
   );
 }

diff --git a/ui/appui-react/src/appui-react/statusbar/StatusBarComposer.tsx b/ui/appui-react/src/appui-react/statusbar/StatusBarComposer.tsx
@@ -39,6 +39,7 @@ import {
 import { StatusBarItemsManager } from "./StatusBarItemsManager";
 import { useDefaultStatusBarItems } from "./useDefaultStatusBarItems";
 import { useUiItemsProviderStatusBarItems } from "./useUiItemsProviderStatusBarItems";
+import { StatusBarCornerComponentContext } from "./StatusBarCornerComponentContext";
 
 /** Private  function to generate a value that will allow the proper order to be maintained when items are placed in overflow panel */
 function getCombinedSectionItemPriority(item: StatusBarItem) {
@@ -82,7 +83,7 @@ export function DockedStatusBarItem(props: StatusBarItemProps) {
   const { onResize } = useStatusBarEntry();
   const ref = useResizeObserver<HTMLDivElement>(onResize);
   const className = classnames(
-    "uifw-statusbar-item-container",
+    "uifw-statusBar-item-container",
     props.className
   );
   return (
@@ -344,6 +345,11 @@ export function StatusBarComposer(props: StatusBarComposerProps) {
     const combinedItems = combineItems(defaultItems, addonItems);
     return sortItems(combinedItems);
   }, [defaultItems, addonItems]);
+  const itemsNotInOverflow = React.useMemo(() => {
+    return statusBarItems.filter(
+      (item) => !isItemInOverflow(item.id, overflown)
+    );
+  }, [overflown, statusBarItems]);
 
   const calculateOverflow = React.useCallback(() => {
     const widths = verifiedMapEntries(entryWidths.current);
@@ -432,18 +438,31 @@ export function StatusBarComposer(props: StatusBarComposerProps) {
             providerId={providerId}
             section={getSectionName(section)}
           >
-            {isStatusBarCustomItem(item) && item.content}
-            {isStatusBarActionItem(item) && (
-              <StatusBarActionItemComponent {...item} />
-            )}
-            {isStatusBarLabelItem(item) && (
-              <StatusBarLabelItemComponent {...item} />
-            )}
+            <StatusBarCornerComponentContext.Provider
+              value={
+                key === itemsNotInOverflow[0].id
+                  ? "left-corner"
+                  : (key ===
+                      itemsNotInOverflow[itemsNotInOverflow.length - 1].id &&
+                      overflown?.length === 0) ||
+                    isItemInOverflow(key, overflown)
+                  ? "right-corner"
+                  : undefined
+              }
+            >
+              {isStatusBarCustomItem(item) && item.content}
+              {isStatusBarActionItem(item) && (
+                <StatusBarActionItemComponent {...item} />
+              )}
+              {isStatusBarLabelItem(item) && (
+                <StatusBarLabelItemComponent {...item} />
+              )}
+            </StatusBarCornerComponentContext.Provider>
           </DockedStatusBarItem>
         </DockedStatusBarEntry>
       );
     },
-    [handleEntryResize]
+    [handleEntryResize, itemsNotInOverflow, overflown]
   );
 
   const getSectionItems = React.useCallback(
@@ -530,7 +549,7 @@ export function StatusBarComposer(props: StatusBarComposerProps) {
     [getOverflowItems]
   );
 
-  const containerClassName = classnames("uifw-statusbar-docked", className);
+  const containerClassName = classnames("uifw-statusBar-docked", className);
 
   return (
     <div

diff --git a/ui/appui-react/src/appui-react/statusbar/StatusBarCornerComponentContext.tsx b/ui/appui-react/src/appui-react/statusbar/StatusBarCornerComponentContext.tsx
@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Utilities
+ */
+
+import * as React from "react";
+
+/** @internal */
+export const StatusBarCornerComponentContext = React.createContext<
+  "right-corner" | "left-corner" | undefined
+>(undefined);
diff --git a/ui/appui-react/src/appui-react/statusfields/SelectionCount.scss b/ui/appui-react/src/appui-react/statusfields/SelectionCount.scss
@@ -6,9 +6,18 @@
   gap: var(--iui-size-2xs);
   display: flex;
   align-items: center;
-  padding: 0 var(--iui-size-2xs) 0 var(--iui-size-2xs);
+  min-width: var(--iui-size-2xl);
+  padding-left: var(--iui-size-2xs);
 
   .icon {
     color: var(--iui-color-icon);
   }
+
+  &.uifw-left-corner {
+    margin-left: var(--iui-size-m);
+  }
+
+  &.uifw-right-corner {
+    margin-right: var(--iui-size-m);
+  }
 }
diff --git a/ui/appui-react/src/appui-react/statusfields/SelectionCount.tsx b/ui/appui-react/src/appui-react/statusfields/SelectionCount.tsx
@@ -6,12 +6,13 @@
  * @module StatusBar
  */
 
+import * as React from "react";
 import type { IModelConnection } from "@itwin/core-frontend";
 import type { CommonProps } from "@itwin/core-react";
 import { Icon } from "@itwin/core-react";
 import { SvgCursor } from "@itwin/itwinui-icons-react";
 import classnames from "classnames";
-import * as React from "react";
+import { StatusBarCornerComponentContext } from "../statusbar/StatusBarCornerComponentContext";
 import "./SelectionCount.scss";
 
 /** Properties for the [[SelectionCountField]] component.
@@ -27,8 +28,11 @@ export interface SelectionCountFieldProps extends CommonProps {
  * @beta
  */
 export function SelectionCountField(props: SelectionCountFieldProps) {
+  const cornerContext = React.useContext(StatusBarCornerComponentContext);
   const className = classnames(
     "uifw-statusFields-selectionCount",
+    cornerContext === "left-corner" && "uifw-left-corner",
+    cornerContext === "right-corner" && "uifw-right-corner",
     props.className
   );
   return (

diff --git a/ui/appui-react/src/test/statusbar/StatusBar.test.tsx b/ui/appui-react/src/test/statusbar/StatusBar.test.tsx
@@ -65,7 +65,7 @@ describe("StatusBar", () => {
       <StatusBarSpaceBetween>Hello</StatusBarSpaceBetween>
     );
     expect(
-      container.querySelectorAll("div.uifw-statusbar-space-between").length
+      container.querySelectorAll("div.uifw-statusBar-space-between").length
     ).toEqual(1);
   });
 
@@ -74,7 +74,7 @@ describe("StatusBar", () => {
       <StatusBarLeftSection>Hello</StatusBarLeftSection>
     );
     expect(
-      container.querySelectorAll("div.uifw-statusbar-left").length
+      container.querySelectorAll("div.uifw-statusBar-left").length
     ).toEqual(1);
   });
 
@@ -83,7 +83,7 @@ describe("StatusBar", () => {
       <StatusBarCenterSection>Hello</StatusBarCenterSection>
     );
     expect(
-      container.querySelectorAll("div.uifw-statusbar-center").length
+      container.querySelectorAll("div.uifw-statusBar-center").length
     ).toEqual(1);
   });
 
@@ -92,7 +92,7 @@ describe("StatusBar", () => {
       <StatusBarRightSection>Hello</StatusBarRightSection>
     );
     expect(
-      container.querySelectorAll("div.uifw-statusbar-right").length
+      container.querySelectorAll("div.uifw-statusBar-right").length
     ).toEqual(1);
   });
 });