@xh/hoist 71.0.0-SNAPSHOT.1735324763102 → 71.0.0-SNAPSHOT.1735325329103

package/CHANGELOG.md

@@ -32,6 +32,7 @@
 
 * Fixed sizing and position of mobile `TabContainer` switcher, particularly when the switcher is
   positioned with `top` orientation.
+* Fixed styling of `ButtonGroup` in vertical orientations.
 
 ### ⚙️ Technical
 

package/build/types/desktop/cmp/error/impl/ErrorMessage.d.ts

@@ -4,4 +4,4 @@ import '@xh/hoist/desktop/register';
  * Desktop implementation of ErrorMessage.
  * @internal
  */
-export declare const errorMessageImpl: import("@xh/hoist/core").ElementFactory<ErrorMessageProps>;
+export declare const errorMessageImpl: import("@xh/hoist/core").ElementFactory<Omit<ErrorMessageProps, "error" | "actionFn" | "detailsFn">>;

package/build/types/mobile/cmp/error/impl/ErrorMessage.d.ts

@@ -4,4 +4,4 @@ import '@xh/hoist/mobile/register';
  * Mobile implementation of ErrorMessage.
  * @internal
  */
-export declare const errorMessageImpl: import("@xh/hoist/core").ElementFactory<ErrorMessageProps>;
+export declare const errorMessageImpl: import("@xh/hoist/core").ElementFactory<Omit<ErrorMessageProps, "error" | "actionFn" | "detailsFn">>;

package/cmp/error/ErrorMessage.ts

@@ -97,14 +97,12 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
             ...rest,
             item: XH.isMobileApp
                 ? mobileErrorMessageImpl({
-                      error,
                       message,
                       title,
                       actionButtonProps,
                       detailsButtonProps
                   })
                 : desktopErrorMessageImpl({
-                      error,
                       message,
                       title,
                       actionButtonProps,

package/desktop/cmp/button/Button.scss

@@ -56,33 +56,12 @@
         padding: var(--xh-pad-half-px) var(--xh-pad-px);
       }
 
-      // Standard and outlined have borders - remove standard radius in between adjacent buttons so
-      // they seamlessly combine their inner borders.
-      border-radius: 0;
-      &.xh-button--standard,
-      &.xh-button--outlined {
-        &:first-child {
-          border-bottom-left-radius: var(--xh-button-border-radius-px);
-          border-top-left-radius: var(--xh-button-border-radius-px);
-        }
-
-        &:last-child {
-          border-bottom-right-radius: var(--xh-button-border-radius-px);
-          border-top-right-radius: var(--xh-button-border-radius-px);
-        }
-      }
-
       // Minimal has no borders - radius is made visible by background shading when hovered or
       // pressed, and looks more natural without any radius.
       &.xh-button--minimal {
         border-radius: 0;
       }
 
-      // Outlined buttons should avoid doubled-up inner borders.
-      &.xh-button--outlined:not(:last-child) {
-        border-right: none;
-      }
-
       &.xh-button--enabled {
         // Hoist calls FocusStyleManager.onlyShowFocusOnTabs(), which by default hides focus indicators
         // unless a component has been tabbed into via keyboard. Override here to always show a focus
@@ -93,6 +72,54 @@
         }
       }
     }
+
+    // Horizontal mode only styles
+    &:not(.bp5-vertical) {
+      .xh-button.bp5-button {
+        // Standard and outlined have borders - remove standard radius in between adjacent buttons so
+        // they seamlessly combine their inner borders.
+        border-radius: 0;
+        &.xh-button--standard,
+        &.xh-button--outlined {
+          &:first-child {
+            border-radius: var(--xh-button-border-radius-px) 0 0 var(--xh-button-border-radius-px);
+          }
+
+          &:last-child {
+            border-radius: 0 var(--xh-button-border-radius-px) var(--xh-button-border-radius-px) 0;
+          }
+        }
+
+        // Outlined buttons should avoid doubled-up inner borders.
+        &.xh-button--outlined:not(:last-child) {
+          border-right: none;
+        }
+      }
+    }
+
+    // Vertical mode only styles
+    &.bp5-vertical {
+      .xh-button.bp5-button {
+        // Standard and outlined have borders - remove standard radius in between adjacent buttons so
+        // they seamlessly combine their inner borders.
+        border-radius: 0;
+        &.xh-button--standard,
+        &.xh-button--outlined {
+          &:first-child {
+            border-radius: var(--xh-button-border-radius-px) var(--xh-button-border-radius-px) 0 0;
+          }
+
+          &:last-child {
+            border-radius: 0 0 var(--xh-button-border-radius-px) var(--xh-button-border-radius-px);
+          }
+        }
+
+        // Outlined buttons should avoid doubled-up inner borders.
+        &.xh-button--outlined:not(:last-child) {
+          border-bottom: none;
+        }
+      }
+    }
   }
 }
 

package/desktop/cmp/error/impl/ErrorMessage.ts

@@ -17,8 +17,10 @@ import '@xh/hoist/desktop/register';
  * Desktop implementation of ErrorMessage.
  * @internal
  */
-export const errorMessageImpl = hoistCmp.factory<ErrorMessageProps>({
-    render({error, message, title, actionButtonProps, detailsButtonProps}) {
+export const errorMessageImpl = hoistCmp.factory<
+    Omit<ErrorMessageProps, 'error' | 'actionFn' | 'detailsFn'>
+>({
+    render({message, title, actionButtonProps, detailsButtonProps}) {
         let buttons = [],
             buttonBar = null;
         if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps as ButtonProps));
@@ -31,7 +33,7 @@ export const errorMessageImpl = hoistCmp.factory<ErrorMessageProps>({
 
         return div({
             className: 'xh-error-message__inner',
-            items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
+            items: [titleCmp({title}), messageCmp({message}), buttonBar]
         });
     }
 });

package/mobile/cmp/error/impl/ErrorMessage.ts

@@ -17,8 +17,10 @@ import '@xh/hoist/mobile/register';
  * Mobile implementation of ErrorMessage.
  * @internal
  */
-export const errorMessageImpl = hoistCmp.factory<ErrorMessageProps>({
-    render({error, message, title, actionButtonProps, detailsButtonProps}) {
+export const errorMessageImpl = hoistCmp.factory<
+    Omit<ErrorMessageProps, 'error' | 'actionFn' | 'detailsFn'>
+>({
+    render({message, title, actionButtonProps, detailsButtonProps}) {
         let buttons = [],
             buttonBar = null;
         if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps as ButtonProps));
@@ -31,7 +33,7 @@ export const errorMessageImpl = hoistCmp.factory<ErrorMessageProps>({
 
         return div({
             className: 'xh-error-message__inner',
-            items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
+            items: [titleCmp({title}), messageCmp({message}), buttonBar]
         });
     }
 });

package/package.json

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