+
Hello World!
I am a modal.
@@ -109,10 +107,10 @@ export const PreventClose = (modal: ModalProps): JSX.Element => {
PreventClose.args = {
children: ({ onClose }: { onClose: ModalProps['onClose'] }) => (
-
+
Complete the action
-
+
Users have to complete the action inside the modal to close it. The
close button is hidden and clicking outside the modal or pressing the
escape key does not close the modal either.
@@ -169,10 +167,10 @@ CustomStyles.args = {
borderTopRightRadius: 'var(--cui-border-radius-mega)',
}}
/>
-
+
Custom styles
-
+
Custom styles can be applied using the css
prop.
diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx b/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx
index bd640a6cc8..0b208c03ba 100644
--- a/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx
+++ b/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx
@@ -24,7 +24,6 @@ import { TopNavigation } from '../TopNavigation/index.js';
import { baseArgs as topNavigationProps } from '../TopNavigation/TopNavigation.stories.js';
import { SideNavigation } from '../SideNavigation/index.js';
import { baseArgs as sideNavigationProps } from '../SideNavigation/SideNavigation.stories.js';
-import { spacing } from '../../styles/style-mixins.js';
import { SidePanelProvider } from './SidePanelContext.js';
import {
@@ -69,7 +68,7 @@ const basePlay = ({ canvasElement }: { canvasElement: HTMLCanvasElement }) => {
};
const StoryInstructions = () => (
-
+
Select an item to open its details in a side panel. When this story is
viewed in canvas mode we simulate a selection of the third item.
@@ -98,12 +97,12 @@ const DefaultChildren = ({
return (
<>
-
+
{showMoreInfo
? `These are the details of ${label}.`
: `This is more information about ${label}.`}
-
+
{
'Lorem ipsum dolor amet swag pickled humblebrag retro farm-to-table, shoreditch typewriter deep v single-origin coffee green juice coloring book venmo chambray. Marfa authentic blue bottle mixtape tofu adaptogen. IPhone chia blog palo santo mlkshk tattooed jean shorts yr locavore ennui scenester. Wolf tousled pok pok sartorial scenester man bun salvia quinoa raclette sriracha roof party pour-over venmo hammock. Four dollar toast typewriter 3 wolf moon letterpress disrupt pabst. Neutra irony tousled iPhone banh mi wayfarers hoodie waistcoat.'
}
@@ -127,7 +126,7 @@ const DefaultChildren = ({
headline: 'More information',
})
}
- css={spacing({ bottom: 'mega' })}
+ style={{ marginBottom: '1rem' }}
>
Show more
@@ -140,7 +139,7 @@ const DefaultChildren = ({
variant="tertiary"
size="kilo"
onClick={onBack}
- css={spacing({ bottom: 'mega' })}
+ style={{ marginBottom: '1rem' }}
>
Back
@@ -150,7 +149,7 @@ const DefaultChildren = ({
variant="tertiary"
size="kilo"
onClick={onClose}
- css={spacing({ left: 'mega', bottom: 'mega' })}
+ style={{ marginBottom: '1rem', marginLeft: '1rem' }}
>
Close
@@ -182,7 +181,7 @@ const ComponentWithSidePanel = (props: SidePanelHookProps) => {
}))}
label="List of items with details in a side panel"
hideLabel
- css={spacing('mega')}
+ style={{ margin: '1rem' }}
/>
);
};
@@ -216,7 +215,7 @@ export const WithTopNavigation = (props: SidePanelHookProps): JSX.Element => {
onClose={() => setSideNavigationOpen(false)}
/>
-
+
@@ -279,7 +278,7 @@ const ComponentWithSidePanelExtended = (props: SidePanelHookProps) => {
}))}
label="List of items with details in a side panel"
hideLabel
- css={spacing('mega')}
+ style={{ margin: '1rem' }}
/>
);
};
diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx b/packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx
index e9f1891fd7..51adef89f1 100644
--- a/packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx
+++ b/packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { useState } from 'react';
import { css } from '@emotion/react';
import { Home, Profile, Sales, Shop } from '@sumup/icons';
diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.tsx b/packages/circuit-ui/components/Sidebar/Sidebar.tsx
index 76bdd8f107..bd33a62ff8 100644
--- a/packages/circuit-ui/components/Sidebar/Sidebar.tsx
+++ b/packages/circuit-ui/components/Sidebar/Sidebar.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { Fragment, ReactNode } from 'react';
import { css } from '@emotion/react';
diff --git a/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx b/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx
index 0a9c79188f..91e1df1869 100644
--- a/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx
+++ b/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { useState, useEffect, ReactElement } from 'react';
import { css } from '@emotion/react';
diff --git a/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts b/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts
index 706dc22210..5d25f5121b 100644
--- a/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts
+++ b/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { HTMLAttributes } from 'react';
import { css } from '@emotion/react';
diff --git a/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts b/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts
index 14bcda4fa2..0bcbc4e46f 100644
--- a/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts
+++ b/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { css } from '@emotion/react';
import styled, { StyleProps } from '../../../../styles/styled.js';
diff --git a/packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts b/packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts
index f37394ed4d..b79c7359e7 100644
--- a/packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts
+++ b/packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { css } from '@emotion/react';
import styled, { StyleProps } from '../../../../styles/styled.js';
diff --git a/packages/circuit-ui/components/Sidebar/components/Header/Header.ts b/packages/circuit-ui/components/Sidebar/components/Header/Header.ts
index d5706754de..9c1b3105af 100644
--- a/packages/circuit-ui/components/Sidebar/components/Header/Header.ts
+++ b/packages/circuit-ui/components/Sidebar/components/Header/Header.ts
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { css } from '@emotion/react';
import styled, { StyleProps } from '../../../../styles/styled.js';
diff --git a/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx b/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx
index 8af8bc1643..b3a5c63f8f 100644
--- a/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx
+++ b/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { ReactElement } from 'react';
import { css } from '@emotion/react';
diff --git a/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts b/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts
index 92a2a4086e..6618610868 100644
--- a/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts
+++ b/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { HTMLAttributes } from 'react';
import { css } from '@emotion/react';
diff --git a/packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx b/packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx
index eb8a3273c4..16aa0dd0e5 100644
--- a/packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx
+++ b/packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { HTMLAttributes } from 'react';
import { css } from '@emotion/react';
diff --git a/packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx b/packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx
index 030ca35d99..2b6e7bd7b6 100644
--- a/packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx
+++ b/packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { css } from '@emotion/react';
import { Theme } from '@sumup/design-tokens';
diff --git a/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx b/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx
index 327f76054f..313300689c 100644
--- a/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx
+++ b/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { HTMLAttributes } from 'react';
import { css } from '@emotion/react';
diff --git a/packages/circuit-ui/components/Tooltip/Tooltip.tsx b/packages/circuit-ui/components/Tooltip/Tooltip.tsx
index 15694dc81e..ba9bd639c0 100644
--- a/packages/circuit-ui/components/Tooltip/Tooltip.tsx
+++ b/packages/circuit-ui/components/Tooltip/Tooltip.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { css } from '@emotion/react';
import styled from '../../styles/styled.js';
diff --git a/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx b/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx
index e4adf46cad..f70fc5e4a8 100644
--- a/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx
+++ b/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx
@@ -15,7 +15,6 @@
import Body from '../../components/Body/index.js';
import Button from '../../components/Button/index.js';
-import { spacing } from '../../styles/style-mixins.js';
import { CollapsibleOptions, useCollapsible } from './useCollapsible.js';
@@ -24,14 +23,15 @@ export default {
};
export const Example = (args: CollapsibleOptions) => {
- const { isOpen, getButtonProps, getContentProps } = useCollapsible(args);
+ const { isOpen, getButtonProps, getContentProps } =
+ useCollapsible(args);
return (
-
+
{
'Lorem ipsum dolor amet swag pickled humblebrag retro farm-to-table, shoreditch typewriter deep v single-origin coffee green juice coloring book venmo chambray. Marfa authentic blue bottle mixtape tofu adaptogen. IPhone chia blog palo santo mlkshk tattooed jean shorts yr locavore ennui scenester. Wolf tousled pok pok sartorial scenester man bun salvia quinoa raclette sriracha roof party pour-over venmo hammock. Four dollar toast typewriter 3 wolf moon letterpress disrupt pabst. Neutra irony tousled iPhone banh mi wayfarers hoodie waistcoat.'
}
diff --git a/packages/circuit-ui/styles/style-mixins.spec.tsx b/packages/circuit-ui/styles/style-mixins.spec.tsx
index b162e4f83a..057667c4a5 100644
--- a/packages/circuit-ui/styles/style-mixins.spec.tsx
+++ b/packages/circuit-ui/styles/style-mixins.spec.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { describe, expect, it } from 'vitest';
import { css } from '@emotion/react';
import { light } from '@sumup/design-tokens';
diff --git a/packages/circuit-ui/styles/style-mixins.stories.tsx b/packages/circuit-ui/styles/style-mixins.stories.tsx
index fcfcc7b956..0afabec567 100644
--- a/packages/circuit-ui/styles/style-mixins.stories.tsx
+++ b/packages/circuit-ui/styles/style-mixins.stories.tsx
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { Stack } from '../../../.storybook/components/index.js';
import Button from '../components/Button/index.js';
diff --git a/packages/circuit-ui/styles/style-mixins.ts b/packages/circuit-ui/styles/style-mixins.ts
index c5a3dfa07a..35020cb69d 100644
--- a/packages/circuit-ui/styles/style-mixins.ts
+++ b/packages/circuit-ui/styles/style-mixins.ts
@@ -13,6 +13,8 @@
* limitations under the License.
*/
+/** @jsxImportSource @emotion/react */
+
import { css, SerializedStyles } from '@emotion/react';
import { Theme } from '@sumup/design-tokens';
diff --git a/packages/circuit-ui/tsconfig.json b/packages/circuit-ui/tsconfig.json
index 7074a4eb51..d2a8a7f9cd 100644
--- a/packages/circuit-ui/tsconfig.json
+++ b/packages/circuit-ui/tsconfig.json
@@ -8,7 +8,7 @@
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "react-jsx",
- "jsxImportSource": "@emotion/react",
+ "jsxImportSource": "react",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"noFallthroughCasesInSwitch": true,
diff --git a/tsconfig.json b/tsconfig.json
index a7225805e4..3a3a6522f6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,7 @@
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "react-jsx",
- "jsxImportSource": "@emotion/react",
+ "jsxImportSource": "react",
"moduleResolution": "node",
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,