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

Cleaned up classname properties in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3354
This commit is contained in:
Peter Zimon 2023-06-07 10:48:33 +02:00
parent f05b6a6037
commit ef096d9c87
4 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -33,8 +33,8 @@ const Button: React.FC<IButton> = ({
color = 'clear'; color = 'clear';
} }
let styles = className; let styles = '';
styles += ' transition whitespace-nowrap flex items-center justify-center rounded-sm text-sm'; styles += ' transition whitespace-nowrap flex items-center justify-center rounded-sm text-sm';
styles += ((link && color !== 'clear' && color !== 'black') || (!link && color !== 'clear')) ? ' font-bold' : ' font-semibold'; styles += ((link && color !== 'clear' && color !== 'black') || (!link && color !== 'clear')) ? ' font-bold' : ' font-semibold';
styles += !link ? `${size === 'sm' ? ' px-3 h-7 ' : ' px-4 h-9 '}` : ''; styles += !link ? `${size === 'sm' ? ' px-3 h-7 ' : ' px-4 h-9 '}` : '';
@ -62,6 +62,7 @@ const Button: React.FC<IButton> = ({
styles += (fullWidth && !link) ? ' w-full' : ''; styles += (fullWidth && !link) ? ' w-full' : '';
styles += (disabled) ? ' opacity-40' : ' cursor-pointer'; styles += (disabled) ? ' opacity-40' : ' cursor-pointer';
styles += ` ${className}`;
return ( return (
<button <button

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

@ -6,11 +6,12 @@ import {IButton} from './Button';
interface ButtonGroupProps { interface ButtonGroupProps {
buttons: Array<IButton>; buttons: Array<IButton>;
link?: boolean; link?: boolean;
className?: string;
} }
const ButtonGroup: React.FC<ButtonGroupProps> = ({buttons, link}) => { const ButtonGroup: React.FC<ButtonGroupProps> = ({buttons, link, className}) => {
return ( return (
<div className={`flex items-center ${link ? 'gap-5' : 'gap-3'}`}> <div className={`flex items-center ${link ? 'gap-5' : 'gap-3'} ${className}`}>
{buttons.map(({key, ...props}) => ( {buttons.map(({key, ...props}) => (
<Button key={key} link={link} {...props} /> <Button key={key} link={link} {...props} />
))} ))}

18
ghost/admin-x-settings/src/admin-x-ds/global/Heading.tsx
View file

@ -21,9 +21,21 @@ interface HeadingBaseProps {
className?: string; className?: string;
} }
type Heading1to5Props = { useLabelTag?: false, level?: Exclude<HeadingLevel, 6>, grey?: never } & HeadingBaseProps & React.HTMLAttributes<HTMLHeadingElement> type Heading1to5Props = {
type Heading6Props = { useLabelTag?: false, level: 6, grey?: boolean } & HeadingBaseProps & React.HTMLAttributes<HTMLHeadingElement> useLabelTag?: false,
type HeadingLabelProps = { useLabelTag: true, level?: never, grey?: never } & HeadingBaseProps & React.LabelHTMLAttributes<HTMLLabelElement> level?: Exclude<HeadingLevel, 6>,
grey?: never
} & HeadingBaseProps & React.HTMLAttributes<HTMLHeadingElement>
type Heading6Props = {
useLabelTag?: false,
level: 6,
grey?: boolean } & HeadingBaseProps & React.HTMLAttributes<HTMLHeadingElement>
type HeadingLabelProps = {
useLabelTag: true,
level?: never,
grey?: never } & HeadingBaseProps & React.LabelHTMLAttributes<HTMLLabelElement>
const Heading: React.FC<Heading1to5Props | Heading6Props | HeadingLabelProps> = ({ const Heading: React.FC<Heading1to5Props | Heading6Props | HeadingLabelProps> = ({
level, level,

6
ghost/admin-x-settings/src/admin-x-ds/global/Link.tsx
View file

@ -7,19 +7,19 @@ interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {
* Tailwind color name * Tailwind color name
*/ */
color?: string; color?: string;
classes?: string;
children?: React.ReactNode; children?: React.ReactNode;
className?: string;
} }
/** /**
* Standard link with default styling * Standard link with default styling
*/ */
const Link: React.FC<LinkProps> = ({href, color, classes, children, ...props}) => { const Link: React.FC<LinkProps> = ({href, color, className, children, ...props}) => {
if (!color) { if (!color) {
color = 'green'; color = 'green';
} }
let styles = (color === 'black') ? `transition text-black hover:text-black-700 ${classes}` : `text-${color} hover:text-${color}-400 ${classes}`; let styles = (color === 'black') ? `transition text-black hover:text-black-700 ${className}` : `text-${color} hover:text-${color}-400 ${className}`;
return <a className={styles} href={href} {...props}>{children}</a>; return <a className={styles} href={href} {...props}>{children}</a>;
}; };