From 36fc6b60feef3012fc894028fa19838b2b91ebf6 Mon Sep 17 00:00:00 2001
From: hitomihiumi <amdroidbox19@gmail.com>
Date: Fri, 13 Mar 2026 03:03:31 +0200
Subject: [PATCH 1/2] fix: align timeline component dimensions based on size
 prop for consistency

---
 packages/core/src/components/Timeline.tsx | 178 +++++++++++++++-------
 1 file changed, 124 insertions(+), 54 deletions(-)

diff --git a/packages/core/src/components/Timeline.tsx b/packages/core/src/components/Timeline.tsx
index 3bd6b677..e4788ef0 100644
--- a/packages/core/src/components/Timeline.tsx
+++ b/packages/core/src/components/Timeline.tsx
@@ -12,34 +12,38 @@ export interface TimelineItem {
   children?: React.ReactNode;
 }
 
-interface TimelineProps extends Omit<React.ComponentProps<typeof Flex>, 'children'> {
+interface TimelineProps extends Omit<React.ComponentProps<typeof Flex>, "children"> {
   items: TimelineItem[];
   alignment?: "left" | "right";
   size?: TShirtSizes;
 }
 
-const Timeline: React.FC<TimelineProps> = ({
-  items,
-  alignment = "left",
-  size = "m",
-  ...flex
-}) => {
+const Timeline: React.FC<TimelineProps> = ({ items, alignment = "left", size = "m", ...flex }) => {
   // Helper to get color variable for state
   const getStateColor = (state: string) => {
     switch (state) {
-      case "active": return "var(--brand-solid-strong)";
-      case "success": return "var(--success-solid-strong)";
-      case "danger": return "var(--danger-solid-strong)";
-      default: return "var(--neutral-solid-strong)";
+      case "active":
+        return "var(--brand-solid-strong)";
+      case "success":
+        return "var(--success-solid-strong)";
+      case "danger":
+        return "var(--danger-solid-strong)";
+      default:
+        return "var(--neutral-solid-strong)";
     }
   };
 
+  const dimensionSize =
+    size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48";
+  const topOffset =
+    size === "xs" ? "20" : size === "s" ? "12" : size === "m" ? "8" : size === "l" ? "4" : "0";
+
   return (
     <Column {...flex}>
       {items.map((item, index) => {
         const state = item.state || "default";
-        const nextState = index < items.length - 1 ? (items[index + 1].state || "default") : state;
-        
+        const nextState = index < items.length - 1 ? items[index + 1].state || "default" : state;
+
         const currentColor = getStateColor(state);
         const nextColor = getStateColor(nextState);
 
@@ -57,41 +61,79 @@ const Timeline: React.FC<TimelineProps> = ({
             {/* Marker */}
             <Column
               fillWidth
-              horizontal="center" 
-              marginTop={isHorizontal ? undefined : index === 0 ? (size === "xl" ? "8" : size === "l" ? "12" : size === "m" ? "16" : size === "s" ? "20" : "16") : undefined}
+              horizontal="center"
+              marginTop={isHorizontal ? undefined : index === 0 ? topOffset : undefined}
+              paddingLeft={isHorizontal && index === 0 ? "20" : undefined}
+              paddingRight={isHorizontal && index === items.length - 1 ? "20" : undefined}
               vertical={isHorizontal ? "center" : undefined}
               direction={isHorizontal ? "row" : "column"}
-              minWidth={!isHorizontal ? (size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48") : undefined}
-              maxWidth={!isHorizontal ? (size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48") : undefined}>
+              minWidth={!isHorizontal ? dimensionSize : undefined}
+              maxWidth={!isHorizontal ? dimensionSize : undefined}
+            >
               {index !== 0 && (
                 <Line
                   vert={!isHorizontal}
                   background={undefined}
-                  solid={state === "active" ? "brand-strong" : state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : "neutral-strong"}
-                  minHeight={flex.direction === "row" ? undefined : "8"}
-                  maxHeight={flex.direction === "row" ? undefined : "8"}
+                  solid={
+                    state === "active"
+                      ? "brand-strong"
+                      : state === "success"
+                        ? "success-strong"
+                        : state === "danger"
+                          ? "danger-strong"
+                          : "neutral-strong"
+                  }
+                  minHeight={isHorizontal ? undefined : topOffset}
+                  maxHeight={isHorizontal ? undefined : topOffset}
                 />
               )}
-                <Flex
-                  fillWidth
-                  center radius="full"
-                  solid={state === "active" ? "brand-strong" : state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : undefined}
-                  background={state === "default" ? "neutral-weak" : undefined}
-                  border={state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : state === "active" ? "brand-strong" : "neutral-strong"}
-                  minHeight={size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48"}
-                  maxHeight={size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48"}
-                  minWidth={size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48"}
-                  maxWidth={size === "xs" ? "8" : size === "s" ? "24" : size === "m" ? "32" : size === "l" ? "40" : "48"}>
-                  {item.marker && (
-                    <Flex
-                      center
-                      onSolid={state === "active" ? "brand-strong" : state === "success" ? "success-strong" : state === "danger" ? "danger-strong" : undefined}
-                      onBackground={state === "default" ? "neutral-weak" : undefined}
-                      textVariant="label-default-m">
-                      {item.marker}
-                    </Flex>
-                  )}
-                </Flex>
+              <Flex
+                fillWidth
+                center
+                radius="full"
+                solid={
+                  state === "active"
+                    ? "brand-strong"
+                    : state === "success"
+                      ? "success-strong"
+                      : state === "danger"
+                        ? "danger-strong"
+                        : undefined
+                }
+                background={state === "default" ? "neutral-weak" : undefined}
+                border={
+                  state === "success"
+                    ? "success-strong"
+                    : state === "danger"
+                      ? "danger-strong"
+                      : state === "active"
+                        ? "brand-strong"
+                        : "neutral-strong"
+                }
+                minHeight={dimensionSize}
+                maxHeight={dimensionSize}
+                minWidth={dimensionSize}
+                maxWidth={dimensionSize}
+              >
+                {item.marker && (
+                  <Flex
+                    center
+                    onSolid={
+                      state === "active"
+                        ? "brand-strong"
+                        : state === "success"
+                          ? "success-strong"
+                          : state === "danger"
+                            ? "danger-strong"
+                            : undefined
+                    }
+                    onBackground={state === "default" ? "neutral-weak" : undefined}
+                    textVariant="label-default-m"
+                  >
+                    {item.marker}
+                  </Flex>
+                )}
+              </Flex>
               {index !== items.length - 1 && (
                 <Line
                   vert={!isHorizontal}
@@ -104,22 +146,50 @@ const Timeline: React.FC<TimelineProps> = ({
             {/* Content */}
             <Column
               fillWidth
-              paddingX="20" paddingTop="12" paddingBottom="24"
-              horizontal={isHorizontal && index === 0 ? "start" : isHorizontal && index === items.length - 1 ? "end" : isHorizontal ? "center" : undefined}
-              align={isHorizontal && index === 0 ? "left" : isHorizontal && index === items.length - 1 ? "right" : isHorizontal ? "center" : alignment === "right" ? "right" : undefined}
+              paddingX="20"
+              paddingTop="12"
+              paddingBottom="24"
+              horizontal={
+                isHorizontal && index === 0
+                  ? "start"
+                  : isHorizontal && index === items.length - 1
+                    ? "end"
+                    : isHorizontal
+                      ? "center"
+                      : undefined
+              }
+              align={
+                isHorizontal && index === 0
+                  ? "left"
+                  : isHorizontal && index === items.length - 1
+                    ? "right"
+                    : isHorizontal
+                      ? "center"
+                      : alignment === "right"
+                        ? "right"
+                        : undefined
+              }
               gap="2"
             >
-                <>
-                  {item.label && (
-                    <Text variant="label-default-m" onBackground={state === "danger" ? "danger-weak" : undefined}>{item.label}</Text>
-                  )}
-                  {item.description && (
-                    <Text variant="body-default-s" onBackground={state === "danger" ? "danger-weak" : "neutral-weak"}>
-                      {item.description}
-                    </Text>
-                  )}
-                  {item.children}
-                </>
+              <>
+                {item.label && (
+                  <Text
+                    variant="label-default-m"
+                    onBackground={state === "danger" ? "danger-weak" : undefined}
+                  >
+                    {item.label}
+                  </Text>
+                )}
+                {item.description && (
+                  <Text
+                    variant="body-default-s"
+                    onBackground={state === "danger" ? "danger-weak" : "neutral-weak"}
+                  >
+                    {item.description}
+                  </Text>
+                )}
+                {item.children}
+              </>
             </Column>
           </Flex>
         );

From 47b1997c642e4ff80be06bd11c2f444915b6deca Mon Sep 17 00:00:00 2001
From: hitomihiumi <amdroidbox19@gmail.com>
Date: Fri, 13 Mar 2026 03:06:05 +0200
Subject: [PATCH 2/2] docs: remove 'type' prop from Text component

---
 apps/docs/src/content/once-ui/components/text.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/docs/src/content/once-ui/components/text.mdx b/apps/docs/src/content/once-ui/components/text.mdx
index b1611b7c..1a61521a 100644
--- a/apps/docs/src/content/once-ui/components/text.mdx
+++ b/apps/docs/src/content/once-ui/components/text.mdx
@@ -324,7 +324,6 @@ Control the rendered tag using the `as` prop.
     ["variant", "TextVariant"],
     ["size", ["xs", "s", "m", "l", "xl"]],
     ["weight", ["default", "strong"]],
-    ["type", ["display", "heading", "body", "label", "code"]],
     ["family", ["display", "heading", "body", "label", "code"]],
     ["onBackground", "`${ColorScheme}-${ColorWeight}`"],
     ["onSolid", "`${ColorScheme}-${ColorWeight}`"],