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

Added button disabled state in Admin design system

Browse source 
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-17 15:38:58 +02:00
parent 0bcfdbd7ce
commit 0b4fc8d591
3 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
ghost/admin-x-settings/src/admin-x-ds/global/Button.tsx
View file

@ -19,6 +19,7 @@ export interface IButton {
color?: string; color?: string;
fullWidth?: boolean; fullWidth?: boolean;
link?: boolean; link?: boolean;
disabled?: boolean;
onClick?: () => void; onClick?: () => void;
} }
@ -27,34 +28,40 @@ const Button: React.FC<IButton> = ({
color, color,
fullWidth, fullWidth,
link, link,
disabled,
onClick, onClick,
...props ...props
}) => { }) => {
let buttonColor: string;
if (!color) { if (!color) {
color = ButtonColors.Clear; color = ButtonColors.Clear;
} }
const fontWeight: string = ((link && color !== ButtonColors.Clear && color !== ButtonColors.Black) || (!link && color !== ButtonColors.Clear)) ? 'font-bold' : 'font-semibold';
const padding: string = !link ? 'px-4 h-9' : ''; let styles = 'flex items-center justify-center rounded-sm text-sm';
styles += ((link && color !== ButtonColors.Clear && color !== ButtonColors.Black) || (!link && color !== ButtonColors.Clear)) ? ' font-bold' : ' font-semibold';
styles += !link ? ' px-4 h-9' : '';
switch (color) { switch (color) {
case ButtonColors.Black: case ButtonColors.Black:
buttonColor = link ? 'text-black' : 'bg-black text-white'; styles += link ? ' text-black' : ' bg-black text-white';
break; break;
case ButtonColors.Green: case ButtonColors.Green:
buttonColor = link ? 'text-green' : 'bg-green text-white'; styles += link ? ' text-green' : ' bg-green text-white';
break; break;
case ButtonColors.Red: case ButtonColors.Red:
buttonColor = link ? 'text-red' : 'bg-red text-white'; styles += link ? ' text-red' : ' bg-red text-white';
break; break;
default: default:
buttonColor = link ? 'text-black' : 'bg-transparent text-black'; styles += link ? ' text-black' : ' bg-transparent text-black';
break; break;
} }
styles += (fullWidth && !link) ? ' w-full' : '';
styles += (disabled) ? ' opacity-40' : ' cursor-pointer';
return ( return (
<button <button
className={`flex cursor-pointer items-center justify-center rounded-sm text-sm ${padding} ${fontWeight} ${fullWidth && !link ? 'w-full' : ''} ${buttonColor} `} className={styles}
disabled={disabled}
type="button" type="button"
onClick={onClick} onClick={onClick}
{...props} {...props}

4
ghost/admin-x-settings/src/admin-x-ds/global/ButtonGroup.tsx
View file

@ -11,8 +11,8 @@ interface ButtonGroupProps {
const ButtonGroup: React.FC<ButtonGroupProps> = ({buttons, link}) => { const ButtonGroup: React.FC<ButtonGroupProps> = ({buttons, link}) => {
return ( return (
<div className={`flex items-center ${link ? 'gap-5' : 'gap-2'}`}> <div className={`flex items-center ${link ? 'gap-5' : 'gap-2'}`}>
{buttons.map(({key, color, label, onClick}) => ( {buttons.map(({key, ...props}) => (
<Button key={key} color={color} label={label} link={link} onClick={onClick} /> <Button key={key} link={link} {...props} />
))} ))}
</div> </div>
); );

1
ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
View file

@ -50,6 +50,7 @@ const TitleAndDescription: React.FC = () => {
{ {
label: 'Save', label: 'Save',
key: 'save', key: 'save',
disabled: !isEdited,
color: ButtonColors.Green color: ButtonColors.Green
} }
]; ];