Skip to content

Commit 145d8be

Browse files
Lukas742Lukas742
authored
fix(MessageView): fix rtl behavior & allow disabling animations (#7686)
Fixes #7682
1 parent c1e6936 commit 145d8be

File tree

3 files changed

+91
-56
lines changed

3 files changed

+91
-56
lines changed

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

Lines changed: 59 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Link } from '@ui5/webcomponents-react';
44
import { useRef } from 'react';
55
import { MessageItem } from './MessageItem';
66
import { MessageView } from './index.js';
7+
import { Dialog } from '../../webComponents/Dialog/index.js';
78

89
describe('MessageView', () => {
910
it('default & grouped', () => {
@@ -80,54 +81,64 @@ describe('MessageView', () => {
8081
getAllTextsVisible();
8182
});
8283

83-
it('select & nav back', () => {
84-
const select = cy.spy().as('select');
85-
const TestComp = () => {
86-
const ref = useRef(null);
87-
return (
88-
<>
89-
<button
90-
onClick={() => {
91-
ref.current.navigateBack();
92-
}}
93-
>
94-
nav back
95-
</button>
96-
<MessageView onItemSelect={select} ref={ref} showDetailsPageHeader>
97-
<MessageItem titleText="Error" type={ValueState.Negative} groupName="Group1">
98-
Error Message
99-
</MessageItem>
100-
<MessageItem titleText="Warning" type={ValueState.Critical} groupName="Group1">
101-
Warning
102-
</MessageItem>
103-
<MessageItem titleText="Success" type={ValueState.Positive}>
104-
Success
105-
</MessageItem>
106-
<MessageItem titleText="Information" type={ValueState.Information}>
107-
Information Message
108-
</MessageItem>
109-
<MessageItem titleText="None" type={ValueState.None} groupName="Group2">
110-
None
111-
</MessageItem>
112-
</MessageView>
113-
</>
114-
);
115-
};
116-
cy.mount(<TestComp />);
117-
cy.findByText('Error').click();
118-
cy.findAllByText('Error').should('have.length', 1);
119-
cy.findByText('Error Message').should('be.visible');
120-
cy.get('[ui5-button]').click();
121-
cy.findAllByText('Error').should('have.length', 1);
122-
cy.findByText('Error Message').should('not.exist');
123-
cy.get('@select').should('have.been.calledOnce');
124-
cy.findByText('Information').click();
125-
cy.findAllByText('Information').should('have.length', 1);
126-
cy.findByText('Information Message').should('be.visible');
127-
cy.findByText('nav back').click();
128-
cy.findAllByText('Information').should('have.length', 1);
129-
cy.findByText('Information Message').should('not.exist');
130-
cy.get('@select').should('have.been.calledTwice');
84+
[false, true].forEach((inDialog) => {
85+
['ltr', 'rtl'].forEach((dir) => {
86+
it(`select & nav back ${inDialog ? 'in Dialog' : ''} (${dir})`, () => {
87+
const select = cy.spy().as('select');
88+
const TestComp = () => {
89+
const ref = useRef(null);
90+
const Parent = inDialog ? Dialog : 'div';
91+
return (
92+
<Parent dir={dir} open style={{ width: '400px' }}>
93+
<button
94+
slot="header"
95+
onClick={() => {
96+
ref.current.navigateBack();
97+
}}
98+
>
99+
nav back
100+
</button>
101+
<MessageView onItemSelect={select} ref={ref} showDetailsPageHeader={!inDialog}>
102+
<MessageItem titleText="Error" type={ValueState.Negative} groupName="Group1">
103+
Error Message
104+
</MessageItem>
105+
<MessageItem titleText="Warning" type={ValueState.Critical} groupName="Group1">
106+
Warning
107+
</MessageItem>
108+
<MessageItem titleText="Success" type={ValueState.Positive}>
109+
Success
110+
</MessageItem>
111+
<MessageItem titleText="Information" type={ValueState.Information}>
112+
Information Message
113+
</MessageItem>
114+
<MessageItem titleText="None" type={ValueState.None} groupName="Group2">
115+
None
116+
</MessageItem>
117+
</MessageView>
118+
</Parent>
119+
);
120+
};
121+
cy.mount(<TestComp />);
122+
cy.findByText('Error').click();
123+
cy.findAllByText('Error').should('have.length', 1);
124+
cy.findByText('Error Message').should('be.visible');
125+
if (inDialog) {
126+
cy.findByText('nav back').click();
127+
} else {
128+
cy.get('[ui5-button]').click();
129+
}
130+
cy.findAllByText('Error').should('have.length', 1);
131+
cy.findByText('Error Message').should('not.exist');
132+
cy.get('@select').should('have.been.calledOnce');
133+
cy.findByText('Information').click();
134+
cy.findAllByText('Information').should('have.length', 1);
135+
cy.findByText('Information Message').should('be.visible');
136+
cy.findByText('nav back').click();
137+
cy.findAllByText('Information').should('have.length', 1);
138+
cy.findByText('Information Message').should('not.exist');
139+
cy.get('@select').should('have.been.calledTwice');
140+
});
141+
});
131142
});
132143

133144
it('one/no message-type/item', () => {

‎packages/main/src/components/MessageView/MessageView.module.css‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,22 @@
88
> * {
99
width: 100%;
1010
flex-shrink: 0;
11-
transition: transform 200ms ease-in-out;
11+
transition:
12+
transform 200ms ease-in-out,
13+
opacity 300ms ease-in-out;
1214
}
1315
}
1416

15-
.showDetails {
16-
> * {
17-
transform: translateX(-100%);
18-
}
17+
.container[data-with-animation='false'] > * {
18+
transition: none;
19+
}
20+
21+
.showDetails > * {
22+
transform: translateX(-100%);
23+
}
24+
25+
:dir(rtl) .showDetails > * {
26+
transform: translateX(100%);
1927
}
2028

2129
.button {

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
44
import ListSeparator from '@ui5/webcomponents/dist/types/ListSeparator.js';
55
import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
66
import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
7+
import { getAnimationMode } from '@ui5/webcomponents-base/dist/config/AnimationMode.js';
78
import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
89
import announce from '@ui5/webcomponents-base/dist/util/InvisibleMessage.js';
910
import iconSlimArrowLeft from '@ui5/webcomponents-icons/dist/slim-arrow-left.js';
@@ -64,6 +65,8 @@ export interface MessageViewPropTypes extends CommonProps {
6465
onItemSelect?: ListPropTypes['onItemClick'];
6566
}
6667

68+
const withAnimation = getAnimationMode() !== 'none';
69+
6770
export const resolveMessageTypes = (children: ReactElement<MessageItemPropTypes>[]) => {
6871
return (children ?? [])
6972
.map((message) => message?.props?.type)
@@ -193,13 +196,22 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
193196

194197
const outerClasses = clsx(classNames.container, className, selectedMessage && classNames.showDetails);
195198
return (
196-
<div ref={componentRef} {...rest} className={outerClasses} onTransitionEnd={handleTransitionEnd}>
199+
<div
200+
ref={componentRef}
201+
{...rest}
202+
className={outerClasses}
203+
onTransitionEnd={handleTransitionEnd}
204+
data-with-animation={`${withAnimation}`}
205+
>
197206
<MessageViewContext.Provider
198207
value={{
199208
selectMessage: setSelectedMessage,
200209
}}
201210
>
202-
<div style={{ visibility: selectedMessage ? 'hidden' : 'visible' }} className={classNames.messagesContainer}>
211+
<div
212+
style={{ visibility: selectedMessage ? 'hidden' : 'visible', opacity: selectedMessage ? 0.3 : 1 }}
213+
className={classNames.messagesContainer}
214+
>
203215
{!selectedMessage && (
204216
<>
205217
{filledTypes > 1 && (
@@ -257,7 +269,11 @@ const MessageView = forwardRef<MessageViewDomRef, MessageViewPropTypes>((props,
257269
</>
258270
)}
259271
</div>
260-
<div className={classNames.detailsContainer} data-component-name="MessageViewDetailsContainer">
272+
<div
273+
className={classNames.detailsContainer}
274+
style={{ opacity: selectedMessage ? 1 : 0.3 }}
275+
data-component-name="MessageViewDetailsContainer"
276+
>
261277
{childrenArray.length > 0 ? (
262278
<>
263279
{showDetailsPageHeader && selectedMessage && (

0 commit comments

Comments
 (0)