Added dynamic heading color to inputs in AdminX

refs. https://github.com/TryGhost/Team/issues/3354
This commit is contained in:
Peter Zimon 2023-06-07 23:09:34 +02:00
parent c1628f46e0
commit c67d6fd11b
5 changed files with 7 additions and 7 deletions

View File

@ -35,7 +35,7 @@ type Heading6Props = {
type HeadingLabelProps = {
useLabelTag: true,
level?: never,
grey?: never } & HeadingBaseProps & React.LabelHTMLAttributes<HTMLLabelElement>
grey?: boolean } & HeadingBaseProps & React.LabelHTMLAttributes<HTMLLabelElement>
const Heading: React.FC<Heading1to5Props | Heading6Props | HeadingLabelProps> = ({
level,

View File

@ -42,7 +42,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
case 'grey':
multiValueColor = 'bg-grey-300 text-black';
break;
default:
break;
}
@ -65,8 +65,8 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
return (
<div className='flex flex-col'>
{title && <Heading useLabelTag={true}>{title}</Heading>}
<ReactSelect
{title && <Heading grey={defaultValues ? true : false} useLabelTag={true}>{title}</Heading>}
<ReactSelect
classNames={{
menuList: () => 'z-50',
valueContainer: () => customClasses.valueContainer,

View File

@ -86,7 +86,7 @@ const Select: React.FC<SelectProps> = ({
return (
<div className='flex w-full flex-col'>
{title && <Heading htmlFor={id} useLabelTag={true}>{title}</Heading>}
{title && <Heading grey={selectedOption || !prompt ? true : false} htmlFor={id} useLabelTag={true}>{title}</Heading>}
<div className={containerClasses}>
<select className={selectClasses} id={id} value={selectedOption} onChange={handleOptionChange}>
{prompt && <option className={optionClasses} value="">{prompt}</option>}

View File

@ -44,7 +44,7 @@ const TextArea: React.FC<TextAreaProps> = ({inputRef, title, value, rows = 3, ma
return (
<div className='flex flex-col'>
{title && <Heading htmlFor={id} useLabelTag={true}>{title}</Heading>}
{title && <Heading grey={value ? true : false} htmlFor={id} useLabelTag={true}>{title}</Heading>}
<textarea
ref={inputRef}
className={styles}

View File

@ -39,7 +39,7 @@ const TextField: React.FC<TextFieldProps> = ({
return (
<div className='flex flex-col'>
{title && <Heading className={hideTitle ? 'sr-only' : ''} htmlFor={id} useLabelTag={true}>{title}</Heading>}
{title && <Heading className={hideTitle ? 'sr-only' : ''} grey={value ? true : false} htmlFor={id} useLabelTag={true}>{title}</Heading>}
<input
ref={inputRef}
className={clsx(