Skip to content

Commit 0e6a326

Browse files
MarcusNotheisMarcusNotheis
authoredJul 5, 2024··
refactor(FilterGroupItem): api alignment (#6012)
BREAKING CHANGE: For a better aligned API, the `visible` and `visibleInFilterBar` (default: `true`) props have been replaced with `hidden` and `hiddenInFilterBar` (no default value).
·
v2.8.1v2.0.0-rc.0
1 parent 0018bba commit 0e6a326

File tree

9 files changed

+158
-72
lines changed

9 files changed

+158
-72
lines changed
 

‎docs/MigrationGuide.mdx

+74-29
Original file line numberDiff line numberDiff line change
@@ -347,35 +347,6 @@ function MyComponent() {
347347
}
348348
```
349349

350-
### MessageBox
351-
352-
- `onClose` is now a plain callback function and no `CustomEvent` anymore. It receives two parameters, `action` and `escPressed`.
353-
354-
```jsx
355-
// v1
356-
// onClose?: (event: CustomEvent<{ action: MessageBoxAction }>) => void;
357-
358-
<MessageBox
359-
onClose={(event) => {
360-
console.log(event.detail.action);
361-
}}
362-
>
363-
{children}
364-
</MessageBox>
365-
366-
// v2
367-
// onClose?: (action: MessageBoxActionType | undefined, escPressed?: true) => void;
368-
369-
<MessageBox
370-
onClose={(action, escPressed) => {
371-
console.log(action, escPressed);
372-
}}
373-
>
374-
{children}
375-
</MessageBox>
376-
377-
```
378-
379350
### ObjectPage
380351

381352
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
457428
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.
458429
You can follow this [feature request](https://github.com/SAP/ui5-webcomponents/issues/9244) for updates.
459430

431+
### FilterGroupItem
432+
433+
For a better aligned API, the `visible` and `visibleInFilterBar` (defaulted to `true)` props has been replaced with `hidden` and `hiddenInFilterBar` (no default value).
434+
You only need to apply changes to your code if `visible` or `visibleInFilterBar` have been set to `false`:
435+
436+
```tsx
437+
// v1
438+
import { FilterBar, FilterGroupItem, Input } from '@ui5/webcomponents-react';
439+
440+
function MyComponent() {
441+
return (
442+
<FilterBar>
443+
<FilterGroupItem visible={false}>
444+
<Input />
445+
</FilterGroupItem>
446+
<FilterGroupItem visibleInFilterBar={false}>
447+
<Input />
448+
</FilterGroupItem>
449+
<FilterGroupItem>
450+
<Input />
451+
</FilterGroupItem>
452+
</FilterBar>
453+
);
454+
}
455+
456+
// v2
457+
import { FilterBar, FilterGroupItem, Input } from '@ui5/webcomponents-react';
458+
459+
function MyComponent() {
460+
return (
461+
<FilterBar>
462+
<FilterGroupItem hidden>
463+
<Input />
464+
</FilterGroupItem>
465+
<FilterGroupItem hiddenInFilterBar>
466+
<Input />
467+
</FilterGroupItem>
468+
<FilterGroupItem>
469+
<Input />
470+
</FilterGroupItem>
471+
</FilterBar>
472+
);
473+
}
474+
```
475+
476+
### MessageBox
477+
478+
- `onClose` is now a plain callback function and no `CustomEvent` anymore. It receives two parameters, `action` and `escPressed`.
479+
480+
```jsx
481+
// v1
482+
// onClose?: (event: CustomEvent<{ action: MessageBoxAction }>) => void;
483+
484+
<MessageBox
485+
onClose={(event) => {
486+
console.log(event.detail.action);
487+
}}
488+
>
489+
{children}
490+
</MessageBox>
491+
492+
// v2
493+
// onClose?: (action: MessageBoxActionType | undefined, escPressed?: true) => void;
494+
495+
<MessageBox
496+
onClose={(action, escPressed) => {
497+
console.log(action, escPressed);
498+
}}
499+
>
500+
{children}
501+
</MessageBox>
502+
503+
```
504+
460505
### ObjectPageSection
461506

462507
The prop `titleText` is now required and the default value `true` has been removed for the `titleTextUppercase` prop to comply with the updated Fiori design guidelines.

‎packages/cli/src/scripts/codemod/transforms/v2/main.cts

+38
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,44 @@ export default function transform(file: FileInfo, api: API, options?: Options):
237237
});
238238
}
239239

240+
if (componentName === 'FilterGroupItem') {
241+
jsxElements.forEach((el) => {
242+
const visible = j(el).find(j.JSXAttribute, { name: { name: 'visible' } });
243+
if (visible.size() > 0) {
244+
const attr = visible.get();
245+
if (
246+
attr.value.value &&
247+
((attr.value.value.type === 'JSXAttribute' && attr.value.value === false) ||
248+
(attr.value.value.type === 'JSXExpressionContainer' && attr.value.value.expression.value === false))
249+
) {
250+
j(el)
251+
.find(j.JSXOpeningElement)
252+
.get()
253+
.value.attributes.push(j.jsxAttribute(j.jsxIdentifier('hidden'), null));
254+
}
255+
visible.remove();
256+
isDirty = true;
257+
}
258+
259+
const visibleInFilterBar = j(el).find(j.JSXAttribute, { name: { name: 'visibleInFilterBar' } });
260+
if (visibleInFilterBar.size() > 0) {
261+
const attr = visibleInFilterBar.get();
262+
if (
263+
attr.value.value &&
264+
((attr.value.value.type === 'JSXAttribute' && attr.value.value === false) ||
265+
(attr.value.value.type === 'JSXExpressionContainer' && attr.value.value.expression.value === false))
266+
) {
267+
j(el)
268+
.find(j.JSXOpeningElement)
269+
.get()
270+
.value.attributes.push(j.jsxAttribute(j.jsxIdentifier('hiddenInFilterBar'), null));
271+
}
272+
visibleInFilterBar.remove();
273+
isDirty = true;
274+
}
275+
});
276+
}
277+
240278
if (componentName === 'Icon') {
241279
jsxElements.forEach((el) => {
242280
const interactive = j(el).find(j.JSXAttribute, { name: { name: 'interactive' } });

‎packages/main/src/components/FilterBar/FilterBar.cy.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -632,34 +632,34 @@ describe.skip('FilterBar.cy.tsx', () => {
632632
cy.get('div[data-order-id]').eq(4).find('[ui5-label]').should('have.text', 'RatingIndicator');
633633
});
634634

635-
it('visible & visibleInFilterBar', () => {
635+
it('hidden & hiddenInFilterBar', () => {
636636
cy.mount(
637637
<FilterBar>
638638
<FilterGroupItem label="undefined">
639639
<StepInput />
640640
</FilterGroupItem>
641-
<FilterGroupItem label="false" visible={false}>
641+
<FilterGroupItem label="false" hidden>
642642
<StepInput />
643643
</FilterGroupItem>
644-
<FilterGroupItem label="true" visible>
644+
<FilterGroupItem label="true" hidden={false}>
645645
<StepInput />
646646
</FilterGroupItem>
647647
<FilterGroupItem label="undefined undefined">
648648
<StepInput />
649649
</FilterGroupItem>
650-
<FilterGroupItem label="false false" visible={false} visibleInFilterBar={false}>
650+
<FilterGroupItem label="false false" hidden hiddenInFilterBar>
651651
<StepInput />
652652
</FilterGroupItem>
653-
<FilterGroupItem label="true true" visible visibleInFilterBar>
653+
<FilterGroupItem label="true true">
654654
<StepInput />
655655
</FilterGroupItem>
656-
<FilterGroupItem label="true false" visible visibleInFilterBar={false}>
656+
<FilterGroupItem label="true false" hiddenInFilterBar>
657657
<StepInput />
658658
</FilterGroupItem>
659-
<FilterGroupItem label="undefined true" visible visibleInFilterBar={true}>
659+
<FilterGroupItem label="undefined true" hiddenInFilterBar={false}>
660660
<StepInput />
661661
</FilterGroupItem>
662-
<FilterGroupItem label="undefined false" visible visibleInFilterBar={false}>
662+
<FilterGroupItem label="undefined false" hiddenInFilterBar>
663663
<StepInput />
664664
</FilterGroupItem>
665665
</FilterBar>
@@ -724,7 +724,7 @@ function FilterBarWithReordering(props: Partial<FilterBarPropTypes>) {
724724
<FilterGroupItem
725725
key={`${uniqueId}-5`}
726726
label="SELECT w/ initial selected"
727-
visibleInFilterBar={false}
727+
hiddenInFilterBar
728728
orderId={`${uniqueId}-5`}
729729
>
730730
<Select>

‎packages/main/src/components/FilterBar/FilterBar.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ const FilterBarComponent = (args) => {
153153
<FilterGroupItem label="Date" active={!!date}>
154154
<DatePicker value={date} onChange={handleDateChange} style={{ minWidth: 'auto' }} on />
155155
</FilterGroupItem>
156-
<FilterGroupItem label="Date Range" active={!!dateRange} visibleInFilterBar={false}>
156+
<FilterGroupItem label="Date Range" active={!!dateRange} hiddenInFilterBar>
157157
<DateRangePicker value={dateRange} onChange={handleDateRangeChange} style={{ minWidth: 'auto' }} on />
158158
</FilterGroupItem>
159159
</FilterBar>
@@ -233,7 +233,7 @@ function FilterBarWithReordering(props) {
233233
<FilterGroupItem
234234
key={`${uniqueId}-5`}
235235
label="SELECT w/ initial selected"
236-
visibleInFilterBar={false}
236+
hiddenInFilterBar
237237
orderId={`${uniqueId}-5`}
238238
>
239239
<Select>

‎packages/main/src/components/FilterBar/FilterBar.stories.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const Default: Story = {
5656
render: (args) => {
5757
return (
5858
<FilterBar {...args}>
59-
<FilterGroupItem label="StepInput" required>
59+
<FilterGroupItem label="StepInput" hiddenInFilterBar hidden>
6060
<StepInput required />
6161
</FilterGroupItem>
6262
<FilterGroupItem label="RatingIndicator">
@@ -80,7 +80,7 @@ export const Default: Story = {
8080
<FilterGroupItem label="Switch">
8181
<Switch />
8282
</FilterGroupItem>
83-
<FilterGroupItem label="SELECT w/ initial selected" visibleInFilterBar={false}>
83+
<FilterGroupItem label="SELECT w/ initial selected" hiddenInFilterBar>
8484
<Select>
8585
<Option>Option 1</Option>
8686
<Option selected>Option 2</Option>
@@ -248,10 +248,10 @@ export const WithLogic: Story = {
248248
</Select>
249249
</FilterGroupItem>
250250
<FilterGroupItem label="Date" active={!!date}>
251-
<DatePicker value={date} onChange={handleDateChange} style={{ minWidth: 'auto' }} on />
251+
<DatePicker value={date} onChange={handleDateChange} style={{ minWidth: 'auto' }} />
252252
</FilterGroupItem>
253-
<FilterGroupItem label="Date Range" active={!!dateRange} visibleInFilterBar={false}>
254-
<DateRangePicker value={dateRange} onChange={handleDateRangeChange} style={{ minWidth: 'auto' }} on />
253+
<FilterGroupItem label="Date Range" active={!!dateRange} hiddenInFilterBar>
254+
<DateRangePicker value={dateRange} onChange={handleDateRangeChange} style={{ minWidth: 'auto' }} />
255255
</FilterGroupItem>
256256
</FilterBar>
257257
<FlexBox direction={FlexBoxDirection.Column}>
@@ -329,18 +329,18 @@ export const InDynamicPage: Story = {
329329
<FilterGroupItem label="Input">
330330
<Input placeholder="Placeholder" />
331331
</FilterGroupItem>
332-
<FilterGroupItem label="Switch" visibleInFilterBar={false}>
332+
<FilterGroupItem label="Switch" hiddenInFilterBar>
333333
<Switch />
334334
</FilterGroupItem>
335-
<FilterGroupItem label="SELECT w/ initial selected" visibleInFilterBar={false}>
335+
<FilterGroupItem label="SELECT w/ initial selected" hiddenInFilterBar>
336336
<Select>
337337
<Option>Option 1</Option>
338338
<Option selected>Option 2</Option>
339339
<Option>Option 3</Option>
340340
<Option>Option 4</Option>
341341
</Select>
342342
</FilterGroupItem>
343-
<FilterGroupItem label="SELECT w/o initial selected" visibleInFilterBar={false}>
343+
<FilterGroupItem label="SELECT w/o initial selected" hiddenInFilterBar>
344344
<Select>
345345
<Option data-key="Test 1" selected icon="add">
346346
Test 1
@@ -359,15 +359,15 @@ export const InDynamicPage: Story = {
359359
</Option>
360360
</Select>
361361
</FilterGroupItem>
362-
<FilterGroupItem label="MultBox w/ initial selected" groupName="Group 1" visibleInFilterBar={false}>
362+
<FilterGroupItem label="MultBox w/ initial selected" groupName="Group 1" hiddenInFilterBar>
363363
<MultiComboBox>
364364
<MultiComboBoxItem text="MultiComboBoxItem 1" />
365365
<MultiComboBoxItem selected text="MultiComboBoxItem 2" />
366366
<MultiComboBoxItem text="MultiComboBoxItem 3" />
367367
<MultiComboBoxItem selected text="MultiComboBoxItem 4" />
368368
</MultiComboBox>
369369
</FilterGroupItem>
370-
<FilterGroupItem label="ComboBox w/o initial selected" groupName="Group 2" visibleInFilterBar={false}>
370+
<FilterGroupItem label="ComboBox w/o initial selected" groupName="Group 2" hiddenInFilterBar>
371371
<ComboBox>
372372
<ComboBoxItem text="ComboBoxItem 1" />
373373
<ComboBoxItem text="ComboBoxItem 2" />
@@ -429,7 +429,7 @@ export const WithReordering: Story = {
429429
<FilterGroupItem
430430
key={`${uniqueId}-5`}
431431
label="SELECT w/ initial selected"
432-
visibleInFilterBar={false}
432+
hiddenInFilterBar
433433
orderId={`${uniqueId}-5`}
434434
>
435435
<Select>

‎packages/main/src/components/FilterBar/FilterDialog.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,11 @@ const getActiveFilters = (
9696
case 'all':
9797
return true;
9898
case 'visible':
99-
return filter.props?.visibleInFilterBar;
99+
return filter.props?.hiddenInFilterBar !== true;
100100
case 'active':
101101
return filter.props?.active;
102102
case 'visibleAndActive':
103-
return filter.props?.visibleInFilterBar && filter.props?.active;
103+
return filter.props?.hiddenInFilterBar !== true && filter.props?.active;
104104
case 'mandatory':
105105
return filter.props?.required;
106106
default:
@@ -207,7 +207,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
207207

208208
const visibleChildren = () =>
209209
children.filter((item) => {
210-
return !!item?.props && (typeof item.props.visible === 'undefined' || item?.props?.visible);
210+
return !!item?.props && !item?.props?.hidden;
211211
});
212212

213213
const [orderedChildren, setOrderedChildren] = useState([]);
@@ -232,7 +232,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
232232
return filteredChildren.map((child, index) => {
233233
const filterBarItemRef = filterBarRefs.current[child.key];
234234
let isSelected =
235-
child.props.visibleInFilterBar || child.props.required || child.type.displayName !== 'FilterGroupItem';
235+
child.props.hiddenInFilterBar !== true || child.props.required || child.type.displayName !== 'FilterGroupItem';
236236
if (toggledFilters.hasOwnProperty(child.key)) {
237237
isSelected = toggledFilters[child.key];
238238
}

‎packages/main/src/components/FilterBar/index.tsx

+13-7
Original file line numberDiff line numberDiff line change
@@ -136,11 +136,14 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
136136
if (isValidElement(item)) {
137137
const key = item.key as ReactKeyWithoutBigInt;
138138
setToggledFilters((prev) => {
139-
if (!item.props.hasOwnProperty('visibleInFilterBar') && prev?.[key] === undefined) {
139+
if (!item.props.hasOwnProperty('hiddenInFilterBar') && prev?.[key] === undefined) {
140140
return { ...prev, [key]: true };
141141
}
142-
if (item.props.hasOwnProperty('visibleInFilterBar')) {
143-
return { ...prev, [key]: (item as ReactElement<FilterGroupItemInternalProps>).props.visibleInFilterBar };
142+
if (item.props.hasOwnProperty('hiddenInFilterBar')) {
143+
return {
144+
...prev,
145+
[key]: (item as ReactElement<FilterGroupItemInternalProps>).props.hiddenInFilterBar !== true
146+
};
144147
}
145148
return prev;
146149
});
@@ -225,7 +228,7 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
225228
if (toggledFilters?.[key] !== undefined) {
226229
// @ts-expect-error: child should always be a FilterGroupItem w/o portal
227230
return cloneElement<FilterGroupItemInternalProps, HTMLDivElement>(child, {
228-
visibleInFilterBar: toggledFilters[key]
231+
hiddenInFilterBar: !toggledFilters[key]
229232
});
230233
}
231234
}
@@ -247,7 +250,10 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
247250
if (!isValidElement(item)) {
248251
return false;
249252
}
250-
return (typeof item.props.visible === 'undefined' || item?.props?.visible) && item.props?.visibleInFilterBar;
253+
return (
254+
(typeof item.props.hidden === 'undefined' || item?.props?.hidden !== true) &&
255+
item.props?.hiddenInFilterBar !== true
256+
);
251257
})
252258
.map((child) => {
253259
const key = child.key as ReactKeyWithoutBigInt;
@@ -258,7 +264,7 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
258264
if (hideFilterConfiguration) {
259265
return cloneElement(child, { ...childProps });
260266
}
261-
prevVisibleInFilterBarProps.current[key] = child.props.visibleInFilterBar;
267+
prevVisibleInFilterBarProps.current[key] = child.props.hiddenInFilterBar !== true;
262268
let filterItemProps = {};
263269
if (Object.keys(dialogRefs).length > 0) {
264270
const dialogItemRef = dialogRefs[key];
@@ -522,7 +528,7 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
522528
data-component-name="FilterBarFilterArea"
523529
>
524530
{search && (
525-
<FilterGroupItem visibleInFilterBar data-with-toolbar={!hideToolbar}>
531+
<FilterGroupItem data-with-toolbar={!hideToolbar}>
526532
<div ref={searchRef} className={classNames.searchContainer}>
527533
{renderSearchWithValue(search, searchValue, {
528534
placeholder: searchText,

‎packages/main/src/components/FilterGroupItem/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ const FilterGroupItem = forwardRef<HTMLDivElement, FilterGroupItemPropTypes & Fi
5555
label = '',
5656
labelTooltip,
5757
required,
58-
visible = true,
59-
visibleInFilterBar = true,
58+
hidden,
59+
hiddenInFilterBar,
6060
children,
6161
loading,
6262
className,
@@ -143,7 +143,7 @@ const FilterGroupItem = forwardRef<HTMLDivElement, FilterGroupItemPropTypes & Fi
143143
}
144144
}, [withReordering, currentReorderedItemOrderId, orderId, index]);
145145

146-
if (!required && (!visible || (inFB && !visibleInFilterBar))) return null;
146+
if (!required && (hidden || (inFB && hiddenInFilterBar))) return null;
147147

148148
if (!inFB) {
149149
return (

‎packages/main/src/components/FilterGroupItem/types.ts

+4-7
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,14 @@ export interface FilterGroupItemPropTypes extends CommonProps {
4040
*/
4141
required?: boolean;
4242
/**
43-
* Defines whether the filter is visible.
43+
* Defines whether the filter is hidden.
4444
*
45-
* @default true
4645
*/
47-
visible?: boolean;
46+
hidden?: boolean;
4847
/**
49-
* Defines whether the filter is visible in the `FilterBar` or only in the filter configuration dialog.
50-
*
51-
* @default true
48+
* Defines whether the filter is hidden in the `FilterBar` or only in the filter configuration dialog.
5249
*/
53-
visibleInFilterBar?: boolean;
50+
hiddenInFilterBar?: boolean;
5451
/**
5552
* Defines whether the `groupName` of the `FilterGroupItems` is displayed in the filter configuration dialog.
5653
*/

0 commit comments

Comments
 (0)
Please sign in to comment.