fix: error state layout

daangn · Jan 21, 2025 · 886e1bc · 886e1bc
1 parent 1a9d543
commit 886e1bc
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/docs/public/__registry__/ui/error-state.json b/docs/public/__registry__/ui/error-state.json
@@ -10,7 +10,7 @@
     {
       "name": "error-state.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport { Box, Stack, Text } from \"@seed-design/react\";\nimport * as React from \"react\";\nimport { ActionButton, type ActionButtonProps } from \"./action-button\";\n\nexport interface ErrorStateProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\" | \"color\"> {\n  title?: React.ReactNode;\n\n  description?: React.ReactNode;\n\n  primaryActionProps?: ActionButtonProps;\n\n  secondaryActionProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n  /**\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"basement\";\n}\n\nconst bg = {\n  default: \"bg.layerDefault\",\n  basement: \"bg.neutralWeak\",\n} as const;\n\nconst primaryActionVariant = {\n  default: \"neutralWeak\",\n  basement: \"neutralOutline\",\n} as const;\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/error-state\n */\nexport const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(\n  (props, ref) => {\n    const {\n      title,\n      description,\n      primaryActionProps,\n      secondaryActionProps,\n      variant = \"default\",\n      ...otherProps\n    } = props;\n    const { children: secondaryActionLabel, ...secondaryActionOtherProps } =\n      secondaryActionProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        display=\"flex\"\n        flexDirection=\"column\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        gap=\"s10\"\n        paddingX=\"s14\"\n        height=\"full\"\n        flexGrow={1}\n        background={bg[variant]}\n        {...otherProps}\n      >\n        <Stack gap=\"s1\">\n          <Text align=\"center\" fontSize=\"s5\" fontWeight=\"regular\">\n            {title}\n          </Text>\n          <Text align=\"center\" color=\"fg.neutralSubtle\" fontSize=\"s6\">\n            {description}\n          </Text>\n        </Stack>\n        <Stack gap=\"s4\">\n          {primaryActionProps && (\n            <ActionButton\n              variant={primaryActionVariant[variant]}\n              {...primaryActionProps}\n            />\n          )}\n          {secondaryActionProps && (\n            <button {...secondaryActionOtherProps}>\n              <Text color=\"fg.neutralMuted\" fontSize=\"s4\" fontWeight=\"medium\">\n                {secondaryActionLabel}\n              </Text>\n            </button>\n          )}\n        </Stack>\n      </Box>\n    );\n  },\n);\nErrorState.displayName = \"ErrorState\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
+      "content": "\"use client\";\n\nimport { Box, Stack, Text } from \"@seed-design/react\";\nimport * as React from \"react\";\nimport { ActionButton, type ActionButtonProps } from \"./action-button\";\n\nexport interface ErrorStateProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\" | \"color\"> {\n  title?: React.ReactNode;\n\n  description?: React.ReactNode;\n\n  primaryActionProps?: ActionButtonProps;\n\n  secondaryActionProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n  /**\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"basement\";\n}\n\nconst bg = {\n  default: \"bg.layerDefault\",\n  basement: \"bg.neutralWeak\",\n} as const;\n\nconst primaryActionVariant = {\n  default: \"neutralWeak\",\n  basement: \"neutralOutline\",\n} as const;\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/error-state\n */\nexport const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(\n  (props, ref) => {\n    const {\n      title,\n      description,\n      primaryActionProps,\n      secondaryActionProps,\n      variant = \"default\",\n      ...otherProps\n    } = props;\n    const { children: secondaryActionLabel, ...secondaryActionOtherProps } =\n      secondaryActionProps || {};\n\n    return (\n      <Box\n        ref={ref}\n        display=\"flex\"\n        flexDirection=\"column\"\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        gap=\"s10\"\n        paddingX=\"s14\"\n        height=\"full\"\n        flexGrow={1}\n        background={bg[variant]}\n        {...otherProps}\n      >\n        <Stack gap=\"s1\">\n          <Text align=\"center\" fontSize=\"s5\" fontWeight=\"regular\">\n            {title}\n          </Text>\n          <Text align=\"center\" color=\"fg.neutralSubtle\" fontSize=\"s6\">\n            {description}\n          </Text>\n        </Stack>\n        <Stack alignItems=\"center\" gap=\"s4\">\n          {primaryActionProps && (\n            <ActionButton\n              variant={primaryActionVariant[variant]}\n              {...primaryActionProps}\n            />\n          )}\n          {secondaryActionProps && (\n            <button {...secondaryActionOtherProps}>\n              <Text color=\"fg.neutralMuted\" fontSize=\"s4\" fontWeight=\"medium\">\n                {secondaryActionLabel}\n              </Text>\n            </button>\n          )}\n        </Stack>\n      </Box>\n    );\n  },\n);\nErrorState.displayName = \"ErrorState\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n"
     }
   ]
 }
diff --git a/docs/registry/ui/error-state.tsx b/docs/registry/ui/error-state.tsx
@@ -68,7 +68,7 @@ export const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>(
             {description}
           </Text>
         </Stack>
-        <Stack gap="s4">
+        <Stack alignItems="center" gap="s4">
           {primaryActionProps && (
             <ActionButton
               variant={primaryActionVariant[variant]}

diff --git a/examples/stackflow-spa/src/design-system/ui/error-state.tsx b/examples/stackflow-spa/src/design-system/ui/error-state.tsx
@@ -67,7 +67,7 @@ export const ErrorState = React.forwardRef<HTMLDivElement, ErrorStateProps>((pro
           {description}
         </Text>
       </Stack>
-      <Stack gap="s4">
+      <Stack alignItems="center" gap="s4">
         {primaryActionProps && (
           <ActionButton variant={primaryActionVariant[variant]} {...primaryActionProps} />
         )}