|
1 | 1 | # Migration Guide Archive for older versions
|
2 | 2 |
|
| 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 | + |
3 | 247 | ## From 0.19.x to 0.20.0
|
4 | 248 |
|
5 | 249 | ### Changed TypeScript `interfaces` for `ref`
|
|
0 commit comments