-work on atlassian design tailwind design system,

-new: buttons
-rework of flag/toast flag and inline messages

Author: marcus-wishes

.eslintrc.json

@@ -21,7 +21,8 @@
 		"plugin:@atlaskit/design-system/recommended",
 		"plugin:react/recommended",
 		"plugin:react-hooks/recommended",
-		"prettier"
+		"prettier",
+		"plugin:tailwindcss/recommended"
 	],
 	"settings": {
 		"react": {

.prettierrc

@@ -0,0 +1,75 @@
+import React, { CSSProperties } from "react"
+import { twMerge } from "tailwind-merge"
+import { InteractiveAppearance, InteractiveStyles } from "../utils/colors"
+import Spinner from '@atlaskit/spinner'
+
+
+export type ButtonProps = {
+	appearance?: InteractiveAppearance
+	label?: string
+	title?: string
+	iconBefore?: React.ReactNode
+	iconAfter?: React.ReactNode
+	onClick: () => void
+	children?: React.ReactNode
+	style?: CSSProperties
+	className?: string
+}
+
+export const Button = ({
+	label = "",
+	title = "",
+	appearance = "default",
+	iconBefore,
+	iconAfter,
+	style,
+	onClick,
+	children,
+	className,
+}: ButtonProps) => {
+	return (
+		<button 
+			title={title}
+			aria-label={label}
+			onClick={onClick}
+			style={style}
+			className={twMerge(InteractiveStyles[appearance], "px-3 py-1 rounded flex justify-center items-center relative gap-1", className)}
+		>
+			{iconBefore}
+			{children}
+			{iconAfter}
+		</button>
+	)
+}
+
+
+export const LoadingButton = ({
+	isLoading = false,
+	children,
+	...props
+}: ButtonProps & { isLoading: boolean }) => {
+	return (
+		<Button 
+			{...props}
+		>
+			<div className={isLoading ? "opacity-0" : undefined}>
+				{children}
+			</div>
+			{ isLoading && 
+				<div
+					className="absolute inset-0 flex items-center justify-center"
+				>
+					<Spinner />
+				</div>
+			}
+		</Button>
+	)
+}
+
+export const ButtonGroup = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<div className="inline-flex gap-1">
+			{children}
+		</div>
+	)
+}

library/src/components/Button.tsx

@@ -4,16 +4,15 @@ import Tick from "@atlaskit/icon/glyph/check-circle"
 import Error from "@atlaskit/icon/glyph/error"
 import Info from "@atlaskit/icon/glyph/info"
 import Warning from "@atlaskit/icon/glyph/warning"
-import DiscoverFilledIcon from "@atlaskit/icon/glyph/discover-filled"
 
 import { token } from "@atlaskit/tokens"
-import { Appearance, getAppearanceColors } from "../utils/colors"
-import { N0 } from "@atlaskit/theme/colors"
+import {  getAppearanceColors, InteractiveAppearance, InteractiveStyles, InteractiveInvertedStyles } from "../utils/colors"
+import { twMerge } from "tailwind-merge"
 
 export type FlagProps = {
 	title: string
 	description: string | JSX.Element
-	appearance?: Appearance
+	appearance?: InteractiveAppearance
 	invert?: boolean
 	icon?: JSX.Element
 	actions?: FlagActionType[]
@@ -32,9 +31,10 @@ function FlagIcon({
 	appearance,
 	invert,
 }: {
-	appearance?: Appearance
+	appearance?: InteractiveAppearance
 	invert: boolean
 }) {
+
 	const { primaryColor, secondaryColor } = getAppearanceColors(
 		invert,
 		appearance,
@@ -77,20 +77,12 @@ function FlagIcon({
 				/>
 			)
 		}
-		case "discovery": {
-			return (
-				<DiscoverFilledIcon
-					label="Discovery"
-					primaryColor={primaryColor}
-					secondaryColor={secondaryColor}
-				/>
-			)
-		}
 	}
 
 	return null
 }
 
+
 export function Flag({
 	title,
 	description,
@@ -100,63 +92,42 @@ export function Flag({
 	actions,
 	style,
 }: FlagProps) {
-	const { primaryColor, textColor, secondaryColor } = getAppearanceColors(
-		invert ?? true,
-		appearance,
-	)
+	const appStyle = invert ? InteractiveInvertedStyles[appearance ?? "default"] : InteractiveStyles[appearance ?? "default"]
+	
 
 	if (!icon) {
 		icon = <FlagIcon appearance={appearance} invert={!invert} />
 	}
 
-	const backgroundColor = invert
-		? token("elevation.surface.overlay", N0)
-		: primaryColor
-
 	return (
 		<div
 			style={{
-				display: "grid",
 				gridTemplateColumns: "auto 1fr",
-				gap: "1rem",
-				padding: token("space.200", "1rem"),
-				borderRadius: token("border.radius.100", "0.25rem"),
-				backgroundColor,
-				color: textColor,
-				border: `1px solid ${secondaryColor}`,
 				boxShadow: token(
 					"elevation.shadow.overlay",
 					"0px 8px 12px #091e423f, 0px 0px 1px #091e424f",
 				),
 				...style,
 			}}
+			className={twMerge(appStyle, "grid gap-4 rounded-sm p-4 border-[1px]")}
 		>
 			{icon && (
 				<div>
 					<p
-						style={{
-							display: "flex",
-							justifyItems: "center",
-							alignItems: "center",
-						}}
+						className="flex items-center justify-center"
 					>
 						{icon}
 					</p>
 				</div>
 			)}
 			<div>
-				<div className="font-bold mb-2">{title}</div>
+				<div className="mb-2 font-bold">{title}</div>
 				<div>{description}</div>
 				<div>
 					{actions?.map((action, i) => (
 						<a
 							key={i}
-							style={{
-								display: "inline-block",
-								cursor: "pointer",
-								marginTop: "0.75rem",
-								fontSize: "small",
-							}}
+							className="mt-3 inline-block cursor-pointer text-sm"
 							onClick={action.onClick}
 							href={action.href}
 							target={action.target}

library/src/components/Flag.tsx

@@ -10,8 +10,13 @@ import CrossIcon from "@atlaskit/icon/glyph/cross"
 
 import { token } from "@atlaskit/tokens"
 import { Flag, FlagActionType, FlagProps } from "./Flag"
-import { getAppearanceColors } from "../utils/colors"
-import type { Appearance } from "../utils/colors"
+import {
+	getAppearanceColors,
+	InteractiveAppearance,
+	InteractiveInvertedStyles,
+	InteractiveStyles,
+} from "../utils/colors"
+import { twMerge } from "tailwind-merge"
 
 type ToastFlagProps = FlagProps & ToastOptions
 
@@ -39,7 +44,7 @@ const defaultSettings: ToastOptions = {
 export function showFlagExtended({
 	style,
 	progressStyle,
-	appearance,
+	appearance = "default",
 	invert = false,
 	...props
 }: ToastFlagProps) {
@@ -57,18 +62,20 @@ export function showFlagExtended({
 		boxShadow: "unset",
 		padding: "unset",
 		border: 0,
+		background: "unset",
 	}
 
-	const backgroundColor = invert
-		? token("elevation.surface.overlay", N0)
-		: primaryColor
+	const className = invert
+		? InteractiveInvertedStyles[appearance]
+		: InteractiveStyles[appearance]
 
-	const toastStyle: CSSProperties = {
-		backgroundColor,
-		color: textColor,
-		border: `1px solid ${secondaryColor}`,
-		...style,
+	// this is a hack, since the default UI element color have transparency, we reset it to "neutral"
+	let additionalClassName: string = ""
+	if (appearance === "default") {
+		additionalClassName =
+			"bg-surface hover:bg-surface-hovered active:bg-surface-pressed"
 	}
+	//
 
 	toast(
 		<Flag
@@ -84,19 +91,20 @@ export function showFlagExtended({
 				<CloseButton color={textColor} {...p} />
 			),
 			...props,
-			style: toastStyle,
+			style,
 			progressStyle: progressStyleUsed,
+			className: twMerge(className, "border-[1px]", additionalClassName),
 		},
 	)
 }
 
 /**
- * Simeple flag is a version of FlagExtended without forwarding all the ToastOptions
+ * Simple flag is a version of FlagExtended without forwarding all the ToastOptions
  */
 type SimpleFlagProps = {
 	title: string
 	description: string | JSX.Element
-	appearance?: Appearance
+	appearance?: InteractiveAppearance
 	autoClose?: false | number
 	position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
 	actions?: FlagActionType[]
@@ -130,7 +138,3 @@ export function showInformationFlag(
 export function showWarningFlag(props: Omit<SimpleFlagProps, "appearance">) {
 	showFlag({ ...props, appearance: "warning" })
 }
-
-export function showDiscoveryFlag(props: Omit<SimpleFlagProps, "appearance">) {
-	showFlag({ ...props, appearance: "discovery" })
-}

library/src/components/ToastFlag.tsx

@@ -7,3 +7,4 @@ export * from "./Collapsible"
 export * from "./BookCard"
 export * from "./ToastFlag"
 export * from "./Flag"
+export * from "./Button"