Skip to content

Commit 7795538

Browse files
gregaubertgregaubert
committed
ECHOES-1026 Remove usage of emotions "css" function inside component rendering and the "styled" function (#562)
1 parent ea9fc53 commit 7795538

File tree

6 files changed

+93
-106
lines changed

6 files changed

+93
-106
lines changed

‎src/common/components/Toast.tsx‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -257,24 +257,22 @@ function ToastPrefix({ variety }: Pick<ToastProps, 'variety'>) {
257257
ToastPrefix.displayName = 'ToastPrefix';
258258

259259
export function ToastGlobalStyles() {
260-
return (
261-
<Global
262-
styles={css`
263-
[data-sonner-toaster] {
264-
z-index: 0;
265-
}
266-
267-
[data-sonner-toast] {
268-
border-radius: ${cssVar('border-radius-400')};
269-
270-
&:focus-visible {
271-
outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
272-
outline-offset: ${cssVar('focus-border-offset-default')};
273-
box-shadow: none;
274-
}
275-
}
276-
`}
277-
/>
278-
);
260+
return <Global styles={toastGlobalStyles} />;
279261
}
280262
ToastGlobalStyles.displayName = 'ToastGlobalStyles';
263+
264+
const toastGlobalStyles = css`
265+
[data-sonner-toaster] {
266+
z-index: 0;
267+
}
268+
269+
[data-sonner-toast] {
270+
border-radius: ${cssVar('border-radius-400')};
271+
272+
&:focus-visible {
273+
outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
274+
outline-offset: ${cssVar('focus-border-offset-default')};
275+
box-shadow: none;
276+
}
277+
}
278+
`;

‎src/components/links/LinkBaseStyled.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,26 @@
1818
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
1919
*/
2020

21-
import { css } from '@emotion/react';
2221
import styled from '@emotion/styled';
2322
import { LinkBase } from './LinkBase';
2423
import { LinkHighlight } from './LinkTypes';
2524

2625
import { cssVar } from '~utils/design-tokens';
2726

2827
const LinkBaseStyledHighlight = {
29-
[LinkHighlight.Accent]: css`
28+
[LinkHighlight.Accent]: `
3029
--color: ${cssVar('color-text-accent')};
3130
--hover: ${cssVar('color-text-link-hover')};
3231
`,
33-
[LinkHighlight.Default]: css`
32+
[LinkHighlight.Default]: `
3433
--color: ${cssVar('color-text-default')};
3534
--hover: ${cssVar('color-text-link-hover')};
3635
`,
37-
[LinkHighlight.Subtle]: css`
36+
[LinkHighlight.Subtle]: `
3837
--color: ${cssVar('color-text-subtle')};
3938
--hover: ${cssVar('color-text-link-hover')};
4039
`,
41-
[LinkHighlight.CurrentColor]: css`
40+
[LinkHighlight.CurrentColor]: `
4241
--color: 'currentColor';
4342
--hover: ${cssVar('color-text-link-hover')};
4443
`,

‎src/components/links/LinkStandalone.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@
1818
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
1919
*/
2020

21-
import { css } from '@emotion/react';
2221
import styled from '@emotion/styled';
2322
import { forwardRef } from 'react';
2423
import { LinkBaseStyled } from './LinkBaseStyled';
2524
import { LinkStandaloneProps } from './LinkTypes';
2625

2726
import { cssVar } from '~utils/design-tokens';
27+
import { IconCustomWrapper, IconMaterialWrapper } from '../icons/IconWrapper';
2828

2929
const LinkStandaloneBase = forwardRef<HTMLAnchorElement, LinkStandaloneProps>((props, ref) => {
3030
const { children, iconLeft, isDiscreet, ...linkProps } = props;
@@ -41,11 +41,7 @@ const LinkStandaloneBase = forwardRef<HTMLAnchorElement, LinkStandaloneProps>((p
4141
LinkStandaloneBase.displayName = 'LinkStandaloneBase';
4242

4343
export const LinkStandalone = styled(LinkStandaloneBase)`
44-
${({ isDiscreet }) =>
45-
isDiscreet &&
46-
css`
47-
font-weight: ${cssVar('font-weight-regular')};
48-
`}
44+
${({ isDiscreet }) => isDiscreet && `font-weight: ${cssVar('font-weight-regular')};`}
4945
5046
text-decoration-line: ${cssVar('text-decoration-none')};
5147
@@ -62,9 +58,11 @@ export const LinkStandalone = styled(LinkStandaloneBase)`
6258
6359
${({ iconLeft }) =>
6460
iconLeft &&
65-
css`
61+
`
6662
& > svg,
67-
& > img {
63+
& > img,
64+
& > ${IconMaterialWrapper},
65+
& > ${IconCustomWrapper} {
6866
margin-right: ${cssVar('dimension-space-50')};
6967
}
7068
`};

‎src/components/select/SelectCommons.tsx‎

Lines changed: 49 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -385,71 +385,69 @@ export const SelectStyled = styled(MantineSelect)`
385385
* Instead, these styles are added as Global emotion styles in the EchoesProvider.
386386
*/
387387
export function SelectGlobalStyles() {
388-
return (
389-
<Global
390-
styles={css`
391-
// Dropdown element - wrapper around the select items
392-
.echoes-select-dropdown,
393-
.echoes-select-dropdown-auto-width {
394-
position: absolute;
388+
return <Global styles={selectGlobalStyles} />;
389+
}
395390

396-
overflow: hidden;
391+
const selectGlobalStyles = css`
392+
// Dropdown element - wrapper around the select items
393+
.echoes-select-dropdown,
394+
.echoes-select-dropdown-auto-width {
395+
position: absolute;
397396
398-
background-color: ${cssVar('color-surface-default')};
399-
border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
400-
border-radius: ${cssVar('border-radius-400')};
397+
overflow: hidden;
401398
402-
box-shadow: ${cssVar('box-shadow-medium')};
399+
background-color: ${cssVar('color-surface-default')};
400+
border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
401+
border-radius: ${cssVar('border-radius-400')};
403402
404-
& .echoes-select-options-wrapper {
405-
max-height: 250px;
406-
overflow-y: auto;
403+
box-shadow: ${cssVar('box-shadow-medium')};
407404
408-
padding: ${cssVar('dimension-space-100')} ${cssVar('dimension-space-0')};
409-
}
410-
}
405+
& .echoes-select-options-wrapper {
406+
max-height: 250px;
407+
overflow-y: auto;
411408
412-
.echoes-select-dropdown-auto-width {
413-
width: auto !important; // We need to override the element width set by Mantine
414-
}
409+
padding: ${cssVar('dimension-space-100')} ${cssVar('dimension-space-0')};
410+
}
411+
}
415412
416-
// Inside the dropdown - Group wrapper, contains a group label and all the items of a group
417-
.echoes-select-group {
418-
display: flex;
419-
flex-direction: column;
420-
padding: ${cssVar('dimension-space-0')};
421-
}
413+
.echoes-select-dropdown-auto-width {
414+
width: auto !important; // We need to override the element width set by Mantine
415+
}
416+
417+
// Inside the dropdown - Group wrapper, contains a group label and all the items of a group
418+
.echoes-select-group {
419+
display: flex;
420+
flex-direction: column;
421+
padding: ${cssVar('dimension-space-0')};
422+
}
422423
423-
// Inside the dropdown - Group header label
424-
.echoes-select-group-label {
425-
padding: ${cssVar('dimension-space-50')} ${cssVar('dimension-space-200')}
426-
${cssVar('dimension-space-100')};
424+
// Inside the dropdown - Group header label
425+
.echoes-select-group-label {
426+
padding: ${`${cssVar('dimension-space-50')} ${cssVar('dimension-space-200')}
427+
${cssVar('dimension-space-100')}`};
427428
428-
font: ${cssVar('typography-text-small-semi-bold')};
429-
color: ${cssVar('color-text-default')};
430-
}
429+
font: ${cssVar('typography-text-small-semi-bold')};
430+
color: ${cssVar('color-text-default')};
431+
}
431432
432-
// Inside the dropdown - Adds a divider between two groups
433-
.echoes-select-group + .echoes-select-group::before {
434-
content: '';
433+
// Inside the dropdown - Adds a divider between two groups
434+
.echoes-select-group + .echoes-select-group::before {
435+
content: '';
435436
436-
flex: 1;
437-
padding: ${cssVar('dimension-space-25')} ${cssVar('dimension-space-0')};
437+
flex: 1;
438+
padding: ${cssVar('dimension-space-25')} ${cssVar('dimension-space-0')};
438439
439-
border-top: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
440-
}
440+
border-top: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
441+
}
441442
442-
.echoes-select-empty {
443-
font: ${cssVar('typography-text-small-medium')};
444-
color: ${cssVar('color-text-subtle')};
445-
text-align: center;
443+
.echoes-select-empty {
444+
font: ${cssVar('typography-text-small-medium')};
445+
color: ${cssVar('color-text-subtle')};
446+
text-align: center;
446447
447-
padding: ${cssVar('dimension-space-50')} ${cssVar('dimension-space-0')};
448-
}
449-
`}
450-
/>
451-
);
452-
}
448+
padding: ${cssVar('dimension-space-50')} ${cssVar('dimension-space-0')};
449+
}
450+
`;
453451

454452
interface SelectRightSectionProps extends Pick<SelectBaseProps, 'isLoading'> {
455453
hasValue: boolean;

‎src/components/typography/TypographyGlobalStyles.tsx‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,21 @@ import { css, Global } from '@emotion/react';
2323
import { cssVar } from '~utils/design-tokens';
2424

2525
export function TypographyGlobalStyles() {
26-
return (
27-
<Global
28-
styles={css`
29-
body {
30-
font: ${cssVar('typography-text-default-regular')};
31-
color: ${cssVar('color-text-default')};
32-
}
33-
34-
pre,
35-
code,
36-
kbd,
37-
samp,
38-
tt {
39-
font: ${cssVar('typography-code-default')};
40-
}
41-
`}
42-
/>
43-
);
26+
return <Global styles={typographyGlobalStyles} />;
4427
}
4528
TypographyGlobalStyles.displayName = 'TypographyGlobalStyles';
29+
30+
const typographyGlobalStyles = css`
31+
body {
32+
font: ${cssVar('typography-text-default-regular')};
33+
color: ${cssVar('color-text-default')};
34+
}
35+
36+
pre,
37+
code,
38+
kbd,
39+
samp,
40+
tt {
41+
font: ${cssVar('typography-code-default')};
42+
}
43+
`;

‎stories/link/LinkStandalone-stories.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,7 @@ export const LinkStandaloneWithIcon: Story = {
8080
...defaultArgs,
8181
children: 'Standalone Link With Icon',
8282
highlight: LinkHighlight.Default,
83-
iconLeft: (
84-
<span style={{ marginRight: '8px' }}>
85-
<IconLink />
86-
</span>
87-
),
83+
iconLeft: <IconLink />,
8884
},
8985
};
9086

0 commit comments

Comments
 (0)