TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 14:03:48 +03:00
Code Issues Projects Releases Wiki Activity

Added clear bg to inputs in AdminX

Browse Source 
refs. https://github.com/TryGhost/Team/issues/3328

We might want to use input fields, textareas and dropdowns without the grey background they have right now.
This commit is contained in:
Peter Zimon 2023-05-30 11:50:06 +02:00
parent 1709740dda
commit 73e8e9837b
4 changed files with 29 additions and 5 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/Dropdown.stories.tsx
View File

@ -32,6 +32,13 @@ export const Default: Story = {
}
};
export const ClearBackground: Story = {
args: {
options: dropdownOptions,
clearBg: true
}
};
export const WithPrompt: Story = {
args: {
prompt: 'Select a value',

7
ghost/admin-x-settings/src/admin-x-ds/global/Dropdown.tsx
View File

@ -16,9 +16,10 @@ interface DropdownProps {
error?:boolean;
hint?: React.ReactNode;
defaultSelectedOption?: string;
clearBg?: boolean;
}
const Dropdown: React.FC<DropdownProps> = ({title, prompt, options, onSelect, error, hint, defaultSelectedOption}) => {
const Dropdown: React.FC<DropdownProps> = ({title, prompt, options, onSelect, error, hint, defaultSelectedOption, clearBg = false}) => {
const [selectedOption, setSelectedOption] = useState(defaultSelectedOption);
useEffect(() => {
@ -36,8 +37,8 @@ const Dropdown: React.FC<DropdownProps> = ({title, prompt, options, onSelect, er
return (
<div className='flex flex-col'>
{title && <Heading useLabelTag={true}>{title}</Heading>}
<div className={`relative w-full after:pointer-events-none after:absolute after:right-4 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]'}`}>
<select className={`w-full cursor-pointer appearance-none border-b bg-grey-100 px-[10px] py-2 outline-none ${error ? `border-red` : `border-grey-300 hover:border-grey-400 focus:border-grey-600`} ${title && `mt-2`}`} value={selectedOption} onChange={handleOptionChange}>
<div className={`relative w-full after:pointer-events-none after:absolute ${clearBg ? 'after:right-0' : 'after:right-4'} 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]'}`}>
<select className={`w-full cursor-pointer appearance-none border-b ${!clearBg && 'bg-grey-100 px-[10px]'} py-2 outline-none ${error ? `border-red` : `border-grey-300 hover:border-grey-400 focus:border-grey-600`} ${title && `mt-2`}`} value={selectedOption} onChange={handleOptionChange}>
{prompt && <option value="">{prompt}</option>}
{options.map(option => (
<option

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

@ -23,6 +23,13 @@ export const Default: Story = {
}
};
export const ClearBackground: Story = {
args: {
placeholder: 'Enter description',
clearBg: true
}
};
export const WithValue: Story = {
args: {
placeholder: 'Enter description',
@ -44,6 +51,14 @@ export const WithHint: Story = {
}
};
export const Resizeable: Story = {
args: {
title: 'Description',
placeholder: 'Try do resize this, I dare you...',
resize: 'both'
}
};
export const ResizeDisabled: Story = {
args: {
title: 'Description',

5
ghost/admin-x-settings/src/admin-x-ds/global/TextArea.tsx
View File

@ -15,11 +15,12 @@ interface TextAreaProps {
error?: boolean;
placeholder?: string;
hint?: React.ReactNode;
clearBg?: boolean;
onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
}
const TextArea: React.FC<TextAreaProps> = ({inputRef, title, value, rows = 4, maxLength, resize, error, placeholder, hint, onChange, ...props}) => {
let styles = `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`}`;
const TextArea: React.FC<TextAreaProps> = ({inputRef, title, value, rows = 4, maxLength, resize = 'none', error, placeholder, hint, clearBg = false, onChange, ...props}) => {
let styles = `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`}`;
switch (resize) {
case 'both':