Skip to content

Commit c222d12

Browse files
marcus-wishesmarcus-wishes
committed
time table - set fallback colors to work without theme, fixed that slots can be selected by dragging mouse within items
1 parent c76d700 commit c222d12

File tree

10 files changed

+109
-74
lines changed

10 files changed

+109
-74
lines changed

‎.eslintrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"react-hooks/rules-of-hooks": "error",
3333
"react-hooks/exhaustive-deps": "warn",
3434
"react-refresh/only-export-components": "warn",
35-
"@atlaskit/design-system/ensure-design-token-usage": "off"
35+
"@atlaskit/design-system/ensure-design-token-usage": "off",
36+
"@atlaskit/design-system/no-unsafe-design-token-usage": "warn"
3637
}
3738
}

‎library/src/components/inlinemessage/InlineMessage.tsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export type MessageUrgency =
88
| "warning"
99
| "information"
1010
| "danger"
11+
| "discovery"
1112
| undefined
1213

1314
export type Message = {
@@ -48,36 +49,42 @@ export default function InlineMessage({
4849
let closeBtnAppearance: Appearance = "default"
4950
switch (message.urgency) {
5051
case "success":
51-
bgColor = token("color.background.success")
52-
textColor = token("color.text.success")
53-
borderColor = token("color.border.success")
52+
bgColor = token("color.background.success", "#DFFCF0")
53+
textColor = token("color.text.success", "#216E4E")
54+
borderColor = token("color.border.success", "#22A06B")
5455
break
5556
case "error":
56-
bgColor = token("color.background.danger")
57-
textColor = token("color.text.danger")
58-
borderColor = token("color.border.danger")
57+
bgColor = token("color.background.danger", "#FFEDEB")
58+
textColor = token("color.text.danger", "#AE2A19")
59+
borderColor = token("color.border.danger", "#E34935")
5960
closeBtnAppearance = "danger"
6061
break
6162
case "warning":
62-
bgColor = token("color.background.warning")
63-
textColor = token("color.text.warning")
64-
borderColor = token("color.border.warning")
63+
bgColor = token("color.background.warning", "#FFF7D6")
64+
textColor = token("color.text.warning", "#974F0C")
65+
borderColor = token("color.border.warning", "#D97008")
6566
closeBtnAppearance = "warning"
6667
break
6768
case "information":
68-
bgColor = token("color.background.information")
69-
textColor = token("color.text.information")
70-
borderColor = token("color.border.information")
69+
bgColor = token("color.background.information", "#E9F2FF")
70+
textColor = token("color.text.information", "#0055CC")
71+
borderColor = token("color.border.information", "#1D7AFC")
7172
closeBtnAppearance = "primary"
7273
break
7374
case "danger":
74-
bgColor = token("color.background.danger")
75-
textColor = token("color.text.danger")
76-
borderColor = token("color.border.danger")
75+
bgColor = token("color.background.danger", "#FFEDEB")
76+
textColor = token("color.text.danger", "#AE2A19")
77+
borderColor = token("color.border.danger", "#E34935")
7778
closeBtnAppearance = "danger"
7879
break
80+
case "discovery":
81+
bgColor = token("color.background.discovery", "#F3F0FF")
82+
textColor = token("color.text.discovery", "#5E4DB2")
83+
borderColor = token("color.border.discovery", "#8270DB")
84+
closeBtnAppearance = "link"
85+
break
7986
default:
80-
borderColor = token("color.border")
87+
borderColor = token("color.border", "#091E4224")
8188
break
8289
}
8390

‎library/src/components/timetable/Item.module.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,35 @@
88
justify-content: center;
99
border-radius: 0.2rem;
1010
line-height: 2rem;
11-
background-color: var(--ds-background-neutral-bold);
12-
color: var(--ds-text-inverse);
11+
background-color: var(--ds-background-neutral-bold, #44546f);
12+
color: var(--ds-text-inverse, #fff);
1313
position: relative;
1414
z-index: 1;
1515
user-select: text;
1616
overflow: hidden;
1717
margin: 0;
1818
text-overflow: ellipsis;
19-
border: 1px solid var(--ds-background-neutral-bold-hovered);
19+
border: 1px solid var(--ds-background-neutral-bold-hovered, #2c3e5d);
2020
margin-top: 0.5px;
2121
margin-bottom: 0.5px;
2222
}
2323

2424
.timeSlotItem:hover {
25-
background-color: var(--ds-background-neutral-bold-hovered);
25+
background-color: var(--ds-background-neutral-bold-hovered, #2c3e5d);
2626
}
2727

2828
.timeSlotItem:active {
29-
background-color: var(--ds-background-neutral-bold-pressed);
29+
background-color: var(--ds-background-neutral-bold-pressed, #172b4d);
3030
}
3131

3232
.selected {
33-
background-color: var(--ds-background-selected-bold);
33+
background-color: var(--ds-background-selected-bold, #0c66e4);
3434
}
3535

3636
.selected:hover {
37-
background-color: var(--ds-background-selected-bold-hovered);
37+
background-color: var(--ds-background-selected-bold-hovered, #05c);
3838
}
3939

4040
.selected:active {
41-
background-color: var(--ds-background-selected-bold-pressed);
41+
background-color: var(--ds-background-selected-bold-pressed, #09326c);
4242
}

‎library/src/components/timetable/ItemWrapper.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ export default function ItemWrapper<
5353
onMouseUp: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
5454
e.stopPropagation()
5555
},
56+
onMouseMove: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
57+
e.stopPropagation()
58+
},
5659
}
5760
//#endregion
5861

‎library/src/components/timetable/LPTimeTable.module.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
position: relative;
2424
padding: 0;
2525
border-left-color: var(
26-
--ds-border-bold
26+
--ds-border-bold,
27+
#758195
2728
) !important; /* atlas-kit overrides this */
2829
}
2930

@@ -41,7 +42,7 @@
4142
.lpTimeTable .headerTimeSlot {
4243
color: var(--ds-text);
4344
font-weight: 500;
44-
background-color: var(--ds-surface);
45+
background-color: var(--ds-surface, #fff);
4546
padding-left: 7px;
4647
}
4748

@@ -51,7 +52,7 @@
5152
bottom: 1px;
5253
right: 0;
5354
height: 100%;
54-
border-left: 1px solid var(--ds-border);
55+
border-left: 1px solid var(--ds-border, #091e4224);
5556
}
5657

5758
.headerFullBorder::after {
@@ -60,11 +61,11 @@
6061
bottom: 1px;
6162
right: 0;
6263
height: 100%;
63-
border-left: 2px solid var(--ds-border);
64+
border-left: 2px solid var(--ds-border, #091e4224);
6465
}
6566

6667
.lpTimeTable .nowHeaderTimeSlot {
67-
border-bottom-color: var(--ds-chart-orange-bold);
68+
border-bottom-color: var(--ds-chart-orange-bold, #d97008);
6869
border-bottom-width: 3px;
6970
font-weight: 700;
7071
}
@@ -75,7 +76,7 @@
7576

7677
.lpTimeTable .nowBar {
7778
position: absolute;
78-
background-color: var(--ds-chart-orange-bold);
79+
background-color: var(--ds-chart-orange-bold, #d97008);
7980
opacity: 0.6;
8081
top: 0;
8182
bottom: 0;

‎library/src/components/timetable/LPTimeTableHeader.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ type Props = {
1818
showTimeSlotHeader: boolean
1919
}
2020

21-
const backgroundColor = token("elevation.surface.sunken")
22-
const headerBorder = `2px solid ${token("color.border.bold")}`
21+
const backgroundColor = token("elevation.surface.sunken", "#F7F8F9")
22+
const headerBorder = `2px solid ${token("color.border.bold", "#758195")}`
2323

2424
export const LPTimeTableHeader = forwardRef(function TimeTableHeader(
2525
{
@@ -86,7 +86,10 @@ export const LPTimeTableHeader = forwardRef(function TimeTableHeader(
8686
width: groupHeaderColumnWidth,
8787
borderRight: headerBorder,
8888
borderBottom: showTimeSlotHeader
89-
? `1px solid ${token("color.border")}`
89+
? `1px solid ${token(
90+
"color.border",
91+
"#091E4224",
92+
)}`
9093
: undefined,
9194
backgroundColor,
9295
paddingTop: "1rem",
@@ -117,7 +120,10 @@ export const LPTimeTableHeader = forwardRef(function TimeTableHeader(
117120

118121
paddingTop: "1rem",
119122
borderBottom: showTimeSlotHeader
120-
? `1px solid ${token("color.border")}`
123+
? `1px solid ${token(
124+
"color.border",
125+
"#091E4224",
126+
)}`
121127
: undefined,
122128
borderTopRightRadius:
123129
i === days.length - 1

‎library/src/components/timetable/PlaceholderItem.tsx‎

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,64 @@ import { token } from "@atlaskit/tokens"
33
import type { Dayjs } from "dayjs"
44
import { TimeTableGroup } from "./LPTimeTable"
55

6-
76
export type PlaceholderItemProps<G extends TimeTableGroup> = {
8-
group: G,
9-
start: Dayjs,
10-
end: Dayjs,
11-
height: string,
12-
clearTimeRangeSelectionCB: () => void,
7+
group: G
8+
start: Dayjs
9+
end: Dayjs
10+
height: string
11+
clearTimeRangeSelectionCB: () => void
1312
}
1413

15-
16-
17-
/**
14+
/**
1815
* Wrapper item for the placeholder item.
1916
* The length state over how many cells the selection is spanning
2017
*/
21-
export function PlaceHolderItem<G extends TimeTableGroup> ( { renderPlaceHolder, ...props }: PlaceholderItemProps<G> & { renderPlaceHolder?: ( props: PlaceholderItemProps<G> ) => JSX.Element } ): JSX.Element {
18+
export function PlaceHolderItem<G extends TimeTableGroup>({
19+
renderPlaceHolder,
20+
...props
21+
}: PlaceholderItemProps<G> & {
22+
renderPlaceHolder?: (props: PlaceholderItemProps<G>) => JSX.Element
23+
}): JSX.Element {
2224
return (
2325
<div
24-
style={ {
26+
style={{
2527
zIndex: 1,
2628
position: "absolute",
2729
width: "100%",
28-
} }
30+
}}
2931
>
30-
{ renderPlaceHolder ? renderPlaceHolder( props ) : <PlaceHolderItemPlaceHolder { ...props } /> }
32+
{renderPlaceHolder ? (
33+
renderPlaceHolder(props)
34+
) : (
35+
<PlaceHolderItemPlaceHolder {...props} />
36+
)}
3137
</div>
3238
)
3339
}
3440

35-
3641
/**
37-
* render the current placeholder item (which is a placeholder itself)
42+
* render the current placeholder item (which is a placeholder itself)
3843
*/
39-
function PlaceHolderItemPlaceHolder<G extends TimeTableGroup> ( { height, clearTimeRangeSelectionCB }: PlaceholderItemProps<G> ) {
44+
function PlaceHolderItemPlaceHolder<G extends TimeTableGroup>({
45+
height,
46+
clearTimeRangeSelectionCB,
47+
}: PlaceholderItemProps<G>) {
4048
return (
4149
<div
42-
style={ {
50+
style={{
4351
display: "flex",
4452
justifyContent: "end",
4553
width: "100%",
4654
borderRadius: "0.25rem",
4755
height,
48-
backgroundColor: token( "color.background.brand.bold" ),
49-
boxShadow: "rgba(50, 50, 93, 0.3) 0px 1px 2px 1px, rgba(0, 0, 0, 0.1) 0px 2px 2px 1px",
50-
} }
51-
onClick={ clearTimeRangeSelectionCB }
52-
>
53-
</div>
54-
56+
backgroundColor: token(
57+
"color.background.brand.bold",
58+
"#0C66E4",
59+
),
60+
boxShadow:
61+
"rgba(50, 50, 93, 0.3) 0px 1px 2px 1px, rgba(0, 0, 0, 0.1) 0px 2px 2px 1px",
62+
}}
63+
onClick={clearTimeRangeSelectionCB}
64+
></div>
5565
)
56-
}
66+
}

‎library/src/components/timetable/TimeLineTableSimplified.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@ interface TimeLineTableSimplifiedProps<
4646
onGroupClick: ((_: G) => void) | undefined
4747
}
4848

49-
const weekendColor0 = token("elevation.surface.raised.hovered")
50-
const weekendColor1 = token("elevation.surface.raised.pressed")
51-
const dayColor0 = token("elevation.surface")
52-
const dayColor1 = token("elevation.surface.hovered")
49+
const weekendColor0 = token("elevation.surface.raised.hovered", "#F1F2F4")
50+
const weekendColor1 = token("elevation.surface.raised.pressed", "#DCDFE4")
51+
const dayColor0 = token("elevation.surface", "#FFFFFF")
52+
const dayColor1 = token("elevation.surface.hovered", "#F1F2F4")
5353

5454
/**
5555
* Creates the table rows for the given entries.
@@ -128,7 +128,7 @@ function GroupHeaderTableCell<G extends TimeTableGroup>({
128128
borderRightWidth: "2px",
129129
borderBottomWidth: "1px",
130130
borderStyle: "solid",
131-
borderColor: token("color.border.bold"),
131+
borderColor: token("color.border.bold", "#758195"),
132132
}}
133133
>
134134
{renderGroup ? renderGroup({ group }) : <Group group={group} />}
@@ -170,7 +170,7 @@ function TableCell({
170170

171171
const style: CSSProperties = {
172172
borderBottom: isLastGroupRow
173-
? `1px solid ${token("color.border.bold")}`
173+
? `1px solid ${token("color.border.bold", "#758195")}`
174174
: undefined,
175175
paddingBottom: isLastGroupRow ? "10px" : undefined,
176176
backgroundColor: isWeekendDay
@@ -186,6 +186,7 @@ function TableCell({
186186
: "pointer",
187187
borderRight: `${isLastSlotOfTheDay ? "2px" : "1px"} solid ${token(
188188
"color.border",
189+
"#091E4224",
189190
)}`,
190191
maxWidth: columnWidth,
191192
}
@@ -274,6 +275,7 @@ function PlaceholderTableCell<G extends TimeTableGroup>({
274275
cursor: "pointer",
275276
borderRight: `${isLastSlotOfTheDay ? "2px" : "1px"} solid ${token(
276277
"color.border",
278+
"#091E4224",
277279
)}`,
278280
}
279281

@@ -360,7 +362,7 @@ function GroupRows<G extends TimeTableGroup, I extends TimeSlotBooking>({
360362
<tr
361363
key={-1}
362364
style={{
363-
backgroundColor: token("elevation.surface"),
365+
backgroundColor: token("elevation.surface", "#FFFFFF"),
364366
height: placeHolderHeight, // height works as min height in tables
365367
}}
366368
>
@@ -459,7 +461,7 @@ function GroupRows<G extends TimeTableGroup, I extends TimeSlotBooking>({
459461
<tr
460462
key={r}
461463
style={{
462-
backgroundColor: token("elevation.surface"),
464+
backgroundColor: token("elevation.surface", "#FFFFFF"),
463465
height: "1rem", // height works as min height in tables
464466
}}
465467
>

‎library/src/theming/Themes.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
//import { setGlobalTheme } from "@atlaskit/tokens" -> when we import this, the whole theming is exported as bundles, we do not want that.
22

3-
export const themesAvailable = ["dark", "light"] as const
3+
export const themesAvailable = ["dark", "light", "original"] as const // original is the use of fallback colors in jira, no --ds-* variables are set
44

55
export type Theme = (typeof themesAvailable)[number]
66

@@ -27,9 +27,10 @@ export function switchTheme() {
2727
const currentTheme = html.getAttribute("data-color-mode")
2828
let currentThemeIdx = themesAvailable.indexOf(currentTheme as Theme)
2929
if (currentThemeIdx > -1) {
30-
applyTheme(
31-
themesAvailable[++currentThemeIdx % themesAvailable.length],
32-
)
30+
const next =
31+
themesAvailable[++currentThemeIdx % themesAvailable.length]
32+
console.log("apply theme", next)
33+
applyTheme(next)
3334
return
3435
}
3536
}

0 commit comments

Comments
 (0)