Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(Modals): replace context with use-sync-external-store #6042

Merged
merged 5 commits into from
Jul 9, 2024
Merged

refactor(Modals): replace context with use-sync-external-store #6042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
67a68ad
refactor(Modals): replace context with use-sync-external-store
MarcusNotheis Jul 8, 2024
476ec98
Merge remote-tracking branch 'origin/main' into refactor/modal-provid…
MarcusNotheis Jul 8, 2024
c30096c
remove global types
MarcusNotheis Jul 8, 2024
98009ad
fix docs stories, revert formatting of MigrationGuide
Lukas742 Jul 9, 2024
780612e
typo
Lukas742 Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Preview } from '@storybook/react';
import { setLanguage } from '@ui5/webcomponents-base/dist/config/Language.js';
import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.js';
import { ContentDensity, ThemeProvider } from '@ui5/webcomponents-react';
import { ContentDensity, Modals, ThemeProvider } from '@ui5/webcomponents-react';
import { useEffect } from 'react';
import 'tocbot/dist/tocbot.css';
import '../packages/main/dist/Assets.js';
Expand All @@ -27,7 +27,7 @@ const preview: Preview = {
}
},
decorators: [
(Story, { globals }) => {
(Story, { globals, viewMode }) => {
const { theme, contentDensity, direction, language } = globals;

useEffect(() => {
Expand Down Expand Up @@ -57,6 +57,7 @@ const preview: Preview = {

return (
<ThemeProvider>
{viewMode !== 'docs' && <Modals />}
<Story />
</ThemeProvider>
);
Expand Down
18 changes: 18 additions & 0 deletions docs/MigrationGuide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -610,6 +610,19 @@ function MyComponent() {

```

### Modals

All Modal helper hooks have been removed. They can be replaced with the regular methods:

- `useShowDialog` --> `showDialog`
- `useShowPopover` --> `showPopover`
- `useShowResponsivePopover` --> `showResponsivePopover`
- `useShowMenu` --> `showMenu`
- `useShowMessageBox` --> `showMessageBox`
- `useShowToast` --> `showToast`

The regular methods are now general purpose, so they can be used both inside the React content (components) as well as outside of the React context (redux, redux-saga, etc.).

### ObjectPageSection

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.
Expand All @@ -622,6 +635,11 @@ The prop `titleText` is now required.

For better alignment with the UI5 Web Components the `active` prop has been renamed to `interactive`.

### ThemeProvider

The prop `withoutModalsProvider` has been removed.
In order to provide a place for the `Modals` helper to mount the popovers, you have to render the new `Modals` component in your application tree.

## Enum Changes

For better alignment with the UI5 Web Components, the following enums have been renamed:
Expand Down
3 changes: 3 additions & 0 deletions packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,6 +486,9 @@
"valueState": "ValueState"
}
},
"ThemeProvider": {
"removedProps": ["withoutModalsProvider"]
},
"TimePicker": {
"renamedEnums": {
"valueState": "ValueState"
Expand Down
245 changes: 63 additions & 182 deletions packages/main/src/components/Modals/Modals.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ describe('Modals - static helpers', () => {
const TestComp = () => {
return (
<>
<Modals />
<Button
onClick={() => {
const { close } = Modals.showDialog({
Expand All @@ -30,18 +31,21 @@ describe('Modals - static helpers', () => {
it('showPopover', () => {
const TestComp = () => {
return (
<Button
id="modals-show-popover"
onClick={() => {
const { close } = Modals.showPopover({
opener: 'modals-show-popover',
children: 'Popover Content',
footer: <Bar endContent={<Button onClick={() => close()}>Close</Button>} />
});
}}
>
Show Popover
</Button>
<>
<Modals />
<Button
id="modals-show-popover"
onClick={() => {
const { close } = Modals.showPopover({
opener: 'modals-show-popover',
children: 'Popover Content',
footer: <Bar endContent={<Button onClick={() => close()}>Close</Button>} />
});
}}
>
Show Popover
</Button>
</>
);

cy.mount(<TestComp />);
Expand All @@ -56,18 +60,21 @@ describe('Modals - static helpers', () => {
it('showResponsivePopover', () => {
const TestComp = () => {
return (
<Button
id="modals-show-popover"
onClick={() => {
const { close } = Modals.showResponsivePopover({
opener: 'modals-show-popover',
children: 'Popover Content',
footer: <Bar endContent={<Button onClick={() => close()}>Close</Button>} />
});
}}
>
Show Popover
</Button>
<>
<Modals />
<Button
id="modals-show-popover"
onClick={() => {
const { close } = Modals.showResponsivePopover({
opener: 'modals-show-popover',
children: 'Popover Content',
footer: <Bar endContent={<Button onClick={() => close()}>Close</Button>} />
});
}}
>
Show Popover
</Button>
</>
);

cy.mount(<TestComp />);
Expand All @@ -82,17 +89,20 @@ describe('Modals - static helpers', () => {
it('showMenu', () => {
const TestComp = () => {
return (
<Button
id="modals-show-popover"
onClick={() => {
Modals.showMenu({
opener: 'modals-show-popover',
children: <MenuItem text="MenuItem" />
});
}}
>
Show Menu
</Button>
<>
<Modals />
<Button
id="modals-show-popover"
onClick={() => {
Modals.showMenu({
opener: 'modals-show-popover',
children: <MenuItem text="MenuItem" />
});
}}
>
Show Menu
</Button>
</>
);

cy.mount(<TestComp />);
Expand All @@ -108,6 +118,7 @@ describe('Modals - static helpers', () => {
const TestComp = () => {
return (
<>
<Modals />
<Button
onClick={() => {
Modals.showMessageBox({
Expand All @@ -131,20 +142,23 @@ describe('Modals - static helpers', () => {
it('showToast', () => {
const TestComp = () => {
return (
<div id="container">
<Button
onClick={() => {
Modals.showToast(
{
children: 'Toast Content'
},
document.getElementById('container')
);
}}
>
Show Toast
</Button>
</div>
<>
<Modals />
<div id="container">
<Button
onClick={() => {
Modals.showToast(
{
children: 'Toast Content'
},
document.getElementById('container')
);
}}
>
Show Toast
</Button>
</div>
</>
);
};
cy.mount(<TestComp />);
Expand All @@ -153,136 +167,3 @@ describe('Modals - static helpers', () => {
cy.findByText('Toast Content').should('exist');
});
});

describe('Modals - hooks', () => {
interface PropTypes {
hookFn: any;
modalProps: any;
}
const TestComponent = ({ hookFn, modalProps }: PropTypes) => {
const hook = hookFn();

return (
<button
onClick={() => {
hook(modalProps);
}}
>
Open Modal
</button>
);
};

const TestComponentClosable = ({ hookFn, modalProps }: PropTypes) => {
const hook = hookFn();

return (
<Button
onClick={() => {
const { close } = hook({
...modalProps,
children: [
...modalProps?.children,
<Button key="btn" onClick={() => close()}>
Close
</Button>
]
});
}}
>
Open Modal
</Button>
);
};

it('useShowDialog', () => {
cy.mount(
<TestComponentClosable
hookFn={Modals.useShowDialog}
modalProps={{
children: 'Dialog Content'
}}
/>
);
cy.findByText('Open Modal').click();
cy.findByText('Dialog Content').should('be.visible');
cy.findByText('Close').click();
cy.findByText('Dialog Content').should('not.exist');
});

it('useShowPopover', () => {
cy.mount(
<>
<span id="opener" />
<TestComponentClosable
hookFn={Modals.useShowPopover}
modalProps={{ children: 'Popover Content', opener: 'opener' }}
/>
</>
);
cy.findByText('Open Modal').click();
cy.findByText('Popover Content').should('be.visible');
cy.findByText('Close').click();
cy.findByText('Popover Content').should('not.exist');
});

it('useShowResponsivePopover', () => {
cy.mount(
<>
<span id="opener" />
<TestComponentClosable
hookFn={Modals.useShowResponsivePopover}
modalProps={{ children: 'Popover Content', opener: 'opener' }}
/>
</>
);
cy.findByText('Open Modal').click();
cy.findByText('Popover Content').should('be.visible');
cy.findByText('Close').click();
cy.findByText('Popover Content').should('not.exist');
});

it('useShowMenu', () => {
const TestComp = () => {
const showMenu = Modals.useShowMenu();
return (
<div id="container">
<Button
id="modals-show-popover"
onClick={() => {
showMenu(
{
opener: 'modals-show-popover',
children: <MenuItem text="MenuItem" />
},
document.getElementById('container')
);
}}
>
Show Menu
</Button>
</div>
);
};

cy.mount(<TestComp />);

cy.findByText('Show Menu').click();
cy.get('[ui5-menu-item]').click();
cy.get('[ui5-menu]').should('not.exist');
});

it('useShowMessageBox', () => {
cy.mount(<TestComponent hookFn={Modals.useShowMessageBox} modalProps={{ children: 'MessageBox Content' }} />);
cy.findByText('Open Modal').click();
cy.findByText('MessageBox Content').should('be.visible');
cy.findByText('OK').click();
cy.findByText('MessageBox Content').should('not.exist');
});

it('useShowToast', () => {
cy.mount(<TestComponent hookFn={Modals.useShowToast} modalProps={{ children: 'Toast Content' }} />);
cy.findByText('Open Modal').click();
cy.findByText('Toast Content').should('exist');
});
});
Loading
Loading