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
parent
a3c283da5e
commit
ee9f80ae3b
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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));
|
||||
|
|
Loading…
Reference in New Issue