@axinom/mosaic-ui 0.63.0-rc.1 → 0.63.0-rc.10

package/src/components/PageHeader/PageHeaderActionsGroup/PageHeaderActionsGroup.tsx

@@ -145,7 +145,7 @@ export const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps> = ({
             }
             await onActionsGroupToggled(!isExpanded);
             toggleExpanded();
-          } catch (e) {
+          } catch (_) {
             // Abort the action if an error occurs
             return;
           }
@@ -202,6 +202,10 @@ export const PageHeaderActionsGroup: React.FC<PageHeaderActionsGroupProps> = ({
               <PageHeaderAction
                 key={idx}
                 {...action}
+                tag={undefined}
+                label={
+                  action.tag ? `${action.label} (${action.tag})` : action.label
+                }
                 disabled={groupActionsDisabled}
                 onClick={() => {
                   action.onClick();

package/src/styles/variables.scss

@@ -42,6 +42,7 @@ $accordion-item-text-color: $dark-gray;
 $accordion-item-hover-color: rgba($blue, 0.15);
 $accordion-item-border: 1px solid $light-gray;
 $accordion-item-arrow-color: $blue;
+$accordion-item-arrow-disabled-color: $gray;
 
 /* Explorer vars */
 $explorer-background-color: #ffffff;
@@ -118,6 +119,8 @@ $page-header-height: 100px;
 /* PageHeaderAction */
 $page-header-action-color: #ffffff;
 $page-header-action-background-color: $light-blue;
+$page-header-action-tag-background-color: $light-gray;
+$page-header-action-tag-font-size: 10px;
 
 $page-header-action-confirmation-background-color: $yellow;
 $page-header-action-pressed-color: $page-header-action-background-color;