Skip to content

Commit

Permalink
refactor(MessageBox): Rename prop visible to open
Browse files Browse the repository at this point in the history
Renamed `visible` prop to `open` to be consistent with other modals.
BREAKING CHANGE: `MessageBox`: Renamed prop `visible` to `open`
BREAKING CHANGE: `MessageBoxButton`: deleted export as this component was inteded for interal use only
  • Loading branch information
MarcusNotheis committed Sep 18, 2019
1 parent 100e6ff commit 882b2d1
Show file tree
Hide file tree
Showing 12 changed files with 597 additions and 615 deletions.
66 changes: 23 additions & 43 deletions packages/main/src/components/MessageBox/MessageBox.jss.ts
Original file line number Diff line number Diff line change
@@ -1,31 +1,7 @@
import { fonts } from '@ui5/webcomponents-react-base';
import { ZIndex } from '../../enums/ZIndex';
import { JSSTheme } from '../../interfaces/JSSTheme';
import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
import { JSSTheme } from '../../interfaces/JSSTheme';

const style = ({ parameters, contentDensity }: JSSTheme) => ({
overlay: {
background: 'rgba(0,0,0,0.6)',
position: 'fixed',
zIndex: ZIndex.MessageBox,
top: 0,
left: 0,
right: 0,
bottom: 0,
outline: '0 none',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
},
messageBox: {
maxWidth: '90%',
minWidth: '20%',
borderRadius: '0.25rem',
boxSizing: 'content-box',
background: parameters.sapUiGroupContentBackground,
fontFamily: fonts.sapUiFontFamily,
fontSize: '0.875rem'
},
header: {
display: 'flex',
height: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem',
Expand All @@ -41,59 +17,63 @@ const style = ({ parameters, contentDensity }: JSSTheme) => ({
// justifyContent: 'center',
padding: '0.25rem 1rem',
boxSizing: 'border-box',
borderBottom: `0.125rem solid ${parameters.sapUiGroupContentBorderColor}`,
borderBottom: `1px solid var(--messageBoxBorderColor)`,
color: parameters.sapUiContentLabelColor,
fontSize: '1rem',
'&[data-type="Error"]': {
borderBottomColor: parameters.sapUiErrorBorder,
'--sapUiPageFooterBorderColor': parameters.sapUiErrorBorder,
'--messageBoxBorderColor': parameters.sapUiErrorBorder,
'& $icon': {
color: parameters.sapUiNegativeElement
'--sapUiContentNonInteractiveIconColor': parameters.sapUiNegativeElement
}
},
'&[data-type="Warning"]': {
borderBottomColor: parameters.sapUiWarningBorder,
'--sapUiPageFooterBorderColor': parameters.sapUiWarningBorder,
'--messageBoxBorderColor': parameters.sapUiWarningBorder,
'& $icon': {
color: parameters.sapUiCriticalElement
'--sapUiContentNonInteractiveIconColor': parameters.sapUiCriticalElement
}
},
'&[data-type="Success"]': {
borderBottomColor: parameters.sapUiSuccessBorder,
'--sapUiPageFooterBorderColor': parameters.sapUiSuccessBorder,
'--messageBoxBorderColor': parameters.sapUiSuccessBorder,
'& $icon': {
color: parameters.sapUiPositiveElement
'--sapUiContentNonInteractiveIconColor': parameters.sapUiPositiveElement
}
},
'&[data-type="Confirm"]': {
borderBottomColor: parameters.sapUiNeutralBorder,
'--sapUiPageFooterBorderColor': parameters.sapUiNeutralBorder,
'--messageBoxBorderColor': parameters.sapUiNeutralBorder,
'& $icon': {
color: parameters.sapUiNeutralElement
'--sapUiContentNonInteractiveIconColor': parameters.sapUiNeutralElement
}
},
'&[data-type="Information"]': {
borderBottomColor: parameters.sapUiNeutralBorder,
'--sapUiPageFooterBorderColor': parameters.sapUiNeutralBorder,
'--messageBoxBorderColor': parameters.sapUiNeutralBorder,
'& $icon': {
color: parameters.sapUiNeutralElement
'--sapUiContentNonInteractiveIconColor': parameters.sapUiNeutralElement
}
},
'&[data-type="Highlight"]': {
// @ts-ignore
borderBottomColor: parameters.sapUiInformationBorder,
'--sapUiPageFooterBorderColor': parameters.sapUiInformationBorder,
'--messageBoxBorderColor': parameters.sapUiInformationBorder,
'& $icon': {
color: parameters.sapUiInformativeElement
'--sapUiContentNonInteractiveIconColor': parameters.sapUiInformativeElement
}
}
},
content: {
padding: '1rem'
},
icon: {
marginRight: '0.5rem',
fontSize: '1rem',
width: '1rem'
},
content: {
padding: '1rem'
},
footer: {
height: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem',
lineHeight: ContentDensity.Compact === contentDensity ? '2.5rem' : '3rem',
borderTop: `1px solid ${parameters.sapUiGroupContentBorderColor}`,
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
Expand Down
22 changes: 11 additions & 11 deletions packages/main/src/components/MessageBox/MessageBox.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ describe('MessageBox', () => {
test('Confirm - OK', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox type={MessageBoxTypes.CONFIRM} visible onClose={callback}>
<MessageBox type={MessageBoxTypes.CONFIRM} open onClose={callback}>
Confirm - OK
</MessageBox>,
{}
Expand All @@ -28,7 +28,7 @@ describe('MessageBox', () => {
test('Confirm - Cancel', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox type={MessageBoxTypes.CONFIRM} visible onClose={callback}>
<MessageBox type={MessageBoxTypes.CONFIRM} open onClose={callback}>
Confirm - Cancel
</MessageBox>
);
Expand All @@ -45,7 +45,7 @@ describe('MessageBox', () => {
test('Success', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox type={MessageBoxTypes.SUCCESS} visible onClose={callback}>
<MessageBox type={MessageBoxTypes.SUCCESS} open onClose={callback}>
Success
</MessageBox>
);
Expand All @@ -62,7 +62,7 @@ describe('MessageBox', () => {
test('Warning', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox type={MessageBoxTypes.WARNING} visible onClose={callback}>
<MessageBox type={MessageBoxTypes.WARNING} open onClose={callback}>
Warning
</MessageBox>
);
Expand All @@ -79,7 +79,7 @@ describe('MessageBox', () => {
test('Error', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox type={MessageBoxTypes.ERROR} visible onClose={callback}>
<MessageBox type={MessageBoxTypes.ERROR} open onClose={callback}>
Error
</MessageBox>
);
Expand All @@ -96,7 +96,7 @@ describe('MessageBox', () => {
test('Information', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox type={MessageBoxTypes.INFORMATION} visible onClose={callback}>
<MessageBox type={MessageBoxTypes.INFORMATION} open onClose={callback}>
Information
</MessageBox>
);
Expand All @@ -113,7 +113,7 @@ describe('MessageBox', () => {
test('Show', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox visible onClose={callback} title="Custom" actions={[MessageBoxActions.YES, MessageBoxActions.NO]}>
<MessageBox open onClose={callback} title="Custom" actions={[MessageBoxActions.YES, MessageBoxActions.NO]}>
Custom
</MessageBox>
);
Expand All @@ -137,7 +137,7 @@ describe('MessageBox', () => {
test('Success w/ custom title', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox type={MessageBoxTypes.SUCCESS} visible onClose={callback} title="Custom Success">
<MessageBox type={MessageBoxTypes.SUCCESS} open onClose={callback} title="Custom Success">
Custom Success
</MessageBox>
);
Expand All @@ -151,10 +151,10 @@ describe('MessageBox', () => {
expect(getEventFromCallback(callback).getParameter('action')).toEqual(MessageBoxActions.OK);
});

test('Not visible', () => {
test('Not open', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox type={MessageBoxTypes.SUCCESS} visible={false} onClose={callback} title="Custom Success">
<MessageBox type={MessageBoxTypes.SUCCESS} open={false} onClose={callback} title="Custom Success">
Custom Success
</MessageBox>
);
Expand All @@ -164,7 +164,7 @@ describe('MessageBox', () => {
test('No Title', () => {
const callback = spy();
const wrapper = mountThemedComponent(
<MessageBox visible onClose={callback}>
<MessageBox open onClose={callback}>
No Title
</MessageBox>
);
Expand Down
28 changes: 0 additions & 28 deletions packages/main/src/components/MessageBox/MessageBoxButton.tsx

This file was deleted.

Loading

0 comments on commit 882b2d1

Please sign in to comment.