Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00
Code Issues Releases Activity

feat(app): migrate app parent view to react [EE-5361] (#10086)

Browse source 
Co-authored-by: testa113 <testa113>
This commit is contained in:
Ali 2023-08-27 23:01:35 +02:00 • committed by GitHub
parent 531f88b947
commit 841ca1ebd4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 1448 additions and 810 deletions
Download patch file Download diff file Expand all files Collapse all files

100
app/react/components/Badge/Badge.tsx
View file

@ -1,7 +1,60 @@
import clsx from 'clsx';
import { PropsWithChildren } from 'react';
export type BadgeType = 'success' | 'danger' | 'warn' | 'info';
export type BadgeType =
| 'success'
| 'danger'
| 'warn'
| 'info'
| 'successSecondary'
| 'dangerSecondary'
| 'warnSecondary'
| 'infoSecondary';
// the classes are typed in full because tailwind doesn't render the interpolated classes
const typeClasses: Record<BadgeType, string> = {
success: clsx(
`text-success-9 bg-success-2`,
`th-dark:text-success-3 th-dark:bg-success-10`,
`th-highcontrast:text-success-3 th-highcontrast:bg-success-10`
),
warn: clsx(
`text-warning-9 bg-warning-2`,
`th-dark:text-warning-3 th-dark:bg-warning-10`,
`th-highcontrast:text-warning-3 th-highcontrast:bg-warning-10`
),
danger: clsx(
`text-error-9 bg-error-2`,
`th-dark:text-error-3 th-dark:bg-error-10`,
`th-highcontrast:text-error-3 th-highcontrast:bg-error-10`
),
info: clsx(
`text-blue-9 bg-blue-2`,
`th-dark:text-blue-3 th-dark:bg-blue-10`,
`th-highcontrast:text-blue-3 th-highcontrast:bg-blue-10`
),
// the secondary classes are a bit darker in light mode and a bit lighter in dark mode
successSecondary: clsx(
`text-success-9 bg-success-3`,
`th-dark:text-success-3 th-dark:bg-success-9`,
`th-highcontrast:text-success-3 th-highcontrast:bg-success-9`
),
warnSecondary: clsx(
`text-warning-9 bg-warning-3`,
`th-dark:text-warning-3 th-dark:bg-warning-9`,
`th-highcontrast:text-warning-3 th-highcontrast:bg-warning-9`
),
dangerSecondary: clsx(
`text-error-9 bg-error-3`,
`th-dark:text-error-3 th-dark:bg-error-9`,
`th-highcontrast:text-error-3 th-highcontrast:bg-error-9`
),
infoSecondary: clsx(
`text-blue-9 bg-blue-3`,
`th-dark:text-blue-3 th-dark:bg-blue-9`,
`th-highcontrast:text-blue-3 th-highcontrast:bg-blue-9`
),
};
export interface Props {
type?: BadgeType;
@ -10,50 +63,17 @@ export interface Props {
// this component is used in tables and lists in portainer. It looks like this:
// https://www.figma.com/file/g5TUMngrblkXM7NHSyQsD1/New-UI?node-id=76%3A2
export function Badge({ type, className, children }: PropsWithChildren<Props>) {
export function Badge({
type = 'info',
className,
children,
}: PropsWithChildren<Props>) {
const baseClasses =
'flex w-fit items-center !text-xs font-medium rounded-full px-2 py-0.5';
const typeClasses = getClasses(type);
return (
<span className={clsx(baseClasses, typeClasses, className)}>
<span className={clsx(baseClasses, typeClasses[type], className)}>
{children}
</span>
);
}
// the classes are typed in full to prevent a dev server bug, where tailwind doesn't render the interpolated classes
function getClasses(type: BadgeType | undefined) {
switch (type) {
case 'success':
return clsx(
`text-success-9 bg-success-2`,
`th-dark:text-success-3 th-dark:bg-success-10`,
`th-highcontrast:text-success-3 th-highcontrast:bg-success-10`
);
case 'warn':
return clsx(
`text-warning-9 bg-warning-2`,
`th-dark:text-warning-3 th-dark:bg-warning-10`,
`th-highcontrast:text-warning-3 th-highcontrast:bg-warning-10`
);
case 'danger':
return clsx(
`text-error-9 bg-error-2`,
`th-dark:text-error-3 th-dark:bg-error-10`,
`th-highcontrast:text-error-3 th-highcontrast:bg-error-10`
);
case 'info':
return clsx(
`text-blue-9 bg-blue-2`,
`th-dark:text-blue-3 th-dark:bg-blue-10`,
`th-highcontrast:text-blue-3 th-highcontrast:bg-blue-10`
);
default:
return clsx(
`text-blue-9 bg-blue-2`,
`th-dark:text-blue-3 th-dark:bg-blue-10`,
`th-highcontrast:text-blue-3 th-highcontrast:bg-blue-10`
);
}
}