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

chore: upgrade styled components v6 xstyled v4 #2524

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

chore: upgrade styled components v6 xstyled v4 #2524

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
49a01c5
chore: upgrade all package.json
mleralec Aug 27, 2024
adca4aa
refactor: replace system & shouldForwardProps with box
mleralec Aug 27, 2024
64a61f6
fix: upgrade on website folder
mleralec Aug 27, 2024
fb3b769
fix: audit fix
mleralec Aug 27, 2024
d03a13f
fix: test
mleralec Aug 27, 2024
c62a18c
fix: ts errors
mleralec Aug 29, 2024
1736741
refactor: some theme fixes
mleralec Aug 29, 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
32 changes: 17 additions & 15 deletions packages/EmojiPicker/src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
import styled, { system, th } from '@xstyled/styled-components'
import styled, { css, system, th } from '@xstyled/styled-components'
import { Tab } from '@welcome-ui/tabs'
import * as WUIPopover from '@welcome-ui/popover'
import { Box } from '@welcome-ui/box'

export const Popover = styled(WUIPopover.Popover)`
background-color: ${th('defaultCards.backgroundColor')};
border-width: sm;
border-style: solid;
border-color: border;
color: dark-900;
${system};
export const Popover = styled(WUIPopover.Popover)(
() => css`
background-color: ${th('defaultCards.backgroundColor')};
border-width: sm;
border-style: solid;
border-color: border;
color: dark-900;
${system};

/** we change the arrow item color from popover component */
> div > div > svg {
color: ${th('defaultCards.backgroundColor')};
/** we change the arrow item color from popover component */
> div > div > svg {
color: ${th('defaultCards.backgroundColor')};

#stroke {
color: ${th('defaultCards.borderColor')};
#stroke {
color: ${th('defaultCards.borderColor')};
}
}
}
`
`
)

export const TabList = styled(Tab.List)`
padding: 0 md;
Expand Down
18 changes: 10 additions & 8 deletions packages/Picker/src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import styled, { system } from '@xstyled/styled-components'
import styled, { css, system } from '@xstyled/styled-components'
import { shouldForwardProp } from '@welcome-ui/system'
import * as Ariakit from '@ariakit/react'

export const Radio = styled(Ariakit.Radio).withConfig({ shouldForwardProp })`
position: absolute;
top: 0;
left: 0;
opacity: 0;
export const Radio = styled(Ariakit.Radio).withConfig({ shouldForwardProp })(
() => css`
position: absolute;
top: 0;
left: 0;
opacity: 0;

${system};
`
${system};
`
)
16 changes: 10 additions & 6 deletions packages/Popover/src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,14 @@ export const Popover = styled(Ariakit.Popover)<{ $withCloseButton: boolean }>(
`
)

export const PopoverTrigger = styled(Ariakit.PopoverDisclosure)`
${system}
`
export const PopoverTrigger = styled(Ariakit.PopoverDisclosure)(
() => css`
${system}
`
)

export const PopoverHoverTrigger = styled(Ariakit.HovercardAnchor)`
${system}
`
export const PopoverHoverTrigger = styled(Ariakit.HovercardAnchor)(
() => css`
${system}
`
)
2 changes: 1 addition & 1 deletion website/app/blog/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const Home = () => {
return (
<Box as="main" p="xl">
<Box margin="0 auto" maxWidth={600}>
<Text color="secondary-red" textAlign="center" variant="subtitle-md">
Copy link
Contributor Author

@mleralec mleralec Aug 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @theo-mesnil what is the secondary-red color? 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An invention (it's the next colors but it's not ok here :D)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mleralec it's fixed here #2539

<Text textAlign="center" variant="subtitle-md">
Blog
</Text>
<Text mt="0" textAlign="center" variant="h1">
Expand Down
4 changes: 2 additions & 2 deletions website/build-app/components/Theme/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const Theme = ({ entry }: ColorsProps) => {
{Object.entries(entries).map(([key, value], index) => (
<Grid
borderTop={index !== 0 && '1px solid'}
borderTopColor={index !== 0 && 'border'}
borderTopColor={index !== 0 ? 'border' : undefined}
gap="xxl"
gridTemplateColumns={entry === 'fontSizes' ? '100px 70px 70px' : '50px 70px 70px'}
key={`${entry}-${key}`}
Expand All @@ -36,7 +36,7 @@ export const Theme = ({ entry }: ColorsProps) => {
{typeof value === 'number' && 'px'}
</Text>
{typeof value === 'string' && (value.endsWith('rem') || value === '0') && (
<Text color="dark-600">({theme.toPx(Number(value.replace('rem', '')))})</Text>
<Text color="dark-500">({theme.toPx(Number(value.replace('rem', '')))})</Text>
)}
</Grid>
))}
Expand Down