@axinom/mosaic-ui 0.49.0-rc.0 → 0.49.0-rc.10

package/src/components/List/ListRow/ListRow.tsx

@@ -212,7 +212,11 @@ export const ListRow = <T extends Data>({
             column.tooltip !== false ? getTooltipText(columnData) : undefined
           }
           data-test-id={`list-entry-property:${column.propertyName as string}`}
-          style={{ justifySelf: column.horizontalColumnAlign }}
+          style={{
+            justifySelf: column.horizontalColumnAlign, // Horizontal alignment based on column config
+            alignSelf: verticalTextAlign, // Vertical alignment based on props
+            textAlign: horizontalTextAlign, // Additional text alignment inside the cell
+          }}
         >
           {columnData}
         </div>

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

@@ -1,4 +1,5 @@
 import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
+import { PageHeaderActionsGroupProps } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
 
 export interface PageHeaderProps {
   /** Title shown in page header */
@@ -6,20 +7,17 @@ export interface PageHeaderProps {
   /** Subtitle shown in page header */
   subtitle?: string;
   /** Array of actions to be rendered. (default: []) */
-  actions?: PageHeaderActionProps[];
-  /** Array of Bulk Actions to be rendered. If populated, Bulk Actions will become available. (default: []) */
-  bulkActions?: PageHeaderActionProps[];
-  /** Whether or bulk actions are shown by default. (default: false) */
-  openBulkActionsOnStart?: boolean;
-  /** Whether or not bulk actions are disabled (default: false)*/
-  bulkActionsDisabled?: boolean;
-  /**
-   * Callback to emit when Bulk Actions is toggled
-   * The expanded state is supplied as an argument
-   */
-  onBulkActionsToggled?: (expanded: boolean) => void;
+  actions?: PageHeaderActionItemProps[];
   /** CSS Class name for additional styles */
   className?: string;
   /** Update the tab title using the 'title' field. (default: true) */
   setTabTitle?: boolean;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface PageHeaderSpacerProps {}
+
+export type PageHeaderActionItemProps =
+  | (PageHeaderSpacerProps & { kind: 'spacer' })
+  | (PageHeaderActionProps & { kind: 'action' })
+  | (PageHeaderActionsGroupProps & { kind: 'group' });

package/src/components/PageHeader/PageHeader.scss

@@ -5,7 +5,7 @@
 
   height: $page-header-height;
   display: grid;
-  grid-template-columns: minmax(min-content, 1fr) max-content max-content;
+  grid-template-columns: minmax(30%, 1fr) auto;
   grid-template-rows: 1fr;
 
   @media only screen and (min-width: $XL-min-size) {
@@ -52,9 +52,13 @@
 
   .actions {
     display: grid;
-    grid-template-rows: 1fr;
     grid-auto-flow: column;
+    grid-auto-columns: minmax(0, min-content);
     grid-gap: 1px;
-    justify-items: end;
+  }
+
+  .spacer {
+    display: grid;
+    width: 8px;
   }
 }

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

@@ -1,10 +1,11 @@
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 import React from 'react';
 import { noop } from '../../helpers/utils';
 import { PageHeader } from './PageHeader';
+import { PageHeaderActionItemProps } from './PageHeader.model';
+import { PageHeaderActionProps } from './PageHeaderAction';
 import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
-import { PageHeaderActionProps } from './PageHeaderAction/PageHeaderAction.model';
-import { PageHeaderBulkActions } from './PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
 
 jest.mock('../../hooks/useTabTitle/useTabTitle');
 
@@ -40,96 +41,37 @@ describe('PageHeader', () => {
   });
 
   it(`renders actions`, () => {
-    const wrapper = shallow(<PageHeader actions={defaultbulkActions} />);
+    const wrapper = shallow(
+      <PageHeader actions={[{ ...defaultbulkActions[0], kind: 'action' }]} />,
+    );
 
     const action = wrapper.find(PageHeaderAction);
     expect(action.exists()).toBe(true);
   });
 
-  it(`adds a 10px left margin to the actions container as a spacer when actions are present`, () => {
-    const wrapper = shallow(<PageHeader actions={defaultbulkActions} />);
-
-    const actionsContainer = wrapper
-      .find('.actions')
-      .prop('style') as React.CSSProperties;
-
-    expect(actionsContainer.marginLeft).toBe('10px');
-  });
-
-  it(`does not add a 10px left margin to the actions container when no actions are present`, () => {
-    const wrapper = shallow(<PageHeader />);
-
-    const actionsContainer = wrapper
-      .find('.actions')
-      .prop('style') as React.CSSProperties;
-
-    expect(actionsContainer.marginLeft).toBeUndefined();
-  });
-
-  it(`does not render 'PageHeaderBulkActions' if bulkActions prop is empty`, () => {
-    const wrapper = mount(<PageHeader />);
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.exists()).toBe(false);
-  });
-
-  it(`renders 'PageHeaderBulkActions' if bulkActions prop is populated`, () => {
-    const wrapper = mount(<PageHeader bulkActions={defaultbulkActions} />);
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.exists()).toBe(true);
-  });
-
-  it('raises onBulkActionsToggled', () => {
-    const spy = jest.fn();
-
-    const wrapper = mount(
-      <PageHeader
-        bulkActions={defaultbulkActions}
-        onBulkActionsToggled={spy}
-      />,
-    );
-
-    const bulkActionsToggle = wrapper.find(PageHeaderAction).first();
-    bulkActionsToggle.simulate('click');
-    expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith(true);
-  });
-
-  it(`bulk actions should not be disabled by default`, () => {
-    const spy = jest.fn();
-
-    const wrapper = shallow(
-      <PageHeader
-        bulkActions={defaultbulkActions}
-        onBulkActionsToggled={spy}
-      />,
-    );
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.prop('bulkActionsDisabled')).toBe(false);
+  it(`renders actions groups`, () => {
+    const actions: PageHeaderActionItemProps[] = [
+      {
+        label: 'Bulk Actions',
+        kind: 'group',
+        actions: defaultbulkActions,
+      },
+    ];
+    const wrapper = shallow(<PageHeader actions={actions} />);
+
+    const action = wrapper.find(PageHeaderActionsGroup);
+    expect(action.exists()).toBe(true);
   });
 
-  it(`disables bulk actions if 'bulkActionsDisabled' prop is set to true`, () => {
-    const spy = jest.fn();
+  it('renders spacers', () => {
+    const actions: PageHeaderActionItemProps[] = [
+      {
+        kind: 'spacer',
+      },
+    ];
+    const wrapper = shallow(<PageHeader actions={actions} />);
 
-    const wrapper = shallow(
-      <PageHeader
-        bulkActions={defaultbulkActions}
-        onBulkActionsToggled={spy}
-        bulkActionsDisabled={true}
-      />,
-    );
-
-    const bulkActions = wrapper.find(PageHeaderBulkActions);
-
-    expect(bulkActions.prop('bulkActionsDisabled')).toBe(true);
+    const spacer = wrapper.find('.spacer');
+    expect(spacer.exists()).toBe(true);
   });
-
-  it.todo('calculates the available space needed for bulk actions');
-
-  it.todo('should not calcuate if there are no bulk actions');
 });

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

@@ -2,21 +2,24 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { IconName } from '../Icons';
 import { PageHeader } from './PageHeader';
+import { PageHeaderActionItemProps } from './PageHeader.model';
 import {
   PageHeaderActionProps,
   PageHeaderActionType,
 } from './PageHeaderAction';
 import {} from './PageHeaderAction/PageHeaderAction';
 
-const headerActions: PageHeaderActionProps[] = [
+const headerActions: PageHeaderActionItemProps[] = [
   {
     label: 'Undo',
     icon: IconName.Undo,
+    kind: 'action',
     onClick: action('onActionSelected'),
   },
   {
     label: 'Cancel',
     icon: IconName.X,
+    kind: 'action',
     onClick: action('onActionSelected'),
   },
 ];
@@ -101,7 +104,7 @@ export const Actions: StoryObj<typeof PageHeader> = {
   },
 };
 
-export const BulkActions: StoryObj<typeof PageHeader> = {
+export const ActionsGroup: StoryObj<typeof PageHeader> = {
   parameters: {
     docs: {
       description: {
@@ -113,13 +116,19 @@ export const BulkActions: StoryObj<typeof PageHeader> = {
   args: {
     title: 'Title',
     subtitle: 'Subtitle',
-    bulkActions: bulkHeaderActions,
-    openBulkActionsOnStart: false,
+    actions: [
+      {
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkHeaderActions,
+      },
+    ],
   },
 };
 
 export const All: StoryObj<typeof PageHeader> = {
-  name: 'Titles, Bulk Actions, & Actions',
+  name: 'Titles, Actions, & Actions Groups',
   parameters: {
     docs: {
       description: {
@@ -131,7 +140,23 @@ export const All: StoryObj<typeof PageHeader> = {
   args: {
     title: 'Title',
     subtitle: 'Subtitle',
-    actions: headerActions,
-    bulkActions: bulkHeaderActions,
+    actions: [
+      ...headerActions,
+      { kind: 'spacer' },
+      {
+        label: 'Bulk Actions',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: bulkHeaderActions,
+        onActionsGroupToggled: action('onBulkActions1Toggled'),
+      },
+      {
+        label: 'Bulk Actions 2',
+        icon: IconName.Bulk,
+        kind: 'group',
+        actions: [bulkHeaderActions[0]],
+        onActionsGroupToggled: action('onBulkActions2Toggled'),
+      },
+    ],
   },
 };

package/src/components/PageHeader/PageHeader.tsx

@@ -1,90 +1,57 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
-import { noop } from '../../helpers/utils';
+import React from 'react';
 import { useTabTitle } from '../../hooks/useTabTitle/useTabTitle';
 import { useWindowSize } from '../../hooks/useWindowSize/useWindowSize';
 import { PageHeaderProps } from './PageHeader.model';
 import classes from './PageHeader.scss';
+import { PageHeaderActionProps } from './PageHeaderAction';
 import { PageHeaderAction } from './PageHeaderAction/PageHeaderAction';
-import { PageHeaderBulkActions } from './PageHeaderBulkActions/PageHeaderBulkActions';
+import { PageHeaderActionsGroup } from './PageHeaderActionsGroup/PageHeaderActionsGroup';
+import { PageHeaderActionsGroupContextProvider } from './PageHeaderActionsGroup/PageHeaderActionsGroupsContextProvider';
 
 /**
- * Primary header for stations. Accepts a title, subtitle, actions, and bulk actions.
+ * Primary header for stations. Accepts a title, subtitle, actions, and actions groups.
  * @example
- * <PageHeader title="title" subtitle="subtitle" />
+ * <PageHeader title="title" subtitle="subtitle" actions={[
+ *  { label: 'Undo', icon: IconName.Undo, kind: 'action', onClick: onActionSelected },
+ *  { label: 'Cancel', icon: IconName.X, kind: 'action' onClick: onActionSelected },
+ *  { kind: 'spacer' },
+ *  { label: 'Actions Group', kind: 'group', actions: [
+ *    { label: 'Action 1', actionType: PageHeaderActionType.Context, icon: IconName.Delete, confirmationMode: 'Advanced', onClick: onActionSelected },
+ *  ]}
+ * ]} />
  */
 export const PageHeader: React.FC<PageHeaderProps> = ({
   title = '',
   subtitle = '',
   actions = [],
-  bulkActions = [],
-  bulkActionsDisabled = false,
-  openBulkActionsOnStart = false,
-  onBulkActionsToggled = noop,
   className = '',
   setTabTitle = true,
 }) => {
-  const [containerScrollWidth, setContainerScrollWidth] = useState<number>(0);
-  const [childrenScrollWidth, setChildrenScrollWidth] = useState<number>(0);
-  const [availableActionSpace, setAvailableActionSpace] = useState<number>(0);
-  const ActionsWidth = 120;
-  const { width } = useWindowSize();
-
-  // Order of this useEffect hook is important
-  useEffect(() => {
-    setContainerScrollWidth(width);
-  }, [width]);
-
-  const actionsRef = (node: HTMLDivElement): void => {
-    if (node !== null) {
-      setChildrenScrollWidth(node.scrollWidth);
-    }
-  };
-
   useTabTitle(title, setTabTitle);
+  const { width } = useWindowSize();
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    // only perform calculation if there are bulkActions
-    if (bulkActions.length > 0) {
-      const minimumTitleWidth = width >= 1920 ? 510 : 120;
-      const availableWidth: number =
-        containerScrollWidth - (minimumTitleWidth + childrenScrollWidth);
+  const [availableActionSpace, setAvailableActionSpace] =
+    React.useState<number>(0);
 
-      const bulkActionSpace = 1;
-      const moreActionSpace = 1;
+  React.useEffect(() => {
+    if (containerRef.current) {
+      // Use up to 75% of the container width for actions
+      const maxActionsWidth = containerRef.current.clientWidth * 0.75;
 
-      // calculates the number of bulk action spaces available
-      let currentAvailableActionSpace: number = Math.floor(
-        availableWidth / ActionsWidth - bulkActionSpace,
+      // Each action is 120px wide
+      setAvailableActionSpace(
+        Math.floor(maxActionsWidth / 120 - actions.length),
       );
-
-      // determines if the 'more' action will take up an action slot
-      if (bulkActions.length > currentAvailableActionSpace) {
-        currentAvailableActionSpace -= moreActionSpace;
-      }
-
-      // prevents current available space from going negative
-      if (currentAvailableActionSpace < 0) {
-        currentAvailableActionSpace = 0;
-      }
-
-      // update available action space if the currentAvailableActionSpace has changed
-      if (currentAvailableActionSpace !== availableActionSpace) {
-        setAvailableActionSpace(currentAvailableActionSpace);
-      }
     }
-  }, [
-    bulkActions,
-    availableActionSpace,
-    childrenScrollWidth,
-    containerScrollWidth,
-    width,
-  ]);
+  }, [width, actions.length]);
 
   return (
     <div
       className={clsx(classes.container, 'page-header-container', className)}
       data-test-id="page-header"
+      ref={containerRef}
     >
       <div className={clsx(classes.titles)}>
         <div className={clsx(classes.title)} data-test-id="page-header-title">
@@ -98,24 +65,30 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
           {subtitle}
         </div>
       </div>
-      {bulkActions.length > 0 && (
-        <PageHeaderBulkActions
-          availableActionSpace={availableActionSpace}
-          actions={bulkActions}
-          openBulkActionsOnStart={openBulkActionsOnStart}
-          onBulkActionsToggled={onBulkActionsToggled}
-          bulkActionsDisabled={bulkActionsDisabled}
-        />
-      )}
-      <div
-        className={clsx(classes.actions)}
-        style={{ marginLeft: actions.length > 0 ? '10px' : undefined }}
-        ref={actionsRef}
-        data-test-id="page-header-actions"
-      >
-        {actions.map((action, index) => {
-          return <PageHeaderAction key={index} {...action} />;
-        })}
+      <div className={classes.actions} data-test-id="page-header-actions">
+        <PageHeaderActionsGroupContextProvider>
+          {actions.map((action, index) => {
+            switch (action.kind) {
+              case 'group':
+                return (
+                  <PageHeaderActionsGroup
+                    key={index}
+                    {...action}
+                    availableActionSpace={availableActionSpace}
+                  />
+                );
+              case 'spacer':
+                return <div key={index} className={classes.spacer} />;
+              case 'action':
+                return (
+                  <PageHeaderAction
+                    key={index}
+                    {...(action as PageHeaderActionProps)}
+                  />
+                );
+            }
+          })}
+        </PageHeaderActionsGroupContextProvider>
       </div>
     </div>
   );

package/src/components/PageHeader/{PageHeaderBulkActions/PageHeaderBulkActions.scss → PageHeaderActionsGroup/PageHeaderActionsGroup.scss}

@@ -2,36 +2,36 @@
 
 .container {
   display: grid;
-  grid-template-rows: 1fr;
-  grid-auto-flow: column;
+  grid-template-rows: $page-header-height 1fr;
+  grid-template-columns: max-content 1fr;
   grid-gap: 1px;
   justify-content: end;
+  width: max-content;
 
-  .hasMore {
-    width: 120px;
+  .actions {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-
-    position: relative;
+    grid-auto-flow: column;
+    grid-gap: 1px;
+    transition: max-width 200ms linear, opacity 150ms linear;
+    overflow: hidden;
+  }
 
-    .dropDownList {
-      width: 360px;
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-auto-rows: 60px;
-      grid-gap: 1px;
+  .dropDownList {
+    width: 100%;
+    max-width: 360px;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: 60px;
+    grid-gap: 1px;
 
-      border-top: 2px solid white;
+    border-top: 2px solid white;
 
-      position: absolute;
-      top: $page-header-height;
-      right: 0px;
+    grid-column: 1 / span 2;
+    place-self: end;
 
-      background-color: white;
+    background-color: white;
 
-      z-index: 2;
-    }
+    z-index: 2;
   }
 }
 

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

@@ -0,0 +1,105 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { noop } from '../../../helpers/utils';
+import { PageHeaderAction } from '../PageHeaderAction/PageHeaderAction';
+import {
+  PageHeaderActionProps,
+  PageHeaderActionType,
+} from '../PageHeaderAction/PageHeaderAction.model';
+import {
+  PageHeaderActionsGroup,
+  PageHeaderActionsGroupProps,
+} from './PageHeaderActionsGroup';
+
+jest.mock('../../../utils/GenerateId', () => ({
+  uuid: jest.fn().mockReturnValue('test-uuid'),
+}));
+
+const defaultActions: PageHeaderActionProps[] = [
+  {
+    label: 'Group Action 1',
+    onClick: noop,
+  },
+  {
+    label: 'Group Action 2',
+    onClick: noop,
+  },
+  {
+    label: 'Group Action 3',
+    onClick: noop,
+  },
+  {
+    label: 'Group Action 4',
+    onClick: noop,
+  },
+];
+
+const defaultProps: PageHeaderActionsGroupProps = {
+  label: 'Group Actions',
+  actions: defaultActions,
+};
+
+describe('PageHeaderActionsGroup', () => {
+  it('renders the component without crashing', () => {
+    const wrapper = shallow(<PageHeaderActionsGroup {...defaultProps} />);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it(`'Group Actions' has the 'Context' actionType when closed and 'Active' actionType when open`, () => {
+    const wrapper = mount(<PageHeaderActionsGroup {...defaultProps} />);
+    let groupActionsToggle = wrapper.find(PageHeaderAction).first();
+    // let action = wrapper.find(PageHeaderAction);
+
+    expect(groupActionsToggle.prop('actionType')).toBe(
+      PageHeaderActionType.Context,
+    );
+
+    groupActionsToggle.simulate('click');
+
+    groupActionsToggle = wrapper.find(PageHeaderAction).first();
+
+    expect(groupActionsToggle.prop('actionType')).toBe(
+      PageHeaderActionType.Active,
+    );
+  });
+
+  it(`renders all actions when 'Group Actions' is selected and there is enough available action slots`, () => {
+    const wrapper = mount(
+      <PageHeaderActionsGroup {...defaultProps} availableActionSpace={5} />,
+    );
+    const groupActionsToggle = wrapper.find(PageHeaderAction).first();
+    let actions = wrapper.find(PageHeaderAction);
+
+    groupActionsToggle.simulate('click');
+    actions = wrapper.find(PageHeaderAction);
+    expect(actions).toHaveLength(5);
+  });
+
+  it(`raises onActionsGroupToggled`, () => {
+    const groupActionSpy = jest.fn();
+    const wrapper = mount(
+      <PageHeaderActionsGroup
+        {...defaultProps}
+        onActionsGroupToggled={groupActionSpy}
+      />,
+    );
+    const groupActionsToggle = wrapper.find(PageHeaderAction).first();
+    groupActionsToggle.simulate('click');
+    expect(groupActionSpy).toHaveBeenCalledTimes(1);
+    expect(groupActionSpy).toHaveBeenCalledWith(true);
+  });
+
+  it(`renders 'Group Actions' and 'More Actions' if openActionsGroupOnStart is set to true and there isn't enough available space`, () => {
+    const wrapper = mount(
+      <PageHeaderActionsGroup
+        {...defaultProps}
+        openActionsGroupOnStart={true}
+        availableActionSpace={3}
+      />,
+    );
+
+    const actions = wrapper.find(PageHeaderAction);
+
+    expect(actions).toHaveLength(4);
+  });
+});