Skip to content

Commit

Permalink
feat(Input): align with DS 5.7
Browse files Browse the repository at this point in the history
  • Loading branch information
@MEsteves22
MEsteves22 committed Oct 27, 2023
1 parent d0dde26 commit 9b7753a
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 85 deletions.
33 changes: 15 additions & 18 deletions packages/core/src/components/BaseInput/BaseInput.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { CSSProperties } from "react";

import { theme } from "@hitachivantara/uikit-styles";

import { outlineStyles } from "@core/utils/focusUtils";
Expand All @@ -20,6 +19,11 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
},
},
disabled: {
"& $inputRoot": {
backgroundColor: theme.colors.atmo2,
borderColor: theme.colors.secondary_60,
},

"& $inputBorderContainer": {
backgroundColor: theme.colors.atmo4,
},
Expand Down Expand Up @@ -93,21 +97,21 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
"& $inputRootMultiline": {
"& $input": {
border: `1px solid ${theme.colors.secondary_60}`,
backgroundColor: "transparent",
backgroundColor: theme.colors.atmo2,
},
},

"&:hover $inputRootMultiline": {
"& $input": {
border: `1px solid ${theme.colors.secondary_60}`,
backgroundColor: "transparent",
backgroundColor: theme.colors.atmo2,
},
},

"&:focus-within $inputRootMultiline": {
"& $input": {
border: `1px solid ${theme.colors.secondary_60}`,
backgroundColor: "transparent",
backgroundColor: theme.colors.atmo2,
},
},
},
Expand All @@ -122,14 +126,14 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
inputRootInvalid: { borderColor: theme.colors.negative },
inputRootReadOnly: {
borderColor: theme.colors.secondary_60,
backgroundColor: "transparent",
backgroundColor: theme.colors.atmo2,
},
inputRoot: {
margin: 0,
width: "100%",
borderRadius: theme.radii.base,
height: "32px",
border: `1px solid ${theme.colors.secondary_80}`,
border: `1px solid ${theme.colors.secondary}`,
boxSizing: "border-box",
backgroundColor: theme.colors.atmo1,
fontFamily: theme.fontFamily.body,
Expand All @@ -152,27 +156,20 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
},
},
inputRootFocused: {
background: theme.colors.atmo1,
backgroundColor: theme.colors.atmo1,
...outlineStyles,

"&:hover": {
background: theme.colors.atmo1,
backgroundColor: theme.colors.atmo1,
},

"& $inputRootReadOnly": {
backgroundColor: "transparent",
"&$inputRootReadOnly": {
backgroundColor: theme.colors.atmo2,
},
},
inputRootDisabled: {
background: theme.colors.atmo2,
borderColor: theme.colors.secondary_60,
cursor: "not-allowed",

"&:hover": {
background: theme.colors.atmo2,
cursor: "not-allowed",
},

"&&::before": {
borderBottomStyle: "none",
},
Expand All @@ -185,7 +182,7 @@ export const { staticClasses, useClasses } = createClasses("HvBaseInput", {
height: "auto",

"& $input": {
border: `1px solid ${theme.colors.secondary_80}`,
border: `1px solid ${theme.colors.secondary}`,
borderRadius: theme.radii.base,
backgroundColor: theme.colors.atmo1,
height: "auto",
Expand Down
90 changes: 46 additions & 44 deletions packages/core/src/components/Input/Input.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,53 +303,55 @@ export const ExternalErrorMessage: StoryObj<HvInputProps> = {

return (
<HvGrid container>
<HvGrid item xs={5} container>
<HvGrid item xs={12}>
<HvInput
label="First name"
description="Please enter your first name"
placeholder="Insert first name"
required
minCharQuantity={2}
aria-errormessage="firstName-error"
onBlur={(_e, _value, inputValidity) => {
if (inputValidity.valid) {
setFirstNameErrorMessage(undefined);
} else if (inputValidity.valueMissing) {
setFirstNameErrorMessage("You must provide a first name");
} else if (inputValidity.tooShort) {
setFirstNameErrorMessage("The first name is too short");
}
}}
/>
</HvGrid>
<HvGrid item xs={12}>
<HvInput
label="Last name"
description="Please enter your last name"
placeholder="Insert last name"
defaultValue="Not a name!"
required
status={lastNameValidationState}
aria-errormessage="lastName-error"
onFocus={(_, value) => {
setLastNameValidationState(value ? "standBy" : "empty");
}}
onBlur={(_e, _value, inputValidity) => {
setLastNameValidationState("invalid");
<HvGrid item xs={12}>
<HvGrid container>
<HvGrid item xs={12} sm={6}>
<HvInput
label="First name"
description="Please enter your first name"
placeholder="Insert first name"
required
minCharQuantity={2}
aria-errormessage="firstName-error"
onBlur={(_e, _value, inputValidity) => {
if (inputValidity.valid) {
setFirstNameErrorMessage(undefined);
} else if (inputValidity.valueMissing) {
setFirstNameErrorMessage("You must provide a first name");
} else if (inputValidity.tooShort) {
setFirstNameErrorMessage("The first name is too short");
}
}}
/>
</HvGrid>
<HvGrid item xs={12} sm={6}>
<HvInput
label="Last name"
description="Please enter your last name"
placeholder="Insert last name"
defaultValue="Not a name!"
required
status={lastNameValidationState}
aria-errormessage="lastName-error"
onFocus={(_, value) => {
setLastNameValidationState(value ? "standBy" : "empty");
}}
onBlur={(_e, _value, inputValidity) => {
setLastNameValidationState("invalid");

if (inputValidity.valueMissing) {
setLastNameErrorMessage("You must provide a last name");
} else {
setLastNameErrorMessage(
"Nice try, but the last name will always be invalid. I told you!"
);
}
}}
/>
if (inputValidity.valueMissing) {
setLastNameErrorMessage("You must provide a last name");
} else {
setLastNameErrorMessage(
"Nice try, but the last name will always be invalid. I told you!"
);
}
}}
/>
</HvGrid>
</HvGrid>
</HvGrid>
<HvGrid item xs={7}>
<HvGrid item xs={12}>
<div
style={{
padding: theme.spacing("xs", "md"),
Expand Down
43 changes: 20 additions & 23 deletions packages/styles/src/themes/ds3.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,51 +295,56 @@ const ds3 = makeTheme((theme) => ({
HvBaseInput: {
classes: {
root: {
"&:hover &.HvBaseInput-inputBorderContainer": {
"&:hover .HvBaseInput-inputBorderContainer": {
backgroundColor: theme.colors.secondary,
},

"&:focus-within &.HvBaseInput-inputBorderContainer": {
"&:focus-within .HvBaseInput-inputBorderContainer": {
backgroundColor: theme.colors.secondary,
},
},
disabled: {
"&& &.HvBaseInput-input": {
"& .HvBaseInput-inputRoot": {
backgroundColor: theme.colors.atmo3,
borderColor: "transparent",
},

"&& .HvBaseInput-input": {
color: theme.colors.secondary_60,
WebkitTextFillColor: theme.colors.secondary_60,
},

"& &.HvBaseInput-inputRootMultiline": {
"& &.HvBaseInput-input": {
"& .HvBaseInput-inputRootMultiline": {
"& .HvBaseInput-input": {
backgroundColor: theme.colors.atmo3,
border: `1px solid ${theme.colors.atmo4}`,
},
},

"&:hover &.HvBaseInput-inputRootMultiline": {
"& &.HvBaseInput-input": {
"&:hover .HvBaseInput-inputRootMultiline": {
"& .HvBaseInput-input": {
backgroundColor: theme.colors.atmo3,
border: `1px solid ${theme.colors.atmo4}`,
},
},
},
readOnly: {
"& &.HvBaseInput-inputRootMultiline": {
"& &.HvBaseInput-input": {
"& .HvBaseInput-inputRootMultiline": {
"& .HvBaseInput-input": {
border: `1px solid transparent`,
backgroundColor: theme.colors.atmo1,
},
},

"&:hover &.HvBaseInput-inputRootMultiline": {
"& &.HvBaseInput-input": {
"&:hover .HvBaseInput-inputRootMultiline": {
"& .HvBaseInput-input": {
border: `1px solid transparent`,
backgroundColor: theme.colors.atmo1,
},
},

"&:focus-within &.HvBaseInput-inputRootMultiline": {
"& &.HvBaseInput-input": {
"&:focus-within .HvBaseInput-inputRootMultiline": {
"& .HvBaseInput-input": {
border: `1px solid transparent`,
backgroundColor: theme.colors.atmo1,
},
Expand All @@ -354,24 +359,16 @@ const ds3 = makeTheme((theme) => ({
},
inputRoot: {
border: "none",
"&:hover:not(&.HvBaseInput-inputRootDisabled):not(&.HvBaseInput-inputRootInvalid):not(&.HvBaseInput-inputRootReadOnly)":
"&:hover:not(.HvBaseInput-inputRootDisabled):not(.HvBaseInput-inputRootInvalid):not(.HvBaseInput-inputRootReadOnly)":
{
borderColor: theme.colors.secondary,
},
},
inputRootFocused: {
"& .HvBaseInput-inputRootReadOnly": {
"&.HvBaseInput-inputRootReadOnly": {
backgroundColor: theme.colors.atmo1,
},
},
inputRootDisabled: {
background: theme.colors.atmo3,
borderColor: "transparent",

"&:hover": {
background: theme.colors.atmo3,
},
},
inputRootMultiline: {
"& .HvBaseInput-input": {
border: `1px solid ${theme.colors.atmo4}`,
Expand Down

0 comments on commit 9b7753a

Please sign in to comment.