maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CAL-1577: Improved input addon styles. (#8803)

This commit is contained in:
Jeroen Reumkens 2023-05-10 10:59:32 +02:00 committed by GitHub
parent 8ffb5529e6
commit 9f83885e8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/features/form-builder/Components.tsx
View File

@ -6,7 +6,6 @@ import type {
TextLikeComponentProps,
SelectLikeComponentProps,
} from "@calcom/app-store/routing-forms/components/react-awesome-query-builder/widgets";
import { classNames } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { BookingFieldType } from "@calcom/prisma/zod-utils";
import {
@ -153,10 +152,7 @@ export const Components: Record<BookingFieldType, Component> = {
value[index] = e.target.value;
setValue(value);
}}
className={classNames(inputClassName, "border-r-0")}
addOnClassname={classNames(
"border-default border block border-l-0 disabled:bg-emphasis disabled:hover:cursor-not-allowed bg-transparent disabled:text-subtle border-subtle "
)}
className={inputClassName}
placeholder={placeholder}
label={<></>}
required
@ -170,7 +166,7 @@ export const Components: Record<BookingFieldType, Component> = {
value.splice(index, 1);
setValue(value);
}}>
<X className="text-default" />
<X width={12} className="text-default" />
</button>
</Tooltip>
) : null

8
packages/ui/components/form/inputs/Input.tsx
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 leading-4 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 disabled:bg-subtle mb-2 block h-9 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
)}
@ -68,7 +68,7 @@ type AddonProps = {
const Addon = ({ isFilled, children, className, error }: AddonProps) => (
<div
className={classNames(
"addon-wrapper border-default h-9 border px-3",
"addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default h-9 border px-3",
isFilled && "bg-subtle",
className
)}>
@ -144,8 +144,8 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
className={classNames(
className,
"disabled:bg-muted disabled:hover:border-subtle disabled:cursor-not-allowed",
addOnLeading && "rounded-l-none",
addOnSuffix && "rounded-r-none",
addOnLeading && "rounded-l-none border-l-0",
addOnSuffix && "rounded-r-none border-r-0",
type === "search" && "pr-8",
"!my-0 !ring-0"
)}