added disabled styles, isDisabled prop for buttons, removed not neede…

…d libs, tailwind classname orderings
linked-planet · Oct 5, 2023 · 0fe796b · 0fe796b
1 parent 8b051ce
commit 0fe796b
Show file tree

Hide file tree

Showing 10 changed files with 275 additions and 200 deletions.
diff --git a/library/src/components/BookCard.tsx b/library/src/components/BookCard.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import type { CSSProperties } from "react"
 
 import { token } from "@atlaskit/tokens"
+
 import { css } from "@emotion/css"
 
 import { Collapsible } from "./Collapsible"
@@ -33,7 +34,7 @@ const CardBase = ({
 		}}
 	>
 		<div
-			className="border-b border-x rounded-b"
+			className="rounded-b border-x border-b"
 			style={{
 				backgroundColor: bodyBackgroundColor,
 				borderColor: borderColor,
@@ -55,19 +56,13 @@ const CardHeaderMeta = ({ children }: { children: React.ReactNode }) => (
 )
 
 const CardHeaderTitle = ({ children }: { children: React.ReactNode }) => (
-	<h3
-		className="no-wrap text-ellipsis overflow-hidden"
-		style={{ color: headerTitleColor }}
-	>
+	<h3 className="truncate" style={{ color: headerTitleColor }}>
 		{children}
 	</h3>
 )
 
 const CardHeaderSubtitle = ({ children }: { children: React.ReactNode }) => (
-	<h6
-		className="no-wrap mt-1 text-ellipsis overflow-hidden"
-		style={{ color: headerSubtitleTextColor }}
-	>
+	<h6 className="mt-1 truncate" style={{ color: headerSubtitleTextColor }}>
 		{children}
 	</h6>
 )
@@ -77,7 +72,7 @@ const CardHeaderActions = ({ children }: { children: React.ReactNode }) => (
 )
 
 const CardHeaderActionsInfo = ({ children }: { children: React.ReactNode }) => (
-	<div className="mr-2 text-sm items-center">{children}</div>
+	<div className="mr-2 items-center text-sm">{children}</div>
 )
 
 const cardBodyEntryBaseStyle = css`
@@ -99,7 +94,7 @@ const CardGridBody = ({ children }: { children: React.ReactNode }) => (
 
 const CardRowBody = ({ children }: { children: React.ReactNode }) => (
 	<div
-		className={`grid overflow-x-auto overflow-y-hidden border-collapse grid-flow-col ${cardBodyEntryBaseStyle} ${css`
+		className={`grid border-collapse grid-flow-col overflow-x-auto overflow-y-hidden ${cardBodyEntryBaseStyle} ${css`
 			grid-auto-columns: minmax(150px, 1fr);
 		`}`}
 	>
@@ -109,7 +104,7 @@ const CardRowBody = ({ children }: { children: React.ReactNode }) => (
 
 const CardColumnBody = ({ children }: { children: React.ReactNode }) => (
 	<div
-		className={`grid overflow-auto border-collapse grid-flow-row ${cardBodyEntryBaseStyle} ${css`
+		className={`grid border-collapse grid-flow-row overflow-auto ${cardBodyEntryBaseStyle} ${css`
 			grid-auto-rows: minmax(150px, 1fr);
 		`}`}
 	>
@@ -200,7 +195,7 @@ export function BookCard({
 				</CardHeader>
 			}
 		>
-			<div className="-mb-[1px] -mx-[1px]">
+			<div className="-mx-[1px] -mb-[1px]">
 				<div style={bodyStyle}>{body}</div>
 			</div>
 		</CardBase>

diff --git a/library/src/components/Button.tsx b/library/src/components/Button.tsx
@@ -1,16 +1,23 @@
 import React, { CSSProperties } from "react"
 import { twMerge } from "tailwind-merge"
-import { InteractiveAppearance, InteractiveStyles } from "../utils/colors"
-import Spinner from '@atlaskit/spinner'
-
+import {
+	InteractiveAppearance,
+	InteractiveDisabledStyles,
+	InteractiveStyles,
+} from "../utils/colors"
+import Spinner from "@atlaskit/spinner"
 
 export type ButtonProps = {
 	appearance?: InteractiveAppearance
 	label?: string
 	title?: string
 	iconBefore?: React.ReactNode
 	iconAfter?: React.ReactNode
+	isDisabled?: boolean
 	onClick: () => void
+	onDoubleClick?: () => void
+	onMouseDown?: () => void
+	onMouseUp?: () => void
 	children?: React.ReactNode
 	style?: CSSProperties
 	className?: string
@@ -22,18 +29,31 @@ export const Button = ({
 	appearance = "default",
 	iconBefore,
 	iconAfter,
+	isDisabled = false,
 	style,
 	onClick,
+	onDoubleClick,
+	onMouseDown,
+	onMouseUp,
 	children,
 	className,
 }: ButtonProps) => {
 	return (
-		<button 
+		<button
 			title={title}
 			aria-label={label}
 			onClick={onClick}
+			onDoubleClick={onDoubleClick}
+			onMouseDown={onMouseDown}
+			onMouseUp={onMouseUp}
 			style={style}
-			className={twMerge(InteractiveStyles[appearance], "px-3 py-1 rounded flex justify-center items-center relative gap-1", className)}
+			className={twMerge(
+				InteractiveStyles[appearance],
+				"relative flex items-center justify-center gap-1 rounded px-3 py-1",
+				InteractiveDisabledStyles,
+				className,
+			)}
+			disabled={isDisabled}
 		>
 			{iconBefore}
 			{children}
@@ -42,34 +62,25 @@ export const Button = ({
 	)
 }
 
-
 export const LoadingButton = ({
 	isLoading = false,
 	children,
 	...props
 }: ButtonProps & { isLoading: boolean }) => {
 	return (
-		<Button 
-			{...props}
-		>
+		<Button {...props}>
 			<div className={isLoading ? "opacity-0" : undefined}>
 				{children}
 			</div>
-			{ isLoading && 
-				<div
-					className="absolute inset-0 flex items-center justify-center"
-				>
+			{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>
-	)
+	return <div className="inline-flex gap-1">{children}</div>
 }
diff --git a/library/src/layouting/PageLayout.tsx b/library/src/layouting/PageLayout.tsx
@@ -7,14 +7,14 @@ const borderColor = token("color.border", "#091e4224")
 const menuColor = token("color.background.neutral.subtle", "#f7f8f9")
 
 const Page = ({ children }: { children: React.ReactNode }) => (
-	<div className="flex flex-col w-full h-full min-h-0 overflow-hidden">
+	<div className="flex h-full min-h-0 w-full flex-col overflow-hidden">
 		{children}
 	</div>
 )
 
 const PageHeader = ({ children }: { children: React.ReactNode }) => (
 	<div
-		className="flex flex-col w-full pt-5 pl-5 pr-3 border-b"
+		className="flex w-full flex-col border-b pl-5 pr-3 pt-5"
 		style={{
 			borderColor,
 			backgroundColor: menuColor,
@@ -29,24 +29,24 @@ const PageHeaderTitle = ({ children }: { children: React.ReactNode }) => (
 )
 
 const PageHeaderSubTitle = ({ children }: { children: React.ReactNode }) => (
-	<div className="mt-3 mb-3" style={{ color: subtitleColor }}>
+	<div className="mb-3 mt-3" style={{ color: subtitleColor }}>
 		{children}
 	</div>
 )
 
 const PageHeaderLine = ({ children }: { children: React.ReactNode }) => (
-	<div className="flex w-full gap-1 mb-2 items-center">{children}</div>
+	<div className="mb-2 flex w-full items-center gap-1">{children}</div>
 )
 
 const PageBody = ({ children }: { children: React.ReactNode }) => (
-	<div className="flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden">
+	<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
 		{children}
 	</div>
 )
 
 const PageBodyHeader = ({ children }: { children: React.ReactNode }) => (
 	<div
-		className="pt-3 pb-2 pl-4 pr-3 z-0"
+		className="z-0 pb-2 pl-4 pr-3 pt-3"
 		style={{
 			boxShadow: `0 4px 4px ${token("color.border", "#091e4224")}`,
 			backgroundColor: menuColor,
@@ -58,7 +58,7 @@ const PageBodyHeader = ({ children }: { children: React.ReactNode }) => (
 
 const PageBodyContent = ({ children }: { children: React.ReactNode }) => (
 	<div
-		className="flex-1 min-h-0 overflow-y-auto pl-5 pb-5 pr-3 pt-3"
+		className="min-h-0 flex-1 overflow-y-auto pb-5 pl-5 pr-3 pt-3"
 		style={{
 			backgroundColor: pageContentBackgroundColor,
 		}}
@@ -69,7 +69,7 @@ const PageBodyContent = ({ children }: { children: React.ReactNode }) => (
 
 const PageBodyFooter = ({ children }: { children: React.ReactNode }) => (
 	<div
-		className="flex justify-center pt-1 border-t"
+		className="flex justify-center border-t pt-1"
 		style={{
 			borderColor,
 			boxShadow: `0 -4px 4px ${token("color.border", "#091e4224")}`,

diff --git a/library/src/utils/colors.ts b/library/src/utils/colors.ts
@@ -40,7 +40,7 @@ export const InteractiveStyles = {
 		"bg-brand-bold hover:bg-brand-bold-hovered active:bg-brand-bold-pressed text-text-inverse",
 	default:
 		"bg-neutral hover:bg-neutral-hovered active:bg-neutral-pressed text-text",
-	subtle: "bg-transparent hover:bg-neutral text-text",
+	subtle: "bg-neutral-subtle hover:bg-neutral-subtle-hovered active:bg-neutral-subtle-pressed text-text",
 	link: "bg-transparent text-link hover:underline",
 	warning:
 		"bg-warning-bold hover:bg-warning-bold-hovered active:bg-warning-bold-pressed text-text-inverse",
@@ -51,6 +51,9 @@ export const InteractiveStyles = {
 		"bg-information-bold hover:bg-information-bold-hovered active:bg-information-bold-pressed text-text-inverse",
 } as const
 
+export const InteractiveDisabledStyles =
+	"disabled:bg-disabled disabled:text-disabled-text disabled:cursor-not-allowed" as const
+
 export const InteractiveInvertedStyles = {
 	primary:
 		"bg-neutral hover:bg-neutral-hovered active:bg-neutral-pressed border-brand-bold text-text",