Skip to content

Commit 422cf06

Browse files
Lukas742Lukas742
authored
fix(MessageView): don't show unnecessary scrollbar in details view (#5355)
Fixes #5350
1 parent a8fe2b4 commit 422cf06

File tree

4 files changed

+96
-52
lines changed

4 files changed

+96
-52
lines changed

‎.storybook/mockData/generateMessageItems.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,12 @@ const informationMessageItems = (count) => {
1313
return [];
1414
}
1515
return new Array(count).fill('').map((_, index) => (
16-
<MessageItem titleText={'Information Message'} type={ValueState.Information} groupName={`Group${index}`}>
16+
<MessageItem
17+
key={`InformationMessage${index}`}
18+
titleText={'Information Message'}
19+
type={ValueState.Information}
20+
groupName={`Group${index}`}
21+
>
1722
{LoremIpsum}
1823
</MessageItem>
1924
));
@@ -24,7 +29,12 @@ const successMessageItems = (count) => {
2429
return [];
2530
}
2631
return new Array(count).fill('').map((_, index) => (
27-
<MessageItem titleText={'Success Message'} type={ValueState.Success} groupName={`Group${index}`}>
32+
<MessageItem
33+
key={`SuccessMessage${index}`}
34+
titleText={'Success Message'}
35+
type={ValueState.Success}
36+
groupName={`Group${index}`}
37+
>
2838
{LoremIpsum}
2939
</MessageItem>
3040
));
@@ -35,7 +45,12 @@ const warningMessageItems = (count) => {
3545
return [];
3646
}
3747
return new Array(count).fill('').map((_, index) => (
38-
<MessageItem titleText={'Warning Message'} type={ValueState.Warning} groupName={`Group${index}`}>
48+
<MessageItem
49+
key={`WarningMessage${index}`}
50+
titleText={'Warning Message'}
51+
type={ValueState.Warning}
52+
groupName={`Group${index}`}
53+
>
3954
{LoremIpsum}
4055
</MessageItem>
4156
));
@@ -46,7 +61,12 @@ const errorMessageItems = (count) => {
4661
return [];
4762
}
4863
return new Array(count).fill('').map((_, index) => (
49-
<MessageItem titleText={'Error Message'} type={ValueState.Error} groupName={`Group${index}`}>
64+
<MessageItem
65+
key={`ErrorMessage${index}`}
66+
titleText={'Error Message'}
67+
type={ValueState.Error}
68+
groupName={`Group${index}`}
69+
>
5070
{LoremIpsum}
5171
</MessageItem>
5272
));

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,14 +107,14 @@ describe('MessageView', () => {
107107
};
108108
cy.mount(<TestComp />);
109109
cy.findByText('Error').click();
110-
cy.findAllByText('Error').should('have.length', 2);
110+
cy.findAllByText('Error').should('have.length', 1);
111111
cy.findByText('Error Message').should('be.visible');
112112
cy.get('[ui5-button]').click();
113113
cy.findAllByText('Error').should('have.length', 1);
114114
cy.findByText('Error Message').should('not.exist');
115115
cy.get('@select').should('have.been.calledOnce');
116116
cy.findByText('Information').click();
117-
cy.findAllByText('Information').should('have.length', 2);
117+
cy.findAllByText('Information').should('have.length', 1);
118118
cy.findByText('Information Message').should('be.visible');
119119
cy.findByText('nav back').click();
120120
cy.findAllByText('Information').should('have.length', 1);
@@ -142,6 +142,7 @@ describe('MessageView', () => {
142142
cy.get('[ui5-bar]').should('not.exist');
143143
});
144144
});
145+
145146
it('MessageItem', () => {
146147
cy.mount(
147148
<MessageView>
@@ -160,7 +161,7 @@ describe('MessageView', () => {
160161
cy.findByText('SubtitleText').should('be.visible');
161162
cy.findByText('1337').should('be.visible');
162163
cy.get('[name="slim-arrow-right"]').should('be.visible').click();
163-
cy.findByText('SubtitleText').should('not.be.visible');
164-
cy.findByText('1337').should('not.be.visible');
164+
cy.findByText('SubtitleText').should('not.exist');
165+
cy.findByText('1337').should('not.exist');
165166
});
166167
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,7 @@ export const WithMessageViewButton: Story = {
225225
}
226226
>
227227
<MessageView
228+
style={{ height: '500px', maxWidth: '600px' }}
228229
ref={messageViewRef}
229230
showDetailsPageHeader={false}
230231
groupItems

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

Lines changed: 66 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ import { clsx } from 'clsx';
66
import type { ReactElement, ReactNode } from 'react';
77
import React, { Children, forwardRef, Fragment, isValidElement, useCallback, useEffect, useState } from 'react';
88
import { createUseStyles } from 'react-jss';
9-
import { ButtonDesign, FlexBoxDirection, TitleLevel, ValueState, WrappingType } from '../../enums/index.js';
9+
import {
10+
ButtonDesign,
11+
FlexBoxDirection,
12+
GlobalStyleClasses,
13+
TitleLevel,
14+
ValueState,
15+
WrappingType
16+
} from '../../enums/index.js';
1017
import { ALL, LIST_NO_DATA } from '../../i18n/i18n-defaults.js';
1118
import type { CommonProps } from '../../interfaces/index.js';
1219
import { MessageViewContext } from '../../internal/MessageViewContext.js';
@@ -115,7 +122,7 @@ const useStyles = createUseStyles(
115122
'&[data-key="Success"]:not([pressed])': { color: ThemingParameters.sapPositiveElementColor },
116123
'&[data-key="Information"]:not([pressed])': { color: ThemingParameters.sapInformativeElementColor }
117124
},
118-
detailsContainer: {
125+
details: {
119126
padding: '1rem'
120127
},
121128
detailsIcon: {
@@ -136,6 +143,12 @@ const useStyles = createUseStyles(
136143
lineHeight: 1.4,
137144
color: ThemingParameters.sapTextColor,
138145
marginBlockEnd: '1rem'
146+
},
147+
messagesContainer: {
148+
height: '100%'
149+
},
150+
detailsContainer: {
151+
height: '100%'
139152
}
140153
},
141154
{ name: 'MessageView' }
@@ -188,7 +201,12 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
188201
setListFilter(e.detail.selectedItem.dataset.key);
189202
};
190203

191-
const outerClasses = clsx(classes.container, className, selectedMessage && classes.showDetails);
204+
const outerClasses = clsx(
205+
classes.container,
206+
GlobalStyleClasses.sapScrollBar,
207+
className,
208+
selectedMessage && classes.showDetails
209+
);
192210

193211
return (
194212
<div ref={componentRef} {...rest} className={outerClasses}>
@@ -197,49 +215,53 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
197215
selectMessage: setSelectedMessage
198216
}}
199217
>
200-
<div style={{ visibility: selectedMessage ? 'hidden' : 'visible' }}>
201-
{filledTypes > 1 && (
202-
<Bar
203-
startContent={
204-
<SegmentedButton onSelectionChange={handleListFilterChange}>
205-
<SegmentedButtonItem data-key="All" pressed={listFilter === 'All'}>
206-
{i18nBundle.getText(ALL)}
207-
</SegmentedButtonItem>
208-
{/* @ts-expect-error: The key can't be typed, it's always `string`, but since the `ValueState` enum only contains strings it's fine to use here*/}
209-
{Object.entries(messageTypes).map(([valueState, count]: [ValueState, number]) => {
210-
if (count === 0) {
211-
return null;
212-
}
213-
return (
214-
<SegmentedButtonItem
215-
key={valueState}
216-
data-key={valueState}
217-
pressed={listFilter === valueState}
218-
icon={getIconNameForType(valueState)}
219-
className={classes.button}
220-
>
221-
{count}
218+
<div style={{ visibility: selectedMessage ? 'hidden' : 'visible' }} className={classes.messagesContainer}>
219+
{!selectedMessage && (
220+
<>
221+
{filledTypes > 1 && (
222+
<Bar
223+
startContent={
224+
<SegmentedButton onSelectionChange={handleListFilterChange}>
225+
<SegmentedButtonItem data-key="All" pressed={listFilter === 'All'}>
226+
{i18nBundle.getText(ALL)}
222227
</SegmentedButtonItem>
223-
);
224-
})}
225-
</SegmentedButton>
226-
}
227-
/>
228+
{/* @ts-expect-error: The key can't be typed, it's always `string`, but since the `ValueState` enum only contains strings it's fine to use here*/}
229+
{Object.entries(messageTypes).map(([valueState, count]: [ValueState, number]) => {
230+
if (count === 0) {
231+
return null;
232+
}
233+
return (
234+
<SegmentedButtonItem
235+
key={valueState}
236+
data-key={valueState}
237+
pressed={listFilter === valueState}
238+
icon={getIconNameForType(valueState)}
239+
className={classes.button}
240+
>
241+
{count}
242+
</SegmentedButtonItem>
243+
);
244+
})}
245+
</SegmentedButton>
246+
}
247+
/>
248+
)}
249+
<List onItemClick={onItemSelect} noDataText={i18nBundle.getText(LIST_NO_DATA)}>
250+
{groupItems
251+
? groupedMessages.map(([groupName, items]) => {
252+
return (
253+
<Fragment key={groupName}>
254+
{groupName && <GroupHeaderListItem>{groupName}</GroupHeaderListItem>}
255+
{items}
256+
</Fragment>
257+
);
258+
})
259+
: filteredChildren}
260+
</List>
261+
</>
228262
)}
229-
<List onItemClick={onItemSelect} noDataText={i18nBundle.getText(LIST_NO_DATA)}>
230-
{groupItems
231-
? groupedMessages.map(([groupName, items]) => {
232-
return (
233-
<Fragment key={groupName}>
234-
{groupName && <GroupHeaderListItem>{groupName}</GroupHeaderListItem>}
235-
{items}
236-
</Fragment>
237-
);
238-
})
239-
: filteredChildren}
240-
</List>
241263
</div>
242-
<div>
264+
<div className={classes.detailsContainer}>
243265
{childrenArray.length > 0 ? (
244266
<>
245267
{showDetailsPageHeader && selectedMessage && (
@@ -250,7 +272,7 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
250272
/>
251273
)}
252274
{selectedMessage && (
253-
<FlexBox className={classes.detailsContainer}>
275+
<FlexBox className={classes.details}>
254276
<Icon
255277
data-type={selectedMessage.type}
256278
name={getIconNameForType(selectedMessage.type)}

0 commit comments

Comments
 (0)