@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/form/HelpText.tsx

@@ -1,56 +1,130 @@
-import { type JSX, splitProps, Show } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Field.tsx
+
+// Port of packages/@react-spectrum/s2/src/Field.tsx HelpText (Field.tsx:407-468).
+import { useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { FieldError, FieldErrorContext, Text } from "@proyecto-viviana/solidaria-components";
+import { DEFAULT_VALIDATION_RESULT, type ValidationResult } from "@proyecto-viviana/solid-stately";
 import { style } from "../style" with { type: "macro" };
+import { controlFont } from "../s2-internal/style-utils" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface HelpTextProps {
   /** The description text. */
-  description?: string;
-  /** The error message text. */
-  errorMessage?: string;
+  description?: JSX.Element;
+  /** The error message text. Prefer `children`, matching S2. */
+  errorMessage?: JSX.Element;
   /** Whether the field is in an error state. */
   isInvalid?: boolean;
   /** Whether the help text is disabled (dimmed). */
   isDisabled?: boolean;
+  /** Field size, matching S2 `HelpText`. @default 'M' */
+  size?: "XS" | "S" | "M" | "L" | "XL";
   /** Additional CSS class name. */
   class?: string;
+  /** Error message. S2 passes this as `HelpText` children. */
+  children?: JSX.Element;
 }
 
-// Mirrors S2's `helpTextStyles` (Field.tsx): the small UI font with a
-// `neutral-subdued` description color that flips to `negative` for errors and
-// `disabled` when the field is disabled. Emitted via the `style()` macro so the
-// CSS ships in the package bundle for installed consumers.
-const helpTextStyles = style<{ isInvalid?: boolean; isDisabled?: boolean }>({
-  font: "ui-sm",
+// Mirrors S2 `helpTextStyles` (Field.tsx:378-405).
+const helpTextStyles = style<{
+  size?: "XS" | "S" | "M" | "L" | "XL";
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+}>({
+  gridArea: "helptext",
+  display: "flex",
+  alignItems: "baseline",
+  gap: "text-to-visual",
+  font: controlFont(),
   color: {
     default: "neutral-subdued",
-    isInvalid: "negative",
-    isDisabled: "disabled",
+    isInvalid: {
+      default: "negative",
+      forcedColors: "Mark",
+    },
+    isDisabled: {
+      default: "disabled",
+      forcedColors: "GrayText",
+    },
+  },
+  "--iconPrimary": {
+    type: "fill",
+    value: "currentColor",
+  },
+  contain: "inline-size",
+  paddingTop: "--field-gap",
+  cursor: {
+    default: "text",
+    isDisabled: "default",
   },
 });
 
 /**
  * Displays description or error text below a form field.
+ *
+ * S2 `HelpText` (`Field.tsx:407-468`) renders `<Text slot="description">` when
+ * valid and `<FieldError>` (RAC `FieldError.tsx:57-72` → `<Text slot="errorMessage">`,
+ * no `role="alert"`) when invalid, with no wrapper. Slot ids attach through
+ * the headless `TextContext`.
  */
-export function HelpText(props: HelpTextProps): JSX.Element {
+export function HelpText(props: HelpTextProps): JSX.Element | null {
   const [local] = splitProps(props, [
     "description",
     "errorMessage",
     "isInvalid",
     "isDisabled",
+    "size",
     "class",
+    "children",
   ]);
 
-  const showError = () => local.isInvalid && local.errorMessage;
+  const size = () => local.size ?? "M";
+  const className = (isInvalid: boolean) =>
+    [helpTextStyles({ size: size(), isInvalid, isDisabled: local.isDisabled }), local.class]
+      .filter(Boolean)
+      .join(" ");
+  const fieldError = useContext(FieldErrorContext);
+  const isInvalid = () => {
+    let fromContext: boolean | undefined;
+    if (fieldError && typeof fieldError === "object") {
+      if ("validation" in fieldError) {
+        fromContext = fieldError.validation?.isInvalid;
+      } else if ("isInvalid" in fieldError) {
+        fromContext = (fieldError as ValidationResult).isInvalid;
+      }
+    }
+    return Boolean(fromContext || local.isInvalid);
+  };
+  const error = () => local.children ?? local.errorMessage;
 
   return (
-    <div class={local.class}>
-      <Show when={showError()}>
-        <p class={helpTextStyles({ isInvalid: true })} role="alert">
-          {local.errorMessage}
-        </p>
-      </Show>
-      <Show when={!showError() && local.description}>
-        <p class={helpTextStyles({ isDisabled: local.isDisabled })}>{local.description}</p>
-      </Show>
-    </div>
+    <>
+      {!isInvalid() && local.description ? (
+        <Text slot="description" class={className(false)}>
+          {local.description}
+        </Text>
+      ) : null}
+      {isInvalid() ? (
+        <FieldError
+          class={className(true)}
+          validation={fieldError ? undefined : { ...DEFAULT_VALIDATION_RESULT, isInvalid: true }}
+        >
+          {error()}
+        </FieldError>
+      ) : null}
+    </>
   );
 }

package/src/form/index.tsx

@@ -1,4 +1,21 @@
-import { type JSX, createContext, splitProps, useContext } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Form.tsx
+
+// Port of packages/@react-spectrum/s2/src/Form.tsx.
+
+import { createContext, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Form as HeadlessForm,
   FieldError as HeadlessFieldError,
@@ -11,6 +28,7 @@ import type { UnsafeClassName } from "../s2-internal/style-utils";
 import { getAllowedOverrides } from "../s2-internal/style-utils" with { type: "macro" };
 import { createIsSkeleton } from "../skeleton";
 import { assignRef } from "../button/spectrum-context";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type FormSize = "S" | "M" | "L" | "XL";
 export type FormLabelPosition = "top" | "side";
@@ -158,6 +176,10 @@ const formStyles = style<{ labelPosition: FormLabelPosition; size: FormSize }>(
 );
 
 export function Form(props: FormProps): JSX.Element {
+  // Leave `children` on the headless rest props so they flow through as a
+  // lazy Solid getter — do not split them off and re-wrap. A forced
+  // `(rp) => children` render-prop wrapper desyncs createUniqueId between SSR
+  // and client (Form+Button hydration mismatch). See solid-spectrum Form.
   const [local, headlessProps] = splitProps(props, [
     "size",
     "labelPosition",
@@ -170,7 +192,6 @@ export function Form(props: FormProps): JSX.Element {
     "UNSAFE_className",
     "UNSAFE_style",
     "ref",
-    "children",
   ]);
 
   const size = () => local.size ?? "M";
@@ -203,7 +224,7 @@ export function Form(props: FormProps): JSX.Element {
   };
 
   return (
-    <FormContext.Provider value={contextValue}>
+    <FormContext value={contextValue}>
       <HeadlessForm
         {...headlessProps}
         ref={(el) => assignRef(local.ref, el)}
@@ -214,12 +235,8 @@ export function Form(props: FormProps): JSX.Element {
           .filter(Boolean)
           .join(" ")}
         style={local.UNSAFE_style}
-      >
-        {(renderProps) =>
-          typeof local.children === "function" ? local.children(renderProps) : local.children
-        }
-      </HeadlessForm>
-    </FormContext.Provider>
+      />
+    </FormContext>
   );
 }