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

package/src/contextualhelp/index.tsx

@@ -1,13 +1,8 @@
-import {
-  type JSX,
-  createContext,
-  createUniqueId,
-  mergeProps,
-  splitProps,
-  useContext,
-} from "solid-js";
-import { MenuTriggerContext } from "@proyecto-viviana/solidaria-components";
-import { createStringFormatter, filterDOMProps } from "@proyecto-viviana/solidaria";
+// Port of packages/@react-spectrum/s2/src/ContextualHelp.tsx.
+import { createContext, createUniqueId, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { MenuTriggerContext, PopoverTriggerContext } from "@proyecto-viviana/solidaria-components";
+import { mergeProps, createStringFormatter, filterDOMProps } from "@proyecto-viviana/solidaria";
 import { Popover, type PopoverProps, type PopoverTriggerProps } from "../popover";
 import { PopoverTrigger } from "../popover";
 import { ActionButton, type ActionButtonSize } from "../button/ActionButton";
@@ -17,6 +12,7 @@ import { ContentContext, FooterContext, HeadingContext, TextContext } from "../t
 import { HelpCircleIcon } from "../icon/s2wf-icons/HelpCircleIcon";
 import { InfoCircleIcon } from "../icon/s2wf-icons/InfoCircleIcon";
 import { s2IntlStrings, type S2IntlStrings } from "../intl";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -149,6 +145,13 @@ const contextualHelpFooter = style({
 export function ContextualHelpPopover(props: ContextualHelpPopoverProps): JSX.Element {
   const [local, popoverProps] = splitProps(props, ["children", "class"]);
   const menuTriggerContext = useContext(MenuTriggerContext);
+  const popoverTriggerContext = useContext(PopoverTriggerContext);
+  // UnavailableMenuItemTrigger renders only the item when available. Solid still
+  // evaluates the second child when reading `props.children`, so this popover
+  // must no-op unless it is actually composed inside a SubmenuTrigger.
+  if (popoverTriggerContext?.trigger !== "SubmenuTrigger") {
+    return null;
+  }
   const titleId = createUniqueId();
   const menuTriggerMenuProps = () => menuTriggerContext?.menuProps as { id?: string } | undefined;
   const popoverId = () => popoverProps.id ?? menuTriggerMenuProps()?.id;
@@ -203,15 +206,13 @@ export function ContextualHelpPopover(props: ContextualHelpPopoverProps): JSX.El
     >
       <div class={contextualHelpFrame}>
         <div class={contextualHelpInner} style={contextualHelpInnerStyle}>
-          <TextContext.Provider value={textContext}>
-            <ContentContext.Provider value={contentContext}>
-              <FooterContext.Provider value={footerContext}>
-                <HeadingContext.Provider value={headingContext}>
-                  {local.children}
-                </HeadingContext.Provider>
-              </FooterContext.Provider>
-            </ContentContext.Provider>
-          </TextContext.Provider>
+          <TextContext value={textContext}>
+            <ContentContext value={contentContext}>
+              <FooterContext value={footerContext}>
+                <HeadingContext value={headingContext}>{local.children}</HeadingContext>
+              </FooterContext>
+            </ContentContext>
+          </TextContext>
         </div>
       </div>
     </Popover>
@@ -241,6 +242,8 @@ export function ContextualHelp(props: ContextualHelpProps): JSX.Element {
     "aria-labelledby",
     "aria-describedby",
     "aria-details",
+    "placement",
+    "shouldFlip",
   ]);
   const titleId = createUniqueId();
   const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
@@ -294,6 +297,8 @@ export function ContextualHelp(props: ContextualHelpProps): JSX.Element {
   const footerContext = {
     styles: contextualHelpFooter,
   };
+  const overlayPlacement = () => local.placement ?? "bottom start";
+  const overlayShouldFlip = () => local.shouldFlip ?? true;
   const popoverTriggerProps: Partial<PopoverTriggerProps> = {
     get defaultOpen() {
       return local.defaultOpen;
@@ -315,7 +320,6 @@ export function ContextualHelp(props: ContextualHelpProps): JSX.Element {
         aria-labelledby={local["aria-labelledby"]}
         aria-describedby={local["aria-describedby"]}
         aria-details={local["aria-details"]}
-        aria-haspopup="dialog"
         ref={(element: HTMLButtonElement) => {
           triggerRef(element);
         }}
@@ -331,23 +335,21 @@ export function ContextualHelp(props: ContextualHelpProps): JSX.Element {
         {...popoverProps}
         aria-labelledby={titleId}
         hideArrow
-        placement={popoverProps.placement ?? "bottom start"}
+        placement={overlayPlacement()}
         containerPadding={popoverProps.containerPadding ?? 8}
         offset={8}
-        shouldFlip={popoverProps.shouldFlip ?? true}
+        shouldFlip={overlayShouldFlip()}
         padding="none"
       >
         <div class={contextualHelpFrame}>
           <div class={contextualHelpInner} style={contextualHelpInnerStyle}>
-            <TextContext.Provider value={textContext}>
-              <ContentContext.Provider value={contentContext}>
-                <FooterContext.Provider value={footerContext}>
-                  <HeadingContext.Provider value={headingContext}>
-                    {content()}
-                  </HeadingContext.Provider>
-                </FooterContext.Provider>
-              </ContentContext.Provider>
-            </TextContext.Provider>
+            <TextContext value={textContext}>
+              <ContentContext value={contentContext}>
+                <FooterContext value={footerContext}>
+                  <HeadingContext value={headingContext}>{content()}</HeadingContext>
+                </FooterContext>
+              </ContentContext>
+            </TextContext>
           </div>
         </div>
       </Popover>

package/src/dialog/AlertDialog.tsx

@@ -1,4 +1,20 @@
-import { type JSX, Show, splitProps } 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/AlertDialog.tsx
+
+// Port of packages/@react-spectrum/s2/src/AlertDialog.tsx.
+import { Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createStringFormatter } from "@proyecto-viviana/solidaria";
 import { Button, type ButtonVariant } from "../button";
 import { ButtonGroup } from "../buttongroup";
@@ -10,6 +26,7 @@ import { s2IntlStrings } from "../intl";
 import { Content, Heading } from "../text";
 import { style } from "../style" with { type: "macro" };
 import { Dialog, DialogTrigger, type DialogRenderProps, type DialogSize } from "./Dialog";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type AlertDialogVariant =
   | "confirmation"
@@ -132,7 +149,7 @@ export function AlertDialog(props: AlertDialogProps): JSX.Element {
     >
       {({ close }: DialogRenderProps) => (
         <>
-          <IconContext.Provider value={{ styles: () => icon({ variant: variant() }) }}>
+          <IconContext value={{ styles: () => icon({ variant: variant() }) }}>
             <Heading slot="title">
               <CenterBaseline>
                 <Show when={variant() === "error"}>
@@ -150,7 +167,7 @@ export function AlertDialog(props: AlertDialogProps): JSX.Element {
                 {local.title}
               </CenterBaseline>
             </Heading>
-          </IconContext.Provider>
+          </IconContext>
           <Content>{local.children}</Content>
           <ButtonGroup>
             <Show when={local.cancelLabel}>

package/src/dialog/Dialog.tsx

@@ -1,4 +1,33 @@
-import { type JSX, Show, 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/CloseButton.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/CustomDialog.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Dialog.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/DialogContainer.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/DialogTrigger.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/FullscreenDialog.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Modal.tsx
+
+// Port of packages/@react-spectrum/s2/src/Dialog.tsx.
+// Port of packages/@react-spectrum/s2/src/DialogTrigger.tsx.
+// Port of packages/@react-spectrum/s2/src/DialogContainer.tsx.
+// Port of packages/@react-spectrum/s2/src/CloseButton.tsx.
+// Port of packages/@react-spectrum/s2/src/FullscreenDialog.tsx.
+// Port of packages/@react-spectrum/s2/src/CustomDialog.tsx.
+// Port of packages/@react-spectrum/s2/src/Modal.tsx.
+
+import { Show, createContext, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Button as HeadlessButton,
   ButtonContext as HeadlessButtonContext,
@@ -8,6 +37,7 @@ import {
   Heading as HeadlessDialogHeading,
   Modal as HeadlessModal,
   ModalOverlay as HeadlessModalOverlay,
+  TextContext as RACTextContext,
   useDialogTrigger,
   type ButtonRenderProps,
   type DialogProps as HeadlessDialogProps,
@@ -40,6 +70,7 @@ import {
 } from "../text";
 import type { StyleString } from "../style";
 import { baseColor, focusRing, setColorScheme, style } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type DialogSize = "S" | "M" | "L" | "XL" | "sm" | "md" | "lg" | "fullscreen";
 export type CustomDialogSize = "S" | "M" | "L" | "fullscreen" | "fullscreenTakeover";
@@ -267,8 +298,12 @@ const dialogModal = style<ModalRenderProps & { size: ModalDialogSize }>({
   display: "flex",
   flexDirection: "column",
   pointerEvents: "auto",
+  /* Terminal Glass corner, not Spectrum's. `xl` is 16px — the S2 modal corner; the
+   * register's largest drawn corner is 12 (`lg`, style/spectrum-theme.ts), and a modal
+   * is the same tier-2 float as a popover, only bigger. A takeover has no corner to
+   * round. */
   borderRadius: {
-    default: "xl",
+    default: "lg",
     size: {
       fullscreenTakeover: "none",
     },
@@ -309,14 +344,31 @@ const dialogModal = style<ModalRenderProps & { size: ModalDialogSize }>({
       fullscreenTakeover: "[100vh]",
     },
   },
+  /* Terminal Glass tier 2. A modal lands over the whole app — panel, card and all — so
+   * it takes the FLOAT surface (`var(--surface-float)`, alpha .9) rather than the card's
+   * .55: at card weight the page's own layout reads straight through the dialog's body
+   * copy, which is exactly what a modal exists to stop. Kept behind the
+   * `--s2-container-bg` custom property because the theme's auto/overlay color helpers
+   * (`autoStaticColor`, style/tokens.ts) compute the dialog's ink against it. */
   "--s2-container-bg": {
     type: "backgroundColor",
-    value: "layer-2",
+    value: "float",
   },
   backgroundColor: "--s2-container-bg",
-  // Glasselated: frost the scene behind the surface — the container bg is the
-  // translucent `--surface-card`; the blur is what makes it read as glass.
-  backdropFilter: "var(--blur-card)",
+  // The blur is what makes the translucent fill read as glass rather than as a weak
+  // colour; `--blur-clear` is the float tier's, matching Popover, Menu and Toast.
+  backdropFilter: "var(--blur-clear)",
+  /* The float is the one tier that casts: `--shadow-float` (the handoff's `sh2`) plus
+   * the `--edge-glass` rim, the same pair the handoff puts on its own tier-2 overlays.
+   * The dialog had NO elevation at all — a takeover-sized surface sitting flush on the
+   * scrim. Not applied to `fullscreenTakeover`, which covers the viewport and has no
+   * edge left to light. */
+  boxShadow: {
+    default: "[var(--shadow-float), var(--edge-glass)]",
+    size: {
+      fullscreenTakeover: "none",
+    },
+  },
   // Transparent outline for WHCM.
   outlineStyle: "solid",
   outlineWidth: 1,
@@ -462,7 +514,7 @@ const closeButton = style<
         default: baseColor("neutral"),
         isDisabled: "disabled",
         isStaticColor: {
-          default: "white",
+          default: "transparent-overlay-1000",
           isDisabled: "transparent-overlay-400",
         },
         forcedColors: {
@@ -498,7 +550,10 @@ const dialogFooterWrapper = style({
   flexWrap: "wrap",
   gap: 24,
   paddingX: 32,
-  paddingTop: 0,
+  paddingTop: {
+    default: 32,
+    ":empty": 0,
+  },
   paddingBottom: 32,
 });
 
@@ -511,7 +566,9 @@ const dialogFooter = style({
   paddingTop: 16,
   borderTopStyle: "solid",
   borderTopWidth: 1,
-  borderColor: "gray-200",
+  /* The register's hairline. `gray-200` is a ramp stop, and over the float fill it
+   * reads as a second, heavier edge inside the dialog's own rim. */
+  borderColor: "[var(--border-hair)]",
 });
 
 const dialogButtonGroup = style({
@@ -536,7 +593,7 @@ const fullscreenDialogHeader = style({
   paddingY: 24,
   borderBottomStyle: "solid",
   borderBottomWidth: 1,
-  borderColor: "gray-200",
+  borderColor: "[var(--border-hair)]",
 });
 
 const fullscreenDialogContent = style({
@@ -609,19 +666,19 @@ interface SlotProvidersProps {
 
 function SlotProviders(props: SlotProvidersProps): JSX.Element {
   return (
-    <ImageContext.Provider value={props.image ?? null}>
-      <HeadingContext.Provider value={props.heading ?? null}>
-        <HeaderContext.Provider value={props.header ?? null}>
-          <ContentContext.Provider value={props.content ?? null}>
-            <FooterContext.Provider value={props.footer ?? null}>
-              <ButtonGroupContext.Provider value={props.buttonGroup ?? null}>
+    <ImageContext value={props.image ?? null}>
+      <HeadingContext value={props.heading ?? null}>
+        <HeaderContext value={props.header ?? null}>
+          <ContentContext value={props.content ?? null}>
+            <FooterContext value={props.footer ?? null}>
+              <ButtonGroupContext value={props.buttonGroup ?? null}>
                 {props.children}
-              </ButtonGroupContext.Provider>
-            </FooterContext.Provider>
-          </ContentContext.Provider>
-        </HeaderContext.Provider>
-      </HeadingContext.Provider>
-    </ImageContext.Provider>
+              </ButtonGroupContext>
+            </FooterContext>
+          </ContentContext>
+        </HeaderContext>
+      </HeadingContext>
+    </ImageContext>
   );
 }
 
@@ -665,13 +722,34 @@ function DialogHeaderSlots(props: { children: JSX.Element }): JSX.Element {
   );
 }
 
+function descriptionIdFromRacText(
+  racText: unknown,
+): Pick<ContentProps, "id"> | Record<string, never> {
+  if (!racText || typeof racText !== "object" || !("slots" in racText)) {
+    return {};
+  }
+
+  const description = (racText as { slots?: { description?: unknown } }).slots?.description;
+  if (!description || typeof description !== "object") {
+    return {};
+  }
+
+  const id = "id" in description ? description.id : undefined;
+  return typeof id === "string" ? { id } : {};
+}
+
 function DialogContentSlots(props: { children: JSX.Element }): JSX.Element {
+  // Upstream S2 Dialog copies RAC TextContext `slots.description` onto
+  // ContentContext so AlertDialog's `<Content>` receives the generated
+  // aria-describedby target id.
+  const racText = useContext(RACTextContext);
+
   return (
     <SlotProviders
       image={{ hidden: true }}
       heading={{ slots: { title: { isHidden: true } } }}
       header={{ isHidden: true }}
-      content={{ styles: dialogContent }}
+      content={{ styles: dialogContent, ...descriptionIdFromRacText(racText) }}
       footer={{ isHidden: true }}
       buttonGroup={{ isHidden: true }}
     >
@@ -816,8 +894,8 @@ export function Dialog(props: DialogProps): JSX.Element {
             renderDialogChildren(local.children, { close: handleDismiss });
 
           return (
-            <DialogContext.Provider value={{ close: handleDismiss }}>
-              <HeadlessButtonContext.Provider
+            <DialogContext value={{ close: handleDismiss }}>
+              <HeadlessButtonContext
                 value={{ slots: { default: {}, close: { onPress: () => handleDismiss() } } }}
               >
                 <Show
@@ -854,8 +932,8 @@ export function Dialog(props: DialogProps): JSX.Element {
                     </DialogFooterSlots>
                   </div>
                 </Show>
-              </HeadlessButtonContext.Provider>
-            </DialogContext.Provider>
+              </HeadlessButtonContext>
+            </DialogContext>
           );
         }}
       />
@@ -904,9 +982,9 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
       defaultOpen={props.defaultOpen}
       onOpenChange={props.onOpenChange}
     >
-      <DialogTriggerOptionsContext.Provider value={options()}>
+      <DialogTriggerOptionsContext value={options()}>
         <DialogTriggerChildren {...props} />
-      </DialogTriggerOptionsContext.Provider>
+      </DialogTriggerOptionsContext>
     </HeadlessDialogTrigger>
   );
 }
@@ -914,9 +992,9 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
 export function DialogContainer(props: DialogContainerProps): JSX.Element {
   return (
     <Show when={props.children}>
-      <DialogContainerContext.Provider value={{ dismiss: props.onDismiss }}>
+      <DialogContainerContext value={{ dismiss: props.onDismiss }}>
         {props.children}
-      </DialogContainerContext.Provider>
+      </DialogContainerContext>
     </Show>
   );
 }
@@ -1018,8 +1096,8 @@ export function FullscreenDialog(props: FullscreenDialogProps): JSX.Element {
             renderDialogChildren(local.children, { close: handleDismiss });
 
           return (
-            <DialogContext.Provider value={{ close: handleDismiss }}>
-              <HeadlessButtonContext.Provider
+            <DialogContext value={{ close: handleDismiss }}>
+              <HeadlessButtonContext
                 value={{ slots: { default: {}, close: { onPress: () => handleDismiss() } } }}
               >
                 <div class={fullscreenDialogHeader}>
@@ -1029,8 +1107,8 @@ export function FullscreenDialog(props: FullscreenDialogProps): JSX.Element {
                 <div class={fullscreenDialogContent}>
                   <DialogContentSlots>{renderedChildren()}</DialogContentSlots>
                 </div>
-              </HeadlessButtonContext.Provider>
-            </DialogContext.Provider>
+              </HeadlessButtonContext>
+            </DialogContext>
           );
         }}
       />
@@ -1088,13 +1166,13 @@ export function CustomDialog(props: CustomDialogProps): JSX.Element {
             renderDialogChildren(local.children, { close: handleDismiss });
 
           return (
-            <DialogContext.Provider value={{ close: handleDismiss }}>
-              <HeadlessButtonContext.Provider
+            <DialogContext value={{ close: handleDismiss }}>
+              <HeadlessButtonContext
                 value={{ slots: { default: {}, close: { onPress: () => handleDismiss() } } }}
               >
                 <DialogTitleSlots>{renderedChildren()}</DialogTitleSlots>
-              </HeadlessButtonContext.Provider>
-            </DialogContext.Provider>
+              </HeadlessButtonContext>
+            </DialogContext>
           );
         }}
       />