Skip to content

Commit

Permalink
feat(Textarea): config redesign and implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 8, 2023
1 parent 4c48806 commit e2d4203
Show file tree
Hide file tree
Showing 7 changed files with 406 additions and 177 deletions.
172 changes: 138 additions & 34 deletions src/plugins/components/textarea/index.ts
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/plugins/components/textarea/textarea.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import * as variants from './textarea.variants'
*/
export const Textarea = ({
id,
shape = 'rounded',
rounded = 'sm',
size = 'md',
contrast = 'default',
error,
Expand All @@ -28,7 +28,7 @@ export const Textarea = ({
'nui-textarea-wrapper',
contrast && variants.contrast[contrast],
size && variants.size[size],
shape && variants.shape[shape],
rounded && variants.rounded[rounded],
error && !loading && 'nui-textarea-error',
addon && 'nui-has-addon',
!resize && 'nui-textarea-no-resize',
Expand Down
307 changes: 216 additions & 91 deletions src/plugins/components/textarea/textarea.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,244 @@
export const key = 'textarea' as const

export const defaultConfig = {
labelFloat: {
text: 'primary-500',
size: '5',
duration: '300',
rounded: {
none: 'none',
sm: 'md',
md: 'lg',
lg: 'xl',
full: 'full',
},
errorText: {
text: 'danger-600',
textSize: '[0.65rem]',
font: 'sans',
fontWeight: 'medium',
label: {
float: {
height: '5',
font: {
family: 'sans',
color: 'primary-500',
lead: 'none',
},
transition: {
property: 'all',
duration: '300',
},
},
},
textarea: {
size: 'full',
focusVisible: {
labelFloat: {
text: 'primary-500',
textDark: 'primary-500',
width: 'full',
font: {
family: 'sans',
},
focus: {
label: {
float: {
font: {
color: {
light: 'primary-500',
dark: 'primary-500',
},
},
},
},
border: {
color: {
light: 'primary-500',
dark: 'primary-500',
},
},
},
placeload: {
size: 'full',
space: '2',
},
rounded: {
default: 'md',
smooth: 'lg',
curved: 'xl',
addon: {
size: '12',
padding: '2',
border: {
light: 'muted-300',
dark: 'muted-700',
},
background: {
light: 'muted-50',
dark: 'muted-900/50',
},
},
transition: {
property: 'colors',
duration: '300',
},
},
loaded: {
font: {
color: {
light: 'muted-300',
dark: 'muted-600',
},
},
},
size: {
sm: {
height: '[2rem]',
font: {
size: 'xs',
},
label: {
size: 'xs',
float: {
size: 'xs',
},
},
},
md: {
height: '[2.5rem]',
font: {
size: 'sm',
},
label: {
size: 'sm',
float: {
size: {
base: 'xs',
focus: 'xs',
unfocus: '[0.825rem]',
},
},
},
},
lg: {
height: '[3rem]',
font: {
size: 'sm',
},
label: {
size: 'sm',
float: {
size: {
base: 'xs',
focus: 'xs',
unfocus: '[0.825rem]',
},
},
},
},
},
color: {
default: {
bg: 'white',
bgDark: 'muted-900/75',
border: 'muted-300',
borderDark: 'muted-700',
text: 'muted-600',
textDark: 'muted-200',
textPlaceholder: 'muted-300',
textPlaceholderDark: 'muted-500',
background: {
light: 'white',
dark: 'muted-900',
},
border: {
base: {
light: 'muted-300',
dark: 'muted-700',
},
hover: {
light: 'muted-300',
dark: 'muted-700',
},
},
color: {
light: 'muted-600',
dark: 'muted-200',
},
placeholder: {
light: 'muted-300',
dark: 'muted-500',
},
},
defaultContrast: {
bg: 'white',
bgDark: 'muted-950/75',
border: 'muted-300',
borderDark: 'muted-800',
text: 'muted-600',
textDark: 'muted-200',
textPlaceholder: 'muted-300',
textPlaceholderDark: 'muted-600',
background: {
light: 'white',
dark: 'muted-950',
},
border: {
base: {
light: 'muted-300',
dark: 'muted-800',
},
hover: {
light: 'muted-300',
dark: 'muted-800',
},
},
color: {
light: 'muted-600',
dark: 'muted-200',
},
placeholder: {
light: 'muted-300',
dark: 'muted-600',
},
},
muted: {
bg: 'muted-100',
bgDark: 'muted-900/75',
border: 'muted-200',
borderDark: 'muted-700',
text: 'muted-600',
textDark: 'muted-200',
textPlaceholder: 'muted-300',
textPlaceholderDark: 'muted-500',
background: {
light: 'muted-100',
dark: 'muted-900',
},
border: {
base: {
light: 'muted-100',
dark: 'muted-700',
},
hover: {
light: 'muted-100',
dark: 'muted-700',
},
},
color: {
light: 'muted-600',
dark: 'muted-200',
},
placeholder: {
light: 'muted-300',
dark: 'muted-500',
},
},
mutedContrast: {
bg: 'muted-100',
bgDark: 'muted-950/75',
border: 'muted-100',
borderDark: 'muted-800',
text: 'muted-600',
textDark: 'muted-200',
textPlaceholder: 'muted-300',
textPlaceholderDark: 'muted-600',
},
notLoading: {
text: 'muted-300',
textDark: 'muted-600',
},
error: {
border: 'danger-500',
borderDark: 'danger-500',
},
focus: {
border: 'primary-500',
duration: '300',
},
sm: {
size: '[2rem]',
text: 'xs',
textLabel: 'xs',
labelFloat: 'xs',
background: {
light: 'muted-100',
dark: 'muted-950',
},
border: {
base: {
light: 'muted-100',
dark: 'muted-800',
},
hover: {
light: 'muted-100',
dark: 'muted-800',
},
},
color: {
light: 'muted-600',
dark: 'muted-200',
},
placeholder: {
light: 'muted-300',
dark: 'muted-600',
},
},
md: {
size: '[2.5rem]',
text: 'sm',
textLabel: 'sm',
labelFloat: {
text: 'xs',
textFocusVisible: 'xs',
textPlaceholderShown: '[0.825rem]',
},
error: {
textarea: {
border: {
light: 'danger-500',
dark: 'danger-500',
},
},
lg: {
size: '[3rem]',
text: 'sm',
textLabel: 'sm',
labelFloat: {
text: 'xs',
textFocusVisible: 'xs',
textPlaceholderShown: '[0.825rem]',
icon: {
color: {
light: 'danger-500',
dark: 'danger-500',
},
},
addon: {
border: 'muted-300',
borderDark: 'muted-700',
bg: 'muted-50',
bgDark: 'muted-900/50',
size: 'full',
space: '2',
font: {
family: 'sans',
size: '[0.65rem]',
weight: 'medium',
color: {
light: 'danger-600',
dark: 'danger-600',
},
},
},
}
Expand Down
8 changes: 4 additions & 4 deletions src/plugins/components/textarea/textarea.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Textareas are an essential part of any application. Shuriken UI textareas can ha

<br />

### Shape: straight
### Rounded: none

Textarea shapes allow you to change the border radiuses. Below is an example of a straight textarea.

Expand All @@ -28,7 +28,7 @@ Textarea shapes allow you to change the border radiuses. Below is an example of

<br />

### Shape: rounded
### Rounded: sm

Textarea shapes allow you to change the border radiuses. Below is an example of a rounded textarea.

Expand All @@ -38,7 +38,7 @@ Textarea shapes allow you to change the border radiuses. Below is an example of

<br />

### Shape: smooth
### Rounded: md

Textarea shapes allow you to change the border radiuses. Below is an example of a smooth textarea.

Expand All @@ -48,7 +48,7 @@ Textarea shapes allow you to change the border radiuses. Below is an example of

<br />

### Shape: curved
### Rounded: lg

Textarea shapes allow you to change the border radiuses. Below is an example of a curved textarea.

Expand Down
Loading

0 comments on commit e2d4203

Please sign in to comment.