Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Added optional prompt to dropdown in Admin X DS

Browse source 
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-22 09:03:59 +02:00
parent 46c8863b7c
commit 950b59d81e
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/Dropdown.stories.tsx
View file

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

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

@ -10,6 +10,7 @@ export interface DropdownOption {
interface DropdownProps {
title?: string;
prompt?: string;
options: DropdownOption[];
onSelect: (value: string) => void;
error?:boolean;
@ -17,7 +18,7 @@ interface DropdownProps {
defaultSelectedOption?: string;
}
const Dropdown: React.FC<DropdownProps> = ({title, options, onSelect, error, hint, defaultSelectedOption}) => {
const Dropdown: React.FC<DropdownProps> = ({title, prompt, options, onSelect, error, hint, defaultSelectedOption}) => {
const [selectedOption, setSelectedOption] = useState(defaultSelectedOption);
useEffect(() => {
@ -36,7 +37,7 @@ const Dropdown: React.FC<DropdownProps> = ({title, options, onSelect, error, hin
<div className='flex flex-col'>
{title && <Heading useLabelTag={true}>{title}</Heading>}
<select className={`-m-1 h-10 border-b ${error ? `border-red` : `border-grey-300 hover:border-grey-500 focus:border-grey-900`} py-2 ${title && `mt-0`}`} value={selectedOption} onChange={handleOptionChange}>
<option value="">Select an option</option>
{prompt && <option value="">{prompt}</option>}
{options.map(option => (
<option
key={option.value}