Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Added clear bg option to textfields in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3328
This commit is contained in:
Peter Zimon 2023-05-30 11:44:42 +02:00
parent cb6825f1a3
commit 1709740dda
2 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,6 +23,13 @@ export const Default: Story = {
}
};
export const ClearBackground: Story = {
args: {
placeholder: 'Enter something',
clearBg: true
}
};
export const WithValue: Story = {
args: {
placeholder: 'Enter something',

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

@ -13,18 +13,19 @@ interface TextFieldProps {
error?: boolean;
placeholder?: string;
hint?: React.ReactNode;
clearBg?: boolean;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
const TextField: React.FC<TextFieldProps> = ({
type = 'text', inputRef, title, value, error, placeholder, hint, onChange, ...props
type = 'text', inputRef, title, value, error, placeholder, hint, clearBg = false, onChange, ...props
}) => {
return (
<div className='flex flex-col'>
{title && <Heading useLabelTag={true}>{title}</Heading>}
<input
ref={inputRef}
className={`border-b bg-grey-100 px-[10px] py-2 ${error ? `border-red` : `border-grey-300 hover:border-grey-400 focus:border-grey-600`} ${title && `mt-2`}`}
className={`border-b ${!clearBg && 'bg-grey-100 px-[10px]'} py-2 ${error ? `border-red` : `border-grey-300 hover:border-grey-400 focus:border-grey-600`} ${title && `mt-2`}`}
defaultValue={value}
placeholder={placeholder}
type={type}