@axinom/mosaic-ui 0.63.0-rc.7 → 0.63.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.63.0-rc.7",
+  "version": "0.63.0-rc.9",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1f22bcb689ffc91a420d7c34d4b829a0f79ea9d2"
+  "gitHead": "d34c0f906f1242b164d1d25b1a3f1547eda53996"
 }

package/src/components/Explorer/BulkEdit/useBulkEdit.tsx

@@ -75,6 +75,7 @@ export const useBulkEdit = <T extends Data>({
         ? {
             label: bulkEditRegistration.label ?? 'Bulk Edit',
             icon: bulkEditRegistration.icon ?? IconName.BulkEdit,
+            tag: 'BETA',
             onClick: () => setIsBulkEditMode((prev) => !prev),
           }
         : undefined,

package/src/components/Explorer/helpers/useActions.ts

@@ -63,6 +63,7 @@ export const useActions = <T extends Data>({
 }: UseActionsProps<T>): UseActionsReturnType => {
   const bulkActionItems: PageHeaderJsActionProps[] = useMemo(
     () => [
+      ...(bulkEditAction ? [bulkEditAction] : []),
       ...(bulkActions ?? []).map((action) => ({
         ...action,
         onClick: async () => {
@@ -101,7 +102,6 @@ export const useActions = <T extends Data>({
           }
         },
       })),
-      ...(bulkEditAction ? [bulkEditAction] : []),
     ],
     [
       bulkActions,

package/src/components/PageHeader/PageHeader.stories.tsx

@@ -25,6 +25,13 @@ const headerActions: PageHeaderActionItemProps[] = [
 ];
 
 const bulkHeaderActions: PageHeaderActionProps[] = [
+  {
+    label: 'Bulk Edit',
+    actionType: PageHeaderActionType.Context,
+    icon: IconName.BulkEdit,
+    tag: 'BETA',
+    onClick: action('onActionSelected'),
+  },
   {
     label: 'Bulk Delete',
     actionType: PageHeaderActionType.Context,
@@ -67,6 +74,7 @@ const bulkHeaderActions: PageHeaderActionProps[] = [
     label: 'Bulk Action 4',
     confirmationMode: 'Simple',
     onClick: action('onActionSelected'),
+    tag: 'BETA',
   },
 ];
 

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.model.ts

@@ -48,4 +48,6 @@ interface BaseActionOptions {
   disabled?: boolean;
   /** Optional class */
   className?: string;
+  /** Optional tag to display in the action */
+  tag?: string;
 }

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.scss

@@ -163,4 +163,32 @@
 
     color: var(--actions-disabled-fg-color, $actions-disabled-fg-color);
   }
+
+  .tag {
+    position: absolute;
+    transform: rotate(45deg) translateX(53px) translateY(-40px);
+    transform-origin: center;
+    top: 0;
+    left: 0;
+    display: grid;
+    background-color: var(
+      --page-header-action-tag-background-color,
+      $page-header-action-tag-background-color
+    );
+    font-size: var(
+      --page-header-action-tag-font-size,
+      $page-header-action-tag-font-size
+    );
+    font-weight: bold;
+    width: 75px;
+    height: 14px;
+    align-items: center;
+    text-align: center;
+    z-index: 0;
+  }
+
+  &:has(.tag) {
+    position: relative;
+    overflow: hidden;
+  }
 }

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.spec.tsx

@@ -645,16 +645,6 @@ describe('PageHeaderAction', () => {
       const link = wrapper.find('Link');
       expect(link.prop('target')).toBeUndefined();
     });
-
-    it('renders with disabled class if disabled prop is true', () => {
-      const wrapper = mount(
-        <Router>
-          <PageHeaderAction {...defaultProps} path="/test" disabled />
-        </Router>,
-      );
-      const container = wrapper.find('.container').hostNodes();
-      expect(container.hasClass('disabled')).toBe(true);
-    });
   });
 });
 

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -69,6 +69,7 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
   disabled,
   className,
   onClick = noop,
+  tag,
 }) => {
   const [confirmation, setConfirmation] = useState<boolean>(false);
   const [referenceElement, setReferenceElement] = useState<HTMLElement>();
@@ -156,10 +157,10 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
             <span data-test-id="label">{label}</span>
           )}
         </div>
+        {tag && <div className={classes.tag}>{tag}</div>}
       </button>
       {confirmation && confirmationMode === 'Advanced' && (
         <ConfirmDialog
-          className={classes.confirmDialog}
           referenceElement={referenceElement}
           title={title}
           cancelButtonText={cancelButtonText}
@@ -185,12 +186,12 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
  */
 const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
   className,
-  disabled,
   icon,
   imgAlt,
   label,
   openInNewTab = false,
   path,
+  tag,
 }) => {
   const headerIcon = icon ? icon : openInNewTab ? IconName.External : undefined;
 
@@ -199,7 +200,6 @@ const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
       className={clsx(
         classes.container,
         'page-header-action-container',
-        { [classes.disabled]: disabled },
         className,
       )}
       data-test-id="action"
@@ -216,6 +216,7 @@ const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
       <div className={classes.label}>
         <span data-test-id="label">{label}</span>
       </div>
+      {tag && <div className={classes.tag}>{tag}</div>}
     </Link>
   );
 };

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

@@ -119,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;