Skip to content

Commit

Permalink
fix: fixing text input jump issue on the text input component, fixing…
Browse files Browse the repository at this point in the history 
… focus, disabled and readonly states
  • Loading branch information
@davidken91
davidken91 committed Jun 1, 2023
1 parent 73ba390 commit f3039be
Showing 1 changed file with 60 additions and 19 deletions.
79 changes: 60 additions & 19 deletions packages/ui-library/src/foundation/semantic-tokens/form.css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,54 +14,75 @@ export const form = css`
.blr-form-element {
font-weight: ${Forms.MD.UserInput.fontWeight};
font-size: ${Forms.MD.UserInput.fontSize};
line-height: ${Forms.MD.UserInput.lineHeight};
font-family: ${Forms.MD.UserInput.fontFamily}, sans-serif;
border-width: ${Forms.Input.Default.Rest.width};
border-width: ${Forms.Input.Default.Focus.width};
border-style: ${Forms.Input.Default.Rest.style};
border-color: ${Forms.Input.Default.Rest.color};
border-color: transparent;
outline: ${Forms.Input.Default.Rest.width} ${Forms.Input.Default.Rest.style} ${Forms.Input.Default.Rest.color};
border-radius: ${Forms.InputBorderRadius};
min-width: ${unsafeCSS(forms.textinput.minWidth)};
padding: ${Forms.MD.InputField.Padding};
box-sizing: border-box;
color: ${Forms.UserInput.Default.Rest};
background-color: ${Forms.SurfaceFill.Default.Rest};
&::placeholder {
color: ${Forms.Placeholder.Default.Rest};
}
&:hover {
border-width: ${Forms.Input.Default.Hover.width};
border-width: ${Forms.Input.Default.Focus.width};
border-style: ${Forms.Input.Default.Hover.style};
border-color: ${Forms.Input.Default.Hover.color};
border-color: transparent;
outline: ${Forms.Input.Default.Hover.width} ${Forms.Input.Default.Hover.style} ${Forms.Input.Default.Hover.color};
color: ${Forms.UserInput.Default.Hover};
background-color: ${Forms.SurfaceFill.Default.Hover};
&::placeholder {
color: ${Forms.Placeholder.Default.Hover};
}
}
&:active{
border-width: ${Forms.Input.Default.Pressed.width};
border-width: ${Forms.Input.Default.Focus.width};
border-style: ${Forms.Input.Default.Pressed.style};
border-color: ${Forms.Input.Default.Pressed.color};
border-color: transparent;
outline: ${Forms.Input.Default.Pressed.width} ${Forms.Input.Default.Pressed.style} ${
Forms.Input.Default.Pressed.color
};
color: ${Forms.UserInput.Default.Pressed};
background-color: ${Forms.SurfaceFill.Default.Pressed};
&::placeholder {
color: ${Forms.Placeholder.Default.Pressed};
}
}
&[readonly] {
border-width: ${Forms.Input.Default.ReadOnly.width};
border-width: ${Forms.Input.Default.Focus.width};
border-style: ${Forms.Input.Default.ReadOnly.style};
border-color: ${Forms.Input.Default.ReadOnly.color};
color: ${Forms.Placeholder.Default.ReadOnly};
border-color: transparent;
outline: ${Forms.Input.Default.Hover.width} ${Forms.Input.Default.ReadOnly.style} ${
Forms.Input.Default.ReadOnly.color
};
color: ${Forms.UserInput.Default.ReadOnly};
background-color: ${Forms.SurfaceFill.Default.ReadOnly};
&::placeholder {
color: ${Forms.Placeholder.Default.ReadOnly};
}
}
&:disabled {
border-width: ${Forms.Input.Default.Disabled.width};
border-width: ${Forms.Input.Default.Focus.width};
border-style: ${Forms.Input.Default.Disabled.style};
border-color: ${Forms.Input.Default.Disabled.color};
border-color: transparent;
outline: ${Forms.Input.Default.Disabled.width} ${Forms.Input.Default.Disabled.style} ${
Forms.Input.Default.Disabled.color
};
color: ${Forms.UserInput.Default.Disabled};
background-color: ${Forms.SurfaceFill.Default.Disabled};
&::placeholder {
color: ${Forms.Placeholder.Default.Disabled};
Expand All @@ -72,40 +93,60 @@ export const form = css`
border-width: ${Forms.Input.Default.Focus.width};
border-style: ${Forms.Input.Default.Focus.style};
border-color: ${Forms.Input.Default.Focus.color};
outline: none;
color: ${Forms.UserInput.Default.Focus};
background-color: ${Forms.SurfaceFill.Default.Focus};
&::placeholder {
color: ${Forms.Placeholder.Default.Focus};
}
}
&.error-input {
background-color: ${Forms.SurfaceFill.Error.Rest};
border-width: ${Forms.Input.Error.Rest.width};
border-width: ${Forms.Input.Error.Focus.width};
border-style: ${Forms.Input.Error.Rest.style};
border-color: ${Forms.Input.Error.Rest.color};
outline-color: ${Forms.Input.Error.Rest.color};
border-color: transparent;
outline: ${Forms.Input.Error.Rest.width} ${Forms.Input.Error.Rest.style} ${Forms.Input.Error.Rest.color};
color: ${Forms.UserInput.Error.Rest};
background-color: ${Forms.SurfaceFill.Error.Rest};
&::placeholder {
color: ${Forms.Placeholder.Error.Rest};
}
&:hover {
border-width: ${Forms.Input.Error.Hover.width};
border-width: ${Forms.Input.Error.Focus.width};
border-style: ${Forms.Input.Error.Hover.style};
border-color: ${Forms.Input.Error.Hover.color};
outline-color: ${Forms.Input.Error.Hover.color};
border-color: transparent;
outline: ${Forms.Input.Error.Hover.width} ${Forms.Input.Error.Hover.style} ${Forms.Input.Error.Hover.color};
color: ${Forms.UserInput.Error.Hover};
background-color: ${Forms.SurfaceFill.Error.Hover};
&::placeholder {
color: ${Forms.Placeholder.Error.Hover};
}
}
&:active {
border-width: ${Forms.Input.Error.Focus.width};
border-style: ${Forms.Input.Error.Pressed.style};
border-color: transparent;
outline: ${Forms.Input.Error.Pressed.width} ${Forms.Input.Error.Pressed.style} ${Forms.Input.Error.Pressed.color};
color: ${Forms.UserInput.Error.Pressed};
background-color: ${Forms.SurfaceFill.Error.Pressed};
&::placeholder {
color: ${Forms.Placeholder.Error.Pressed};
}
}
&:focus {
border-width: ${Forms.Input.Error.Focus.width};
border-style: ${Forms.Input.Error.Focus.style};
border-color: ${Forms.Input.Error.Focus.color};
outline-color: ${Forms.Input.Error.Focus.color};
outline: none;
color: ${Forms.UserInput.Error.Focus};
background-color: ${Forms.SurfaceFill.Error.Focus};
&::placeholder {
color: ${Forms.Placeholder.Error.Focus};
Expand Down

0 comments on commit f3039be

Please sign in to comment.