Merge branch 'main' into feat/fb-clear-all

Author: Lukas742

packages/main/scripts/generateI18n.mjs

@@ -55,16 +55,24 @@ spawnSync('npx', ['prettier', '--write', path.resolve(SRC_I18N_PROPERTIES, 'i18n
   stdio: [0, 1, 2],
 });
 
-// generate Assets.js
+// generate Assets.js and Assets-fetch.js
 const jsonImports = await readdir(TARGET_I18N_JSON_IMPORTS);
 
 const assets = [`import '@ui5/webcomponents/dist/Assets.js';`, `import '@ui5/webcomponents-fiori/dist/Assets.js';`];
+const assetsFetch = [
+  `import '@ui5/webcomponents/dist/Assets-fetch.js';`,
+  `import '@ui5/webcomponents-fiori/dist/Assets-fetch.js';`,
+];
+const assetsNode = [
+  `import '@ui5/webcomponents/dist/Assets-node.js';`,
+  `import '@ui5/webcomponents-fiori/dist/Assets-node.js';`,
+];
 
 for (const file of jsonImports) {
   if (file.includes('-fetch')) {
-    //todo: add to Assets-fetch.js
+    assetsFetch.push(`import './json-imports/${file}';`);
   } else if (file.includes('-node')) {
-    //todo: add to Assets-node.js
+    assetsNode.push(`import './json-imports/${file}';`);
   } else {
     assets.push(`import './json-imports/${file}';`);
   }
@@ -74,3 +82,13 @@ await writeFile(
   path.resolve(DIST_DIR, 'Assets.js'),
   await prettier.format(assets.join('\n'), { ...prettierConfig, parser: 'babel' }),
 );
+
+await writeFile(
+  path.resolve(DIST_DIR, 'Assets-fetch.js'),
+  await prettier.format(assetsFetch.join('\n'), { ...prettierConfig, parser: 'babel' }),
+);
+
+await writeFile(
+  path.resolve(DIST_DIR, 'Assets-node.js'),
+  await prettier.format(assetsNode.join('\n'), { ...prettierConfig, parser: 'babel' }),
+);

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -1539,7 +1539,16 @@ describe('AnalyticalTable', () => {
       'opacity',
       '0.4',
     );
+    cy.mount(<AnalyticalTable data={[]} columns={columns} loading loadingDelay={0} alwaysShowBusyIndicator />);
+    cy.get('[data-component-name="AnalyticalTableLoadingPlaceholder"]').should('not.exist');
+    cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('be.visible');
+    cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class*="busyIndicator"])').should(
+      'have.css',
+      'opacity',
+      '0.4',
+    );
     cy.mount(<AnalyticalTable data={data} columns={columns} loading />);
+    cy.get('[data-component-name="AnalyticalTableLoadingPlaceholder"]').should('not.exist');
     cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('be.visible');
     cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class*="busyIndicator"])').should(
       'have.css',

packages/main/src/components/AnalyticalTable/index.tsx

@@ -107,8 +107,9 @@ const measureElement = (el: HTMLElement) => {
  */
 const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTypes>((props, ref) => {
   const {
-    alternateRowColor,
     adjustTableHeightOnPopIn,
+    alternateRowColor,
+    alwaysShowBusyIndicator,
     className,
     columnOrder,
     columns,
@@ -749,7 +750,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           className={classNames.tableContainerWithScrollBar}
           data-component-name="AnalyticalTableContainerWithScrollbar"
         >
-          {loading && !!rows.length && (
+          {loading && (!!rows.length || alwaysShowBusyIndicator) && (
             <BusyIndicator
               className={classNames.busyIndicator}
               active={true}
@@ -816,7 +817,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                 tabIndex={0}
                 className={classNames.noDataContainer}
               >
-                {loading ? (
+                {loading && !alwaysShowBusyIndicator ? (
                   <TablePlaceholder
                     columns={visibleColumns}
                     rows={minRows}

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -707,7 +707,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
   /**
    * Indicates whether a loading indicator should be shown.
    *
-   * __Note:__ If the data array is not empty and loading is set to `true` a `BusyIndicator` will be displayed on top of the table, otherwise a skeleton placeholder will be shown.
+   * __Note:__ If the data array is not empty and loading is set to `true` a `BusyIndicator` will be displayed on top of the table, otherwise a skeleton placeholder will be shown. You can control this behavior via the `alwaysShowBusyIndicator` prop.
    */
   loading?: boolean;
   /**
@@ -720,6 +720,10 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * Setting this prop to `true` will show an overlay on top of the AnalyticalTable content preventing users from interacting with it.
    */
   showOverlay?: boolean;
+  /**
+   * If `true`, always shows the `BusyIndicator` component when loading instead of the skeleton loader.
+   */
+  alwaysShowBusyIndicator?: boolean;
   /**
    * Defines the text shown if the data array is empty or a filtered table doesn't return results.
    *

packages/main/src/components/ObjectPage/ObjectPage.stories.tsx

@@ -1,6 +1,7 @@
 import '@ui5/webcomponents-fiori/dist/illustrations/UnableToLoad.js';
 import SampleImage from '@sb/demoImages/Person.png';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
@@ -59,6 +60,7 @@ const meta = {
     imageShapeCircle: true,
     image: SampleImage,
     style: { height: '700px', maxHeight: '90vh' },
+    onToggleHeaderArea: fn(),
     footerArea: (
       <Bar
         design={BarDesign.FloatingFooter}
@@ -73,7 +75,9 @@ const meta = {
     titleArea: (
       <ObjectPageTitle
         header={<Title level="H2">Denise Smith</Title>}
+        snappedHeader={<Title level="H2">Denise Smith (snapped header)</Title>}
         subHeader="Senior UI Developer"
+        snappedSubHeader={'Senior UI Developer (snapped header)'}
         actionsBar={
           <Toolbar design="Transparent">
             <ToolbarButton design={ButtonDesign.Emphasized} text="Primary Action" />

packages/main/src/components/ObjectPageTitle/ObjectPageTitle.cy.tsx

@@ -129,4 +129,62 @@ describe('ObjectPageTitle', () => {
       cy.findByTestId('expandedContent').should('not.exist');
     });
   });
+
+  [
+    { snappedHeader: 'Snapped Header', header: 'Header' },
+    { snappedHeader: undefined, header: 'Header' },
+    { snappedHeader: undefined, header: undefined },
+    { snappedHeader: 'Snapped Header', header: undefined },
+  ].forEach(({ snappedHeader, header }) => {
+    const titleParts = [];
+    if (snappedHeader) {
+      titleParts.push('snappedHeader');
+    }
+    if (header) {
+      titleParts.push('header');
+    }
+    const title = titleParts.length ? titleParts.join(' & ') : 'no headers';
+
+    it(`renders with ${title}`, () => {
+      cy.mount(
+        <PageComponent
+          childrenScrollable
+          pageProps={{
+            headerArea: (
+              <ObjectPageHeader key="headerContent" style={{ height: '100px', background: 'lightblue' }}>
+                Header Section
+              </ObjectPageHeader>
+            ),
+            style: { height: '800px' },
+          }}
+          titleProps={{
+            snappedHeader,
+            header,
+          }}
+        />,
+      );
+
+      // not snapped - always show header
+      cy.findByText('Snapped Header').should('not.exist');
+      if (header) {
+        cy.findByText('Header').should('exist');
+      } else {
+        cy.findByText('Header').should('not.exist');
+      }
+
+      cy.findByTestId('page').scrollTo('bottom');
+
+      // snapped - show snapped header if defined otherwise show header
+      if (snappedHeader) {
+        cy.findByText('Snapped Header').should('exist');
+        cy.findByText('Header').should('not.exist');
+      } else if (header) {
+        cy.findByText('Snapped Header').should('not.exist');
+        cy.findByText('Header').should('exist');
+      } else {
+        cy.findByText('Snapped Header').should('not.exist');
+        cy.findByText('Header').should('not.exist');
+      }
+    });
+  });
 });

packages/main/src/components/ObjectPageTitle/index.tsx

@@ -28,6 +28,8 @@ const ObjectPageTitle = forwardRef<HTMLDivElement, ObjectPageTitlePropTypes>((pr
     onToggleHeaderContentVisibility,
     expandedContent,
     snappedContent,
+    snappedHeader,
+    snappedSubHeader,
     _snappedAvatar,
     ...rest
   } = props as InternalProps;
@@ -41,6 +43,8 @@ const ObjectPageTitle = forwardRef<HTMLDivElement, ObjectPageTitlePropTypes>((pr
   );
   const containerClasses = clsx(classNames.container, isPhone && classNames.phone, className);
   const toolbarContainerRef = useRef<HTMLDivElement>(null);
+  const _header = !props?.['data-header-content-visible'] && snappedHeader ? snappedHeader : header;
+  const _subHeader = !props?.['data-header-content-visible'] && snappedSubHeader ? snappedSubHeader : subHeader;
 
   useEffect(() => {
     isMounted.current = true;
@@ -157,9 +161,9 @@ const ObjectPageTitle = forwardRef<HTMLDivElement, ObjectPageTitlePropTypes>((pr
             data-component-name="ObjectPageTitleMiddleSection"
           >
             <FlexBox className={classNames.titleMainSection} onClick={onHeaderClick}>
-              {header && (
+              {_header && (
                 <div className={classNames.title} data-component-name="ObjectPageTitleHeader">
-                  {header}
+                  {_header}
                 </div>
               )}
               {children && (
@@ -182,13 +186,13 @@ const ObjectPageTitle = forwardRef<HTMLDivElement, ObjectPageTitlePropTypes>((pr
               </div>
             )}
           </FlexBox>
-          {subHeader && (
+          {_subHeader && (
             <FlexBox id="sub">
               <div
                 className={clsx(classNames.subTitle, classNames.subTitleBottom)}
                 data-component-name="ObjectPageTitleSubHeader"
               >
-                {subHeader}
+                {_subHeader}
               </div>
             </FlexBox>
           )}

packages/main/src/components/ObjectPageTitle/types/index.ts

@@ -23,15 +23,33 @@ export interface ObjectPageTitlePropTypes extends CommonProps {
   children?: ReactNode | ReactNode[];
 
   /**
-   * The `header` is positioned in the `ObjectPageTitle` left area.
-   * Use this prop to display a `Title` (or any other component that serves as a heading).
+   * The `header` is displayed in the left area of the `ObjectPageTitle`.
+   * Use this prop to render a `Title` or any other component that serves as a heading.
+   *
+   * __Note:__ If the header is snapped (collapsed), the `snappedHeader` prop is used instead (if defined).
    */
   header?: ReactNode;
   /**
-   * The `subHeader` is positioned in the `ObjectPageTitle` left area below the `header`.
-   * Use this aggregation to display a component like `Label` or any other component that serves as sub header.
+   * The `snappedHeader` is displayed in the left area of the `ObjectPageTitle` when the header is snapped (collapsed).
+   * Use this prop to render a `Title` or any other component that serves as a heading in the snapped view.
+   *
+   * @since 2.12.0
+   */
+  snappedHeader?: ReactNode;
+  /**
+   * The `subHeader` is displayed in the left area of the `ObjectPageTitle`, below the `header`.
+   * Use this prop to render a `Label` or any other component that serves as a sub-header.
+   *
+   * __Note:__ If the header is snapped (collapsed), the `snappedSubHeader` prop is used instead (if defined).
    */
   subHeader?: ReactNode;
+  /**
+   * The `snappedSubHeader` is displayed in the left area of the `ObjectPageTitle` when the header is snapped (collapsed).
+   * Use this prop to render a `Label` or any other component that serves as a sub-header in the snapped view.
+   *
+   * @since 2.12.0
+   */
+  snappedSubHeader?: ReactNode;
   /**
    * Defines navigation-actions bar of the `ObjectPageTitle`.
    *

packages/main/src/components/VariantManagement/VariantManagement.cy.tsx

@@ -393,7 +393,6 @@ describe('VariantManagement', () => {
       const [saved, setSaved] = useState(undefined);
       const handleSaveAs: VariantManagementPropTypes['onSaveAs'] = (e) => {
         onSaveAs(e);
-        console.log(e.detail);
         const { variantItem: _0, children, global, isDefault, nativeDetail, selected, applyAutomatically } = e.detail;
         setSaved({ nativeDetail, selected, children, isDefault, global, applyAutomatically });
       };