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

TextField and TextArea components adapted to the new design system #538

Merged
merged 9 commits into from
Nov 25, 2022
Merged

TextField and TextArea components adapted to the new design system #538

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
cce39fc
TextField styles and stories
vmilan Nov 21, 2022
7ea8bd6
text field stories
vmilan Nov 22, 2022
5f2e5f7
add icon sizes constants to theme
vmilan Nov 23, 2022
e0866a7
text field and text area styles and stories
vmilan Nov 23, 2022
dc9b5f1
Merge branch 'feature/design-system' into feature/text-field
vmilan Nov 23, 2022
80c38df
clean up
vmilan Nov 23, 2022
6672249
clean up
vmilan Nov 24, 2022
5fad7b3
Password component
vmilan Nov 24, 2022
2eaa799
CR changes
vmilan Nov 24, 2022
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
Prev Previous commit
Next Next commit
text field and text area styles and stories
  • Loading branch information
@vmilan
vmilan committed Nov 23, 2022
commit e0866a7120f89f7c0175823c4b4b48323688bb38
149 changes: 139 additions & 10 deletions packages/react-ui/src/theme/sections/components/forms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,28 +80,139 @@ export const formsOverrides = {
...themeTypography.body1,

'& input': {
padding: 0
padding: 0,

'&::placeholder': {
opacity: 1,
color: commonPalette.text.hint
}
},
'& .MuiOutlinedInput-notchedOutline': {
top: 0

'&.MuiInputBase-formControl::after': {
top: 0,
transform: 'none',
opacity: 0,
transition: 'border 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
},
'&.MuiInputBase-formControl.Mui-focused::after': {
transform: 'none',
opacity: 1
},

// Variants
'&.MuiFilledInput-root': {
borderRadius: getSpacing(0.5),
backgroundColor: commonPalette.default.background,

'&:hover': {
backgroundColor: commonPalette.default.background
},
'&::before': {
top: 0,
borderRadius: getSpacing(0.5),
border: '1px solid transparent',
transition: 'border 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
},
'&:hover:not(.Mui-disabled)::before': {
borderColor: commonPalette.text.primary
},
'&::after': {
borderRadius: getSpacing(0.5),
border: '1px solid transparent'
},
'&.Mui-focused': {
backgroundColor: commonPalette.background.paper,

'&::after': {
border: `2px solid ${commonPalette.primary.main}`
}
},
'&.Mui-disabled': {
backgroundColor: commonPalette.default.background,

'&:before, &:after': {
content: 'none'
'&::before': {
borderBottomStyle: 'solid'
}
},
'&.Mui-error::after': {
opacity: 1,
border: `2px solid ${commonPalette.error.light}`
}
},

'&.MuiOutlinedInput-root': {
padding: getSpacing(0, 2),

'&.MuiInputBase-sizeSmall': {
padding: getSpacing(0, 1.5)
},
'& .MuiOutlinedInput-notchedOutline': {
top: 0,
borderColor: commonPalette.default.outlinedBorder,
transition: 'border 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
},
'&.Mui-error .MuiOutlinedInput-notchedOutline': {
border: `2px solid ${commonPalette.error.light}`
}
},

'&.MuiInput-underline': {
marginTop: 0,
padding: 0
padding: 0,

'&::before': {
borderColor: commonPalette.default.outlinedBorder
},
'&:hover:not(.Mui-disabled)::before': {
borderBottom: `1px solid ${commonPalette.text.primary}`
},
'&:not(.Mui-disabled)::after': {
borderBottom: '1px solid transparent'
},
'&.Mui-focused::after': {
borderBottom: `2px solid ${commonPalette.primary.main}`
},
'&.Mui-error::after': {
opacity: 1,
borderBottom: `2px solid ${commonPalette.error.light}`
},
'&.Mui-disabled::before': {
borderBottomStyle: 'solid'
}
},

// TextArea (multiline)
'&.MuiInputBase-multiline': {
height: 'auto',
minHeight: getSpacing(12),
alignItems: 'flex-start',
padding: getSpacing(1.5, 2),

'& textarea': {
...themeTypography.body1,

'&::placeholder, &.Mui-disabled::placeholder': {
opacity: 1,
color: commonPalette.text.hint
}
},

'&.MuiInputBase-sizeSmall': {
minHeight: getSpacing(9),
padding: getSpacing(1, 1.5),

'& textarea': {
...themeTypography.body2
}
}
}
},

// size
sizeSmall: {
height: getSpacing(4),
padding: getSpacing(0, 1.5),

'& input': {
...themeTypography.body2
}
Expand All @@ -114,15 +225,26 @@ export const formsOverrides = {
styleOverrides: {
root: {
'& .MuiTypography-root': {
...themeTypography.body1
...themeTypography.body1,
color: commonPalette.text.secondary
},
'&.MuiInputAdornment-sizeSmall': {
'& .MuiTypography-root': {
...themeTypography.body2
}
},
'&.MuiInputAdornment-positionStart.MuiInputAdornment-root:not(.MuiInputAdornment-hiddenLabel)':
{
marginTop: 0
},
'& .MuiSvgIcon-root': {
fontSize: ICON_SIZE
fontSize: ICON_SIZE,
color: commonPalette.text.secondary
},
'.Mui-disabled &': {
'& .MuiTypography-root, & .MuiSvgIcon-root': {
color: commonPalette.text.disabled
}
}
}
}
Expand All @@ -141,7 +263,9 @@ export const formsOverrides = {
// Form Control
MuiFormControl: {
styleOverrides: {
root: {}
root: {
width: '100%' // ??
}
}
},

Expand All @@ -153,7 +277,11 @@ export const formsOverrides = {
transform: 'none',
marginBottom: getSpacing(1),
...themeTypography.caption,
fontWeight: 500
fontWeight: 500,
color: commonPalette.text.primary
},
sizeSmall: {
marginBottom: getSpacing(0.5)
}
}
},
Expand All @@ -162,6 +290,7 @@ export const formsOverrides = {
MuiSelect: {
defaultProps: {
variant: 'outlined',

MenuProps: {
anchorOrigin: {
vertical: 'bottom',
Expand Down
Loading