Fix form inputs height to 36px (#8541)

* fix form inputs height to 36px

* fix: remove h-9 from preset

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix input addOns container height

* replace minHeight class with height in input addOn

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
pull/8472/head^2
Aditya Raj 2023-05-03 03:19:17 +05:30 committed by GitHub
parent a3c283da5e
commit ee9f80ae3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 10 deletions

View File

@ -276,7 +276,7 @@ export const EventSetupTab = (
return (
<li
key={`${location.type}${index}`}
className="border-default text-default mb-2 rounded-md border py-1.5 px-2 hover:cursor-pointer">
className="border-default text-default mb-2 h-9 rounded-md border py-1.5 px-2 hover:cursor-pointer">
<div className="flex items-center justify-between">
<div className="flex items-center">
<img

View File

@ -23,7 +23,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
{...props}
ref={ref}
className={classNames(
"hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default min-h-9 disabled:bg-subtle mb-2 block rounded-md border py-2 px-3 text-sm focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 disabled:cursor-not-allowed",
"hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default min-h-9 disabled:bg-subtle mb-2 block rounded-md border py-2 px-3 text-sm leading-4 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 disabled:cursor-not-allowed",
isFullWidth && "w-full",
props.className
)}
@ -33,7 +33,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
export function InputLeading(props: JSX.IntrinsicElements["div"]) {
return (
<span className="bg-muted border-default text-subtle inline-flex flex-shrink-0 items-center rounded-l-sm border px-3 ltr:border-r-0 rtl:border-l-0 sm:text-sm">
<span className="bg-muted border-default text-subtle inline-flex flex-shrink-0 items-center rounded-l-sm border px-3 ltr:border-r-0 rtl:border-l-0 sm:text-sm sm:leading-4">
{props.children}
</span>
);
@ -68,13 +68,13 @@ type AddonProps = {
const Addon = ({ isFilled, children, className, error }: AddonProps) => (
<div
className={classNames(
"addon-wrapper border-default min-h-9 border px-3",
"addon-wrapper border-default h-9 border px-3",
isFilled && "bg-subtle",
className
)}>
<div
className={classNames(
"min-h-9 flex flex-col justify-center text-sm",
"flex h-9 flex-col justify-center text-sm",
error ? "text-error" : "text-default"
)}>
<span className="flex whitespace-nowrap">{children}</span>
@ -280,7 +280,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
ref={ref}
{...props}
className={classNames(
"hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default mb-2 block w-full rounded-md border py-2 px-3 text-sm focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 disabled:cursor-not-allowed",
"hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default mb-2 block w-full rounded-md border py-2 px-3 text-sm leading-4 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 disabled:cursor-not-allowed",
props.className
)}
/>
@ -367,7 +367,7 @@ export const Form = forwardRef(PlainForm) as <T extends FieldValues>(
export function FieldsetLegend(props: JSX.IntrinsicElements["legend"]) {
return (
<legend {...props} className={classNames("text-default text-sm font-medium", props.className)}>
<legend {...props} className={classNames("text-default text-sm font-medium leading-4", props.className)}>
{props.children}
</legend>
);

View File

@ -51,7 +51,7 @@ export const Select = <
dropdownIndicator: () => "text-default",
control: (state) =>
cx(
"bg-default border-default !min-h-9 text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-2 focus-within:ring-emphasis hover:border-emphasis rounded-md border ",
"bg-default border-default !min-h-9 h-9 text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-2 focus-within:ring-emphasis hover:border-emphasis rounded-md border ",
state.isMulti
? variant === "checkbox"
? "px-3 py-2"
@ -59,7 +59,7 @@ export const Select = <
? "p-1"
: "px-3 py-2"
: "py-2 px-3",
props.isDisabled && "bg-gray-100",
props.isDisabled && "bg-muted",
props.classNames?.control
),
singleValue: () => cx("text-emphasis placeholder:text-muted", props.classNames?.singleValue),

View File

@ -43,7 +43,7 @@ export const BooleanToggleGroup = function BooleanToggleGroup({
value={yesNoValue}
type="single"
disabled={disabled}
className="border-subtle flex space-x-2 rounded-md border p-1 rtl:space-x-reverse"
className="border-subtle flex h-9 space-x-2 rounded-md border p-1 rtl:space-x-reverse"
onValueChange={(yesNoValue: "yes" | "no") => {
setYesNoValue(yesNoValue);
onValueChange(boolean(yesNoValue));