Merge 6f1e059 into dba28ce

package.json

@@ -44,8 +44,8 @@
     "@ui5/webcomponents-compat": "2.0.0-rc.6",
     "@ui5/webcomponents-fiori": "2.0.0-rc.6",
     "@ui5/webcomponents-icons": "2.0.0-rc.6",
-    "react": "19.0.0-rc-c21bcd627b-20240624",
-    "react-dom": "19.0.0-rc-c21bcd627b-20240624",
+    "react": "18",
+    "react-dom": "18",
     "remark-gfm": "^4.0.0",
     "tocbot": "4.28.2"
   },

packages/charts/src/internal/ChartContainer.module.css

@@ -3,11 +3,23 @@
   color: var(--sapTextColor);
   font-family: var(--sapFontFamily);
   width: 100%;
-  /*todo remove in v2*/
   height: 400px;
+  min-height: fit-content;
   position: relative;
 }
 
+.loading {
+  opacity: 0.4;
+}
+
+.busyIndicator {
+  /* todo: clarify if we want to use the block layer variable of ui5wc or our own approach*/
+  /*background: var(--_ui5_busy_indicator_block_layer);*/
+  position: absolute;
+  inset: 0;
+  height: 100%;
+}
+
 :global(.has-click-handler) {
   :global(.recharts-pie-sector),
   :global(.recharts-bar-rectangles),

packages/charts/src/internal/ChartContainer.tsx

@@ -1,11 +1,28 @@
-import { type CommonProps, Label, Loader } from '@ui5/webcomponents-react';
+import { BusyIndicator, Label } from '@ui5/webcomponents-react';
+import type { CommonProps } from '@ui5/webcomponents-react';
 import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ComponentType, CSSProperties, ReactElement, ReactNode } from 'react';
+import type { ComponentType, ReactElement, ReactNode } from 'react';
 import { Component, forwardRef } from 'react';
 import { ResponsiveContainer } from 'recharts';
+// todo: same issue as with Loader import
+// import { addCustomCSSWithScoping } from '@ui5/webcomponents-react/dist/internal/addCustomCSSWithScoping.js';
+import { addCustomCSSWithScoping } from '../../../main/src/internal/addCustomCSSWithScoping.js';
 import { classNames, styleData } from './ChartContainer.module.css.js';
 
+//todo: add feature request for parts or even a fix if this turns out to be a bug
+addCustomCSSWithScoping(
+  'ui5-busy-indicator',
+  `
+:host([data-component-name="ChartContainerBusyIndicator"]) .ui5-busy-indicator-busy-area{
+    background:unset;
+},
+:host([data-component-name="ChartContainerBusyIndicator"]) .ui5-busy-indicator-busy-area:focus {
+    border-radius: 0;
+}
+`
+);
+
 export interface ContainerProps extends CommonProps {
   children: ReactElement;
   Placeholder?: ComponentType;
@@ -14,13 +31,6 @@ export interface ContainerProps extends CommonProps {
   resizeDebounce: number;
 }
 
-const loaderStyles: CSSProperties = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0
-};
-
 class ErrorBoundary extends Component<{ children: ReactNode }, { errorCount: number }> {
   state = {
     errorCount: 0
@@ -49,9 +59,18 @@ const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) =
     <div ref={ref} className={clsx(classNames.container, className)} slot={slot} {...rest}>
       {dataset?.length > 0 ? (
         <>
-          {loading && <Loader style={loaderStyles} />}
+          {/*todo replace with BusyIndicator*/}
+          {loading && (
+            <BusyIndicator
+              active
+              className={classNames.busyIndicator}
+              data-component-name="ChartContainerBusyIndicator"
+            />
+          )}
           <ErrorBoundary>
-            <ResponsiveContainer debounce={resizeDebounce}>{children}</ResponsiveContainer>
+            <ResponsiveContainer debounce={resizeDebounce} className={loading && classNames.loading}>
+              {children}
+            </ResponsiveContainer>
           </ErrorBoundary>
         </>
       ) : (

packages/compat/src/components/Loader/Loader.cy.tsx

@@ -1,9 +1,8 @@
+import { LoaderType } from '../../enums/index.js';
+import { Loader } from './index.js';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
-import type { LoaderType } from '@/packages/main';
-import { Loader } from '@/packages/main';
 
-// skip until component is moved to this package
-describe.skip('Loader', () => {
+describe('Loader', () => {
   it('indeterminate', () => {
     cy.mount(<Loader data-testid="loader" />);
     cy.findByTestId('loader').should('have.css', 'animation-duration', '1.2s');

packages/compat/src/components/Loader/Loader.module.css

@@ -1,3 +1,41 @@
-.dummy {
-  background-color: red;
+.loader {
+  position: relative;
+  height: 0.25rem;
+  width: 100%;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--sapContent_BusyColor);
+    opacity: 0.15;
+  }
+
+  &.loaderDeterminate {
+    background: linear-gradient(to right, var(--sapContent_BusyColor), var(--sapContent_BusyColor)) repeat-y;
+  }
+
+  &.loaderIndeterminate {
+    background-size: 40%;
+    background: linear-gradient(
+        to right,
+        transparent 0px,
+        var(--sapContent_BusyColor) calc(50% - 2rem),
+        var(--sapContent_BusyColor) calc(50% + 2rem),
+        transparent 100%
+      )
+      repeat-y;
+    animation: scroll 1.2s linear infinite;
+  }
+}
+
+@keyframes scroll {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
 }

packages/main/src/components/Loader/Loader.stories.tsx → packages/compat/src/components/Loader/Loader.stories.tsx

@@ -1,22 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import activateIcon from '@ui5/webcomponents-icons/dist/activate.js';
+import { Card, CardHeader, FlexBox, FlexBoxDirection, Icon, Text } from '@ui5/webcomponents-react';
 import { useEffect, useRef, useState } from 'react';
-import { FlexBoxDirection, LoaderType } from '../../enums/index.js';
-import { Card } from '../../webComponents/Card/index.js';
-import { CardHeader } from '../../webComponents/CardHeader/index.js';
-import { Icon } from '../../webComponents/Icon/index.js';
-import { Text } from '../../webComponents/Text/index.js';
-import { FlexBox } from '../FlexBox/index.js';
+import { LoaderType } from '../../enums/LoaderType.js';
 import { Loader } from './index.js';
 
 const meta = {
-  title: 'User Feedback / Loader',
+  title: 'Loader',
   component: Loader,
   argTypes: {},
   args: {
     type: LoaderType.Indeterminate,
     progress: '60%'
-  }
+  },
+  tags: ['package:@ui5/webcomponents-compat']
 } satisfies Meta<typeof Loader>;
 
 export default meta;

packages/main/src/components/Loader/index.tsx → packages/compat/src/components/Loader/index.tsx

@@ -1,12 +1,14 @@
 'use client';
 
+import type { CommonProps } from '@ui5/webcomponents-react';
 import { deprecationNotice, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
 import { forwardRef, useEffect, useState } from 'react';
-import { LoaderType } from '../../enums/index.js';
-import { PLEASE_WAIT } from '../../i18n/i18n-defaults.js';
-import type { CommonProps } from '../../types/index.js';
+// todo: sb won't start with this (maybe because of vite.config alias paths?)
+// import { PLEASE_WAIT } from '@ui5/webcomponents-react/dist/i18n/i18n-defaults.js';
+import { PLEASE_WAIT } from '../../../../main/src/i18n/i18n-defaults.js';
+import { LoaderType } from '../../enums/LoaderType.js';
 import { classNames, styleData } from './Loader.module.css.js';
 
 export interface LoaderPropTypes extends CommonProps {
@@ -35,12 +37,10 @@ export interface LoaderPropTypes extends CommonProps {
 }
 
 /**
- * The `Loader` signals that an operation is currently being executed. It uses as little space as possible to allow the user to interact with the UI.<br />
- * It can be used to signal a data update on an already existing dataset, or where an expansion will happen.
- *
- * __Note:__ This component is __deprecated__ and will be removed with our next major release (v2.0.0)! Please use the [BusyIndicator](https://sap.github.io/ui5-webcomponents-react/?path=/docs/user-feedback-busyindicator--docs) instead.
+ * __Note__: There is no longer a concept of a Loader component defined by the UX guidelines! To indicate a loading state, please use the `BusyIndicator` instead. For backwards compatibility, the Loader is still available in the `@ui5/webcomponents-react-compat` package, but it may lack accessibility features and no longer receives feature updates.
  *
- * @deprecated This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the [BusyIndicator](https://sap.github.io/ui5-webcomponents-react/?path=/docs/user-feedback-busyindicator--docs) instead.
+ * The `Loader` signals that an operation is currently being executed. It uses as little space as possible to allow the user to interact with the UI.
+ * It can be used to signal a data update on an already existing dataset, or where an expansion will happen.
  */
 const Loader = forwardRef<HTMLDivElement, LoaderPropTypes>((props, ref) => {
   const { className, type = LoaderType.Indeterminate, progress = '0px', slot, style, delay = 0, ...rest } = props;

packages/compat/src/index.ts

@@ -3,3 +3,6 @@ export * from './components/TableCell/index.js';
 export * from './components/TableColumn/index.js';
 export * from './components/TableGroupRow/index.js';
 export * from './components/TableRow/index.js';
+export * from './components/Loader/index.js';
+
+export { LoaderType } from './enums/LoaderType.js';

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

@@ -1438,7 +1438,7 @@ describe('AnalyticalTable', () => {
     cy.mount(<AnalyticalTable data={[]} columns={columns} loading />);
     cy.get('[data-component-name="AnalyticalTableLoadingPlaceholder"]').should('be.visible');
     cy.mount(<AnalyticalTable data={data} columns={columns} loading />);
-    cy.get('[data-component-name="Loader"]').should('be.visible');
+    cy.get('[data-component-name="AnalyticalTableBusyIndicator"]').should('be.visible');
     cy.mount(<AnalyticalTable data={[]} columns={columns} />);
     cy.findByText('No data').should('be.visible');
     cy.mount(<AnalyticalTable data={data} columns={columns} filterable globalFilterValue="test123" />);