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;
fullWidth?: boolean;
link?: boolean;
disabled?: boolean;
onClick?: () => void;
}
@ -27,34 +28,40 @@ const Button: React.FC<IButton> = ({
color,
fullWidth,
link,
disabled,
onClick,
...props
}) => {
let buttonColor: string;
if (!color) {
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) {
case ButtonColors.Black:
buttonColor = link ? 'text-black' : 'bg-black text-white';
styles += link ? ' text-black' : ' bg-black text-white';
break;
case ButtonColors.Green:
buttonColor = link ? 'text-green' : 'bg-green text-white';
styles += link ? ' text-green' : ' bg-green text-white';
break;
case ButtonColors.Red:
buttonColor = link ? 'text-red' : 'bg-red text-white';
styles += link ? ' text-red' : ' bg-red text-white';
break;
default:
buttonColor = link ? 'text-black' : 'bg-transparent text-black';
styles += link ? ' text-black' : ' bg-transparent text-black';
break;
}
styles += (fullWidth && !link) ? ' w-full' : '';
styles += (disabled) ? ' opacity-40' : ' cursor-pointer';
return (
<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"
onClick={onClick}
{...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}) => {
return (
<div className={`flex items-center ${link ? 'gap-5' : 'gap-2'}`}>
{buttons.map(({key, color, label, onClick}) => (
<Button key={key} color={color} label={label} link={link} onClick={onClick} />
{buttons.map(({key, ...props}) => (
<Button key={key} link={link} {...props} />
))}
</div>
);

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

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