New ToolboxDropdown.foldoutStyleOverrides property

Introduce the new property to avoid changing behavior of the existing `foldoutStyle` property.

Whereas `foldoutStyle` replaces default style entirely, `foldoutStyleOverrides` is used to add to or override the default style properties.

app/src/ui/toolbar/branch-dropdown.tsx

@@ -196,10 +196,7 @@ export class BranchDropdown extends React.Component<IBranchDropdownProps> {
     // Properties to override the default foldout style for the branch dropdown.
     // The min width of the foldout is different from `branchDropdownWidth.min`
     // because the branches list foldout min width we want set to 365px instead.
-    const foldoutStyle: React.CSSProperties = {
-      position: 'absolute',
-      height: '100%',
-      top: 0,
+    const foldoutStyleOverrides: React.CSSProperties = {
       width: this.props.branchDropdownWidth.value,
       maxWidth: this.props.branchDropdownWidth.max,
       minWidth: 365,
@@ -220,7 +217,7 @@ export class BranchDropdown extends React.Component<IBranchDropdownProps> {
             iconClassName={iconClassName}
             title={title}
             description={description}
-            foldoutStyle={foldoutStyle}
+            foldoutStyleOverrides={foldoutStyleOverrides}
             onContextMenu={this.onBranchToolbarButtonContextMenu}
             tooltip={isOpen ? undefined : tooltip}
             onDropdownStateChanged={this.onDropDownStateChanged}

app/src/ui/toolbar/dropdown.tsx

@@ -124,11 +124,24 @@ export interface IToolbarDropdownProps {
   readonly enableFocusTrap?: boolean
 
   /**
-   * Sets the styles for the dropdown's foldout. Useful for custom positioning
-   * and sizes.
+   * Sets the styles for the dropdown's foldout, replacing the defaults.
+   * Useful for custom positioning and sizes.
+   *
+   * Note: If this property is set, the default positioning, size, and
+   * `foldoutStyleOverrides` property are all ignored.
    */
   readonly foldoutStyle?: React.CSSProperties
 
+  /**
+   * Sets additional styles that add to or override the default foldout style.
+   *
+   * Use as an alternative to `foldoutStyle`, when only certain properties need
+   * to be customized and the default style and placement should still apply.
+   *
+   * Note: If `foldoutStyle` is set, this property is ignored.
+   */
+  readonly foldoutStyleOverrides?: React.CSSProperties
+
   /**
    * Whether the button should displays its disclosure arrow. Defaults to true.
    */
@@ -361,28 +374,30 @@ export class ToolbarDropdown extends React.Component<
   }
 
   private getFoldoutStyle(): React.CSSProperties | undefined {
+    // if `foldoutStyle` is set, ignore default style and `foldoutStyleOverrides`
+    if (this.props.foldoutStyle) {
+      return this.props.foldoutStyle
+    }
+
     const rect = this.state.clientRect
     if (!rect) {
       return undefined
     }
 
-    if (this.props.foldoutStyle) {
-      return {
-        marginLeft: rect.left,
-        ...this.props.foldoutStyle,
-      }
-    }
-
     const heightStyle: React.CSSProperties =
       this.props.dropdownStyle === ToolbarDropdownStyle.MultiOption
         ? { maxHeight: '100%', width: rect.width }
         : { height: '100%', minWidth: rect.width }
 
+    const overrides: React.CSSProperties =
+      this.props.foldoutStyleOverrides ?? {}
+
     return {
       position: 'absolute',
       marginLeft: rect.left,
       top: 0,
       ...heightStyle,
+      ...overrides,
     }
   }