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

package/src/color/index.tsx

@@ -1,6 +1,30 @@
+/*
+ * 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/ColorArea.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorField.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorHandle.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorSlider.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorSwatch.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ColorWheel.tsx
+
+// Port of packages/@react-spectrum/s2/src/ColorArea.tsx.
+// Port of packages/@react-spectrum/s2/src/ColorField.tsx.
+// Port of packages/@react-spectrum/s2/src/ColorHandle.tsx.
+// Port of packages/@react-spectrum/s2/src/ColorSlider.tsx.
+// Port of packages/@react-spectrum/s2/src/ColorSwatch.tsx.
+// Port of packages/@react-spectrum/s2/src/ColorWheel.tsx.
+
 import {
-  type JSX,
-  splitProps,
   createContext,
   createEffect,
   createMemo,
@@ -9,9 +33,12 @@ import {
   onCleanup,
   useContext,
   Show,
+  createTrackedEffect,
 } from "solid-js";
-import { Portal } from "solid-js/web";
-import { useLocale } from "@proyecto-viviana/solidaria";
+import type { JSX } from "@solidjs/web";
+import { Portal } from "@solidjs/web";
+import { createStringFormatter, useLocale } from "@proyecto-viviana/solidaria";
+import { s2IntlStrings } from "../intl";
 import {
   ColorSlider as HeadlessColorSlider,
   ColorSliderLabel as HeadlessColorSliderLabel,
@@ -75,6 +102,8 @@ import AlertTriangleIcon from "../icon/s2wf-icons/AlertTriangleIcon";
 import AsteriskIcon from "../icon/ui-icons/Asterisk";
 import { useProviderProps } from "../provider";
 import { useFormProps, useIsInForm } from "../form";
+import { HelpText } from "../form/HelpText";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   InternalColorSwatchContext,
   type InternalColorSwatchRounding,
@@ -650,7 +679,7 @@ function ColorAreaLoupe(props: {
     height: number;
   } | null>(null);
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (props.isOpen) {
       setPhase("open");
     } else if (phase() === "open") {
@@ -658,7 +687,9 @@ function ColorAreaLoupe(props: {
     }
   });
 
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     props.color.toString("css");
 
     if ((phase() === "closed" && !props.isOpen) || typeof window === "undefined") {
@@ -685,10 +716,14 @@ function ColorAreaLoupe(props: {
     update();
     window.addEventListener("scroll", update, true);
     window.addEventListener("resize", update);
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       window.removeEventListener("scroll", update, true);
       window.removeEventListener("resize", update);
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   return (
@@ -1143,43 +1178,15 @@ function createColorFieldStyles() {
       borderStyle: "none",
       truncate: true,
     }),
-    helpText: style<ColorFieldStyleProps>({
-      gridArea: "helptext",
-      display: "flex",
-      alignItems: "baseline",
-      gap: "text-to-visual",
-      font: controlFont(),
-      color: {
-        default: "neutral-subdued",
-        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",
-      },
-    }),
     errorIcon: style({
-      size: fontRelative(20),
+      size: "1lh",
       marginStart: "text-to-visual",
       marginEnd: fontRelative(-2),
       flexShrink: 0,
       "--iconPrimary": {
         type: "fill",
         value: {
-          default: "negative",
+          default: "negative-1000",
           forcedColors: "Mark",
         },
       },
@@ -1270,6 +1277,7 @@ export function ColorField(props: ColorFieldProps): JSX.Element {
   const labelPosition = () => local.labelPosition ?? "top";
   const labelAlign = () => local.labelAlign ?? "start";
   const necessityIndicator = () => local.necessityIndicator ?? "icon";
+  const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
   const fieldStyles = () => getColorFieldStyles();
 
   const rootClassName = (renderProps: ColorFieldRenderProps) =>
@@ -1311,13 +1319,6 @@ export function ColorField(props: ColorFieldProps): JSX.Element {
       isFocusWithin: isFocusWithin(),
     });
 
-  const helpClass = (renderProps: ColorFieldRenderProps, isInvalid: boolean) =>
-    fieldStyles().helpText({
-      ...renderProps,
-      size: size(),
-      isInvalid,
-    });
-
   return (
     <HeadlessColorField
       {...headlessProps}
@@ -1337,8 +1338,10 @@ export function ColorField(props: ColorFieldProps): JSX.Element {
                     <Show
                       when={necessityIndicator() === "icon"}
                       fallback={
-                        <span aria-hidden={renderProps.isRequired ? true : undefined}>
-                          {renderProps.isRequired ? "(required)" : "(optional)"}
+                        <span aria-hidden={renderProps.isRequired ? "true" : undefined}>
+                          {stringFormatter().format(
+                            renderProps.isRequired ? "label.(required)" : "label.(optional)",
+                          )}
                         </span>
                       }
                     >
@@ -1386,17 +1389,14 @@ export function ColorField(props: ColorFieldProps): JSX.Element {
             </Show>
           </div>
 
-          <Show when={local.description && !renderProps.isInvalid}>
-            <ColorFieldDescription class={helpClass(renderProps, false)}>
-              {local.description}
-            </ColorFieldDescription>
-          </Show>
-
-          <Show when={local.errorMessage && renderProps.isInvalid}>
-            <ColorFieldError class={helpClass(renderProps, true)}>
-              {local.errorMessage}
-            </ColorFieldError>
-          </Show>
+          <HelpText
+            size={size()}
+            isDisabled={renderProps.isDisabled}
+            isInvalid={renderProps.isInvalid}
+            description={local.description}
+          >
+            {local.errorMessage}
+          </HelpText>
         </>
       )}
     />
@@ -1464,44 +1464,6 @@ function ColorFieldLabel(props: { class?: string; children?: JSX.Element }): JSX
   );
 }
 
-// Upstream S2 renders help text via the shared `<HelpText>`, whose description is a
-// `<Text slot="description">` (a `<span>`), NOT a `<p>`: a `<p>` carries the UA
-// `margin` the hand-roll then had to zero out (see `helpText` style — upstream's
-// `helpTextStyles` has none) and an implicit `paragraph` role a `<span>` does not.
-// Reverted to match, exactly as NumberField/DateField/DatePicker did.
-function ColorFieldDescription(props: {
-  class?: string;
-  children?: JSX.Element;
-}): JSX.Element | null {
-  const context = useContext(HeadlessColorFieldContext);
-  if (!context) return null;
-  const descriptionProps = () => {
-    const { ref: _ref, ...rest } = context.descriptionProps as Record<string, unknown>;
-    return rest;
-  };
-  return (
-    <span {...descriptionProps()} slot="description" class={props.class}>
-      {props.children}
-    </span>
-  );
-}
-
-// Upstream S2's `<HelpText>` renders the error message via `<FieldError>` →
-// `<Text slot="errorMessage">` (a `<span>`), not a `<p>`.
-function ColorFieldError(props: { class?: string; children?: JSX.Element }): JSX.Element | null {
-  const context = useContext(HeadlessColorFieldContext);
-  if (!context) return null;
-  const errorMessageProps = () => {
-    const { ref: _ref, ...rest } = context.errorMessageProps as Record<string, unknown>;
-    return rest;
-  };
-  return (
-    <span {...errorMessageProps()} slot="errorMessage" class={props.class}>
-      {props.children}
-    </span>
-  );
-}
-
 export type ColorSwatchSize = InternalColorSwatchSize;
 export type ColorSwatchRounding = InternalColorSwatchRounding;