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

Jump to bottom

[Joy] Adjust the Input and Textarea styles #34281

Merged
merged 6 commits into from
Sep 15, 2022
Merged

[Joy] Adjust the Input and Textarea styles #34281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f9a4aca
remove hover styles from Input and Textarea
siriwatknp Sep 11, 2022
3f25ce6
adjust variant styles
siriwatknp Sep 12, 2022
648cff3
add colors to Textarea usage
siriwatknp Sep 12, 2022
a334c3f
add color to playground
siriwatknp Sep 12, 2022
d88b379
use same bg on hover
siriwatknp Sep 12, 2022
ed040c4
simplify logic
siriwatknp Sep 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions docs/data/joy/components/text-field/TextFieldUsage.js
View file
Open in desktop
Expand Up @@ -14,6 +14,11 @@ export default function TextFieldUsage() {
defaultValue: 'outlined',
options: ['plain', 'outlined', 'soft', 'solid'],
},
{
propName: 'color',
knob: 'color',
defaultValue: 'neutral',
},
{
propName: 'size',
knob: 'radio',
Expand Down
5 changes: 5 additions & 0 deletions docs/data/joy/components/textarea/TextareaUsage.js
View file
Open in desktop
Expand Up @@ -13,6 +13,11 @@ export default function TextareaUsage() {
defaultValue: 'outlined',
options: ['plain', 'outlined', 'soft', 'solid'],
},
{
propName: 'color',
knob: 'color',
defaultValue: 'neutral',
},
{
propName: 'size',
knob: 'radio',
Expand Down
15 changes: 6 additions & 9 deletions packages/mui-joy/src/Input/Input.tsx
View file
Open in desktop
Expand Up @@ -85,17 +85,14 @@ const InputRoot = styled('div', {
alignItems: 'center',
paddingInline: `var(--Input-paddingInline)`,
borderRadius: 'var(--Input-radius)',
...(!variantStyle?.backgroundColor && {
backgroundColor: theme.vars.palette.background.surface,
}),
fontFamily: theme.vars.fontFamily.body,
fontSize: theme.vars.fontSize.md,
...(ownerState.size === 'sm' && {
fontSize: theme.vars.fontSize.sm,
}),
// TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
transition:
'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
'border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
'&:before': {
boxSizing: 'border-box',
content: '""',
Expand All @@ -114,17 +111,15 @@ const InputRoot = styled('div', {
{
// variant styles
...variantStyle,
'&:hover': {
backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
[`&:hover:not(.${inputClasses.focused})`]: {
...theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
backgroundColor: null, // it is not common to change background on hover for Input
cursor: 'text',
},
[`&.${inputClasses.disabled}`]:
theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
},
// This style has to come after the global variant to set the background to surface
ownerState.variant !== 'solid' && {
[`&.${inputClasses.focused}`]: {
backgroundColor: theme.vars.palette.background.surface,
'&:before': {
boxShadow: `inset 0 0 0 var(--Input-focusedThickness) var(--Input-focusedHighlight)`,
},
Expand Down Expand Up @@ -174,6 +169,7 @@ const InputStartDecorator = styled('span', {
alignItems: 'center',
marginInlineEnd: 'var(--Input-gap)',
color: theme.vars.palette.text.tertiary,
cursor: 'initial',
...(ownerState.focused && {
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`],
}),
Expand All @@ -191,6 +187,7 @@ const InputEndDecorator = styled('span', {
alignItems: 'center',
marginInlineStart: 'var(--Input-gap)',
color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`],
cursor: 'initial',
}));

const Input = React.forwardRef(function Input(inProps, ref) {
Expand Down
15 changes: 6 additions & 9 deletions packages/mui-joy/src/Textarea/Textarea.tsx
View file
Open in desktop
Expand Up @@ -84,9 +84,6 @@ const TextareaRoot = styled('div', {
paddingInlineStart: `var(--Textarea-paddingInline)`, // the paddingInlineEnd is added to the textarea. It looks better when the scrollbar appears.
paddingBlock: 'var(--Textarea-paddingBlock)',
borderRadius: 'var(--Textarea-radius)',
...(!variantStyle?.backgroundColor && {
backgroundColor: theme.vars.palette.background.surface,
}),
fontFamily: theme.vars.fontFamily.body,
fontSize: theme.vars.fontSize.md,
lineHeight: theme.vars.lineHeight.md,
Expand All @@ -96,7 +93,7 @@ const TextareaRoot = styled('div', {
}),
// TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
transition:
'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
'border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
'&:before': {
boxSizing: 'border-box',
content: '""',
Expand All @@ -115,17 +112,15 @@ const TextareaRoot = styled('div', {
{
// variant styles
...variantStyle,
'&:hover': {
backgroundColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
[`&:hover:not(.${textareaClasses.focused})`]: {
...theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
backgroundColor: null, // it is not common to change background on hover for Input
cursor: 'text',
},
[`&.${textareaClasses.disabled}`]:
theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
},
// This style has to come after the global variant to set the background to surface
ownerState.variant !== 'solid' && {
[`&.${textareaClasses.focused}`]: {
backgroundColor: theme.vars.palette.background.surface,
'&:before': {
boxShadow: `inset 0 0 0 var(--Textarea-focusedThickness) var(--Textarea-focusedHighlight)`,
},
Expand Down Expand Up @@ -177,6 +172,7 @@ const TextareaStartDecorator = styled('div', {
marginInlineEnd: 'var(--Textarea-paddingBlock)',
marginBlockEnd: 'var(--Textarea-gap)',
color: theme.vars.palette.text.tertiary,
cursor: 'initial',
}));

const TextareaEndDecorator = styled('div', {
Expand All @@ -189,6 +185,7 @@ const TextareaEndDecorator = styled('div', {
marginInlineEnd: 'var(--Textarea-paddingBlock)',
marginBlockStart: 'var(--Textarea-gap)',
color: theme.vars.palette.text.tertiary,
cursor: 'initial',
}));

const Textarea = React.forwardRef(function Textarea(inProps, ref) {
Expand Down