fix: test

WTTJ · Aug 27, 2024 · 564bf01 · 564bf01
1 parent 6ae6a0c
commit 564bf01
Show file tree

Hide file tree

Showing 25 changed files with 6,663 additions and 143 deletions.
diff --git a/packages/Alert/src/styles.ts b/packages/Alert/src/styles.ts
@@ -1,4 +1,4 @@
-import styled, { css, th } from '@xstyled/styled-components'
+import styled, { css, system, th } from '@xstyled/styled-components'
 import { Text } from '@welcome-ui/text'
 
 import { AlertOptions } from './index'
@@ -24,6 +24,7 @@ export const Title = styled(Text).attrs(({ variant }) => ({
     margin: 0;
     margin-bottom: sm;
     ${th(`alerts.title.${alertVariant}`)};
+    ${system}
 
     &:only-child {
       margin-bottom: 0;

diff --git a/packages/Badge/tests/index.test.tsx b/packages/Badge/tests/index.test.tsx
@@ -35,7 +35,7 @@ describe('<Badge>', () => {
     const badge = getByTestId('badge')
 
     expect(badge).toHaveStyleRule('background-color', theme.colors['primary-500'])
-    expect(badge).toHaveStyleRule('color', 'rgba(0,0,0,1)')
+    expect(badge).toHaveStyleRule('color', 'rgba(0, 0, 0, 1)')
   })
 
   it('should have correct primary variant color if disabled', () => {

diff --git a/packages/Button/src/styles.ts b/packages/Button/src/styles.ts
@@ -1,6 +1,7 @@
-import styled, { css, th } from '@xstyled/styled-components'
+import styled, { css, system, th } from '@xstyled/styled-components'
 import { Button as AriakitButton } from '@ariakit/react'
 import { hideFocusRingsDataAttribute } from '@welcome-ui/utils'
+import { shouldForwardProp } from '@welcome-ui/system'
 
 import { ButtonOptions } from './index'
 
@@ -13,7 +14,7 @@ const shapeStyles = (size: ButtonOptions['size'], shape: ButtonOptions['shape']
   `};
 `
 
-export const Button = styled.buttonBox.attrs({ as: AriakitButton })<ButtonOptions>(
+export const Button = styled(AriakitButton).withConfig({ shouldForwardProp })<ButtonOptions>(
   ({ disabled, shape, size = 'md', variant }) => css`
     ${th(`buttons.${variant}`)};
     position: relative;
@@ -33,6 +34,7 @@ export const Button = styled.buttonBox.attrs({ as: AriakitButton })<ButtonOption
     overflow: hidden;
     transition: medium;
     ${shape && shapeStyles(size, shape)};
+    ${system}
 
     & > svg.wui-icon,
     & > i.wui-icon-font {

diff --git a/packages/Card/src/Cover.styles.ts b/packages/Card/src/Cover.styles.ts
@@ -1,6 +1,7 @@
-import styled, { th } from '@xstyled/styled-components'
+import styled, { system, th } from '@xstyled/styled-components'
 import { Shape } from '@welcome-ui/shape'
 
-export const Cover = styled.box.attrs({ as: Shape })`
+export const Cover = styled(Shape)`
   ${th('cards.cover')};
+  ${system}
 `
diff --git a/packages/Checkbox/src/styles.ts b/packages/Checkbox/src/styles.ts
@@ -1,12 +1,13 @@
 import styled, { css, th } from '@xstyled/styled-components'
 import * as Ariakit from '@ariakit/react'
 import { defaultFieldStyles } from '@welcome-ui/utils'
+import { shouldForwardProp } from '@welcome-ui/system'
 
 import { CheckboxProps } from './index'
 
 /* /!\ WARNING /!\ Don't add style after pseudo selector, it won't apply because of the dynamic color injected in the fill of the content */
 
-export const Checkbox = styled.box.attrs({ as: Ariakit.Checkbox })<CheckboxProps>(
+export const Checkbox = styled(Ariakit.Checkbox).withConfig({ shouldForwardProp })<CheckboxProps>(
   ({ indeterminate, order = '-1', size, theme, variant }) => css`
     ${defaultFieldStyles({ size, variant })};
     ${th('checkboxes.default')}

diff --git a/packages/CloseButton/src/styles.ts b/packages/CloseButton/src/styles.ts
@@ -1,9 +1,11 @@
-import styled, { th } from '@xstyled/styled-components'
+import styled, { system, th } from '@xstyled/styled-components'
 import { Button } from '@welcome-ui/button'
 
 export const CloseButton = styled(Button)`
   & > svg:only-child {
     width: ${th('space.md')};
     height: ${th('space.md')};
   }
+
+  ${system}
 `
diff --git a/packages/DateTimePickerCommon/src/styles.ts b/packages/DateTimePickerCommon/src/styles.ts
@@ -1,4 +1,4 @@
-import styled, { css } from '@xstyled/styled-components'
+import styled, { css, system } from '@xstyled/styled-components'
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker'
 import { StyledIcon } from '@welcome-ui/icon'
 import { StyledButton } from '@welcome-ui/button'
@@ -9,26 +9,28 @@ import { defaultFieldStyles, DefaultFieldStylesProps } from '@welcome-ui/utils'
 
 import { Focused } from './CustomInput'
 
-export const StyledDatePicker = styled.box.attrs({
-  // Workaround to this issue: https://github.com/Hacker0x01/react-datepicker/issues/3834
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  as: (ReactDatePicker.default as typeof ReactDatePicker) || ReactDatePicker,
-})<DefaultFieldStylesProps & ReactDatePickerProps>(
+// Workaround to this issue: https://github.com/Hacker0x01/react-datepicker/issues/3834
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const StyledDatePicker = styled(ReactDatePicker.default || ReactDatePicker)<
+  DefaultFieldStylesProps & ReactDatePickerProps
+>(
   ({ iconPlacement, size, transparent, variant }) => css`
     ${defaultFieldStyles({ size, variant, transparent, isClearable: true, iconPlacement })};
+    ${system};
   `
 )
 
-export const StyledTimePicker = styled.box.attrs({
+export const StyledTimePicker = styled(
   // Workaround to this issue: https://github.com/Hacker0x01/react-datepicker/issues/3834
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  as: (ReactDatePicker.default as typeof ReactDatePicker) || ReactDatePicker,
-})<DefaultFieldStylesProps>(
+  ReactDatePicker.default || ReactDatePicker
+)<DefaultFieldStylesProps>(
   ({ iconPlacement, size, transparent, variant }) => css`
     ${defaultFieldStyles({ size, variant, transparent, isClearable: true, iconPlacement })};
     text-align: center;
+    ${system};
   `
 )
 

diff --git a/packages/EmojiPicker/src/styles.ts b/packages/EmojiPicker/src/styles.ts
@@ -1,14 +1,15 @@
-import styled, { th } from '@xstyled/styled-components'
+import styled, { 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.box.attrs({ as: WUIPopover.Popover })`
+export const Popover = styled(WUIPopover.Popover)`
   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 {
@@ -20,10 +21,11 @@ export const Popover = styled.box.attrs({ as: WUIPopover.Popover })`
   }
 `
 
-export const TabList = styled.box.attrs({ as: Tab.List })`
+export const TabList = styled(Tab.List)`
   padding: 0 md;
   /* Remove margin from Tab.List */
   margin-bottom: -xl;
+  ${system}
 `
 
 export const EmojiButton = styled.buttonBox.attrs({