Skip to content

Commit 1d8b257

Browse files
chore: remove deprecated AnalyticalCard component (#5887)
BREAKING CHANGE: The `AnalyticalCard` component has been removed. Please use the `Card` component instead. --------- Co-authored-by: Lukas Harbarth <[email protected]>
1 parent 7a27b7f commit 1d8b257

12 files changed

+383
-442
lines changed

.storybook/components/DocsHeader.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
11
import { Description, DocsContext, Subtitle, Title } from '@storybook/addon-docs';
22
import copyIcon from '@ui5/webcomponents-icons/dist/copy';
33
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
4-
import {
5-
Button,
6-
FlexBox,
7-
FlexBoxAlignItems,
8-
Label,
9-
Link,
10-
Text,
11-
ThemeProvider
12-
} from '@ui5/webcomponents-react';
4+
import { Button, FlexBox, FlexBoxAlignItems, Label, Link, Text, ThemeProvider } from '@ui5/webcomponents-react';
135
import { clsx } from 'clsx';
146
import { useContext } from 'react';
157
import { useGetSubComponentsOfModule } from '../utils';

docs/MigrationGuide.archive.md

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,249 @@
11
# Migration Guide Archive for older versions
22

3+
## From 0.28.x to 1.0.1
4+
5+
### Removal of deprecated props
6+
7+
The following props were deprecated in previous versions and have now been removed.
8+
9+
**ActionSheet**
10+
11+
The prop `alwaysShowHeader` has been removed as is not specified by the Fiori Design Guidelines. <br />
12+
In addition, the `a11yConfig.actionSheetMobileContent.ariaLabel` has been removed as well. You can use the `accessibleName` prop as replacement.
13+
14+
**AnalyticalTable**
15+
16+
The props `onRowSelected` and `onColumnsReordered` have been removed in favor for a more streamlined naming pattern. <br />
17+
Please use the new prop names `onRowSelect` and `onColumnsReorder`.
18+
19+
**DynamicPageTitle**
20+
21+
The props `actionsOverflowButton` and `navigationActionsOverflowButton` have been removed. <br />
22+
If needed, you can pass a custom overflow button for the respective toolbar by using the `actionsToolbarProps={{ overflowButton: <Button />}}` and `navigationActionsToolbarProps={{ overflowButton: <Button />}}` props.
23+
24+
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 />
25+
Please use `onOverflowChange` of the respective toolbar props object instead (`actionsToolbarProps={{ onOverflowChange: yourHandler }}` and `navigationActionsToolbarProps={{ onOverflowChange: yourHandlerForNavigationActions }}`).
26+
27+
### FilterBar: implement new design specification
28+
29+
The Design for the `FilterBar` component had some major updates, so we've updated the component accordingly.
30+
One of these changes is, that the optional search field (passed via the `search` prop), is no longer available in the `Filters` dialog.
31+
32+
**The following props are removed without replacement as they are no longer specified by the design:**
33+
34+
- `showClearButton`
35+
- `showGo`
36+
- `onFiltersDialogClear`
37+
- `showSearchOnFiltersDialog`
38+
- `loading` <br />
39+
In order to place a loading indicator on the `FilterBar`, please wrap it into the `BusyIndicator` component.
40+
41+
**The following props have been renamed without further modifications:**
42+
43+
- `variant` --> `header`
44+
- `showRestoreButton` --> `showResetButton`
45+
46+
**The following props have been renamed and changed their logic for a more streamlined API:**
47+
48+
- `filterBarExpanded` --> `filterBarCollapsed` <br />
49+
Previously, `filterBarExpanded` was defaulted to `true`. This prop has been replaced by `filterBarCollapsed` (inactive by default).
50+
- `showFilterConfiguration` --> `hideFilterConfiguration` <br />
51+
Previously, `showFilterConfiguration` was defaulted to `true`. This prop has been replaced by `hideFilterConfiguration` (inactive by default).
52+
- `useToolbar` --> `hideToolbar` <br />
53+
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}`.
54+
55+
**The following event handlers have changed their payload:**
56+
57+
- `onFiltersDialogSelectionChange` <br />
58+
The event type changed to `UI5CustomEvent` and the properties `elements` and `toggledElements` have been removed. <br />
59+
You can now use `element` to access the most recently interacted row and `checked` to get the current selection state.
60+
If you need to access all selected rows, you can use the `selectedRows` property.
61+
- `onRestore` and `onClear` <br />
62+
The `dialogSearch` property has been removed from the event payload as the search field in the dialog is no longer available.
63+
- `onGo` <br />
64+
The `toggledElements` property has been removed
65+
- `onFiltersDialogOpen` <br />
66+
The property `dialog` has been removed. If you need to access the filter dialog HTML element, you might use the new prop `onAfterFiltersDialogOpen`
67+
on the `FilterBar` which is fired after the filter dialog has been opened.
68+
69+
**Migration Example (removed props and event handlers are not listed for brevity):**
70+
71+
```jsx
72+
// component with 0.28.x
73+
<FilterBar
74+
variant={<Title>Header</Title>}
75+
showRestoreButton
76+
filterBarExpanded={false}
77+
showFilterConfiguration={false}
78+
useToolbar={false}
79+
/>
80+
81+
// becomes with 1.0.0
82+
<FilterBar
83+
header={<Title>Header</Title>}
84+
showResetButton
85+
filterBarCollapsed
86+
hideFilterConfiguration
87+
hideToolbar
88+
/>
89+
```
90+
91+
### VariantManagement: removed option to show the "Cancel" button
92+
93+
The "Cancel" button is not part of the design guidelines anymore, so the prop `showCancelButton` has been removed without replacement.
94+
95+
## From 0.27.x to 0.28.0
96+
97+
### AnalyticalTable: Scaling the table
98+
99+
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`.
100+
101+
Before 0.28.0:
102+
103+
```jsx
104+
<div style={{ transform: 'scale(0.5)' }}>
105+
<AnalyticalTable data={data} columns={columns} />
106+
</div>
107+
```
108+
109+
Now:
110+
111+
```jsx
112+
<div style={{ transform: 'scale(0.5)' }}>
113+
<AnalyticalTable data={data} columns={columns} scaleXFactor={0.5} />
114+
</div>
115+
```
116+
117+
### MessageItem: new default value for `type`
118+
119+
The default value `type` value of the `MessageItem` component has been changed from `ValueState.None` to `ValueState.Error`.
120+
121+
### ObjectPage: `portalContainer` prop removed
122+
123+
The prop `portalContainer` has been removed from the `ObjectPage` as it is not used anymore.
124+
125+
## From 0.25.x to 0.26.0
126+
127+
### Removed deprecated entrypoints
128+
129+
In version 0.26.0, we have removed several legacy exports which have been deprecated a couple of months ago.
130+
This affects all exports using the following pattern:
131+
132+
```js
133+
import { COMPONENT_NAME } from '@ui5/webcomponents-react/dist/COMPONENT_NAME';
134+
import { UTIL_NAME } from '@ui5/webcomponents-react-base/dist/UTIL_NAME';
135+
import { CHART_NAME } from '@ui5/webcomponents-react-charts/dist/CHART_NAME';
136+
```
137+
138+
You can now shorten all your imports by removing the `/dist/NAME` part to match the following pattern:
139+
140+
```js
141+
import { COMPONENT_NAME } from '@ui5/webcomponents-react';
142+
import { UTIL_NAME } from '@ui5/webcomponents-react-base';
143+
import { CHART_NAME } from '@ui5/webcomponents-react-charts';
144+
```
145+
146+
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).
147+
148+
### Removed polyfills
149+
150+
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).
151+
As a consequence, the internal dependencies of `@ui5/webcomponents-react-base` are cleaned up as well,
152+
so you'll most likely need to install `resize-observer-polyfill` on your own for running tests with Jest (see next section).
153+
154+
```shell
155+
npm install resize-observer-polyfill --save-dev
156+
# or if you are using yarn
157+
yarn add resize-observer-polyfill --dev
158+
```
159+
160+
### Improved Jest Setup
161+
162+
In order to run Tests with Jest, there has always been the need of adding additional polyfills to the Jest environment.
163+
With 0.26.0, things are changing a little:
164+
165+
1. You have to install `resize-observer-polyfill` on your own because it's not longer a dependency of `@ui5/webcomponents-react-base`.
166+
167+
```
168+
npm install resize-observer-polyfill --save-dev
169+
```
170+
171+
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
172+
jest environment for you. You can import it via `import '@ui5/webcomponents-react/jestSetup.js';`.
173+
174+
If you are using `create-react-app`, your simplified `src/setupTests.js` file looks like:
175+
176+
```js
177+
import ResizeObserverPolyfill from 'resize-observer-polyfill';
178+
import '@ui5/webcomponents-react/jestSetup.js';
179+
180+
window.ResizeObserver = ResizeObserverPolyfill;
181+
```
182+
183+
### New API for `AnalyticalCardHeader`
184+
185+
The `AnalyticalCardHeader` component has been refactored to match the latest design specifications.
186+
As a consequence, the API has changed:
187+
188+
```jsx
189+
function OldApi() {
190+
return (
191+
<AnalyticalCardHeader
192+
titleText="Title"
193+
subtitleText="Subtitle"
194+
arrowIndicator={DeviationIndicator.Up} // renamed to `trend`
195+
showIndicator={true} // removed, please use `trend={DeviationIndicator.None}` in future
196+
indicatorState={ValueState.Error} // removed without replacement
197+
value="100"
198+
unit="k" // renamed to `scale`
199+
valueState={ValueState.Success} // renamed to `state`, allowed enum values coming from `ValueColor`
200+
target="100" // replaced with `children`. Use the `NumericSideIndicator` component.
201+
deviation="50" // replaced with `children`. Use the `NumericSideIndicator` component.
202+
description="Additional Description"
203+
counter="Hello Counter" // renamed to `status`
204+
counterState={ValueState.Error} // removed without replacement
205+
currency="CURRENCY" // renamed to `unitOfMeasurement`
206+
onClick={(e) => {}}
207+
/>
208+
);
209+
}
210+
211+
// will become
212+
213+
function NewAPI() {
214+
return (
215+
<AnalyticalCardHeader
216+
titleText="Title"
217+
subtitleText="Subtitle"
218+
trend={DeviationIndicator.Up}
219+
value="100"
220+
scale="k"
221+
state={ValueColor.Good}
222+
description="Additional Description"
223+
status="Hello Counter"
224+
unitOfMeasurement="CURRENCY"
225+
onClick={(e) => {}}
226+
>
227+
<NumericSideIndicator titleText="Target" number="100" />
228+
<NumericSideIndicator titleText="Deviation" number="50" />
229+
</AnalyticalCardHeader>
230+
);
231+
}
232+
```
233+
234+
## From 0.23.x to 0.24.0
235+
236+
- 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`.)
237+
- The deprecated `useConsolidatedRef` hook has been removed, please use `useSyncRef` instead.
238+
- The deprecated `StyleClassHelper` class has been removed, please use `clsx` instead or implement your own `className` constructor.
239+
240+
## From 0.21.x to 0.22.0
241+
242+
**useI18nBundle:** The `useI18nBundle` hook must now be used in the context of the `ThemeProvider`.
243+
244+
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.
245+
Otherwise, translatable components will likely not render.
246+
3247
## From 0.19.x to 0.20.0
4248

5249
### Changed TypeScript `interfaces` for `ref`

0 commit comments

Comments
 (0)