Skip to content

Commit 0dd9271

Browse files
transitive-bullshittransitive-bullshit
authored
Merge pull request NotionX#471 from junogueira/fix/add-status-icon
2 parents 3bf600d + 58dad3d commit 0dd9271

File tree

7 files changed

+157
-13
lines changed

7 files changed

+157
-13
lines changed

‎packages/notion-types/src/core.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export type PropertyType =
4343
| 'text'
4444
| 'number'
4545
| 'select'
46+
| 'status'
4647
| 'multi_select'
4748
| 'date'
4849
| 'person'

‎packages/react-notion-x/src/icons/property-icon.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Person2Icon from './type-person-2'
1414
import PhoneNumberIcon from './type-phone-number'
1515
import RelationIcon from './type-relation'
1616
import SelectIcon from './type-select'
17+
import StatusIcon from './type-status'
1718
import TextIcon from './type-text'
1819
import TimestampIcon from './type-timestamp'
1920
import TitleIcon from './type-title'
@@ -29,6 +30,7 @@ const iconMap = {
2930
text: TextIcon,
3031
number: NumberIcon,
3132
select: SelectIcon,
33+
status: StatusIcon,
3234
multi_select: MultiSelectIcon,
3335
date: DateIcon,
3436
person: PersonIcon,

‎packages/react-notion-x/src/icons/type-status.svg

Lines changed: 11 additions & 0 deletions
Loading

‎packages/react-notion-x/src/icons/type-status.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react'
2+
3+
function SvgTypeStatus(props: React.SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg viewBox='0 0 16 16' {...props}>
6+
<path d='M8.75488 1.02344C8.75488 0.613281 8.41309 0.264648 8.00293 0.264648C7.59277 0.264648 7.25098 0.613281 7.25098 1.02344V3.11523C7.25098 3.51855 7.59277 3.86719 8.00293 3.86719C8.41309 3.86719 8.75488 3.51855 8.75488 3.11523V1.02344ZM3.91504 5.0293C4.20215 5.31641 4.69434 5.32324 4.97461 5.03613C5.26855 4.74902 5.26855 4.25684 4.98145 3.96973L3.53906 2.52051C3.25195 2.2334 2.7666 2.21973 2.47949 2.50684C2.19238 2.79395 2.18555 3.28613 2.47266 3.57324L3.91504 5.0293ZM10.9629 4.01758C10.6826 4.30469 10.6826 4.79688 10.9697 5.08398C11.2568 5.37109 11.749 5.36426 12.0361 5.07715L13.4854 3.62793C13.7725 3.34082 13.7725 2.84863 13.4785 2.55469C13.1982 2.27441 12.7061 2.27441 12.4189 2.56152L10.9629 4.01758ZM15.0234 8.78906C15.4336 8.78906 15.7822 8.44727 15.7822 8.03711C15.7822 7.62695 15.4336 7.28516 15.0234 7.28516H12.9385C12.5283 7.28516 12.1797 7.62695 12.1797 8.03711C12.1797 8.44727 12.5283 8.78906 12.9385 8.78906H15.0234ZM0.975586 7.28516C0.56543 7.28516 0.223633 7.62695 0.223633 8.03711C0.223633 8.44727 0.56543 8.78906 0.975586 8.78906H3.07422C3.48438 8.78906 3.83301 8.44727 3.83301 8.03711C3.83301 7.62695 3.48438 7.28516 3.07422 7.28516H0.975586ZM12.0361 10.9902C11.749 10.71 11.2568 10.71 10.9629 10.9971C10.6826 11.2842 10.6826 11.7764 10.9697 12.0635L12.4258 13.5127C12.7129 13.7998 13.2051 13.793 13.4922 13.5059C13.7793 13.2256 13.7725 12.7266 13.4854 12.4395L12.0361 10.9902ZM2.52051 12.4395C2.22656 12.7266 2.22656 13.2188 2.50684 13.5059C2.79395 13.793 3.28613 13.7998 3.57324 13.5127L5.02246 12.0703C5.31641 11.7832 5.31641 11.291 5.03613 11.0039C4.74902 10.7168 4.25684 10.71 3.96973 10.9971L2.52051 12.4395ZM8.75488 12.9658C8.75488 12.5557 8.41309 12.207 8.00293 12.207C7.59277 12.207 7.25098 12.5557 7.25098 12.9658V15.0576C7.25098 15.4609 7.59277 15.8096 8.00293 15.8096C8.41309 15.8096 8.75488 15.4609 8.75488 15.0576V12.9658Z' />
7+
</svg>
8+
)
9+
}
10+
11+
export default SvgTypeStatus

‎packages/react-notion-x/src/styles.css

Lines changed: 85 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,38 @@
5151
--notion-brown_background_co: rgba(233, 229, 227, 0.3);
5252
--notion-gray_background_co: rgba(235, 236, 237, 0.3);
5353

54-
--notion-item-blue: rgba(0, 120, 223, 0.2);
55-
--notion-item-orange: rgba(245, 93, 0, 0.2);
56-
--notion-item-green: rgba(0, 135, 107, 0.2);
57-
--notion-item-pink: rgba(221, 0, 129, 0.2);
58-
--notion-item-brown: rgba(140, 46, 0, 0.2);
59-
--notion-item-red: rgba(255, 0, 26, 0.2);
60-
--notion-item-yellow: rgba(233, 168, 0, 0.2);
61-
--notion-item-default: rgba(206, 205, 202, 0.5);
62-
--notion-item-purple: rgba(103, 36, 222, 0.2);
63-
--notion-item-gray: rgba(155, 154, 151, 0.4);
54+
--notion-item-blue: rgb(211, 229, 239);
55+
--notion-item-orange: rgb(250, 222, 201);
56+
--notion-item-green: rgb(219, 237, 219);
57+
--notion-item-pink: rgb(245, 224, 233);
58+
--notion-item-brown: rgb(238, 224, 218);
59+
--notion-item-red: rgb(255, 226, 221);
60+
--notion-item-yellow: rgb(253, 236, 200);
61+
--notion-item-default: rgba(227, 226, 224, 0.5);
62+
--notion-item-purple: rgb(232, 222, 238);
63+
--notion-item-gray: rgb(227, 226, 224);
64+
65+
--notion-item-text-blue: rgb(24, 51, 71);
66+
--notion-item-text-orange: rgb(73, 41, 14);
67+
--notion-item-text-green: rgb(28, 56, 41);
68+
--notion-item-text-pink: rgb(76, 35, 55);
69+
--notion-item-text-brown: rgb(68, 42, 30);
70+
--notion-item-text-red: rgb(93, 23, 21);
71+
--notion-item-text-yellow: rgb(64, 44, 27);
72+
--notion-item-text-default: rgb(50, 48, 44);
73+
--notion-item-text-purple: rgb(65, 36, 84);
74+
--notion-item-text-gray: rgb(50, 48, 44);
75+
76+
--notion-item-bullet-blue: rgb(91, 151, 189);
77+
--notion-item-bullet-orange: rgb(215, 129, 58);
78+
--notion-item-bullet-green: rgb(108, 155, 125);
79+
--notion-item-bullet-pink: rgb(205, 116, 159);
80+
--notion-item-bullet-brown: rgb(187, 132, 108);
81+
--notion-item-bullet-red: rgb(225, 111, 100);
82+
--notion-item-bullet-yellow: rgb(203, 148, 51);
83+
--notion-item-bullet-default: rgb(91, 151, 189);
84+
--notion-item-bullet-purple: rgb(167, 130, 195);
85+
--notion-item-bullet-gray: rgb(145, 145, 142);
6486

6587
--notion-max-width: 720px;
6688
--notion-header-height: 45px;
@@ -371,33 +393,78 @@
371393

372394
.notion-item-blue {
373395
background-color: var(--notion-item-blue);
396+
color: var(--notion-item-text-blue);
374397
}
375398
.notion-item-orange {
376399
background-color: var(--notion-item-orange);
400+
color: var(--notion-item-text-orange);
377401
}
378402
.notion-item-green {
379403
background-color: var(--notion-item-green);
404+
color: var(--notion-item-text-green);
380405
}
381406
.notion-item-pink {
382407
background-color: var(--notion-item-pink);
408+
color: var(--notion-item-text-pink);
383409
}
384410
.notion-item-brown {
385411
background-color: var(--notion-item-brown);
412+
color: var(--notion-item-text-brown);
386413
}
387414
.notion-item-red {
388415
background-color: var(--notion-item-red);
416+
color: var(--notion-item-text-red);
389417
}
390418
.notion-item-yellow {
391419
background-color: var(--notion-item-yellow);
420+
color: var(--notion-item-text-yellow);
392421
}
393-
.notion-item-default {
422+
.notion-item-default,
423+
.notion-item-default-inferred {
394424
background-color: var(--notion-item-default);
425+
color: var(--notion-item-text-default);
395426
}
396427
.notion-item-purple {
397428
background-color: var(--notion-item-purple);
429+
color: var(--notion-item-text-purple);
398430
}
399431
.notion-item-gray {
400432
background-color: var(--notion-item-gray);
433+
color: var(--notion-item-text-gray);
434+
}
435+
436+
.notion-item-bullet-blue {
437+
background-color: var(--notion-item-bullet-blue);
438+
}
439+
.notion-item-bullet-orange {
440+
background-color: var(--notion-item-bullet-orange);
441+
}
442+
.notion-item-bullet-green {
443+
background-color: var(--notion-item-bullet-green);
444+
}
445+
.notion-item-bullet-pink {
446+
background-color: var(--notion-item-bullet-pink);
447+
}
448+
.notion-item-bullet-brown {
449+
background-color: var(--notion-item-bullet-brown);
450+
}
451+
.notion-item-bullet-red {
452+
background-color: var(--notion-item-bullet-red);
453+
}
454+
.notion-item-bullet-yellow {
455+
background-color: var(--notion-item-bullet-yellow);
456+
}
457+
.notion-item-bullet-default {
458+
background-color: var(--notion-item-bullet-default);
459+
}
460+
.notion-item-bullet-default-inferred {
461+
background-color: var(--notion-item-bullet-gray);
462+
}
463+
.notion-item-bullet-purple {
464+
background-color: var(--notion-item-bullet-purple);
465+
}
466+
.notion-item-bullet-gray {
467+
background-color: var(--notion-item-bullet-gray);
401468
}
402469

403470
.notion b {
@@ -1343,25 +1410,31 @@ svg.notion-page-icon {
13431410
}
13441411

13451412
.notion-property-select,
1413+
.notion-property-status,
13461414
.notion-property-multi_select {
13471415
display: flex;
13481416
flex-wrap: wrap;
13491417
gap: 6px;
13501418
}
13511419

13521420
.notion-property-select-item,
1421+
.notion-property-status-item,
13531422
.notion-property-multi_select-item {
13541423
display: flex;
13551424
align-items: center;
13561425
padding: 0 6px;
13571426
border-radius: 3px;
1358-
height: 18px;
1427+
height: 20px;
13591428
white-space: nowrap;
13601429
overflow: hidden;
13611430
text-overflow: ellipsis;
13621431
line-height: 120%;
13631432
}
13641433

1434+
.notion-property-status-item {
1435+
border-radius: 20px;
1436+
}
1437+
13651438
.notion-property-file {
13661439
display: flex;
13671440
flex-wrap: wrap;

‎packages/react-notion-x/src/third-party/collection-view-board.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ function Board({ collectionView, collectionData, collection, padding }) {
6666
collectionView?.format?.board_groups2 ||
6767
[]
6868

69+
const boardGroupBy = collectionView?.format?.board_columns_by?.groupBy
70+
6971
const boardStyle = React.useMemo(
7072
() => ({
7173
paddingLeft: padding
@@ -104,7 +106,12 @@ function Board({ collectionView, collectionData, collection, padding }) {
104106
{group.value?.value ? (
105107
<Property
106108
schema={schema}
107-
data={[[group.value?.value]]}
109+
data={[
110+
[
111+
group.value?.value[boardGroupBy] ||
112+
group.value?.value
113+
]
114+
]}
108115
collection={collection}
109116
/>
110117
) : (

‎packages/react-notion-x/src/third-party/property.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,45 @@ export const PropertyImpl: React.FC<IPropertyProps> = (props) => {
327327
content = components.propertyTitleValue(props, renderTitleValue)
328328
break
329329

330+
case 'status': {
331+
const value = data[0][0] || ''
332+
333+
const option = schema.options?.find((option) => value === option.value)
334+
335+
const color = option?.color || 'default-inferred'
336+
337+
content = components.propertySelectValue(
338+
{
339+
...props,
340+
value,
341+
option,
342+
color
343+
},
344+
() => (
345+
<div
346+
className={cs(
347+
`notion-property-${schema.type}-item`,
348+
color && `notion-item-${color}`
349+
)}
350+
>
351+
<span
352+
className={cs(`notion-item-bullet-${color}`)}
353+
style={{
354+
marginRight: '5px',
355+
borderRadius: '100%',
356+
height: '8px',
357+
width: '8px',
358+
display: 'inline-flex',
359+
flexShrink: 0
360+
}}
361+
/>
362+
{value}
363+
</div>
364+
)
365+
)
366+
break
367+
}
368+
330369
case 'select':
331370
// intentional fallthrough
332371
case 'multi_select': {

0 commit comments

Comments
 (0)