Skip to content

Commit

Permalink
fix: helper text padding & input height
Browse files Browse the repository at this point in the history
  • Loading branch information
krzysztofzuraw committed Apr 12, 2023
1 parent 2647ddb commit a3a4cd1
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 13 deletions.
37 changes: 28 additions & 9 deletions src/components/BaseInput/BaseInput.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ export const labelRecipe = recipe({
borderRadius: 3,
paddingY: 4,
cursor: "text",
borderWidth: 1,
borderStyle: "solid",
}),
],
variants: {
Expand Down Expand Up @@ -49,7 +51,6 @@ export const labelRecipe = recipe({
},
style: sprinkles({
borderStyle: "solid",
borderWidth: 1,
borderColor: "brandSubdued",
backgroundColor: {
default: "interactiveNeutralHighlightDefault",
Expand All @@ -68,8 +69,6 @@ export const labelRecipe = recipe({
backgroundColor: {
default: "interactiveNeutralHighlightDefault",
},
borderStyle: "solid",
borderWidth: 1,
borderColor: {
default: "transparent",
hover: "neutralHighlight",
Expand All @@ -84,8 +83,6 @@ export const labelRecipe = recipe({
},
style: sprinkles({
backgroundColor: "interactiveNeutralHighlightDefault",
borderStyle: "solid",
borderWidth: 1,
borderColor: "transparent",
}),
},
Expand All @@ -102,8 +99,6 @@ export const labelRecipe = recipe({
focus: "interactiveNeutralHighlightDefault",
hover: "interactiveNeutralHighlightHovering",
},
borderStyle: "solid",
borderWidth: 1,
borderColor: "transparent",
}),
},
Expand All @@ -114,8 +109,6 @@ export const labelRecipe = recipe({
style: sprinkles({
color: "textNeutralDisabled",
backgroundColor: "interactiveNeutralHighlightDefault",
borderStyle: "solid",
borderWidth: 1,
borderColor: "neutralHighlight",
}),
},
Expand All @@ -129,6 +122,16 @@ export const labelRecipe = recipe({
default: "surfaceCriticalSubdued",
hover: "surfaceCriticalSubdued",
},
borderColor: "transparent",
}),
},
{
variants: {
error: true,
typed: true,
},
style: sprinkles({
borderColor: "transparent",
}),
},
],
Expand Down Expand Up @@ -236,5 +239,21 @@ export const inputRecipe = recipe({
},
});

export const helperTextRecipe = recipe({
variants: {
size: {
small: sprinkles({
paddingX: 5,
}),
medium: sprinkles({
paddingX: 5,
}),
large: sprinkles({
paddingX: 6,
}),
},
},
});

export type LabelVariants = RecipeVariants<typeof labelRecipe>;
export type InputVariants = RecipeVariants<typeof inputRecipe>;
4 changes: 2 additions & 2 deletions src/components/Combobox/Combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { classNames } from "~/utils";
import { Option, ChangeHandler, useComboboxEvents } from "./useComboboxEvents";
import { ComboboxWrapper } from "./ComboboxWrapper";
import { List, Text, Box, PropsWithBox } from "..";
import { inputRecipe, InputVariants } from "../BaseInput";
import { helperTextRecipe, inputRecipe, InputVariants } from "../BaseInput";
import { list, listItem, listWrapperRecipe } from "./Combobox.css";

export type ComboboxProps = PropsWithBox<
Expand Down Expand Up @@ -115,7 +115,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
</Box>

{helperText && (
<Box paddingLeft={4}>
<Box className={helperTextRecipe({ size })}>
<Text
variant="caption"
size={size}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Input/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { classNames } from "~/utils";
import { InputWrapper, useStateEvents } from "./InputWrapper";
import { Box, PropsWithBox } from "../Box";
import { Text } from "../Text";
import { inputRecipe, InputVariants } from "../BaseInput";
import { helperTextRecipe, inputRecipe, InputVariants } from "../BaseInput";

export type InputProps = PropsWithBox<
Omit<
Expand Down Expand Up @@ -69,7 +69,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
/>
</InputWrapper>
{helperText && (
<Box paddingLeft={4}>
<Box className={helperTextRecipe({ size })}>
<Text
variant="caption"
size={size}
Expand Down

0 comments on commit a3a4cd1

Please sign in to comment.