Skip to content

chore: remove deprecated AnalyticalCard component #5887

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jun 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 1 addition & 9 deletions .storybook/components/DocsHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
import { Description, DocsContext, Subtitle, Title } from '@storybook/addon-docs';
import copyIcon from '@ui5/webcomponents-icons/dist/copy';
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
import {
Button,
FlexBox,
FlexBoxAlignItems,
Label,
Link,
Text,
ThemeProvider
} from '@ui5/webcomponents-react';
import { Button, FlexBox, FlexBoxAlignItems, Label, Link, Text, ThemeProvider } from '@ui5/webcomponents-react';
import { clsx } from 'clsx';
import { useContext } from 'react';
import { useGetSubComponentsOfModule } from '../utils';
Expand Down
244 changes: 244 additions & 0 deletions docs/MigrationGuide.archive.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,249 @@
# Migration Guide Archive for older versions

## From 0.28.x to 1.0.1

### Removal of deprecated props

The following props were deprecated in previous versions and have now been removed.

**ActionSheet**

The prop `alwaysShowHeader` has been removed as is not specified by the Fiori Design Guidelines. <br />
In addition, the `a11yConfig.actionSheetMobileContent.ariaLabel` has been removed as well. You can use the `accessibleName` prop as replacement.

**AnalyticalTable**

The props `onRowSelected` and `onColumnsReordered` have been removed in favor for a more streamlined naming pattern. <br />
Please use the new prop names `onRowSelect` and `onColumnsReorder`.

**DynamicPageTitle**

The props `actionsOverflowButton` and `navigationActionsOverflowButton` have been removed. <br />
If needed, you can pass a custom overflow button for the respective toolbar by using the `actionsToolbarProps={{ overflowButton: <Button />}}` and `navigationActionsToolbarProps={{ overflowButton: <Button />}}` props.

In addition, the `onToolbarOverflowChange` event has been removed as well. Previously, this event contained a property `origin` with the value of `actions` or `navigationActions` in order to distinguish between the toolbars. <br />
Please use `onOverflowChange` of the respective toolbar props object instead (`actionsToolbarProps={{ onOverflowChange: yourHandler }}` and `navigationActionsToolbarProps={{ onOverflowChange: yourHandlerForNavigationActions }}`).

### FilterBar: implement new design specification

The Design for the `FilterBar` component had some major updates, so we've updated the component accordingly.
One of these changes is, that the optional search field (passed via the `search` prop), is no longer available in the `Filters` dialog.

**The following props are removed without replacement as they are no longer specified by the design:**

- `showClearButton`
- `showGo`
- `onFiltersDialogClear`
- `showSearchOnFiltersDialog`
- `loading` <br />
In order to place a loading indicator on the `FilterBar`, please wrap it into the `BusyIndicator` component.

**The following props have been renamed without further modifications:**

- `variant` --> `header`
- `showRestoreButton` --> `showResetButton`

**The following props have been renamed and changed their logic for a more streamlined API:**

- `filterBarExpanded` --> `filterBarCollapsed` <br />
Previously, `filterBarExpanded` was defaulted to `true`. This prop has been replaced by `filterBarCollapsed` (inactive by default).
- `showFilterConfiguration` --> `hideFilterConfiguration` <br />
Previously, `showFilterConfiguration` was defaulted to `true`. This prop has been replaced by `hideFilterConfiguration` (inactive by default).
- `useToolbar` --> `hideToolbar` <br />
If you wanted to hide the toolbar of the `FilterBar`, you could set the prop `useToolbar` to `false` in earlier versions. This prop has been replaced by `hideToolbar={true}`.

**The following event handlers have changed their payload:**

- `onFiltersDialogSelectionChange` <br />
The event type changed to `UI5CustomEvent` and the properties `elements` and `toggledElements` have been removed. <br />
You can now use `element` to access the most recently interacted row and `checked` to get the current selection state.
If you need to access all selected rows, you can use the `selectedRows` property.
- `onRestore` and `onClear` <br />
The `dialogSearch` property has been removed from the event payload as the search field in the dialog is no longer available.
- `onGo` <br />
The `toggledElements` property has been removed
- `onFiltersDialogOpen` <br />
The property `dialog` has been removed. If you need to access the filter dialog HTML element, you might use the new prop `onAfterFiltersDialogOpen`
on the `FilterBar` which is fired after the filter dialog has been opened.

**Migration Example (removed props and event handlers are not listed for brevity):**

```jsx
// component with 0.28.x
<FilterBar
variant={<Title>Header</Title>}
showRestoreButton
filterBarExpanded={false}
showFilterConfiguration={false}
useToolbar={false}
/>

// becomes with 1.0.0
<FilterBar
header={<Title>Header</Title>}
showResetButton
filterBarCollapsed
hideFilterConfiguration
hideToolbar
/>
```

### VariantManagement: removed option to show the "Cancel" button

The "Cancel" button is not part of the design guidelines anymore, so the prop `showCancelButton` has been removed without replacement.

## From 0.27.x to 0.28.0

### AnalyticalTable: Scaling the table

Scaling the table via the CSS `scale()` function is now only supported if the abscissa (`sx`) is passed to the `scaleXFactor` prop. `scaleXFactor` only accepts values of type `number`.

Before 0.28.0:

```jsx
<div style={{ transform: 'scale(0.5)' }}>
<AnalyticalTable data={data} columns={columns} />
</div>
```

Now:

```jsx
<div style={{ transform: 'scale(0.5)' }}>
<AnalyticalTable data={data} columns={columns} scaleXFactor={0.5} />
</div>
```

### MessageItem: new default value for `type`

The default value `type` value of the `MessageItem` component has been changed from `ValueState.None` to `ValueState.Error`.

### ObjectPage: `portalContainer` prop removed

The prop `portalContainer` has been removed from the `ObjectPage` as it is not used anymore.

## From 0.25.x to 0.26.0

### Removed deprecated entrypoints

In version 0.26.0, we have removed several legacy exports which have been deprecated a couple of months ago.
This affects all exports using the following pattern:

```js
import { COMPONENT_NAME } from '@ui5/webcomponents-react/dist/COMPONENT_NAME';
import { UTIL_NAME } from '@ui5/webcomponents-react-base/dist/UTIL_NAME';
import { CHART_NAME } from '@ui5/webcomponents-react-charts/dist/CHART_NAME';
```

You can now shorten all your imports by removing the `/dist/NAME` part to match the following pattern:

```js
import { COMPONENT_NAME } from '@ui5/webcomponents-react';
import { UTIL_NAME } from '@ui5/webcomponents-react-base';
import { CHART_NAME } from '@ui5/webcomponents-react-charts';
```

In case the file you are trying to import is not available, please raise an [issue](https://github.com/SAP/ui5-webcomponents-react/issues/new?labels=bug&template=bug_report.md).

### Removed polyfills

In 0.26.0, we have removed the polyfill imports `@ui5/webcomponents-react-base/polyfill/Safari` (all features supported now) and `@ui5/webcomponents-react-base/polyfill/IE11` (end of life).
As a consequence, the internal dependencies of `@ui5/webcomponents-react-base` are cleaned up as well,
so you'll most likely need to install `resize-observer-polyfill` on your own for running tests with Jest (see next section).

```shell
npm install resize-observer-polyfill --save-dev
# or if you are using yarn
yarn add resize-observer-polyfill --dev
```

### Improved Jest Setup

In order to run Tests with Jest, there has always been the need of adding additional polyfills to the Jest environment.
With 0.26.0, things are changing a little:

1. You have to install `resize-observer-polyfill` on your own because it's not longer a dependency of `@ui5/webcomponents-react-base`.

```
npm install resize-observer-polyfill --save-dev
```

2. We now offer an improved way of adding the additional APIs to the Jest environment by exposing a file which is setting up the
jest environment for you. You can import it via `import '@ui5/webcomponents-react/jestSetup.js';`.

If you are using `create-react-app`, your simplified `src/setupTests.js` file looks like:

```js
import ResizeObserverPolyfill from 'resize-observer-polyfill';
import '@ui5/webcomponents-react/jestSetup.js';

window.ResizeObserver = ResizeObserverPolyfill;
```

### New API for `AnalyticalCardHeader`

The `AnalyticalCardHeader` component has been refactored to match the latest design specifications.
As a consequence, the API has changed:

```jsx
function OldApi() {
return (
<AnalyticalCardHeader
titleText="Title"
subtitleText="Subtitle"
arrowIndicator={DeviationIndicator.Up} // renamed to `trend`
showIndicator={true} // removed, please use `trend={DeviationIndicator.None}` in future
indicatorState={ValueState.Error} // removed without replacement
value="100"
unit="k" // renamed to `scale`
valueState={ValueState.Success} // renamed to `state`, allowed enum values coming from `ValueColor`
target="100" // replaced with `children`. Use the `NumericSideIndicator` component.
deviation="50" // replaced with `children`. Use the `NumericSideIndicator` component.
description="Additional Description"
counter="Hello Counter" // renamed to `status`
counterState={ValueState.Error} // removed without replacement
currency="CURRENCY" // renamed to `unitOfMeasurement`
onClick={(e) => {}}
/>
);
}

// will become

function NewAPI() {
return (
<AnalyticalCardHeader
titleText="Title"
subtitleText="Subtitle"
trend={DeviationIndicator.Up}
value="100"
scale="k"
state={ValueColor.Good}
description="Additional Description"
status="Hello Counter"
unitOfMeasurement="CURRENCY"
onClick={(e) => {}}
>
<NumericSideIndicator titleText="Target" number="100" />
<NumericSideIndicator titleText="Deviation" number="50" />
</AnalyticalCardHeader>
);
}
```

## From 0.23.x to 0.24.0

- The deprecated `tooltip` prop has been removed, please use the native `title` attribute instead. (This does not remove the `tooltip` prop of the `Button`, `ToggleButton` or `SegmentedButtonItem`.)
- The deprecated `useConsolidatedRef` hook has been removed, please use `useSyncRef` instead.
- The deprecated `StyleClassHelper` class has been removed, please use `clsx` instead or implement your own `className` constructor.

## From 0.21.x to 0.22.0

**useI18nBundle:** The `useI18nBundle` hook must now be used in the context of the `ThemeProvider`.

You will not need to change anything in your app's code base, since all components should already be wrapped by the `ThemeProvider`, but now you have to make sure that even your test components are wrapped inside of it.
Otherwise, translatable components will likely not render.

## From 0.19.x to 0.20.0

### Changed TypeScript `interfaces` for `ref`
Expand Down
Loading
Loading