diff --git a/package.json b/package.json
index a3d0c7fa53..f348237709 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,7 @@
"depcheck": "^1.4.7",
"esbuild": "^0.17.11",
"esbuild-plugin-replace": "^1.4.0",
+ "eslint-plugin-typescript-sort-keys": "^3.3.0",
"esm": "^3.2.25",
"husky": "8.0.3",
"jest": "29.7.0",
@@ -134,7 +135,7 @@
"styled-components": "^5.3.9",
"svgo": "^3.0.1",
"typescript": "5.0.2",
- "wttj-config": "^2.6.2",
+ "wttj-config": "^3.0.1",
"yargs": "^17.7.2"
},
"resolutions": {
diff --git a/packages/Accordion/src/index.tsx b/packages/Accordion/src/index.tsx
index 32836c718b..e27e4b8eb5 100644
--- a/packages/Accordion/src/index.tsx
+++ b/packages/Accordion/src/index.tsx
@@ -6,18 +6,18 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
import * as S from './styles'
export interface AccordionOptions {
- title: string | JSX.Element
icon?: JSX.Element
/**
* store from useAccordion()
*/
store: UseAccordion
+ title: string | JSX.Element
}
export type AccordionProps = CreateWuiProps<'div', AccordionOptions>
export const Accordion = forwardRef<'div', AccordionProps>(
- ({ children, icon = , title, store, dataTestId, ...rest }, ref) => {
+ ({ children, dataTestId, icon = , store, title, ...rest }, ref) => {
return (
diff --git a/packages/Accordion/src/styles.ts b/packages/Accordion/src/styles.ts
index 950dab4536..d6195312b2 100644
--- a/packages/Accordion/src/styles.ts
+++ b/packages/Accordion/src/styles.ts
@@ -4,7 +4,7 @@ import { Box } from '@welcome-ui/box'
export const Accordion = styled.div`
${th('accordions.wrapper')};
- ${system}
+ ${system};
transition: medium;
&:hover {
diff --git a/packages/Alert/src/index.tsx b/packages/Alert/src/index.tsx
index 0087f969d4..06bb25cbe7 100644
--- a/packages/Alert/src/index.tsx
+++ b/packages/Alert/src/index.tsx
@@ -11,16 +11,16 @@ import { Title } from './Title'
export type Size = 'sm' | 'md'
export interface AlertOptions {
- variant?: Variant
- size?: Size
- icon?: JSX.Element | null
- isFullWidth?: boolean
closeButtonDataTestId?: string
cta?: JSX.Element
/**
* @description add a close button with an onclick handleClose function
*/
handleClose?: () => void
+ icon?: JSX.Element | null
+ isFullWidth?: boolean
+ size?: Size
+ variant?: Variant
}
export type AlertProps = CreateWuiProps<'div', AlertOptions>
diff --git a/packages/Alert/src/styles.ts b/packages/Alert/src/styles.ts
index aa7a0964b6..be5181a011 100644
--- a/packages/Alert/src/styles.ts
+++ b/packages/Alert/src/styles.ts
@@ -13,7 +13,7 @@ export const Alert = styled(Box)(
${th('alerts.default')};
${th(`alerts.${variant}`)};
${th(`alerts.sizes.${size}`)};
- ${system}
+ ${system};
`
)
@@ -26,7 +26,7 @@ export const Title = styled(Text).attrs(({ variant }: AlertOptions) => ({
margin: 0;
margin-bottom: sm;
${th(`alerts.title.${alertVariant}`)};
- ${system}
+ ${system};
&:only-child {
margin-bottom: 0;
diff --git a/packages/Badge/src/index.tsx b/packages/Badge/src/index.tsx
index c0a5e9b8d3..ccdace136e 100644
--- a/packages/Badge/src/index.tsx
+++ b/packages/Badge/src/index.tsx
@@ -4,13 +4,13 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
import * as S from './styles'
export type BadgeOptions = {
+ children: string | number
disabled?: boolean
shape?: 'circle' | 'square'
size?: 'sm' | 'md'
variant?: 'default' | 'primary'
// if a number is higher than 99, we replace this number by 99+
withNumberAbbreviation?: boolean
- children: string | number
}
export type BadgeProps = CreateWuiProps<'div', BadgeOptions>
diff --git a/packages/Breadcrumb/src/Item.tsx b/packages/Breadcrumb/src/Item.tsx
index 5fcd2ba2a7..e7fada1322 100644
--- a/packages/Breadcrumb/src/Item.tsx
+++ b/packages/Breadcrumb/src/Item.tsx
@@ -6,8 +6,8 @@ import * as S from './Item.styles'
export interface ItemOptions {
children: React.ReactNode
- separator?: string | React.ReactNode
isActive?: boolean
+ separator?: string | React.ReactNode
/* useful for react-router */
to?: string
}
diff --git a/packages/Button/src/index.tsx b/packages/Button/src/index.tsx
index a2788085a2..d4ac8e5570 100644
--- a/packages/Button/src/index.tsx
+++ b/packages/Button/src/index.tsx
@@ -25,9 +25,9 @@ export type Variant =
export interface ButtonOptions {
disabled?: boolean
isLoading?: boolean
+ shape?: Shape
size?: Size
variant?: Variant
- shape?: Shape
}
export type ButtonProps = CreateWuiProps<'button', ButtonOptions>
diff --git a/packages/ButtonGroup/src/styles.ts b/packages/ButtonGroup/src/styles.ts
index 83362b763c..344f4eb654 100644
--- a/packages/ButtonGroup/src/styles.ts
+++ b/packages/ButtonGroup/src/styles.ts
@@ -30,5 +30,5 @@ export const ButtonGroup = styled.div`
}
}
- ${system}
+ ${system};
`
diff --git a/packages/Card/src/Cover.styles.ts b/packages/Card/src/Cover.styles.ts
index 85d2f3b537..bcd682b98c 100644
--- a/packages/Card/src/Cover.styles.ts
+++ b/packages/Card/src/Cover.styles.ts
@@ -4,5 +4,5 @@ import { Shape } from '@welcome-ui/shape'
export const Cover = styled(Shape)`
${th('cards.cover')};
- ${system}
+ ${system};
`
diff --git a/packages/Card/src/styles.ts b/packages/Card/src/styles.ts
index f8240f1d59..efae02b21b 100644
--- a/packages/Card/src/styles.ts
+++ b/packages/Card/src/styles.ts
@@ -8,11 +8,11 @@ export const Card = styled(Box)`
background-size: cover;
background-position: center;
- ${system}
+ ${system};
`
export const Body = styled(Box)`
padding: lg;
- ${system}
+ ${system};
`
diff --git a/packages/Checkbox/src/index.tsx b/packages/Checkbox/src/index.tsx
index 4336c3d080..9222c37c86 100644
--- a/packages/Checkbox/src/index.tsx
+++ b/packages/Checkbox/src/index.tsx
@@ -5,8 +5,8 @@ import { DefaultFieldStylesProps } from '@welcome-ui/utils'
import * as S from './styles'
export interface CheckboxOptions extends DefaultFieldStylesProps {
- checked?: boolean
Component?: React.ElementType
+ checked?: boolean
disabled?: boolean
indeterminate?: boolean
name?: string
@@ -19,10 +19,10 @@ export const Checkbox = forwardRef<'input', CheckboxProps>(
(
{
checked = false,
- indeterminate = false,
Component = S.Checkbox,
dataTestId,
disabled,
+ indeterminate = false,
name,
onChange,
size,
diff --git a/packages/Checkbox/src/styles.ts b/packages/Checkbox/src/styles.ts
index b829bd1ec2..a9732ed6b4 100644
--- a/packages/Checkbox/src/styles.ts
+++ b/packages/Checkbox/src/styles.ts
@@ -47,6 +47,7 @@ export const Checkbox = styled(Ariakit.Checkbox).withConfig({
${th('checkboxes.checked')};
}
+ /* stylelint-disable string-no-newline */
&::after {
content: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 10 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.3973 1.76919C0.953776 1.81988 0.634816 2.04775 0.685235 2.49156C0.732149 2.90436 1.08212 3.03624 1.48789 3.03624L8.6029 2.23086C9.04669 2.18017 9.36538 1.9523 9.31469 1.50849C9.26427 1.06468 8.86389 0.917163 8.41956 0.969201C4.90971 1.38026 4.90828 1.36792 1.3973 1.76919Z' fill='${theme
.defaultFields.checkableField.checked.color}'/%3E%3C/svg%3E");
diff --git a/packages/Core/src/theme/accordions.ts b/packages/Core/src/theme/accordions.ts
index 9b8bf67144..33ef5071a0 100644
--- a/packages/Core/src/theme/accordions.ts
+++ b/packages/Core/src/theme/accordions.ts
@@ -3,11 +3,11 @@ import { CSSObject } from '@xstyled/styled-components'
import { WuiTheme } from './types'
export type ThemeAccordions = {
- padding: string
- wrapper: CSSObject
- icon: CSSObject
content: CSSObject
+ icon: CSSObject
+ padding: string
title: CSSObject
+ wrapper: CSSObject
}
export const getAccordions = (theme: WuiTheme): ThemeAccordions => {
diff --git a/packages/Core/src/theme/alerts.ts b/packages/Core/src/theme/alerts.ts
index 8df3cf7022..a0009f61f4 100644
--- a/packages/Core/src/theme/alerts.ts
+++ b/packages/Core/src/theme/alerts.ts
@@ -9,9 +9,9 @@ type Sizes = 'sm' | 'md'
type AttributesState = CSSObject
export type ThemeAlerts = {
- sizes: Record
default: CSSObject
- title: Record
+ sizes: Record
+ title: Record
} & Record
export const getAlerts = (theme: WuiTheme): ThemeAlerts => {
diff --git a/packages/Core/src/theme/badges.ts b/packages/Core/src/theme/badges.ts
index 8543769dce..4524fb5f3c 100644
--- a/packages/Core/src/theme/badges.ts
+++ b/packages/Core/src/theme/badges.ts
@@ -4,17 +4,17 @@ import { WuiTheme } from './types'
export type ThemeAccordions = {
default: CSSObject
- variants: {
- default: CSSObject
- primary: CSSObject
- }
disabled: {
default: CSSObject
primary: CSSObject
}
sizes: {
- sm: CSSObject
md: CSSObject
+ sm: CSSObject
+ }
+ variants: {
+ default: CSSObject
+ primary: CSSObject
}
}
diff --git a/packages/Core/src/theme/borders.ts b/packages/Core/src/theme/borders.ts
index 3fc03f57b1..58b4fb18f1 100644
--- a/packages/Core/src/theme/borders.ts
+++ b/packages/Core/src/theme/borders.ts
@@ -1,7 +1,7 @@
export type ThemeBorderWidths = {
- sm: string
- md: string
lg: string
+ md: string
+ sm: string
}
export const borderWidths: ThemeBorderWidths = {
diff --git a/packages/Core/src/theme/breadcrumbs.ts b/packages/Core/src/theme/breadcrumbs.ts
index f42433ab35..6abce23ffd 100644
--- a/packages/Core/src/theme/breadcrumbs.ts
+++ b/packages/Core/src/theme/breadcrumbs.ts
@@ -3,12 +3,12 @@ import { CSSObject } from '@xstyled/styled-components'
import { WuiTheme } from './types'
export type ThemeBreadcrumbs = {
- list: CSSObject
item: {
+ active: CSSObject
default: CSSObject
hover: CSSObject
- active: CSSObject
}
+ list: CSSObject
separator: CSSObject
}
diff --git a/packages/Core/src/theme/checkboxes.ts b/packages/Core/src/theme/checkboxes.ts
index 094616a6b6..bd99fa59dc 100644
--- a/packages/Core/src/theme/checkboxes.ts
+++ b/packages/Core/src/theme/checkboxes.ts
@@ -3,9 +3,9 @@ import { CSSObject } from '@xstyled/styled-components'
import { WuiTheme } from './types'
export type ThemeCheckboxes = {
+ checked: CSSObject
default: CSSObject
disabled: CSSObject
- checked: CSSObject
}
export const getCheckboxes = (theme: WuiTheme): ThemeCheckboxes => {
diff --git a/packages/Core/src/theme/core.ts b/packages/Core/src/theme/core.ts
index 806fed2995..b8021bdef1 100644
--- a/packages/Core/src/theme/core.ts
+++ b/packages/Core/src/theme/core.ts
@@ -73,6 +73,7 @@ export type ThemeFontsUrl =
| string
export type Options = {
+ [param: string]: unknown
defaultFontFamily?: string
defaultFontSize?: number
defaultLetterSpacing?: string
@@ -80,7 +81,6 @@ export type Options = {
fontsUrl?: ThemeFontsUrl
headingFontFamily?: string
iconFontFamily?: string
- [param: string]: unknown
}
export const createTheme = (options: Options = {}): WuiTheme => {
diff --git a/packages/Core/src/theme/defaultFields.ts b/packages/Core/src/theme/defaultFields.ts
index 7a0915327d..bc75e5ceee 100644
--- a/packages/Core/src/theme/defaultFields.ts
+++ b/packages/Core/src/theme/defaultFields.ts
@@ -5,35 +5,35 @@ import { ThemeFocus } from './focus'
import { WuiTheme } from './types'
export type ThemeDefaultFields = {
- default: CSSObject
- sizes: Record
- iconPlacement: Record
checkableField: {
checked: CSSObject
disabled: CSSObject
}
+ checkablelabel: {
+ checked: CSSObject
+ default: CSSObject
+ }
+ default: CSSObject
disabled: CSSObject
- placeholder: CSSObject
+ fieldset: CSSObject
focused: {
default: CSSObject & ReturnType
error: CSSObject & ReturnType
- warning: CSSObject & ReturnType
- success: CSSObject & ReturnType
info: CSSObject & ReturnType
+ success: CSSObject & ReturnType
+ warning: CSSObject & ReturnType
}
- checkablelabel: {
- default: CSSObject
- checked: CSSObject
- }
+ iconPlacement: Record
+ placeholder: CSSObject
select: {
default: CSSObject
+ disabled: CSSObject
existing: CSSObject
highlighted: CSSObject
- selectedAndHighlighted: CSSObject
selected: CSSObject
- disabled: CSSObject
+ selectedAndHighlighted: CSSObject
}
- fieldset: CSSObject
+ sizes: Record
}
export const getDefaultFields = (theme: WuiTheme): ThemeDefaultFields => {
diff --git a/packages/Core/src/theme/drawers.ts b/packages/Core/src/theme/drawers.ts
index 2e00c7018f..7d4ecf8c43 100644
--- a/packages/Core/src/theme/drawers.ts
+++ b/packages/Core/src/theme/drawers.ts
@@ -6,15 +6,15 @@ type Size = 'sm' | 'md' | 'lg'
export type ThemeDrawers = {
backdrop: CSSObject
- default: CSSObject
closeButton: CSSObject
- title: CSSObject
content: CSSObject
+ default: CSSObject
footer: CSSObject
sizes: {
horizontal: Record>
vertical: Record>
}
+ title: CSSObject
}
export const getDrawers = (theme: WuiTheme): ThemeDrawers => {
diff --git a/packages/Core/src/theme/filedrops.ts b/packages/Core/src/theme/filedrops.ts
index 7cc6c55e39..e60f746ab5 100644
--- a/packages/Core/src/theme/filedrops.ts
+++ b/packages/Core/src/theme/filedrops.ts
@@ -4,9 +4,9 @@ import { WuiTheme } from './types'
export type ThemeFiledrops = {
default: CSSObject
+ disabled: CSSObject
dragAccept: Record
dragReject: Record
- disabled: CSSObject
}
export const getFiledrops = (theme: WuiTheme): ThemeFiledrops => {
diff --git a/packages/Core/src/theme/fonts.ts b/packages/Core/src/theme/fonts.ts
index 1e1cf4fc72..3c8d6cc6e4 100644
--- a/packages/Core/src/theme/fonts.ts
+++ b/packages/Core/src/theme/fonts.ts
@@ -2,13 +2,13 @@ import { WuiTheme } from './types'
type FontFace = {
display?: FontDisplay
+ extensions?: string[]
isVariable?: boolean
stretch?: string
style?: string
- url: string
uniCodeRange?: string
+ url: string
weight?: string
- extensions?: string[]
}
export type ThemeFontFaces = {
diff --git a/packages/Core/src/theme/icons.ts b/packages/Core/src/theme/icons.ts
index 253d87f59e..7f2f8e35b0 100644
--- a/packages/Core/src/theme/icons.ts
+++ b/packages/Core/src/theme/icons.ts
@@ -1,11 +1,11 @@
import { WuiTheme } from './types'
export type ThemeIcons = {
- xs: string
- sm: string
- md: string
lg: string
+ md: string
+ sm: string
xl: string
+ xs: string
xxl: string
}
diff --git a/packages/Core/src/theme/links.ts b/packages/Core/src/theme/links.ts
index b2de727ea9..58b18a4f6f 100644
--- a/packages/Core/src/theme/links.ts
+++ b/packages/Core/src/theme/links.ts
@@ -4,7 +4,6 @@ import { WuiTheme } from './types'
export type ThemeLinks = {
default: CSSObject
- withExternalLink: CSSObject
disabled: CSSObject
primary: {
default: CSSObject
@@ -14,6 +13,7 @@ export type ThemeLinks = {
default: CSSObject
hover: CSSObject
}
+ withExternalLink: CSSObject
}
export const getLinks = (theme: WuiTheme): ThemeLinks => {
diff --git a/packages/Core/src/theme/loaders.ts b/packages/Core/src/theme/loaders.ts
index d25ca148a4..36448feb14 100644
--- a/packages/Core/src/theme/loaders.ts
+++ b/packages/Core/src/theme/loaders.ts
@@ -1,10 +1,10 @@
import { WuiTheme } from './types'
export type ThemeLoaders = {
- xs: string
- sm: string
- md: string
lg: string
+ md: string
+ sm: string
+ xs: string
}
export const getLoaders = ({ toRem }: WuiTheme): ThemeLoaders => ({
diff --git a/packages/Core/src/theme/modals.ts b/packages/Core/src/theme/modals.ts
index 2b08bfdb62..b0adb539b1 100644
--- a/packages/Core/src/theme/modals.ts
+++ b/packages/Core/src/theme/modals.ts
@@ -6,13 +6,13 @@ type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'auto'
export type ThemeModals = {
backdrop: CSSObject
- default: CSSObject
- header: CSSObject
body: CSSObject
+ cover: Record
+ default: CSSObject
footer: CSSObject
gutter: string
+ header: CSSObject
sizes: Record
- cover: Record
}
export const getModals = (theme: WuiTheme): ThemeModals => {
diff --git a/packages/Core/src/theme/paginations.ts b/packages/Core/src/theme/paginations.ts
index 87943f6520..9f474bef89 100644
--- a/packages/Core/src/theme/paginations.ts
+++ b/packages/Core/src/theme/paginations.ts
@@ -3,10 +3,10 @@ import { CSSObject } from '@xstyled/styled-components'
import { WuiTheme } from './types'
export interface ThemePaginations {
- default: CSSObject
- item: CSSObject
active: CSSObject
+ default: CSSObject
disabled: CSSObject
+ item: CSSObject
}
export const getPaginations = (theme: WuiTheme): ThemePaginations => {
diff --git a/packages/Core/src/theme/popovers.ts b/packages/Core/src/theme/popovers.ts
index d5c49e4985..090ce1fabc 100644
--- a/packages/Core/src/theme/popovers.ts
+++ b/packages/Core/src/theme/popovers.ts
@@ -3,8 +3,8 @@ import { CSSObject } from '@xstyled/styled-components'
import { WuiTheme } from './types'
export type ThemePopovers = {
- default: CSSObject
content: CSSObject
+ default: CSSObject
title: CSSObject
}
diff --git a/packages/Core/src/theme/radii.ts b/packages/Core/src/theme/radii.ts
index 7b90b1e000..220901b6cc 100644
--- a/packages/Core/src/theme/radii.ts
+++ b/packages/Core/src/theme/radii.ts
@@ -1,14 +1,14 @@
import { WuiTheme } from './types'
export type ThemeRadii = {
+ [key: number]: string
+ full: string
+ lg: string
+ md: string
none: string
sm: string
- md: string
- lg: string
xl: string
xxl: string
- full: string
- [key: number]: string
}
export const getRadii = (theme: WuiTheme): ThemeRadii => {
diff --git a/packages/Core/src/theme/radios.ts b/packages/Core/src/theme/radios.ts
index d7f91f57be..0a9c41ab2c 100644
--- a/packages/Core/src/theme/radios.ts
+++ b/packages/Core/src/theme/radios.ts
@@ -3,12 +3,12 @@ import { CSSObject } from '@xstyled/styled-components'
import { WuiTheme } from './types'
export type ThemeRadios = {
- default: CSSObject
checked: CSSObject
checkedCenteredColor: {
default: string
disabled: string
}
+ default: CSSObject
}
export const getRadios = (theme: WuiTheme): ThemeRadios => {
diff --git a/packages/Core/src/theme/radiosTabs.ts b/packages/Core/src/theme/radiosTabs.ts
index 06c706dcb0..e14e755aa9 100644
--- a/packages/Core/src/theme/radiosTabs.ts
+++ b/packages/Core/src/theme/radiosTabs.ts
@@ -3,8 +3,8 @@ import { CSSObject } from '@xstyled/styled-components'
import { WuiTheme } from './types'
export type ThemeRadioTabs = {
- default: CSSObject
checked: CSSObject
+ default: CSSObject
}
export const getRadioTabs = (theme: WuiTheme): ThemeRadioTabs => {
diff --git a/packages/Core/src/theme/screens.ts b/packages/Core/src/theme/screens.ts
index ad95b7c911..4a72dceec8 100644
--- a/packages/Core/src/theme/screens.ts
+++ b/packages/Core/src/theme/screens.ts
@@ -1,14 +1,14 @@
export type ThemeScreens = {
- xs: number
- sm: number
- md: number
+ [key: string]: number
+ [key: number]: number
+ '3xl': number
+ '4xl': number
lg: number
+ md: number
+ sm: number
xl: number
+ xs: number
xxl: number
- '3xl': number
- '4xl': number
- [key: string]: number
- [key: number]: number
}
export const screens: ThemeScreens = {
diff --git a/packages/Core/src/theme/shadows.ts b/packages/Core/src/theme/shadows.ts
index 443c96b693..f1844dddb5 100644
--- a/packages/Core/src/theme/shadows.ts
+++ b/packages/Core/src/theme/shadows.ts
@@ -1,6 +1,6 @@
export type ThemeShadows = {
- sm: string
md: string
+ sm: string
}
export const shadows: ThemeShadows = {
diff --git a/packages/Core/src/theme/sliders.ts b/packages/Core/src/theme/sliders.ts
index f563b96478..4a3c202069 100644
--- a/packages/Core/src/theme/sliders.ts
+++ b/packages/Core/src/theme/sliders.ts
@@ -4,11 +4,11 @@ import { WuiTheme } from './types'
export type ThemeSliders = {
default: CSSObject
- selector: CSSObject
- focused: CSSObject
- rangeInput: CSSObject
disabled: CSSObject
+ focused: CSSObject
output: CSSObject
+ rangeInput: CSSObject
+ selector: CSSObject
}
export const getSliders = (theme: WuiTheme): ThemeSliders => {
diff --git a/packages/Core/src/theme/space.ts b/packages/Core/src/theme/space.ts
index ee992574eb..1d1ecd397c 100644
--- a/packages/Core/src/theme/space.ts
+++ b/packages/Core/src/theme/space.ts
@@ -1,20 +1,20 @@
import { WuiTheme } from './types'
export type ThemeSpace = {
- xxs: string
- xs: string
- sm: string
- md: string
- lg: string
- xl: string
- xxl: string
+ [key: string]: string
+ [key: number]: string
'3xl': string
'4xl': string
'5xl': string
'6xl': string
'7xl': string
- [key: string]: string
- [key: number]: string
+ lg: string
+ md: string
+ sm: string
+ xl: string
+ xs: string
+ xxl: string
+ xxs: string
}
export const getSpace = (theme: WuiTheme): ThemeSpace => {
diff --git a/packages/Core/src/theme/tables.ts b/packages/Core/src/theme/tables.ts
index ef199b3960..670b162152 100644
--- a/packages/Core/src/theme/tables.ts
+++ b/packages/Core/src/theme/tables.ts
@@ -3,15 +3,15 @@ import { CSSObject } from '@xstyled/styled-components'
import { WuiTheme } from './types'
export type ThemeTables = {
- th: CSSObject
td: CSSObject
+ th: CSSObject
tr: {
+ clickable: CSSObject
default: CSSObject
error: CSSObject
- warning: CSSObject
info: CSSObject
success: CSSObject
- clickable: CSSObject
+ warning: CSSObject
}
}
diff --git a/packages/Core/src/theme/tabs.ts b/packages/Core/src/theme/tabs.ts
index 66bc4b8993..d517150615 100644
--- a/packages/Core/src/theme/tabs.ts
+++ b/packages/Core/src/theme/tabs.ts
@@ -5,27 +5,27 @@ import { WuiTheme } from './types'
type Size = 'sm' | 'md'
export type ThemeTabs = {
- tabsBorder: {
+ activeBar: {
horizontal: CSSObject
vertical: CSSObject
}
+ badge: CSSObject
+ icon: CSSObject
item: {
- default: CSSObject
active: CSSObject
- focus: CSSObject
+ default: CSSObject
disabled: CSSObject
+ focus: CSSObject
}
panel: {
- vertical: CSSObject
horizontal: CSSObject
+ vertical: CSSObject
}
- activeBar: {
+ size: Record
+ tabsBorder: {
horizontal: CSSObject
vertical: CSSObject
}
- size: Record
- icon: CSSObject
- badge: CSSObject
}
export const getTabs = (theme: WuiTheme): ThemeTabs => {
diff --git a/packages/Core/src/theme/tags.ts b/packages/Core/src/theme/tags.ts
index 9b37290989..5079dbce0d 100644
--- a/packages/Core/src/theme/tags.ts
+++ b/packages/Core/src/theme/tags.ts
@@ -22,11 +22,11 @@ type Size = 'xs' | 'sm' | 'md'
export type ThemeTags = {
default: CSSObject
- variants: Record
hover: Record
- sizes: Record
icon: Record
shape: Record
+ sizes: Record
+ variants: Record
}
export const getTags = (theme: WuiTheme): ThemeTags => {
diff --git a/packages/Core/src/theme/toasts.ts b/packages/Core/src/theme/toasts.ts
index 2a8d339706..69f65831d5 100644
--- a/packages/Core/src/theme/toasts.ts
+++ b/packages/Core/src/theme/toasts.ts
@@ -4,9 +4,8 @@ import { WuiTheme } from './types'
import { getTexts } from './typography'
export type ThemeToasts = {
- default: CSSObject
- top: CSSObject
bottom: CSSObject
+ default: CSSObject
growls: {
default: CSSObject
title: CSSObject
@@ -14,6 +13,7 @@ export type ThemeToasts = {
snackbar: {
default: CSSObject
}
+ top: CSSObject
}
export const getToasts = (theme: WuiTheme): ThemeToasts => {
diff --git a/packages/Core/src/theme/toggles.ts b/packages/Core/src/theme/toggles.ts
index e2c78aa4b0..8598576ae2 100644
--- a/packages/Core/src/theme/toggles.ts
+++ b/packages/Core/src/theme/toggles.ts
@@ -9,9 +9,9 @@ const SM_LINE_HEIGHT_ADJUSTMENTS = '0.12rem ! important'
type State = 'default' | 'checked' | 'disabled' | 'sizes'
export type ThemeToggles = {
- item: Record
after: Record
icon: Record<'sizes' | 'position', CSSObject>
+ item: Record
}
export const getToggles = (theme: WuiTheme): ThemeToggles => {
diff --git a/packages/Core/src/theme/transitions.ts b/packages/Core/src/theme/transitions.ts
index 15128ebace..c334eaa9fe 100644
--- a/packages/Core/src/theme/transitions.ts
+++ b/packages/Core/src/theme/transitions.ts
@@ -13,9 +13,9 @@ export const timingFunction: ThemeTimingFunction = {
}
export type ThemeTransitions = {
- slow: CSSObject['transition']
- medium: CSSObject['transition']
fast: CSSObject['transition']
+ medium: CSSObject['transition']
+ slow: CSSObject['transition']
}
export const transitions: ThemeTransitions = {
diff --git a/packages/Core/src/theme/types.ts b/packages/Core/src/theme/types.ts
index 050f3cf76d..0a029fab74 100644
--- a/packages/Core/src/theme/types.ts
+++ b/packages/Core/src/theme/types.ts
@@ -79,69 +79,68 @@ type XStyledTheme = Omit
type StyledComponentsTheme = Omit
export interface WuiTheme extends XStyledTheme, StyledComponentsTheme {
- transformers: {
- px: (value: CSSScalar) => CSSScalar
- border: (value: CSSScalar) => CSSScalar
- }
- toEm: (int: number) => string
- toRem: (int?: number) => string
- toPx: (int?: number) => string
- colors: ThemeColors
- underline: ThemeUnderline
+ accordions: ThemeAccordions
+ alerts: ThemeAlerts
+ avatars: ThemeAvatars
borderWidths: ThemeBorderWidths
+ breadcrumbs: ThemeBreadcrumbs
+ buttons: ThemeButtons
+ cards: ThemeCards
+ checkboxes: ThemeCheckboxes
+ colors: ThemeColors
+ dateTimePickerCommon: ThemeDateTimePickerCommon
+ defaultCards: ThemeDefaultCards
+ defaultFields: ThemeDefaultFields
+ defaultLetterSpacing: string
+ defaultLineHeight: number
+ drawers: ThemeDrawers
+ dropdownMenu: ThemeDropdownMenu
+ filedrops: ThemeFiledrops
+ focus: ThemeFocus
fontFaces: ThemeFontFaces
- fontsUrl: ThemeFontsUrl
fontSizes: ThemeFontSizes
- defaultLineHeight: number
- defaultLetterSpacing: string
- lineHeights: ThemeLineHeights
fontWeights: ThemeFontWeights
- letterSpacings: ThemeLetterSpacings
fonts: ThemeFonts
- screens: ThemeScreens
- space: ThemeSpace
- inset: ThemeSpace
+ fontsUrl: ThemeFontsUrl
+ hints: ThemeHints
icons: ThemeIcons
+ inset: ThemeSpace
+ labels: ThemeLabels
+ letterSpacings: ThemeLetterSpacings
+ lineHeights: ThemeLineHeights
+ links: ThemeLinks
+ loaders: ThemeLoaders
+ modals: ThemeModals
+ paginations: ThemePaginations
+ popovers: ThemePopovers
radii: ThemeRadii
- transitions: ThemeTransitions
- timingFunction: ThemeTimingFunction
- shadows: ThemeShadows
+ radioTabs: ThemeRadioTabs
+ radios: ThemeRadios
+ screens: ThemeScreens
selection: ThemeSelection
- focus: ThemeFocus
- defaultCards: ThemeDefaultCards
- textsFontWeights: ThemeTextsFontWeights
- textsFontFamily: ThemeTextsFontFamily
- textsTextTransform: ThemeTextsTextTransform
- alerts: ThemeAlerts
- avatars: ThemeAvatars
- buttons: ThemeButtons
- breadcrumbs: ThemeBreadcrumbs
- toasts: ThemeToasts
- paginations: ThemePaginations
+ shadows: ThemeShadows
+ sizes: ThemeSizes
+ space: ThemeSpace
+ swipers: ThemeSwipers
+ tables: ThemeTables
tabs: ThemeTabs
tags: ThemeTags
+ textareas: ThemeTextareas
texts: ThemeTexts
- tooltips: CSSObject
- links: ThemeLinks
- dropdownMenu: ThemeDropdownMenu
- tables: ThemeTables
- cards: ThemeCards
- modals: ThemeModals
- drawers: ThemeDrawers
- loaders: ThemeLoaders
- accordions: ThemeAccordions
- swipers: ThemeSwipers
- labels: ThemeLabels
- popovers: ThemePopovers
- sizes: ThemeSizes
- // fields
- defaultFields: ThemeDefaultFields
- hints: ThemeHints
- checkboxes: ThemeCheckboxes
+ textsFontFamily: ThemeTextsFontFamily
+ textsFontWeights: ThemeTextsFontWeights
+ textsTextTransform: ThemeTextsTextTransform
+ timingFunction: ThemeTimingFunction
+ toEm: (int: number) => string
+ toPx: (int?: number) => string
+ toRem: (int?: number) => string
+ toasts: ThemeToasts
toggles: ThemeToggles
- dateTimePickerCommon: ThemeDateTimePickerCommon
- textareas: ThemeTextareas
- filedrops: ThemeFiledrops
- radios: ThemeRadios
- radioTabs: ThemeRadioTabs
+ tooltips: CSSObject
+ transformers: {
+ border: (value: CSSScalar) => CSSScalar
+ px: (value: CSSScalar) => CSSScalar
+ }
+ transitions: ThemeTransitions
+ underline: ThemeUnderline
}
diff --git a/packages/Core/src/theme/typography.ts b/packages/Core/src/theme/typography.ts
index a944b4ae15..97d6cf8e7a 100644
--- a/packages/Core/src/theme/typography.ts
+++ b/packages/Core/src/theme/typography.ts
@@ -4,6 +4,7 @@ import { WuiTheme } from './types'
import { Options } from './core'
export type ThemeFontSizes = {
+ [key: number]: string
h0: string
h1: string
h2: string
@@ -14,10 +15,9 @@ export type ThemeFontSizes = {
lg: string
md: string
sm: string
- xs: string
'subtitle-md': string
'subtitle-sm': string
- [key: number]: string
+ xs: string
}
export const getFontSizes = (unit: string, theme: WuiTheme): ThemeFontSizes => {
@@ -35,14 +35,14 @@ export const getFontSizes = (unit: string, theme: WuiTheme): ThemeFontSizes => {
lg: convert(18),
md: convert(16),
sm: convert(14),
- xs: convert(12),
'subtitle-md': convert(13),
'subtitle-sm': convert(11),
+ xs: convert(12),
}
}
export type ThemeLineHeights = {
- html: number | string
+ [key: number]: number | string
h0: number | string
h1: number | string
h2: number | string
@@ -50,13 +50,13 @@ export type ThemeLineHeights = {
h4: number | string
h5: number | string
h6: number | string
+ html: number | string
lg: number | string
md: number | string
sm: number | string
- xs: number | string
'subtitle-md': number | string
'subtitle-sm': number | string
- [key: number]: number | string
+ xs: number | string
}
export const getLineHeights = ({
@@ -85,10 +85,10 @@ export const getLineHeights = ({
}
export type ThemeFontWeights = {
- regular: number
- medium: number
- bold: number
[key: string]: number
+ bold: number
+ medium: number
+ regular: number
}
export const fontWeights: ThemeFontWeights = {
@@ -98,7 +98,7 @@ export const fontWeights: ThemeFontWeights = {
}
export type ThemeLetterSpacings = {
- html: string
+ [key: string]: string
h0: string
h1: string
h2: string
@@ -106,13 +106,13 @@ export type ThemeLetterSpacings = {
h4: string
h5: string
h6: string
+ html: string
lg: string
md: string
sm: string
- xs: string
'subtitle-md': string
'subtitle-sm': string
- [key: string]: string
+ xs: string
}
export const getLetterSpacings = ({
@@ -141,6 +141,7 @@ export const getLetterSpacings = ({
}
export type ThemeTextsFontWeights = {
+ [key: string]: number
h0: number
h1: number
h2: number
@@ -151,10 +152,9 @@ export type ThemeTextsFontWeights = {
lg: number
md: number
sm: number
- xs: number
'subtitle-md': number
'subtitle-sm': number
- [key: string]: number
+ xs: number
}
export const getTextsFontWeights = (theme: WuiTheme): ThemeTextsFontWeights => {
@@ -171,13 +171,14 @@ export const getTextsFontWeights = (theme: WuiTheme): ThemeTextsFontWeights => {
lg: fontWeights.regular,
md: fontWeights.regular,
sm: fontWeights.regular,
- xs: fontWeights.regular,
'subtitle-md': fontWeights.bold,
'subtitle-sm': fontWeights.medium,
+ xs: fontWeights.regular,
}
}
export type ThemeTextsFontFamily = {
+ [key: string]: string
h0: string
h1: string
h2: string
@@ -187,7 +188,6 @@ export type ThemeTextsFontFamily = {
h6: string
'subtitle-md': string
'subtitle-sm': string
- [key: string]: string
}
export const getTextsFontFamily = (theme: WuiTheme): ThemeTextsFontFamily => {
@@ -207,9 +207,9 @@ export const getTextsFontFamily = (theme: WuiTheme): ThemeTextsFontFamily => {
}
export type ThemeTextsTextTransform = {
+ [key: string]: string
'subtitle-md': string
'subtitle-sm': string
- [key: string]: string
}
export const getTextsTextTransform = (): ThemeTextsTextTransform => {
@@ -220,6 +220,7 @@ export const getTextsTextTransform = (): ThemeTextsTextTransform => {
}
export type ThemeTextsFontColors = {
+ [key: number]: string
h0: string
h1: string
h2: string
@@ -227,7 +228,6 @@ export type ThemeTextsFontColors = {
h4: string
h5: string
h6: string
- [key: number]: string
}
export const getTextFontColors = (theme: WuiTheme): ThemeTextsFontColors => {
@@ -248,11 +248,11 @@ export type ThemeTexts = {
[key: string]: Partial<{
color: CSSObject['color']
fontFamily: CSSObject['fontFamily']
- fontWeight: CSSObject['fontWeight']
fontSize: CSSObject['fontSize']
+ fontWeight: CSSObject['fontWeight']
+ letterSpacing: CSSObject['letterSpacing']
lineHeight: CSSObject['lineHeight']
textTransform: CSSObject['textTransform']
- letterSpacing: CSSObject['letterSpacing']
}>
}
@@ -284,9 +284,9 @@ export const getTexts = (theme: WuiTheme): ThemeTexts => {
}
export type ThemeFonts = {
- texts: string
headings: string
icons: string
+ texts: string
}
export const getFonts = (
diff --git a/packages/Core/src/theme/underline.ts b/packages/Core/src/theme/underline.ts
index d0c87184d6..0acf619e4e 100644
--- a/packages/Core/src/theme/underline.ts
+++ b/packages/Core/src/theme/underline.ts
@@ -14,7 +14,10 @@ export const getUnderline = ({ colors }: { colors: ThemeColors }): ThemeUnderlin
background-repeat: no-repeat;
background-size: 100% 50%;
background-position-y: calc(200% - 2px);
- transition: background-position-y 250ms, background-size 250ms, color 250ms;
+ transition:
+ background-position-y 250ms,
+ background-size 250ms,
+ color 250ms;
`,
hover: css`
opacity: 1;
diff --git a/packages/Core/src/utils/font.ts b/packages/Core/src/utils/font.ts
index 185cf9bb78..e962943dad 100644
--- a/packages/Core/src/utils/font.ts
+++ b/packages/Core/src/utils/font.ts
@@ -3,13 +3,13 @@ import { css } from '@xstyled/styled-components'
import { WuiTheme } from '../theme/types'
type FontVariation = {
- url: string
display?: FontDisplay
- weight?: string
- style?: string
- isVariable?: boolean
extensions?: string[]
+ isVariable?: boolean
+ style?: string
unicodeRange?: string
+ url: string
+ weight?: string
}
type Font = {
diff --git a/packages/DatePicker/src/index.tsx b/packages/DatePicker/src/index.tsx
index d39a969f1e..14b26c632d 100644
--- a/packages/DatePicker/src/index.tsx
+++ b/packages/DatePicker/src/index.tsx
@@ -15,14 +15,14 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
import { ReactDatePickerProps } from 'react-datepicker'
export interface DatePickerOptions {
- onChange?: (date?: Date) => void
onBlur?: CustomInputOptions['handleBlur']
+ onChange?: (date?: Date) => void
onFocus?: CustomInputOptions['handleFocus']
- useWeekdaysShort?: boolean
placeholder?: ReactDatePickerProps['placeholderText']
preventVirtualKeyboard?: boolean
- value: string | Date
transparent?: boolean
+ useWeekdaysShort?: boolean
+ value: string | Date
}
export type DatePickerProps = CreateWuiProps<
@@ -44,19 +44,19 @@ export const DatePicker = forwardRef<'input', DatePickerProps>(
endYear = DEFAULT_DATE.getFullYear(),
icon,
iconPlacement = 'left',
- showMonthYearPicker,
locale,
onBlur,
onChange,
onFocus,
placeholder,
- preventVirtualKeyboard = false,
popperProps,
+ preventVirtualKeyboard = false,
+ showMonthYearPicker,
size = 'md',
startYear = 1900,
+ transparent,
useWeekdaysShort = true,
value = DEFAULT_DATE,
- transparent,
...rest
},
ref
diff --git a/packages/DateTimePicker/src/index.tsx b/packages/DateTimePicker/src/index.tsx
index c6513c07c4..6f8cd6095b 100644
--- a/packages/DateTimePicker/src/index.tsx
+++ b/packages/DateTimePicker/src/index.tsx
@@ -21,8 +21,8 @@ export const DateTimePicker = forwardRef<'input', DateTimePickerProps>(
locale,
onChange,
size = 'md',
- value = DEFAULT_DATE,
transparent,
+ value = DEFAULT_DATE,
},
ref
) => {
diff --git a/packages/Drawer/src/index.tsx b/packages/Drawer/src/index.tsx
index 6bd9c17de3..3775610838 100644
--- a/packages/Drawer/src/index.tsx
+++ b/packages/Drawer/src/index.tsx
@@ -79,7 +79,7 @@ export const DrawerBackdrop: React.FC = ({
return
}
-type TriggerProps = { store: Ariakit.DialogStore; children: React.ReactNode; as?: As }
+type TriggerProps = { as?: As; children: React.ReactNode; store: Ariakit.DialogStore }
export const Trigger = forwardRef<'button', TriggerProps>(({ as: As, store, ...rest }, ref) => {
return (
diff --git a/packages/DropdownMenu/src/Item.styled.ts b/packages/DropdownMenu/src/Item.styled.ts
index c894443dc1..abba7a8247 100644
--- a/packages/DropdownMenu/src/Item.styled.ts
+++ b/packages/DropdownMenu/src/Item.styled.ts
@@ -16,5 +16,5 @@ export const Item = styled.button`
outline: none !important; /* important for firefox */
}
- ${system}
+ ${system};
`
diff --git a/packages/DropdownMenu/src/index.tsx b/packages/DropdownMenu/src/index.tsx
index 7511e3b7ad..af3d73ea79 100644
--- a/packages/DropdownMenu/src/index.tsx
+++ b/packages/DropdownMenu/src/index.tsx
@@ -10,16 +10,16 @@ import { Separator } from './Separator'
import * as S from './styles'
export interface DropdownMenuOptions extends Omit {
- /** add custom props from styled system on DropdownMenu inner */
- innerProps?: WuiProps
/** default 4px (space.xs) */
gutter?: keyof WuiTheme['space'] | number
+ /** add custom props from styled system on DropdownMenu inner */
+ innerProps?: WuiProps
}
export type DropdownMenuProps = CreateWuiProps<'div', DropdownMenuOptions>
const DropdownMenuComponent = forwardRef<'div', DropdownMenuProps>(
- ({ children, dataTestId, innerProps = {}, store, gutter = 'xs', ...rest }, ref) => {
+ ({ children, dataTestId, gutter = 'xs', innerProps = {}, store, ...rest }, ref) => {
const theme = useTheme()
const arrowElement = store.useState('arrowElement')
diff --git a/packages/EmojiPicker/src/List.tsx b/packages/EmojiPicker/src/List.tsx
index 87589e016e..076c2647f2 100644
--- a/packages/EmojiPicker/src/List.tsx
+++ b/packages/EmojiPicker/src/List.tsx
@@ -22,9 +22,9 @@ import {
} from './utils'
export interface Emoji {
- name: string
alias: string
category: string
+ name: string
url?: string
}
@@ -277,12 +277,12 @@ export const List: React.FC = ({
}
interface EmojiRowData {
- rows: InternalEmoji[][]
- currentRowIndex: number
currentColIndex: number
+ currentRowIndex: number
isOpen: boolean
onClick: (alias: string) => void
onMouseMove: (emoji: InternalEmoji) => void
+ rows: InternalEmoji[][]
}
type EmojiRowProps = ListChildComponentProps
diff --git a/packages/EmojiPicker/src/index.tsx b/packages/EmojiPicker/src/index.tsx
index 402df64418..ca5bac63b1 100644
--- a/packages/EmojiPicker/src/index.tsx
+++ b/packages/EmojiPicker/src/index.tsx
@@ -22,9 +22,9 @@ export interface EmojiPickerOptions {
inputSearchPlaceholder?: string
onChange?: (value: string) => void
popoverAriaLabel?: string
+ store: UseEmojiPicker
tabListAriaLabel?: string
value: string | null
- store: UseEmojiPicker
}
export type EmojiPickerProps = CreateWuiProps<'div', EmojiPickerOptions>
@@ -38,9 +38,9 @@ const EmojiPickerComponent = forwardRef<'div', EmojiPickerProps>(
inputSearchPlaceholder = 'Search an emoji',
onChange,
popoverAriaLabel = 'Emoji picker',
+ store,
tabListAriaLabel = 'Emoji picker tabs',
value,
- store,
},
ref
) => {
diff --git a/packages/EmojiPicker/src/styles.ts b/packages/EmojiPicker/src/styles.ts
index 11e3dcc0db..e3e58f7df1 100644
--- a/packages/EmojiPicker/src/styles.ts
+++ b/packages/EmojiPicker/src/styles.ts
@@ -1,8 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
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'
+// this component is imported by WH but not used, could be deprecated
export const Popover = styled(WUIPopover.Popover)`
background-color: ${th('defaultCards.backgroundColor')};
border-width: sm;
@@ -14,7 +18,6 @@ export const Popover = styled(WUIPopover.Popover)`
/** we change the arrow item color from popover component */
> div > div > svg {
color: ${th('defaultCards.backgroundColor')};
-
#stroke {
color: ${th('defaultCards.borderColor')};
}
@@ -66,4 +69,5 @@ export const Tooltip = styled(Box)`
&:empty {
display: none;
}
+ ${system};
`
diff --git a/packages/EmojiPicker/src/utils.ts b/packages/EmojiPicker/src/utils.ts
index 62cfc921fb..6f460568ed 100644
--- a/packages/EmojiPicker/src/utils.ts
+++ b/packages/EmojiPicker/src/utils.ts
@@ -2,7 +2,7 @@ import groupBy from 'lodash.groupby'
import { Emoji } from './List'
-export type InternalEmoji = Emoji & { rowIndex: number; colIndex: number }
+export type InternalEmoji = Emoji & { colIndex: number; rowIndex: number }
// We need to set the width & height of the list for react-window
export const NB_EMOJIS_PER_ROW = 8
diff --git a/packages/Field/src/index.tsx b/packages/Field/src/index.tsx
index 7479182474..46d6655184 100644
--- a/packages/Field/src/index.tsx
+++ b/packages/Field/src/index.tsx
@@ -13,13 +13,13 @@ export interface FieldOptions {
disabled?: boolean
disabledIcon?: JSX.Element
error?: string | JSX.Element
- label?: string | JSX.Element
hint?: string | JSX.Element
+ info?: string | JSX.Element
+ label?: string | JSX.Element
required?: boolean
- warning?: string | JSX.Element
success?: string | JSX.Element
- info?: string | JSX.Element
transparent?: boolean
+ warning?: string | JSX.Element
}
export type FieldProps = CreateWuiProps<'div', FieldOptions>
diff --git a/packages/Field/src/utils.ts b/packages/Field/src/utils.ts
index cb9ea8df0d..d061420f71 100644
--- a/packages/Field/src/utils.ts
+++ b/packages/Field/src/utils.ts
@@ -11,9 +11,9 @@ export const getBaseType = (type: string): string => TYPES[type] || type
type VariantProps = {
error?: string | JSX.Element
- warning?: string | JSX.Element
- success?: string | JSX.Element
info?: string | JSX.Element
+ success?: string | JSX.Element
+ warning?: string | JSX.Element
}
export type VariantReturn = 'error' | 'warning' | 'success' | 'info'
diff --git a/packages/FieldGroup/src/styles.ts b/packages/FieldGroup/src/styles.ts
index 8d0724df22..4b90e91d97 100644
--- a/packages/FieldGroup/src/styles.ts
+++ b/packages/FieldGroup/src/styles.ts
@@ -1,7 +1,7 @@
import styled, { system, th } from '@xstyled/styled-components'
import { shouldForwardProp } from '@welcome-ui/system'
-export const FieldGroup = styled('fieldset').withConfig({ shouldForwardProp })`
+export const FieldGroup = styled.fieldsetBox.withConfig({ shouldForwardProp })`
width: 100%;
min-width: 0;
min-height: 0;
diff --git a/packages/FileDrop/src/index.tsx b/packages/FileDrop/src/index.tsx
index b67381297c..d7c6fc00e4 100644
--- a/packages/FileDrop/src/index.tsx
+++ b/packages/FileDrop/src/index.tsx
@@ -60,11 +60,11 @@ export interface FileDropOptions {
accept?: Accept
children?: (state: ChildrenType) => JSX.Element
fileName?: string
- isClearable?: boolean
- isEditable?: boolean
forceFileType?: ForceFileType
handleAddFile?: (event: DropEvent | React.ChangeEvent | CreateEvent) => void
handleRemoveFile?: (event: DropEvent | React.ChangeEvent | CreateEvent) => void
+ isClearable?: boolean
+ isEditable?: boolean
name?: string
onBlur?: () => void
onChange?: (event: DropEvent | React.ChangeEvent | CreateEvent) => void
diff --git a/packages/FileUpload/src/index.tsx b/packages/FileUpload/src/index.tsx
index f7bc9c34a9..1463bf167b 100644
--- a/packages/FileUpload/src/index.tsx
+++ b/packages/FileUpload/src/index.tsx
@@ -12,8 +12,8 @@ const DEFAULT_MAX_FILE_SIZE = 2000000
const DEFAULT_FILE_TYPES = '*/*'
export type FileWithPreview = File & {
- preview?: string
name?: string
+ preview?: string
}
export type FileWithPreviewType = FileWithPreview | string
export type HandleRemoveType = (file: FileWithPreviewType) => void
@@ -21,18 +21,18 @@ export type HandleRemoveType = (file: FileWithPreviewType) => void
export interface FileUploadOptions {
/** Pass a comma-separated string of file types e.g. "image/png" or "image/png,image/jpeg" */
accept?: string
- maxSize?: number
- handleAddFile?: (files: FileWithPreviewType[] | FileWithPreviewType) => void
- handleRemoveFile?: HandleRemoveType
- preview?: typeof DefaultPreview
- onBlur?: () => void
- onChange?: (event: ReturnType) => void
children?: (props: {
- openFile: () => void
disabled: boolean
files: FileWithPreviewType[]
onRemoveFile: HandleRemoveType
+ openFile: () => void
}) => React.ReactNode
+ handleAddFile?: (files: FileWithPreviewType[] | FileWithPreviewType) => void
+ handleRemoveFile?: HandleRemoveType
+ maxSize?: number
+ onBlur?: () => void
+ onChange?: (event: ReturnType) => void
+ preview?: typeof DefaultPreview
}
export type FileUploadProps = CreateWuiProps<'input', FileUploadOptions>
@@ -55,17 +55,17 @@ export const FileUpload = forwardRef<'input', FileUploadProps>(
disabled,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
draggable,
+ handleAddFile,
+ handleRemoveFile,
maxSize = DEFAULT_MAX_FILE_SIZE,
multiple,
name,
- handleAddFile,
onBlur,
onChange,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onError,
- handleRemoveFile,
- value = [],
preview: Preview = DefaultPreview,
+ value = [],
...rest
},
ref
diff --git a/packages/Flex/src/index.tsx b/packages/Flex/src/index.tsx
index b0ea226a55..a22b3ef3a1 100644
--- a/packages/Flex/src/index.tsx
+++ b/packages/Flex/src/index.tsx
@@ -5,18 +5,18 @@ import { CreateWuiProps, forwardRef, WuiProps } from '@welcome-ui/system'
export interface FlexOptions {
/** same as alignItems */
align?: WuiProps['alignItems']
- /** same as justifyContent */
- justify?: WuiProps['justifyContent']
- /** same as flexWrap */
- wrap?: WuiProps['flexWrap']
- /** same as flexDirection */
- direction?: WuiProps['flexDirection']
/** same as flexBasis */
basis?: WuiProps['flexBasis']
+ /** same as flexDirection */
+ direction?: WuiProps['flexDirection']
/** same as flexGrow */
grow?: WuiProps['flexGrow']
+ /** same as justifyContent */
+ justify?: WuiProps['justifyContent']
/** same as flexShrink */
shrink?: WuiProps['flexShrink']
+ /** same as flexWrap */
+ wrap?: WuiProps['flexWrap']
}
export type FlexProps = CreateWuiProps<'div', FlexOptions>
diff --git a/packages/Icon/src/index.tsx b/packages/Icon/src/index.tsx
index 2b102182b9..9ffa4f81f9 100644
--- a/packages/Icon/src/index.tsx
+++ b/packages/Icon/src/index.tsx
@@ -4,12 +4,12 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
import * as S from './styles'
type IconContent = {
- width?: number
- height?: number
block?: string
- stroked?: boolean
+ height?: number
isFlag?: boolean
+ stroked?: boolean
viewBox?: string
+ width?: number
}
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string
@@ -17,9 +17,9 @@ type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string
export interface IconOptions {
content?: IconContent
name?: string
+ onClick?: (event: React.MouseEvent) => void
size?: Size
title?: string
- onClick?: (event: React.MouseEvent) => void
}
export type IconProps = CreateWuiProps
diff --git a/packages/IconFont/src/styles.ts b/packages/IconFont/src/styles.ts
index d5e1e80205..46153d8b35 100644
--- a/packages/IconFont/src/styles.ts
+++ b/packages/IconFont/src/styles.ts
@@ -16,10 +16,10 @@ function getIconContentByName(name: StyledIconProps['name']) {
return null
}
-// stylelint-disable font-family-no-missing-generic-family-keyword
export const Icon = styled.i(
({ name, size = 'md' }) => css`
display: inline-block;
+ /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font-family: icons;
font-size: ${th(`icons.${size}`)};
${system};
diff --git a/packages/InputText/src/index.tsx b/packages/InputText/src/index.tsx
index 91b8addea7..6b6b0846cd 100644
--- a/packages/InputText/src/index.tsx
+++ b/packages/InputText/src/index.tsx
@@ -18,9 +18,9 @@ export interface InputTextOptions extends DefaultFieldStylesProps {
onFocus?: (event: React.FocusEvent) => void
onKeyDown?: (event: React.KeyboardEvent) => void
placeholder?: string
+ transparent?: boolean
type?: string
value?: string
- transparent?: boolean
}
export type InputTextProps = CreateWuiProps<'input', InputTextOptions>
diff --git a/packages/Label/src/index.tsx b/packages/Label/src/index.tsx
index 7125409c83..2c720fe1e3 100644
--- a/packages/Label/src/index.tsx
+++ b/packages/Label/src/index.tsx
@@ -10,11 +10,11 @@ export interface LabelOptions {
checkableField?: boolean
disabled?: boolean
disabledIcon?: JSX.Element
+ htmlFor?: string
icon?: JSX.Element
- variant?: Variant
required?: boolean
+ variant?: Variant
withDisabledIcon?: boolean
- htmlFor?: string
}
export type LabelProps = CreateWuiProps<'label', LabelOptions>
diff --git a/packages/Link/src/index.tsx b/packages/Link/src/index.tsx
index 68252e1a5b..89f0d32706 100644
--- a/packages/Link/src/index.tsx
+++ b/packages/Link/src/index.tsx
@@ -9,9 +9,9 @@ import { shouldWrapWithText } from './utils'
export type Variant = 'primary' | 'secondary'
export interface LinkOptions {
- variant?: Variant
- isExternal?: boolean
disabled?: boolean
+ isExternal?: boolean
+ variant?: Variant
}
export type LinkProps = CreateWuiProps<'a', LinkOptions & UniversalLinkOptions>
diff --git a/packages/Link/src/styles.ts b/packages/Link/src/styles.ts
index 180e73ac1d..95d4c7ec7d 100644
--- a/packages/Link/src/styles.ts
+++ b/packages/Link/src/styles.ts
@@ -5,8 +5,8 @@ import { shouldForwardProp } from '@welcome-ui/system'
import { Variant } from './index'
export const Link = styled(UniversalLink).withConfig({ shouldForwardProp })<{
- variant: Variant
isExternal?: boolean
+ variant: Variant
}>(
({ isExternal, variant = 'primary' }) => css`
display: inline-flex;
diff --git a/packages/Loader/docs/properties.json b/packages/Loader/docs/properties.json
index 22c80c5498..0f1b69fbdb 100644
--- a/packages/Loader/docs/properties.json
+++ b/packages/Loader/docs/properties.json
@@ -17,7 +17,565 @@
],
"required": false,
"type": {
- "name": "string"
+ "name": "enum",
+ "raw": "Color",
+ "value": [
+ {
+ "value": "string & {}"
+ },
+ {
+ "value": "\"-moz-initial\""
+ },
+ {
+ "value": "\"inherit\""
+ },
+ {
+ "value": "\"initial\""
+ },
+ {
+ "value": "\"revert\""
+ },
+ {
+ "value": "\"revert-layer\""
+ },
+ {
+ "value": "\"unset\""
+ },
+ {
+ "value": "\"aliceblue\""
+ },
+ {
+ "value": "\"antiquewhite\""
+ },
+ {
+ "value": "\"aqua\""
+ },
+ {
+ "value": "\"aquamarine\""
+ },
+ {
+ "value": "\"azure\""
+ },
+ {
+ "value": "\"beige\""
+ },
+ {
+ "value": "\"bisque\""
+ },
+ {
+ "value": "\"black\""
+ },
+ {
+ "value": "\"blanchedalmond\""
+ },
+ {
+ "value": "\"blue\""
+ },
+ {
+ "value": "\"blueviolet\""
+ },
+ {
+ "value": "\"brown\""
+ },
+ {
+ "value": "\"burlywood\""
+ },
+ {
+ "value": "\"cadetblue\""
+ },
+ {
+ "value": "\"chartreuse\""
+ },
+ {
+ "value": "\"chocolate\""
+ },
+ {
+ "value": "\"coral\""
+ },
+ {
+ "value": "\"cornflowerblue\""
+ },
+ {
+ "value": "\"cornsilk\""
+ },
+ {
+ "value": "\"crimson\""
+ },
+ {
+ "value": "\"cyan\""
+ },
+ {
+ "value": "\"darkblue\""
+ },
+ {
+ "value": "\"darkcyan\""
+ },
+ {
+ "value": "\"darkgoldenrod\""
+ },
+ {
+ "value": "\"darkgray\""
+ },
+ {
+ "value": "\"darkgreen\""
+ },
+ {
+ "value": "\"darkgrey\""
+ },
+ {
+ "value": "\"darkkhaki\""
+ },
+ {
+ "value": "\"darkmagenta\""
+ },
+ {
+ "value": "\"darkolivegreen\""
+ },
+ {
+ "value": "\"darkorange\""
+ },
+ {
+ "value": "\"darkorchid\""
+ },
+ {
+ "value": "\"darkred\""
+ },
+ {
+ "value": "\"darksalmon\""
+ },
+ {
+ "value": "\"darkseagreen\""
+ },
+ {
+ "value": "\"darkslateblue\""
+ },
+ {
+ "value": "\"darkslategray\""
+ },
+ {
+ "value": "\"darkslategrey\""
+ },
+ {
+ "value": "\"darkturquoise\""
+ },
+ {
+ "value": "\"darkviolet\""
+ },
+ {
+ "value": "\"deeppink\""
+ },
+ {
+ "value": "\"deepskyblue\""
+ },
+ {
+ "value": "\"dimgray\""
+ },
+ {
+ "value": "\"dimgrey\""
+ },
+ {
+ "value": "\"dodgerblue\""
+ },
+ {
+ "value": "\"firebrick\""
+ },
+ {
+ "value": "\"floralwhite\""
+ },
+ {
+ "value": "\"forestgreen\""
+ },
+ {
+ "value": "\"fuchsia\""
+ },
+ {
+ "value": "\"gainsboro\""
+ },
+ {
+ "value": "\"ghostwhite\""
+ },
+ {
+ "value": "\"gold\""
+ },
+ {
+ "value": "\"goldenrod\""
+ },
+ {
+ "value": "\"gray\""
+ },
+ {
+ "value": "\"green\""
+ },
+ {
+ "value": "\"greenyellow\""
+ },
+ {
+ "value": "\"grey\""
+ },
+ {
+ "value": "\"honeydew\""
+ },
+ {
+ "value": "\"hotpink\""
+ },
+ {
+ "value": "\"indianred\""
+ },
+ {
+ "value": "\"indigo\""
+ },
+ {
+ "value": "\"ivory\""
+ },
+ {
+ "value": "\"khaki\""
+ },
+ {
+ "value": "\"lavender\""
+ },
+ {
+ "value": "\"lavenderblush\""
+ },
+ {
+ "value": "\"lawngreen\""
+ },
+ {
+ "value": "\"lemonchiffon\""
+ },
+ {
+ "value": "\"lightblue\""
+ },
+ {
+ "value": "\"lightcoral\""
+ },
+ {
+ "value": "\"lightcyan\""
+ },
+ {
+ "value": "\"lightgoldenrodyellow\""
+ },
+ {
+ "value": "\"lightgray\""
+ },
+ {
+ "value": "\"lightgreen\""
+ },
+ {
+ "value": "\"lightgrey\""
+ },
+ {
+ "value": "\"lightpink\""
+ },
+ {
+ "value": "\"lightsalmon\""
+ },
+ {
+ "value": "\"lightseagreen\""
+ },
+ {
+ "value": "\"lightskyblue\""
+ },
+ {
+ "value": "\"lightslategray\""
+ },
+ {
+ "value": "\"lightslategrey\""
+ },
+ {
+ "value": "\"lightsteelblue\""
+ },
+ {
+ "value": "\"lightyellow\""
+ },
+ {
+ "value": "\"lime\""
+ },
+ {
+ "value": "\"limegreen\""
+ },
+ {
+ "value": "\"linen\""
+ },
+ {
+ "value": "\"magenta\""
+ },
+ {
+ "value": "\"maroon\""
+ },
+ {
+ "value": "\"mediumaquamarine\""
+ },
+ {
+ "value": "\"mediumblue\""
+ },
+ {
+ "value": "\"mediumorchid\""
+ },
+ {
+ "value": "\"mediumpurple\""
+ },
+ {
+ "value": "\"mediumseagreen\""
+ },
+ {
+ "value": "\"mediumslateblue\""
+ },
+ {
+ "value": "\"mediumspringgreen\""
+ },
+ {
+ "value": "\"mediumturquoise\""
+ },
+ {
+ "value": "\"mediumvioletred\""
+ },
+ {
+ "value": "\"midnightblue\""
+ },
+ {
+ "value": "\"mintcream\""
+ },
+ {
+ "value": "\"mistyrose\""
+ },
+ {
+ "value": "\"moccasin\""
+ },
+ {
+ "value": "\"navajowhite\""
+ },
+ {
+ "value": "\"navy\""
+ },
+ {
+ "value": "\"oldlace\""
+ },
+ {
+ "value": "\"olive\""
+ },
+ {
+ "value": "\"olivedrab\""
+ },
+ {
+ "value": "\"orange\""
+ },
+ {
+ "value": "\"orangered\""
+ },
+ {
+ "value": "\"orchid\""
+ },
+ {
+ "value": "\"palegoldenrod\""
+ },
+ {
+ "value": "\"palegreen\""
+ },
+ {
+ "value": "\"paleturquoise\""
+ },
+ {
+ "value": "\"palevioletred\""
+ },
+ {
+ "value": "\"papayawhip\""
+ },
+ {
+ "value": "\"peachpuff\""
+ },
+ {
+ "value": "\"peru\""
+ },
+ {
+ "value": "\"pink\""
+ },
+ {
+ "value": "\"plum\""
+ },
+ {
+ "value": "\"powderblue\""
+ },
+ {
+ "value": "\"purple\""
+ },
+ {
+ "value": "\"rebeccapurple\""
+ },
+ {
+ "value": "\"red\""
+ },
+ {
+ "value": "\"rosybrown\""
+ },
+ {
+ "value": "\"royalblue\""
+ },
+ {
+ "value": "\"saddlebrown\""
+ },
+ {
+ "value": "\"salmon\""
+ },
+ {
+ "value": "\"sandybrown\""
+ },
+ {
+ "value": "\"seagreen\""
+ },
+ {
+ "value": "\"seashell\""
+ },
+ {
+ "value": "\"sienna\""
+ },
+ {
+ "value": "\"silver\""
+ },
+ {
+ "value": "\"skyblue\""
+ },
+ {
+ "value": "\"slateblue\""
+ },
+ {
+ "value": "\"slategray\""
+ },
+ {
+ "value": "\"slategrey\""
+ },
+ {
+ "value": "\"snow\""
+ },
+ {
+ "value": "\"springgreen\""
+ },
+ {
+ "value": "\"steelblue\""
+ },
+ {
+ "value": "\"tan\""
+ },
+ {
+ "value": "\"teal\""
+ },
+ {
+ "value": "\"thistle\""
+ },
+ {
+ "value": "\"tomato\""
+ },
+ {
+ "value": "\"transparent\""
+ },
+ {
+ "value": "\"turquoise\""
+ },
+ {
+ "value": "\"violet\""
+ },
+ {
+ "value": "\"wheat\""
+ },
+ {
+ "value": "\"white\""
+ },
+ {
+ "value": "\"whitesmoke\""
+ },
+ {
+ "value": "\"yellow\""
+ },
+ {
+ "value": "\"yellowgreen\""
+ },
+ {
+ "value": "\"ActiveBorder\""
+ },
+ {
+ "value": "\"ActiveCaption\""
+ },
+ {
+ "value": "\"AppWorkspace\""
+ },
+ {
+ "value": "\"Background\""
+ },
+ {
+ "value": "\"ButtonFace\""
+ },
+ {
+ "value": "\"ButtonHighlight\""
+ },
+ {
+ "value": "\"ButtonShadow\""
+ },
+ {
+ "value": "\"ButtonText\""
+ },
+ {
+ "value": "\"CaptionText\""
+ },
+ {
+ "value": "\"GrayText\""
+ },
+ {
+ "value": "\"Highlight\""
+ },
+ {
+ "value": "\"HighlightText\""
+ },
+ {
+ "value": "\"InactiveBorder\""
+ },
+ {
+ "value": "\"InactiveCaption\""
+ },
+ {
+ "value": "\"InactiveCaptionText\""
+ },
+ {
+ "value": "\"InfoBackground\""
+ },
+ {
+ "value": "\"InfoText\""
+ },
+ {
+ "value": "\"Menu\""
+ },
+ {
+ "value": "\"MenuText\""
+ },
+ {
+ "value": "\"Scrollbar\""
+ },
+ {
+ "value": "\"ThreeDDarkShadow\""
+ },
+ {
+ "value": "\"ThreeDFace\""
+ },
+ {
+ "value": "\"ThreeDHighlight\""
+ },
+ {
+ "value": "\"ThreeDLightShadow\""
+ },
+ {
+ "value": "\"ThreeDShadow\""
+ },
+ {
+ "value": "\"Window\""
+ },
+ {
+ "value": "\"WindowFrame\""
+ },
+ {
+ "value": "\"WindowText\""
+ },
+ {
+ "value": "\"currentcolor\""
+ }
+ ]
}
},
"size": {
diff --git a/packages/Loader/src/index.tsx b/packages/Loader/src/index.tsx
index ec4bee1f7b..d453de66e9 100644
--- a/packages/Loader/src/index.tsx
+++ b/packages/Loader/src/index.tsx
@@ -1,13 +1,14 @@
import React from 'react'
import { Box } from '@welcome-ui/box'
import { CreateWuiProps, ExtraSize, forwardRef } from '@welcome-ui/system'
+import { CSSObject } from '@xstyled/styled-components'
import * as S from './styles'
export type Size = 'xs' | 'sm' | 'md' | 'lg' | ExtraSize
export interface LoaderOptions {
- color?: string
+ color?: CSSObject['color']
/** Predefined size xs, sm, md, lg or custom size */
size?: Size
}
diff --git a/packages/MarkdownEditor/src/constants.ts b/packages/MarkdownEditor/src/constants.ts
index ba40809628..8649a744a7 100644
--- a/packages/MarkdownEditor/src/constants.ts
+++ b/packages/MarkdownEditor/src/constants.ts
@@ -2,10 +2,10 @@ import React from 'react'
export type Action = string | (() => void)
export type DefaultToolbarItem = {
+ action?: Action
+ icon?: React.ReactElement | string
name: string
title?: string
- icon?: React.ReactElement | string
- action?: Action
}
export type DefaultToolbar = DefaultToolbarItem[]
diff --git a/packages/MarkdownEditor/src/utils.ts b/packages/MarkdownEditor/src/utils.ts
index bf2973c271..4d8ced612f 100644
--- a/packages/MarkdownEditor/src/utils.ts
+++ b/packages/MarkdownEditor/src/utils.ts
@@ -2,8 +2,8 @@ import { Doc, Editor } from 'codemirror'
export interface CurrentToolsFromEditor {
getCursor: Doc['getCursor']
- getTokenAt: Editor['getTokenAt']
getLine: Doc['getLine']
+ getTokenAt: Editor['getTokenAt']
}
// interface ToolsFrom
interface CodeMirrorTypes {
diff --git a/packages/Modal/docs/properties.json b/packages/Modal/docs/properties.json
index 64870f9786..bdaa5666ea 100644
--- a/packages/Modal/docs/properties.json
+++ b/packages/Modal/docs/properties.json
@@ -328,7 +328,7 @@
],
"required": false,
"type": {
- "name": "{ title: string; subtitle: string; }"
+ "name": "{ subtitle: string; title: string; }"
}
}
}
diff --git a/packages/Modal/src/Assets/AssetWithTitle.tsx b/packages/Modal/src/Assets/AssetWithTitle.tsx
index a52da3d42a..45111675d6 100644
--- a/packages/Modal/src/Assets/AssetWithTitle.tsx
+++ b/packages/Modal/src/Assets/AssetWithTitle.tsx
@@ -9,9 +9,9 @@ import * as S from './styles'
type AssetWithTitleProps = {
children: React.ReactNode
+ customContent?: JSX.Element | string
subtitle?: JSX.Element | string
title?: JSX.Element | string
- customContent?: JSX.Element | string
}
const titleBlockMobile = '4rem'
diff --git a/packages/Modal/src/Assets/styles.ts b/packages/Modal/src/Assets/styles.ts
index ab3d90541c..a4e96ccd1a 100644
--- a/packages/Modal/src/Assets/styles.ts
+++ b/packages/Modal/src/Assets/styles.ts
@@ -14,7 +14,7 @@ const sizeOfElements = css`
width: ${contentWidthDesktop};
}
- // for big screens
+ /* for big screens */
@media (min-width: 1700px) {
max-width: 1600;
}
@@ -46,7 +46,7 @@ export const Content = styled.divBox`
max-width: ${contentWidthDesktop};
}
- // for big screens
+ /* for big screens */
@media (min-width: 1700px) {
max-width: 1600;
}
diff --git a/packages/Modal/src/Footer.tsx b/packages/Modal/src/Footer.tsx
index 4c45847ba2..c3179a6604 100644
--- a/packages/Modal/src/Footer.tsx
+++ b/packages/Modal/src/Footer.tsx
@@ -7,8 +7,8 @@ import * as S from './styles'
export interface FooterOptions {
information?: {
- title: string
subtitle: string
+ title: string
}
}
diff --git a/packages/Modal/src/Header.tsx b/packages/Modal/src/Header.tsx
index 0e1ce97d80..b41b86665d 100644
--- a/packages/Modal/src/Header.tsx
+++ b/packages/Modal/src/Header.tsx
@@ -7,9 +7,9 @@ import * as S from './styles'
import { Close } from './Close'
export interface HeaderOptions {
- title: string | JSX.Element
- subtitle?: string | JSX.Element
icon?: ReactElement
+ subtitle?: string | JSX.Element
+ title: string | JSX.Element
}
export type HeaderProps = HeaderOptions & Omit
diff --git a/packages/Modal/src/index.tsx b/packages/Modal/src/index.tsx
index 66965f7ce5..7d130d2a11 100644
--- a/packages/Modal/src/index.tsx
+++ b/packages/Modal/src/index.tsx
@@ -110,7 +110,7 @@ const Cover: React.FC = props => {
)
}
-type TriggerProps = { store: Ariakit.DialogStore; children: React.ReactNode; as?: As }
+type TriggerProps = { as?: As; children: React.ReactNode; store: Ariakit.DialogStore }
export const Trigger = forwardRef<'button', TriggerProps>(({ as: As, store, ...rest }, ref) => {
return (
diff --git a/packages/Modal/src/styles.ts b/packages/Modal/src/styles.ts
index 96ba1ac0d0..bbaa4965ad 100644
--- a/packages/Modal/src/styles.ts
+++ b/packages/Modal/src/styles.ts
@@ -50,7 +50,9 @@ export const Dialog = styled.divBox(
max-width: 100%;
overflow: auto;
opacity: 0;
- transition: opacity 250ms ease-in-out, margin-top 250ms ease-in-out;
+ transition:
+ opacity 250ms ease-in-out,
+ margin-top 250ms ease-in-out;
&[data-enter] {
opacity: 1;
diff --git a/packages/Popover/src/styles.ts b/packages/Popover/src/styles.ts
index e9c4c9e3ac..5f0909cb56 100644
--- a/packages/Popover/src/styles.ts
+++ b/packages/Popover/src/styles.ts
@@ -26,7 +26,7 @@ export const Popover = styled(Ariakit.Popover)<{ $withCloseButton: boolean }>(
outline: none;
opacity: 0;
transition: opacity 150ms ease-in-out;
- ${system}
+ ${system};
/* on open popover for animation */
&[data-enter] {
@@ -43,9 +43,9 @@ export const Popover = styled(Ariakit.Popover)<{ $withCloseButton: boolean }>(
)
export const PopoverTrigger = styled(Ariakit.PopoverDisclosure)`
- ${system}
+ ${system};
`
export const PopoverHoverTrigger = styled(Ariakit.HovercardAnchor)`
- ${system}
+ ${system};
`
diff --git a/packages/Radio/src/styles.ts b/packages/Radio/src/styles.ts
index 946100ed2b..b4b24521e3 100644
--- a/packages/Radio/src/styles.ts
+++ b/packages/Radio/src/styles.ts
@@ -56,7 +56,7 @@ export const Label = styled(WUILabel)`
max-width: 100%;
/** we need to reset margin-bottom from Label component */
margin-bottom: 0 !important;
- ${system}
+ ${system};
`
export const Input = styled.div`
diff --git a/packages/RadioGroup/src/index.tsx b/packages/RadioGroup/src/index.tsx
index d9a9f977e0..8d99e68bc2 100644
--- a/packages/RadioGroup/src/index.tsx
+++ b/packages/RadioGroup/src/index.tsx
@@ -7,17 +7,17 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
import * as S from './styles'
export type Option = {
+ hint?: string
label: string | number
value: string | number
- hint?: string
}
export interface RadioGroupOptions {
name: string
+ onChange?: (value: Option['value']) => void
options: Option[]
renderOption?: React.ElementType
value?: string
- onChange?: (value: Option['value']) => void
}
export type RadioGroupProps = CreateWuiProps<
@@ -28,17 +28,17 @@ export type RadioGroupProps = CreateWuiProps<
export const RadioGroup = forwardRef<'fieldset', RadioGroupProps>(
(
{
+ dataTestId,
flexDirection,
- maxWidth,
+ id,
label,
+ maxWidth,
name,
+ onChange,
options = [],
renderOption: Component = Radio,
required,
- dataTestId,
- onChange,
value,
- id,
...rest
},
ref
diff --git a/packages/RadioTab/src/styles.ts b/packages/RadioTab/src/styles.ts
index b5e785f2f8..da9f7d6f75 100644
--- a/packages/RadioTab/src/styles.ts
+++ b/packages/RadioTab/src/styles.ts
@@ -42,9 +42,9 @@ const rowStyles = css`
export const Label = styled.label<
{
checked?: boolean
- flexDirection?: WuiProps['flexDirection']
disabled?: boolean
disabledIcon?: React.ReactElement
+ flexDirection?: WuiProps['flexDirection']
} & DefaultFieldStylesProps
>(
({ checked, flexDirection, size, variant }) => css`
diff --git a/packages/Search/src/index.tsx b/packages/Search/src/index.tsx
index 2ed7c40a92..abf0e6e84f 100644
--- a/packages/Search/src/index.tsx
+++ b/packages/Search/src/index.tsx
@@ -48,6 +48,7 @@ export const Search = forwardRef<'input', SearchProps>(
autoFocus,
dataTestId,
disabled,
+ groupsEnabled,
icon,
id,
itemToString,
@@ -58,14 +59,13 @@ export const Search = forwardRef<'input', SearchProps>(
onClick,
onFocus,
placeholder = 'Search…',
+ renderGroupHeader,
renderItem,
search,
size = 'md',
throttle = 500,
value: selected = EMPTY_STRING,
variant,
- groupsEnabled,
- renderGroupHeader,
...rest
},
ref
diff --git a/packages/Search/src/styles.ts b/packages/Search/src/styles.ts
index 2bfe9915d3..f9b58242ce 100644
--- a/packages/Search/src/styles.ts
+++ b/packages/Search/src/styles.ts
@@ -72,7 +72,7 @@ export const Indicators = styled.div`
display: flex;
`
-export const DropDownIndicator = styled.button<{ size: SearchOptions['size']; isOpen?: boolean }>(
+export const DropDownIndicator = styled.button<{ isOpen?: boolean; size: SearchOptions['size'] }>(
({ isOpen, size }) => css`
position: relative;
height: 100%;
diff --git a/packages/Select/src/index.tsx b/packages/Select/src/index.tsx
index 270b60f96a..f78bb928c5 100644
--- a/packages/Select/src/index.tsx
+++ b/packages/Select/src/index.tsx
@@ -31,10 +31,10 @@ import * as S from './styles'
export type OptionValue = string | number
export type Option = {
+ disabled?: boolean
+ icon?: React.ReactElement
label: string
value: OptionValue
- icon?: React.ReactElement
- disabled?: boolean
}
export type OptionGroup = { label: string; options: Option[] }
export type OptionItem = Option | OptionGroup
@@ -42,33 +42,33 @@ export type Options = Array