From eb1fd64d228779f4326fdd531f5098a22320a213 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Wed, 3 Jul 2024 09:39:22 +0200 Subject: [PATCH 1/6] refactor(FilterGroupItem): api alignment BREAKING CHANGE: For a better aligned API, the `visible` and `visibleInFilterBar` (default: `true`) props have been replaced with `hidden` and `hideInFilterBar` (default: `false`). --- docs/MigrationGuide.mdx | 103 +++++++++++++----- .../scripts/codemod/transforms/v2/main.cts | 38 +++++++ .../src/components/FilterGroupItem/index.tsx | 6 +- .../src/components/FilterGroupItem/types.ts | 11 +- 4 files changed, 119 insertions(+), 39 deletions(-) diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx index 6c2cb91d4d1..5a2fd5a29ba 100644 --- a/docs/MigrationGuide.mdx +++ b/docs/MigrationGuide.mdx @@ -347,35 +347,6 @@ function MyComponent() { } ``` -### MessageBox - -- `onClose` is now a plain callback function and no `CustomEvent` anymore. It receives two parameters, `action` and `escPressed`. - -```jsx -// v1 -// onClose?: (event: CustomEvent<{ action: MessageBoxAction }>) => void; - - { - console.log(event.detail.action); - }} -> - {children} - - -// v2 -// onClose?: (action: MessageBoxActionType | undefined, escPressed?: true) => void; - - { - console.log(action, escPressed); - }} -> - {children} - - -``` - ### ObjectPage The newly introduced `DynamicPage` web component comes with its own `DynamicPageHeader` and `DynamicPageTitle` components, which are unfortunately incompatible with our `ObjectPage` implementation. @@ -457,6 +428,80 @@ The prop `portalContainer` has been removed as it is no longer needed due to the As the underlying `Text` component has been replaced with the UI5 Web Component, some inherited props `hyphenated` and `emptyIndicator` from the `Text` component have been removed. You can follow this [feature request](https://github.com/SAP/ui5-webcomponents/issues/9244) for updates. +### FilterGroupItem + +For a better aligned API, the `visible` and `visibleInFilterBar` (defaulted to `true)` props has been replaced with `hidden` and `hideInFilterBar` (`false` by default). +You only need to apply changes to your code if `visible` or `visibleInFilterBar` have been set to `false`: + +```tsx +// v1 +import { FilterBar, FilterGroupItem, Input } from '@ui5/webcomponents-react'; + +function MyComponent() { + return ( + + + + + + + + + + + + ); +} + +// v2 +import { FilterBar, FilterGroupItem, Input } from '@ui5/webcomponents-react'; + +function MyComponent() { + return ( + + + + + + + + + + ); +} +``` + +### MessageBox + +- `onClose` is now a plain callback function and no `CustomEvent` anymore. It receives two parameters, `action` and `escPressed`. + +```jsx +// v1 +// onClose?: (event: CustomEvent<{ action: MessageBoxAction }>) => void; + + { + console.log(event.detail.action); + }} +> + {children} + + +// v2 +// onClose?: (action: MessageBoxActionType | undefined, escPressed?: true) => void; + + { + console.log(action, escPressed); + }} +> + {children} + + +``` + ## Enum Changes For a better alignment with the UI5 Web Components, the following enums have been renamed: diff --git a/packages/cli/src/scripts/codemod/transforms/v2/main.cts b/packages/cli/src/scripts/codemod/transforms/v2/main.cts index 16d1f7bba8a..0701d082851 100644 --- a/packages/cli/src/scripts/codemod/transforms/v2/main.cts +++ b/packages/cli/src/scripts/codemod/transforms/v2/main.cts @@ -237,6 +237,44 @@ export default function transform(file: FileInfo, api: API, options?: Options): }); } + if (componentName === 'FilterGroupItem') { + jsxElements.forEach((el) => { + const visible = j(el).find(j.JSXAttribute, { name: { name: 'visible' } }); + if (visible.size() > 0) { + const attr = visible.get(); + if ( + attr.value.value && + ((attr.value.value.type === 'JSXAttribute' && attr.value.value === false) || + (attr.value.value.type === 'JSXExpressionContainer' && attr.value.value.expression.value === false)) + ) { + j(el) + .find(j.JSXOpeningElement) + .get() + .value.attributes.push(j.jsxAttribute(j.jsxIdentifier('hidden'), null)); + } + visible.remove(); + isDirty = true; + } + + const visibleInFilterBar = j(el).find(j.JSXAttribute, { name: { name: 'visibleInFilterBar' } }); + if (visibleInFilterBar.size() > 0) { + const attr = visibleInFilterBar.get(); + if ( + attr.value.value && + ((attr.value.value.type === 'JSXAttribute' && attr.value.value === false) || + (attr.value.value.type === 'JSXExpressionContainer' && attr.value.value.expression.value === false)) + ) { + j(el) + .find(j.JSXOpeningElement) + .get() + .value.attributes.push(j.jsxAttribute(j.jsxIdentifier('hideInFilterBar'), null)); + } + visibleInFilterBar.remove(); + isDirty = true; + } + }); + } + if (componentName === 'Icon') { jsxElements.forEach((el) => { const interactive = j(el).find(j.JSXAttribute, { name: { name: 'interactive' } }); diff --git a/packages/main/src/components/FilterGroupItem/index.tsx b/packages/main/src/components/FilterGroupItem/index.tsx index 65a307b5e87..adb46fe4293 100644 --- a/packages/main/src/components/FilterGroupItem/index.tsx +++ b/packages/main/src/components/FilterGroupItem/index.tsx @@ -55,8 +55,8 @@ const FilterGroupItem = forwardRef