Skip to content

Commit 0e6a326

Browse files
MarcusNotheisMarcusNotheis
authored
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).
1 parent 0018bba commit 0e6a326

File tree

9 files changed

+158
-72
lines changed

9 files changed

+158
-72
lines changed

‎docs/MigrationGuide.mdx

Lines changed: 74 additions & 29 deletions
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

Lines changed: 38 additions & 0 deletions
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

Lines changed: 9 additions & 9 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 11 additions & 11 deletions
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

Lines changed: 4 additions & 4 deletions
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
}

0 commit comments

Comments
 (0)