Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Updated default input field styles in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3354
This commit is contained in:
Peter Zimon 2023-06-07 23:28:33 +02:00
parent c67d6fd11b
commit d1c32e47bb
4 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ghost/admin-x-settings/src/admin-x-ds/global/Select.tsx
View file

@ -32,7 +32,7 @@ const Select: React.FC<SelectProps> = ({
error, error,
hint, hint,
defaultSelectedOption, defaultSelectedOption,
clearBg = false, clearBg = true,
containerClassName, containerClassName,
selectClassName, selectClassName,
optionClassName, optionClassName,
@ -59,7 +59,7 @@ const Select: React.FC<SelectProps> = ({
containerClasses = clsx( containerClasses = clsx(
'relative w-full after:pointer-events-none', 'relative w-full after:pointer-events-none',
`after:absolute after:block after:h-2 after:w-2 after:rotate-45 after:border-[1px] after:border-l-0 after:border-t-0 after:border-grey-900 after:content-['']`, `after:absolute after:block after:h-2 after:w-2 after:rotate-45 after:border-[1px] after:border-l-0 after:border-t-0 after:border-grey-900 after:content-['']`,
title ? 'after:top-[22px]' : 'after:top-[14px]', title ? 'after:top-[14px]' : 'after:top-[14px]',
clearBg ? 'after:right-0' : 'after:right-4' clearBg ? 'after:right-0' : 'after:right-4'
); );
} }
@ -71,10 +71,10 @@ const Select: React.FC<SelectProps> = ({
let selectClasses = ''; let selectClasses = '';
if (!unstyled) { if (!unstyled) {
selectClasses = clsx( selectClasses = clsx(
'w-full cursor-pointer appearance-none border-b py-2 outline-none', 'h-10 w-full cursor-pointer appearance-none border-b py-2 outline-none',
!clearBg && 'bg-grey-75 px-[10px]', !clearBg && 'bg-grey-75 px-[10px]',
error ? 'border-red' : 'border-grey-500 hover:border-grey-700 focus:border-black', error ? 'border-red' : 'border-grey-500 hover:border-grey-700 focus:border-black',
title && 'mt-2' (title && !clearBg) && 'mt-2'
); );
} }
selectClasses = clsx( selectClasses = clsx(
@ -85,7 +85,7 @@ const Select: React.FC<SelectProps> = ({
const optionClasses = optionClassName; const optionClasses = optionClassName;
return ( return (
<div className='flex w-full flex-col'> <div>
{title && <Heading grey={selectedOption || !prompt ? true : false} htmlFor={id} useLabelTag={true}>{title}</Heading>} {title && <Heading grey={selectedOption || !prompt ? true : false} htmlFor={id} useLabelTag={true}>{title}</Heading>}
<div className={containerClasses}> <div className={containerClasses}>
<select className={selectClasses} id={id} value={selectedOption} onChange={handleOptionChange}> <select className={selectClasses} id={id} value={selectedOption} onChange={handleOptionChange}>

15
ghost/admin-x-settings/src/admin-x-ds/global/TextArea.tsx
View file

@ -19,7 +19,20 @@ interface TextAreaProps {
onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void; onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
} }
const TextArea: React.FC<TextAreaProps> = ({inputRef, title, value, rows = 3, maxLength, resize = 'none', error, placeholder, hint, clearBg = false, onChange, ...props}) => { const TextArea: React.FC<TextAreaProps> = ({
inputRef,
title,
value,
rows = 3,
maxLength,
resize = 'none',
error,
placeholder,
hint,
clearBg = true,
onChange,
...props
}) => {
const id = useId(); const id = useId();
let styles = `border-b ${clearBg ? 'bg-transparent' : 'bg-grey-75 px-[10px]'} py-2 ${error ? `border-red` : `border-grey-500 hover:border-grey-700 focus:border-black`} ${(title && !clearBg) && `mt-2`}`; let styles = `border-b ${clearBg ? 'bg-transparent' : 'bg-grey-75 px-[10px]'} py-2 ${error ? `border-red` : `border-grey-500 hover:border-grey-700 focus:border-black`} ${(title && !clearBg) && `mt-2`}`;

4
ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx
View file

@ -28,7 +28,7 @@ const TextField: React.FC<TextFieldProps> = ({
error, error,
placeholder, placeholder,
hint, hint,
clearBg = false, clearBg = true,
onChange, onChange,
onBlur, onBlur,
className = '', className = '',
@ -43,7 +43,7 @@ const TextField: React.FC<TextFieldProps> = ({
<input <input
ref={inputRef} ref={inputRef}
className={clsx( className={clsx(
'border-b py-2', 'h-10 border-b py-2',
clearBg ? 'bg-transparent' : 'bg-grey-75 px-[10px]', clearBg ? 'bg-transparent' : 'bg-grey-75 px-[10px]',
error ? `border-red` : `border-grey-500 hover:border-grey-700 focus:border-black`, error ? `border-red` : `border-grey-500 hover:border-grey-700 focus:border-black`,
(title && !hideTitle && !clearBg) && `mt-2`, (title && !hideTitle && !clearBg) && `mt-2`,

2
ghost/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
View file

@ -36,7 +36,7 @@ interface UserDetailProps {
const CustomHeader: React.FC<CustomHeadingProps> = ({children}) => { const CustomHeader: React.FC<CustomHeadingProps> = ({children}) => {
return ( return (
<Heading level={4} separator={true}>{children}</Heading> <Heading level={4}>{children}</Heading>
); );
}; };