fix: messages inconsistencies (#4174)

* fix: messages inconsistencies

* fix

* chore: message at the page

* fix: permission grid styling broken

* fix

framework/core/js/src/common/components/Button.tsx

@@ -11,8 +11,10 @@ export interface IButtonAttrs extends ComponentAttrs {
    * Class(es) of an optional icon to be rendered within the button.
    *
    * If provided, the button will gain a `has-icon` class.
+   *
+   * You may also provide a rendered icon element directly.
    */
-  icon?: string;
+  icon?: string | boolean | Mithril.Children;
   /**
    * Disables button from user input.
    *
@@ -42,6 +44,12 @@ export interface IButtonAttrs extends ComponentAttrs {
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type
    */
   type?: string;
+  /**
+   * Helper text. Displayed under the button label.
+   *
+   * Default: `null`
+   */
+  helperText?: Mithril.Children;
 }
 
 /**
@@ -56,7 +64,7 @@ export interface IButtonAttrs extends ComponentAttrs {
  */
 export default class Button<CustomAttrs extends IButtonAttrs = IButtonAttrs> extends Component<CustomAttrs> {
   view(vnode: Mithril.VnodeDOM<CustomAttrs, this>) {
-    let { type, 'aria-label': ariaLabel, icon: iconName, disabled, loading, className, class: _class, ...attrs } = this.attrs;
+    let { type, 'aria-label': ariaLabel, icon: iconName, disabled, loading, className, class: _class, helperText, ...attrs } = this.attrs;
 
     // If no `type` attr provided, set to "button"
     type ||= 'button';
@@ -74,6 +82,7 @@ export default class Button<CustomAttrs extends IButtonAttrs = IButtonAttrs> ext
       hasIcon: iconName,
       disabled: disabled || loading,
       loading: loading,
+      hasSubContent: !!this.getButtonSubContent(),
     });
 
     const buttonAttrs = {
@@ -104,12 +113,21 @@ export default class Button<CustomAttrs extends IButtonAttrs = IButtonAttrs> ext
    * Get the template for the button's content.
    */
   protected getButtonContent(children: Mithril.Children): Mithril.ChildArray {
-    const iconName = this.attrs.icon;
+    const icon = this.attrs.icon;
 
     return [
-      iconName && <Icon name={iconName} className="Button-icon" />,
-      children && <span className="Button-label">{children}</span>,
+      icon && (typeof icon === 'string' || icon === true ? <Icon name={icon} className="Button-icon" /> : icon),
+      children && (
+        <span className="Button-label">
+          <span className="Button-labelText">{children}</span>
+          {this.getButtonSubContent()}
+        </span>
+      ),
       this.attrs.loading && <LoadingIndicator size="small" display="inline" />,
     ];
   }
+
+  protected getButtonSubContent(): Mithril.Children {
+    return this.attrs.helperText ? <span className="Button-helperText">{this.attrs.helperText}</span> : null;
+  }
 }

framework/core/js/src/common/components/Dropdown.tsx

@@ -19,6 +19,8 @@ export interface IDropdownAttrs extends ComponentAttrs {
   caretIcon?: string;
   /** The label of the dropdown toggle button. Defaults to 'Controls'. */
   label: Mithril.Children;
+  /** The helper text to display under the button label. */
+  helperText: Mithril.Children;
   /** The label used to describe the dropdown toggle button to assistive readers. Defaults to 'Toggle dropdown menu'. */
   accessibleToggleLabel?: string;
   /** An optional tooltip to show when hovering over the dropdown toggle button. */
@@ -157,11 +159,18 @@ export default class Dropdown<CustomAttrs extends IDropdownAttrs = IDropdownAttr
   getButtonContent(children: Mithril.ChildArray): Mithril.ChildArray {
     return [
       this.attrs.icon ? <Icon name={this.attrs.icon} className="Button-icon" /> : '',
-      <span className="Button-label">{this.attrs.label}</span>,
+      <span className="Button-label">
+        <span className="Button-labelText">{this.attrs.label}</span>
+        {this.getButtonSubContent()}
+      </span>,
       this.attrs.caretIcon ? <Icon name={this.attrs.caretIcon} className="Button-caret" /> : '',
     ];
   }
 
+  protected getButtonSubContent(): Mithril.Children {
+    return this.attrs.helperText ? <span className="Button-helperText">{this.attrs.helperText}</span> : null;
+  }
+
   getMenu(items: Mithril.Vnode<any, any>[]): Mithril.Vnode<any, any> {
     return <ul className={'Dropdown-menu dropdown-menu ' + this.attrs.menuClassName}>{items}</ul>;
   }

framework/core/less/admin/PermissionsPage.less

@@ -94,23 +94,19 @@
       }
     }
     .Dropdown {
-      display: block;
-
       .Dropdown-toggle {
         width: 100%;
-        display: block;
-        text-align: left;
-        float: none;
+        margin: -2px 0;
       }
       .Dropdown-menu {
-        margin: 0;
+        margin: 6px 0 0;
       }
     }
     .Button {
       text-decoration: none;
 
       .Badge {
-        margin: -3px 2px -3px 0;
+        margin: 0 2px 0 0;
       }
     }
     td:not(:hover) .Select-caret,
@@ -126,12 +122,8 @@
   margin: -1px 0;
 }
 .PermissionDropdown {
-  .Dropdown-toggle {
-    padding: 5px 0;
-    margin: -5px 0;
-  }
   .Badge {
-    margin: -3px 3px -3px 0;
+    margin: 0 3px 0 0;
     box-shadow: none;
   }
 }

framework/core/less/common/Button.less

@@ -259,6 +259,12 @@
   line-height: inherit;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: flex;
+  flex-direction: column;
+}
+.Button-helperText {
+  font-size: 0.73rem;
+  color: var(--muted-more-color);
 }
 .Button-icon {
   line-height: inherit;

framework/core/less/common/Dropdown.less

@@ -27,8 +27,8 @@
     > a, > button, > span {
       padding: 8px 15px;
       display: flex;
-      align-items: center;
       gap: 9px;
+      align-items: center;
       width: 100%;
       color: var(--text-color);
       border-radius: 0;
@@ -51,6 +51,10 @@
         flex-shrink: 0;
       }
 
+      &.hasSubContent {
+        align-items: flex-start;
+      }
+
       &.disabled {
         opacity: 0.4;
         background: none !important;