Skip to content

Commit

Permalink
work
Browse files Browse the repository at this point in the history
  • Loading branch information
@vassbence
vassbence committed Sep 28, 2024
1 parent b09d73f commit 1c092a0
Show file tree
Hide file tree
Showing 12 changed files with 213 additions and 187 deletions.
2 changes: 1 addition & 1 deletion src/components/Badge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
>
{leadIcon && <Icon size="small" variant={leadIcon} />}
{trailIcon && !leadIcon && <div style={{ width: 1, height: '100%' }} />}
<Text color="inherit" variant="subtext-medium">
<Text singleLine color="inherit" variant="subtext-medium">
{children}
</Text>
{trailIcon && <Icon size="small" variant={trailIcon} />}
Expand Down
1 change: 1 addition & 0 deletions src/components/Button/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
)}
<Text
color="inherit"
singleLine
variant={size === 'small' ? 'subtext-medium' : 'display-medium'}
>
{children}
Expand Down
222 changes: 108 additions & 114 deletions src/components/Calendar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ import { Button } from '../Button/index.js'
import { IconButton } from '../IconButton/index.js'
import { Icon } from '../Icon/index.js'
import { styled } from 'inlines'
import { ScrollArea } from '../ScrollArea/index.js'

type CalendarProps = {
children: ReactElement | (({ open }: { open: boolean }) => ReactElement)
Expand Down Expand Up @@ -247,43 +248,40 @@ function DatePicker({
gap: 2,
height: 184,
overflowY: 'auto',
scrollbarWidth: 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
}}
ref={monthContainerRef}
>
{[...Array(12).keys()].map((e, i) => (
<styled.div
key={i}
style={{
height: 32,
flexShrink: 0,
display: 'flex',
padding: '0 8px',
alignItems: 'center',
gap: 8,
cursor: 'pointer',
borderRadius: radius[8],
'&:hover': {
background: colors.neutral10Adjusted,
},
}}
onClick={() => {
setCurrentMonth(setMonth(currentMonth, e))
}}
>
{getMonth(currentMonth) === e ? (
<Icon variant="checkmark" />
) : (
<div style={{ height: 24, width: 24 }} />
)}
<Text variant="display-medium">
{format(addMonths(startOfYear(new Date()), e), 'MMM')}
</Text>
</styled.div>
))}
<ScrollArea ref={monthContainerRef}>
{[...Array(12).keys()].map((e, i) => (
<styled.div
key={i}
style={{
height: 32,
flexShrink: 0,
display: 'flex',
padding: '0 8px',
alignItems: 'center',
gap: 8,
cursor: 'pointer',
borderRadius: radius[8],
'&:hover': {
background: colors.neutral10Adjusted,
},
}}
onClick={() => {
setCurrentMonth(setMonth(currentMonth, e))
}}
>
{getMonth(currentMonth) === e ? (
<Icon variant="checkmark" />
) : (
<div style={{ height: 24, width: 24 }} />
)}
<Text variant="display-medium">
{format(addMonths(startOfYear(new Date()), e), 'MMM')}
</Text>
</styled.div>
))}
</ScrollArea>
</styled.div>
<styled.div
style={{
Expand All @@ -294,47 +292,45 @@ function DatePicker({
height: 184,
overflowY: 'auto',
scrollbarWidth: 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
}}
ref={yearContainerRef}
>
{[-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((e, i) => (
<styled.div
key={i}
style={{
height: 32,
flexShrink: 0,
display: 'flex',
padding: '0 8px',
alignItems: 'center',
gap: 8,
cursor: 'pointer',
borderRadius: radius[8],
'&:hover': {
background: colors.neutral10Adjusted,
},
}}
onClick={() => {
setCurrentMonth(
setYear(currentMonth, getYear(new Date()) + e),
)
}}
>
{isSameYear(
currentMonth,
addYears(startOfYear(new Date()), e),
) ? (
<Icon variant="checkmark" />
) : (
<div style={{ height: 24, width: 24 }} />
)}
<Text variant="display-medium">
{format(addYears(startOfYear(new Date()), e), 'yyyy')}
</Text>
</styled.div>
))}
<ScrollArea ref={yearContainerRef}>
{[-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((e, i) => (
<styled.div
key={i}
style={{
height: 32,
flexShrink: 0,
display: 'flex',
padding: '0 8px',
alignItems: 'center',
gap: 8,
cursor: 'pointer',
borderRadius: radius[8],
'&:hover': {
background: colors.neutral10Adjusted,
},
}}
onClick={() => {
setCurrentMonth(
setYear(currentMonth, getYear(new Date()) + e),
)
}}
>
{isSameYear(
currentMonth,
addYears(startOfYear(new Date()), e),
) ? (
<Icon variant="checkmark" />
) : (
<div style={{ height: 24, width: 24 }} />
)}
<Text variant="display-medium">
{format(addYears(startOfYear(new Date()), e), 'yyyy')}
</Text>
</styled.div>
))}
</ScrollArea>
</styled.div>
</div>
</div>
Expand Down Expand Up @@ -461,49 +457,47 @@ function TimePicker({
height: 184,
overflowY: 'auto',
scrollbarWidth: 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
}}
ref={timeContainerRef}
>
{[...Array(24 * 2).keys()].map((e, i) => (
<styled.div
key={i}
style={{
height: 32,
flexShrink: 0,
display: 'flex',
padding: '0 8px',
alignItems: 'center',
gap: 8,
cursor: 'pointer',
borderRadius: radius[8],
'&:hover': {
background: colors.neutral10Adjusted,
},
}}
onClick={() => {
onChange(addMinutes(startOfDay(value ?? new Date()), e * 30))
}}
>
{value &&
getHours(value) ===
getHours(addMinutes(startOfDay(value), e * 30)) &&
getMinutes(value) ===
getMinutes(addMinutes(startOfDay(value), e * 30)) ? (
<Icon variant="checkmark" />
) : (
<div style={{ height: 24, width: 24 }} />
)}
<Text variant="display-medium">
{format(
addMinutes(startOfDay(value ?? new Date()), e * 30),
'HH:mm',
<ScrollArea ref={timeContainerRef}>
{[...Array(24 * 2).keys()].map((e, i) => (
<styled.div
key={i}
style={{
height: 32,
flexShrink: 0,
display: 'flex',
padding: '0 8px',
alignItems: 'center',
gap: 8,
cursor: 'pointer',
borderRadius: radius[8],
'&:hover': {
background: colors.neutral10Adjusted,
},
}}
onClick={() => {
onChange(addMinutes(startOfDay(value ?? new Date()), e * 30))
}}
>
{value &&
getHours(value) ===
getHours(addMinutes(startOfDay(value), e * 30)) &&
getMinutes(value) ===
getMinutes(addMinutes(startOfDay(value), e * 30)) ? (
<Icon variant="checkmark" />
) : (
<div style={{ height: 24, width: 24 }} />
)}
</Text>
</styled.div>
))}
<Text variant="display-medium">
{format(
addMinutes(startOfDay(value ?? new Date()), e * 30),
'HH:mm',
)}
</Text>
</styled.div>
))}
</ScrollArea>
</styled.div>
</div>
)
Expand Down
63 changes: 35 additions & 28 deletions src/components/Dialog/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,6 @@ function Dialog({
borderRadius: radius[24],
background: colors.neutralInverted100,
boxShadow: shadows.popoverLarge,
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
gap: 16,
outline: 'none',
...styles,
}}
Expand All @@ -139,44 +135,55 @@ function Dialog({
background: colors.neutral10Background,
borderRadius: radius[24],
border: `1px solid ${colors.neutral10}`,
zIndex: -1,
}}
/>
<Text variant="subheading-bold" color="neutral100" align="center">
{title}
</Text>
<Text variant="display-regular" color="neutral60" align="center">
{description}
</Text>
<div
style={{
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
gap: 16,
}}
>
<Button
width="full"
keyHint="Esc"
keyHintPlacement="none"
variant="border"
onClick={onDismiss}
<Text variant="subheading-bold" color="neutral100" align="center">
{title}
</Text>
<Text variant="display-regular" color="neutral60" align="center">
{description}
</Text>
<div
style={{
display: 'flex',
gap: 16,
}}
>
{dismissButtonLabel}
</Button>
{actionButtonLabel && (
<Button
width="full"
keyHint="Enter"
keyHint="Esc"
keyHintPlacement="none"
color={color}
onClick={() => {
onAction()
onDismiss()
}}
variant="border"
onClick={onDismiss}
>
{actionButtonLabel}
{dismissButtonLabel}
</Button>
)}
{actionButtonLabel && (
<Button
width="full"
keyHint="Enter"
keyHintPlacement="none"
color={color}
onClick={() => {
onAction()
onDismiss()
}}
>
{actionButtonLabel}
</Button>
)}
</div>
</div>
</div>
</FloatingFocusManager>
Expand Down
4 changes: 0 additions & 4 deletions src/components/FileInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,6 @@ function FileInput(props: FileInptuProps) {
padding: 8,
maxHeight: 360,
overflowY: 'auto',
scrollbarWidth: 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
}}
onDrop={(e) => {
e.preventDefault()
Expand Down
2 changes: 2 additions & 0 deletions src/components/Grid/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
key={field.key}
variant="display-medium"
color="neutral80"
singleLine
>
{data[field.key]}
</Text>
Expand All @@ -161,6 +162,7 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
key={field.key}
variant="display-regular"
color="neutral60"
singleLine
>
{data[field.key]}
</Text>
Expand Down
Loading

0 comments on commit 1c092a0

Please sign in to comment.