Skip to content

Commit 0d4ecf8

Browse files
lorant-onelorant-one
committed
feat: rework Flex alignment props
1 parent 4b5bc5c commit 0d4ecf8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+240
-222
lines changed

‎src/app/page.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default function Home() {
7979
const validateIntro = (value: React.ReactNode) => {
8080
if (typeof value === "string" && value.length < 10) {
8181
return (
82-
<Row alignItems="center" marginBottom="12" gap="8">
82+
<Row horizontal="center" marginBottom="12" gap="8">
8383
<Icon name="errorCircle" />
8484
Intro must be at least 10 characters long.
8585
</Row>
@@ -97,7 +97,7 @@ export default function Home() {
9797
};
9898

9999
return (
100-
<Column fillWidth paddingY="80" paddingX="s" alignItems="center" flex={1}>
100+
<Column fillWidth paddingY="80" paddingX="s" horizontal="center" flex={1}>
101101
<Fade
102102
zIndex={3}
103103
pattern={{
@@ -112,10 +112,10 @@ export default function Home() {
112112
fillWidth
113113
blur={0.25}
114114
/>
115-
<Row position="fixed" top="0" fillWidth justifyContent="center" zIndex={3}>
115+
<Row position="fixed" top="0" fillWidth horizontal="center" zIndex={3}>
116116
<Row
117117
data-border="rounded"
118-
justifyContent="space-between"
118+
horizontal="space-between"
119119
maxWidth="l"
120120
paddingRight="64"
121121
paddingLeft="32"
@@ -141,7 +141,7 @@ export default function Home() {
141141
/>
142142
<StyleOverlay top="20" right="24" />
143143
</Row>
144-
<Row gap="16" show="s" alignItems="center" paddingRight="24">
144+
<Row gap="16" show="s" horizontal="center" paddingRight="24">
145145
<IconButton
146146
href="https://discord.com/invite/5EyAQ4eNdS"
147147
icon="discord"
@@ -162,13 +162,13 @@ export default function Home() {
162162
maxWidth="l"
163163
position="relative"
164164
radius="xl"
165-
alignItems="center"
165+
horizontal="center"
166166
border="neutral-alpha-weak"
167167
fillWidth
168168
>
169169
<Column
170170
fillWidth
171-
alignItems="center"
171+
horizontal="center"
172172
gap="48"
173173
radius="xl"
174174
paddingTop="80"
@@ -224,7 +224,7 @@ export default function Home() {
224224
colorEnd: "static-transparent",
225225
}}
226226
/>
227-
<Column fillWidth alignItems="center" gap="32" padding="32" position="relative">
227+
<Column fillWidth horizontal="center" gap="32" padding="32" position="relative">
228228
<InlineCode radius="xl" shadow="m" fit paddingX="16" paddingY="8">
229229
Start by editing
230230
<Text onBackground="brand-medium" marginLeft="8">
@@ -242,7 +242,7 @@ export default function Home() {
242242
variant="secondary"
243243
arrowIcon
244244
/>
245-
<Column alignItems="center" paddingTop="64" fillWidth gap="24">
245+
<Column horizontal="center" paddingTop="64" fillWidth gap="24">
246246
<Line maxWidth={4} marginBottom="16" background="neutral-alpha-medium" />
247247
<AvatarGroup
248248
marginBottom="8"
@@ -296,7 +296,7 @@ export default function Home() {
296296
/>
297297
</Column>
298298
</Column>
299-
<Column fillWidth paddingX="32" gap="12" alignItems="center" position="relative">
299+
<Column fillWidth paddingX="32" gap="12" horizontal="center" position="relative">
300300
<Heading as="h2" variant="display-default-m">
301301
Showcase
302302
</Heading>
@@ -316,7 +316,7 @@ export default function Home() {
316316
<Row fill hide="m">
317317
<SmartImage src="/images/login.png" alt="Preview image" sizes="560px" />
318318
</Row>
319-
<Column fillWidth alignItems="center" gap="20" padding="32" position="relative">
319+
<Column fillWidth horizontal="center" gap="20" padding="32" position="relative">
320320
<Background
321321
mask={{
322322
x: 100,
@@ -359,7 +359,7 @@ export default function Home() {
359359
/>
360360
</Column>
361361
<Row fillWidth paddingY="24">
362-
<Row onBackground="neutral-weak" fillWidth gap="24" alignItems="center">
362+
<Row onBackground="neutral-weak" fillWidth gap="24" vertical="center">
363363
<Line />/<Line />
364364
</Row>
365365
</Row>
@@ -410,7 +410,7 @@ export default function Home() {
410410
gap="64"
411411
position="relative"
412412
mobileDirection="column"
413-
alignItems="center"
413+
vertical="center"
414414
>
415415
<Background
416416
style={{ left: "-1px" }}
@@ -464,15 +464,15 @@ export default function Home() {
464464
fill
465465
position="absolute"
466466
padding="24"
467-
justifyContent="flex-end"
467+
vertical="end"
468468
gap="12"
469469
onSolid="neutral-strong"
470470
>
471471
<Text variant="body-default-xl">Lorant One</Text>
472472
<Row
473473
fillWidth
474-
justifyContent="space-between"
475-
alignItems="flex-end"
474+
horizontal="space-between"
475+
vertical="end"
476476
paddingRight="16"
477477
>
478478
<Column gap="4">
@@ -487,7 +487,7 @@ export default function Home() {
487487
</TiltFx>
488488
</Row>
489489
<Column position="relative" fillWidth gap="-1">
490-
<Row fillWidth alignItems="center" justifyContent="space-between" marginBottom="32">
490+
<Row fillWidth vertical="center" horizontal="space-between" marginBottom="32">
491491
<Heading as="h3" variant="display-default-xs">
492492
Fill in your card details
493493
</Heading>
@@ -532,7 +532,7 @@ export default function Home() {
532532
gap="64"
533533
position="relative"
534534
mobileDirection="column"
535-
alignItems="center"
535+
vertical="center"
536536
>
537537
<Background
538538
fill
@@ -559,7 +559,7 @@ export default function Home() {
559559
gap="40"
560560
position="relative"
561561
>
562-
<Row fillWidth justifyContent="center" gap="-1">
562+
<Row fillWidth horizontal="center" gap="-1">
563563
<Column
564564
maxWidth={12}
565565
gap="4"
@@ -607,7 +607,7 @@ export default function Home() {
607607
)}
608608
</Column>
609609
</Row>
610-
<Row fillWidth justifyContent="center">
610+
<Row fillWidth horizontal="center">
611611
<DateRangePicker
612612
data-scaling="110"
613613
size="l"
@@ -623,7 +623,7 @@ export default function Home() {
623623

624624
{/* PROFILE */}
625625
<Row
626-
justifyContent="center"
626+
horizontal="center"
627627
paddingX="32"
628628
paddingY="64"
629629
fillWidth
@@ -665,7 +665,7 @@ export default function Home() {
665665
overflow="hidden"
666666
position="relative"
667667
fillWidth
668-
alignItems="center"
668+
horizontal="center"
669669
border="neutral-medium"
670670
>
671671
<MediaUpload
@@ -676,14 +676,14 @@ export default function Home() {
676676
sizes="560px"
677677
radius={undefined}
678678
initialPreviewImage="/images/profile.jpg"
679-
></MediaUpload>
679+
/>
680680
<Column
681681
paddingTop="160"
682682
paddingX="32"
683683
paddingBottom="32"
684684
fillWidth
685685
position="relative"
686-
alignItems="center"
686+
horizontal="center"
687687
gap="8"
688688
>
689689
<Avatar
@@ -874,7 +874,7 @@ export default function Home() {
874874
colorEnd: "brand-background-medium",
875875
}}
876876
/>
877-
<Column alignItems="center" gap="48" fillWidth position="relative">
877+
<Column horizontal="center" gap="48" fillWidth position="relative">
878878
<Heading align="center" as="h2" variant="display-default-l">
879879
Quick start
880880
</Heading>
@@ -900,8 +900,8 @@ export default function Home() {
900900
paddingTop="160"
901901
minHeight={28}
902902
paddingBottom="80"
903-
justifyContent="center"
904-
alignItems="flex-end"
903+
horizontal="center"
904+
vertical="end"
905905
>
906906
<Background
907907
mask={{
@@ -935,7 +935,7 @@ export default function Home() {
935935
border={undefined}
936936
radius={undefined}
937937
>
938-
<Row fillWidth justifyContent="center" gap="12" alignItems="center">
938+
<Row fillWidth center gap="12">
939939
<Text variant="body-strong-m" onBackground="neutral-strong">
940940
{link.title}
941941
</Text>
@@ -976,7 +976,7 @@ export default function Home() {
976976
position="relative"
977977
textVariant="body-default-xs"
978978
onBackground="neutral-medium"
979-
alignItems="center"
979+
horizontal="center"
980980
align="center"
981981
fillWidth
982982
gap="16"

‎src/once-ui/components/Accordion.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ const Accordion: React.FC<AccordionProps> = forwardRef(
3838
transition="macro-medium"
3939
paddingY="16"
4040
paddingX="20"
41-
alignItems="center"
42-
justifyContent="space-between"
41+
vertical="center"
42+
horizontal="space-between"
4343
onClick={toggleAccordion}
4444
aria-expanded={isOpen}
4545
aria-controls="accordion-content"

‎src/once-ui/components/Arrow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ const Arrow: React.FC<ArrowProps> = ({
4848
<Flex
4949
ref={ref}
5050
position="relative"
51-
alignItems="center"
52-
justifyContent="flex-end"
51+
vertical="center"
52+
horizontal="center"
5353
className={classNames(styles.arrowContainer, className)}
5454
style={{
5555
transform: `scale(${scale})`,

‎src/once-ui/components/Avatar.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
4646
return (
4747
<Skeleton
4848
{...rest}
49-
style={{
50-
border: "1px solid var(--neutral-border-medium)",
51-
}}
49+
border="neutral-medium"
5250
shape="circle"
5351
width={size}
5452
height={size}
@@ -107,8 +105,8 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
107105
ref={ref}
108106
role="img"
109107
position="relative"
110-
justifyContent="center"
111-
alignItems="center"
108+
horizontal="center"
109+
vertical="center"
112110
radius="full"
113111
border="neutral-strong"
114112
background="surface"

‎src/once-ui/components/AvatarGroup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
2323
return (
2424
<Flex
2525
position="relative"
26-
alignItems="center"
26+
vertical="center"
2727
ref={ref}
2828
className={classNames(styles.avatarGroup, className)}
2929
style={style}

‎src/once-ui/components/Badge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Badge = forwardRef<HTMLDivElement | HTMLAnchorElement, BadgeProps>(
2323
paddingY="12"
2424
fitWidth
2525
className={effect ? styles.animation : undefined}
26-
alignItems="center"
26+
vertical="center"
2727
radius="full"
2828
background="neutral-weak"
2929
border="brand-alpha-medium"

‎src/once-ui/components/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,4 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
2727
);
2828

2929
Card.displayName = "Card";
30-
export { Card };
30+
export { Card };

‎src/once-ui/components/Carousel.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -82,20 +82,20 @@ const Carousel: React.FC<CarouselProps> = ({
8282
<RevealFx
8383
onClick={handleImageClick}
8484
fillWidth
85-
aspectRatio={aspectRatio}
8685
trigger={isTransitioning}
8786
translateY="16"
87+
aspectRatio={aspectRatio}
8888
speed="fast"
8989
>
9090
<SmartImage
9191
sizes={sizes}
9292
priority
9393
radius="l"
94+
border="neutral-alpha-weak"
9495
alt={images[activeIndex]?.alt}
9596
aspectRatio={aspectRatio}
9697
src={images[activeIndex]?.src}
9798
style={{
98-
border: "1px solid var(--neutral-alpha-weak)",
9999
...(images.length > 1 && {
100100
cursor: "pointer",
101101
}),
@@ -105,7 +105,7 @@ const Carousel: React.FC<CarouselProps> = ({
105105
{images.length > 1 && (
106106
<>
107107
{indicator === "line" ? (
108-
<Flex gap="4" paddingX="s" fillWidth justifyContent="center">
108+
<Flex gap="4" paddingX="s" fillWidth horizontal="center">
109109
{images.map((_, index) => (
110110
<Flex
111111
key={index}
@@ -115,9 +115,9 @@ const Carousel: React.FC<CarouselProps> = ({
115115
activeIndex === index
116116
? "var(--neutral-on-background-strong)"
117117
: "var(--neutral-alpha-medium)",
118-
cursor: "pointer",
119118
transition: "background 0.3s ease",
120119
}}
120+
cursor="interactive"
121121
fillWidth
122122
height="2"
123123
></Flex>
@@ -130,10 +130,10 @@ const Carousel: React.FC<CarouselProps> = ({
130130
key={index}
131131
style={{
132132
border: activeIndex === index ? "2px solid var(--brand-solid-strong)" : "none",
133-
cursor: "pointer",
134133
borderRadius: "var(--radius-m-nest-4)",
135134
transition: "border 0.3s ease",
136135
}}
136+
cursor="interactive"
137137
padding="4"
138138
width="80"
139139
height="80"
@@ -143,11 +143,9 @@ const Carousel: React.FC<CarouselProps> = ({
143143
aspectRatio="1 / 1"
144144
sizes="120px"
145145
src={image.src}
146-
style={{
147-
cursor: "pointer",
148-
borderRadius: "var(--radius-m)",
149-
transition: "background 0.3s ease",
150-
}}
146+
cursor="interactive"
147+
radius="m"
148+
transition="macro-medium"
151149
/>
152150
</Flex>
153151
))}

‎src/once-ui/components/Checkbox.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const Checkbox: React.FC<CheckboxProps> = forwardRef<HTMLInputElement, CheckboxP
5656

5757
return (
5858
<Flex
59-
alignItems="center"
59+
vertical="center"
6060
gap="16"
6161
className={classNames(styles.container, className, {
6262
[styles.disabled]: disabled,
@@ -87,8 +87,8 @@ const Checkbox: React.FC<CheckboxProps> = forwardRef<HTMLInputElement, CheckboxP
8787
role="checkbox"
8888
position="relative"
8989
tabIndex={0}
90-
justifyContent="center"
91-
alignItems="center"
90+
horizontal="center"
91+
vertical="center"
9292
radius="xs"
9393
aria-checked={
9494
isIndeterminate

0 commit comments

Comments
 (0)