@xh/hoist 80.0.0-SNAPSHOT.1769042130982 → 80.0.0-SNAPSHOT.1769042542328

package/CHANGELOG.md

@@ -61,6 +61,8 @@
   CSS overrides with overrides to variables where possible.
 * Added new CSS variables `--xh-intent-danger-text-color` (and others). Consider using these when
   styling text with Hoist intent colors to enhance legibility in dark mode.
+* Tweaked styling of `DashContainer` tab controls, adding a left border to the control surface and
+  improving the visibility of the tab overflow dropdown.
 
 ### 📚 Libraries
 

package/desktop/cmp/dash/container/impl/DashContainerMenuButton.ts

@@ -17,15 +17,17 @@ import {dashContainerContextMenu} from './DashContainerContextMenu';
  * @internal
  */
 export const dashContainerMenuButton = hoistCmp.factory({
+    className: 'xh-dash-container-menu-btn',
     model: null,
-    render({stack, dashContainerModel}) {
+
+    render({stack, dashContainerModel, className}) {
         if (dashContainerModel.contentLocked || !dashContainerModel.showMenuButton) return null;
 
         return popover({
             position: Position.BOTTOM,
             item: button({
                 icon: Icon.ellipsisVertical(),
-                className: 'xh-dash-container-menu-btn'
+                className
             }),
             content: dashContainerContextMenu({stack, dashContainerModel})
         });

package/kit/golden-layout/styles.scss

@@ -15,16 +15,6 @@
     background: rgba(0, 0, 0, 0.06);
     min-height: 25px;
 
-    .xh-dash-container-add-button {
-      padding: 5px;
-      color: #999;
-
-      &:hover {
-        cursor: pointer;
-        color: var(--xh-text-color);
-      }
-    }
-
     .lm_tabs {
       flex: 1;
       position: relative;
@@ -37,9 +27,21 @@
       display: flex;
       align-items: center;
 
+      // Add left border to visually structure the control area and help it stand out.
+      border-left: var(--xh-border-solid);
+      padding-left: 3px;
+
+      > li {
+        // Avoid muted opacity on controls - we want users to be able to see these.
+        opacity: 1;
+      }
+
       .lm_tabdropdown {
         &::before {
-          color: var(--xh-button-text-color);
+          // Set warning intent on tab dropdown - this is a tiny V arrow icon that appears when a
+          // tabbed stack is too small to render all tabs. This is the only clue to the user that
+          // there are more widgets in the layout!
+          color: var(--xh-intent-primary-text-color);
         }
       }
     }
@@ -116,6 +118,7 @@
       border: none;
       margin: 0;
       height: 30px;
+      padding: 0 8px;
 
       &:hover {
         background-color: var(--xh-menu-item-highlight-bg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "80.0.0-SNAPSHOT.1769042130982",
+  "version": "80.0.0-SNAPSHOT.1769042542328",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",