mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 11:55:03 +03:00
Added dynamic heading color to inputs in AdminX
refs. https://github.com/TryGhost/Team/issues/3354
This commit is contained in:
parent
c1628f46e0
commit
c67d6fd11b
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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>}
|
||||
|
@ -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}
|
||||
|
@ -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(
|
||||
|
Loading…
Reference in New Issue
Block a user