Skip to content

Commit 0fe796b

Browse files
marcus-wishesmarcus-wishes
committed
added disabled styles, isDisabled prop for buttons, removed not needed libs, tailwind classname orderings
1 parent 8b051ce commit 0fe796b

File tree

10 files changed

+275
-200
lines changed

10 files changed

+275
-200
lines changed

‎library/src/components/BookCard.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react"
22
import type { CSSProperties } from "react"
33

44
import { token } from "@atlaskit/tokens"
5+
56
import { css } from "@emotion/css"
67

78
import { Collapsible } from "./Collapsible"
@@ -33,7 +34,7 @@ const CardBase = ({
3334
}}
3435
>
3536
<div
36-
className="border-b border-x rounded-b"
37+
className="rounded-b border-x border-b"
3738
style={{
3839
backgroundColor: bodyBackgroundColor,
3940
borderColor: borderColor,
@@ -55,19 +56,13 @@ const CardHeaderMeta = ({ children }: { children: React.ReactNode }) => (
5556
)
5657

5758
const CardHeaderTitle = ({ children }: { children: React.ReactNode }) => (
58-
<h3
59-
className="no-wrap text-ellipsis overflow-hidden"
60-
style={{ color: headerTitleColor }}
61-
>
59+
<h3 className="truncate" style={{ color: headerTitleColor }}>
6260
{children}
6361
</h3>
6462
)
6563

6664
const CardHeaderSubtitle = ({ children }: { children: React.ReactNode }) => (
67-
<h6
68-
className="no-wrap mt-1 text-ellipsis overflow-hidden"
69-
style={{ color: headerSubtitleTextColor }}
70-
>
65+
<h6 className="mt-1 truncate" style={{ color: headerSubtitleTextColor }}>
7166
{children}
7267
</h6>
7368
)
@@ -77,7 +72,7 @@ const CardHeaderActions = ({ children }: { children: React.ReactNode }) => (
7772
)
7873

7974
const CardHeaderActionsInfo = ({ children }: { children: React.ReactNode }) => (
80-
<div className="mr-2 text-sm items-center">{children}</div>
75+
<div className="mr-2 items-center text-sm">{children}</div>
8176
)
8277

8378
const cardBodyEntryBaseStyle = css`
@@ -99,7 +94,7 @@ const CardGridBody = ({ children }: { children: React.ReactNode }) => (
9994

10095
const CardRowBody = ({ children }: { children: React.ReactNode }) => (
10196
<div
102-
className={`grid overflow-x-auto overflow-y-hidden border-collapse grid-flow-col ${cardBodyEntryBaseStyle} ${css`
97+
className={`grid border-collapse grid-flow-col overflow-x-auto overflow-y-hidden ${cardBodyEntryBaseStyle} ${css`
10398
grid-auto-columns: minmax(150px, 1fr);
10499
`}`}
105100
>
@@ -109,7 +104,7 @@ const CardRowBody = ({ children }: { children: React.ReactNode }) => (
109104

110105
const CardColumnBody = ({ children }: { children: React.ReactNode }) => (
111106
<div
112-
className={`grid overflow-auto border-collapse grid-flow-row ${cardBodyEntryBaseStyle} ${css`
107+
className={`grid border-collapse grid-flow-row overflow-auto ${cardBodyEntryBaseStyle} ${css`
113108
grid-auto-rows: minmax(150px, 1fr);
114109
`}`}
115110
>
@@ -200,7 +195,7 @@ export function BookCard({
200195
</CardHeader>
201196
}
202197
>
203-
<div className="-mb-[1px] -mx-[1px]">
198+
<div className="-mx-[1px] -mb-[1px]">
204199
<div style={bodyStyle}>{body}</div>
205200
</div>
206201
</CardBase>

‎library/src/components/Button.tsx‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
import React, { CSSProperties } from "react"
22
import { twMerge } from "tailwind-merge"
3-
import { InteractiveAppearance, InteractiveStyles } from "../utils/colors"
4-
import Spinner from '@atlaskit/spinner'
5-
3+
import {
4+
InteractiveAppearance,
5+
InteractiveDisabledStyles,
6+
InteractiveStyles,
7+
} from "../utils/colors"
8+
import Spinner from "@atlaskit/spinner"
69

710
export type ButtonProps = {
811
appearance?: InteractiveAppearance
912
label?: string
1013
title?: string
1114
iconBefore?: React.ReactNode
1215
iconAfter?: React.ReactNode
16+
isDisabled?: boolean
1317
onClick: () => void
18+
onDoubleClick?: () => void
19+
onMouseDown?: () => void
20+
onMouseUp?: () => void
1421
children?: React.ReactNode
1522
style?: CSSProperties
1623
className?: string
@@ -22,18 +29,31 @@ export const Button = ({
2229
appearance = "default",
2330
iconBefore,
2431
iconAfter,
32+
isDisabled = false,
2533
style,
2634
onClick,
35+
onDoubleClick,
36+
onMouseDown,
37+
onMouseUp,
2738
children,
2839
className,
2940
}: ButtonProps) => {
3041
return (
31-
<button
42+
<button
3243
title={title}
3344
aria-label={label}
3445
onClick={onClick}
46+
onDoubleClick={onDoubleClick}
47+
onMouseDown={onMouseDown}
48+
onMouseUp={onMouseUp}
3549
style={style}
36-
className={twMerge(InteractiveStyles[appearance], "px-3 py-1 rounded flex justify-center items-center relative gap-1", className)}
50+
className={twMerge(
51+
InteractiveStyles[appearance],
52+
"relative flex items-center justify-center gap-1 rounded px-3 py-1",
53+
InteractiveDisabledStyles,
54+
className,
55+
)}
56+
disabled={isDisabled}
3757
>
3858
{iconBefore}
3959
{children}
@@ -42,34 +62,25 @@ export const Button = ({
4262
)
4363
}
4464

45-
4665
export const LoadingButton = ({
4766
isLoading = false,
4867
children,
4968
...props
5069
}: ButtonProps & { isLoading: boolean }) => {
5170
return (
52-
<Button
53-
{...props}
54-
>
71+
<Button {...props}>
5572
<div className={isLoading ? "opacity-0" : undefined}>
5673
{children}
5774
</div>
58-
{ isLoading &&
59-
<div
60-
className="absolute inset-0 flex items-center justify-center"
61-
>
75+
{isLoading && (
76+
<div className="absolute inset-0 flex items-center justify-center">
6277
<Spinner />
6378
</div>
64-
}
79+
)}
6580
</Button>
6681
)
6782
}
6883

6984
export const ButtonGroup = ({ children }: { children: React.ReactNode }) => {
70-
return (
71-
<div className="inline-flex gap-1">
72-
{children}
73-
</div>
74-
)
85+
return <div className="inline-flex gap-1">{children}</div>
7586
}

‎library/src/layouting/PageLayout.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ const borderColor = token("color.border", "#091e4224")
77
const menuColor = token("color.background.neutral.subtle", "#f7f8f9")
88

99
const Page = ({ children }: { children: React.ReactNode }) => (
10-
<div className="flex flex-col w-full h-full min-h-0 overflow-hidden">
10+
<div className="flex h-full min-h-0 w-full flex-col overflow-hidden">
1111
{children}
1212
</div>
1313
)
1414

1515
const PageHeader = ({ children }: { children: React.ReactNode }) => (
1616
<div
17-
className="flex flex-col w-full pt-5 pl-5 pr-3 border-b"
17+
className="flex w-full flex-col border-b pl-5 pr-3 pt-5"
1818
style={{
1919
borderColor,
2020
backgroundColor: menuColor,
@@ -29,24 +29,24 @@ const PageHeaderTitle = ({ children }: { children: React.ReactNode }) => (
2929
)
3030

3131
const PageHeaderSubTitle = ({ children }: { children: React.ReactNode }) => (
32-
<div className="mt-3 mb-3" style={{ color: subtitleColor }}>
32+
<div className="mb-3 mt-3" style={{ color: subtitleColor }}>
3333
{children}
3434
</div>
3535
)
3636

3737
const PageHeaderLine = ({ children }: { children: React.ReactNode }) => (
38-
<div className="flex w-full gap-1 mb-2 items-center">{children}</div>
38+
<div className="mb-2 flex w-full items-center gap-1">{children}</div>
3939
)
4040

4141
const PageBody = ({ children }: { children: React.ReactNode }) => (
42-
<div className="flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden">
42+
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
4343
{children}
4444
</div>
4545
)
4646

4747
const PageBodyHeader = ({ children }: { children: React.ReactNode }) => (
4848
<div
49-
className="pt-3 pb-2 pl-4 pr-3 z-0"
49+
className="z-0 pb-2 pl-4 pr-3 pt-3"
5050
style={{
5151
boxShadow: `0 4px 4px ${token("color.border", "#091e4224")}`,
5252
backgroundColor: menuColor,
@@ -58,7 +58,7 @@ const PageBodyHeader = ({ children }: { children: React.ReactNode }) => (
5858

5959
const PageBodyContent = ({ children }: { children: React.ReactNode }) => (
6060
<div
61-
className="flex-1 min-h-0 overflow-y-auto pl-5 pb-5 pr-3 pt-3"
61+
className="min-h-0 flex-1 overflow-y-auto pb-5 pl-5 pr-3 pt-3"
6262
style={{
6363
backgroundColor: pageContentBackgroundColor,
6464
}}
@@ -69,7 +69,7 @@ const PageBodyContent = ({ children }: { children: React.ReactNode }) => (
6969

7070
const PageBodyFooter = ({ children }: { children: React.ReactNode }) => (
7171
<div
72-
className="flex justify-center pt-1 border-t"
72+
className="flex justify-center border-t pt-1"
7373
style={{
7474
borderColor,
7575
boxShadow: `0 -4px 4px ${token("color.border", "#091e4224")}`,

‎library/src/utils/colors.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const InteractiveStyles = {
4040
"bg-brand-bold hover:bg-brand-bold-hovered active:bg-brand-bold-pressed text-text-inverse",
4141
default:
4242
"bg-neutral hover:bg-neutral-hovered active:bg-neutral-pressed text-text",
43-
subtle: "bg-transparent hover:bg-neutral text-text",
43+
subtle: "bg-neutral-subtle hover:bg-neutral-subtle-hovered active:bg-neutral-subtle-pressed text-text",
4444
link: "bg-transparent text-link hover:underline",
4545
warning:
4646
"bg-warning-bold hover:bg-warning-bold-hovered active:bg-warning-bold-pressed text-text-inverse",
@@ -51,6 +51,9 @@ export const InteractiveStyles = {
5151
"bg-information-bold hover:bg-information-bold-hovered active:bg-information-bold-pressed text-text-inverse",
5252
} as const
5353

54+
export const InteractiveDisabledStyles =
55+
"disabled:bg-disabled disabled:text-disabled-text disabled:cursor-not-allowed" as const
56+
5457
export const InteractiveInvertedStyles = {
5558
primary:
5659
"bg-neutral hover:bg-neutral-hovered active:bg-neutral-pressed border-brand-bold text-text",

0 commit comments

Comments
 (0)