OtherTokens section improvements

buildo · Nov 24, 2023 · f6cf30d · f6cf30d
1 parent 15b4a57
commit f6cf30d
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 45 deletions.
diff --git a/packages/bento-design-system/src/Modal/Modal.tsx b/packages/bento-design-system/src/Modal/Modal.tsx
@@ -38,17 +38,21 @@ type Props = {
   size?: ModalSize;
   kind?: ModalKind;
   autoFocus?: boolean;
+  portalContainer?: HTMLElement;
 };
 
-type CustomModalProps = Pick<Props, "children" | "isDestructive" | "size" | "autoFocus"> & {
+type CustomModalProps = Pick<
+  Props,
+  "children" | "isDestructive" | "size" | "autoFocus" | "portalContainer"
+> & {
   ["aria-label"]: string;
 };
 
 export function CustomModal(props: CustomModalProps) {
   const config = useBentoConfig().modal;
   const ref = useRef<HTMLDivElement>(null);
   const { overlayProps, underlayProps } = useOverlay({ ...props, isOpen: true }, ref);
-  const createPortal = useCreatePortal();
+  const createPortal = useCreatePortal(props.portalContainer);
 
   usePreventScroll();
 

diff --git a/packages/bento-design-system/src/util/useCreatePortal.tsx b/packages/bento-design-system/src/util/useCreatePortal.tsx
@@ -4,11 +4,13 @@ import { Children } from "./Children";
 import { useIsSSR } from "@react-aria/ssr";
 import { BentoThemePortalProvider } from "../BentoThemeContext";
 
-export function useCreatePortal(): (children: Children) => ReactPortal | null {
+export function useCreatePortal(
+  portalContainer?: HTMLElement
+): (children: Children) => ReactPortal | null {
   const isSSR = useIsSSR();
 
   return (children) => {
     const content = <BentoThemePortalProvider>{children}</BentoThemePortalProvider>;
-    return isSSR ? null : createReactPortal(content, document.body);
+    return isSSR ? null : createReactPortal(content, portalContainer ?? document.body);
   };
 }
diff --git a/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx b/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
@@ -15,7 +15,7 @@ import { useTranslation } from "react-i18next";
 import { Playground as _Playground } from "./Playground";
 import { ThemeConfig } from "../ConfiguratorStatusContext";
 import { useConfiguredTheme } from "../utils/preview";
-import { ColorKey, ColorToken, stepNames } from "../utils/paletteUtils";
+import { getPaletteStep, getRelativeStep } from "../utils/paletteUtils";
 
 type Props = {
   tokens: Pick<
@@ -128,38 +128,6 @@ function Playground({ hierarchy }: { hierarchy: ButtonProps["hierarchy"] }) {
   );
 }
 
-function getRelativeStep(colorToken: ColorToken, gap: number): ColorToken {
-  if (colorToken.colorKey === "black" || colorToken.colorKey === "white") {
-    return { colorKey: "black", alpha: colorToken.alpha };
-  }
-  const [palette, step] = colorToken.colorKey.split("-");
-  const stepIndex = stepNames.indexOf(step as (typeof stepNames)[number]);
-  const nextStepIndex = stepIndex + gap;
-  if (stepNames[nextStepIndex] != null) {
-    return {
-      colorKey: `${palette}-${stepNames[nextStepIndex]}` as ColorKey,
-      alpha: colorToken.alpha,
-    };
-  } else {
-    return { colorKey: "black", alpha: colorToken.alpha };
-  }
-}
-
-function getPaletteStep(
-  colorKey: ColorKey,
-  step: (typeof stepNames)[number],
-  alpha: number
-): ColorToken {
-  if (colorKey === "black" || colorKey === "white") {
-    return { colorKey: "black", alpha };
-  }
-  const [palette] = colorKey.split("-");
-  return {
-    colorKey: `${palette}-${step}` as ColorKey,
-    alpha,
-  };
-}
-
 function capitalizeFirstLetter(value: string) {
   return value.charAt(0).toUpperCase() + value.slice(1);
 }

diff --git a/packages/configuration-builder/src/TokensSection/OtherTokens.tsx b/packages/configuration-builder/src/TokensSection/OtherTokens.tsx
@@ -1,8 +1,22 @@
 import { useTranslation } from "react-i18next";
 import { ThemeConfig } from "../ConfiguratorStatusContext";
 import { Playground as _Playground } from "./Playground";
-import { Column, Columns, Title, Stack, Box, Body, Link } from "@buildo/bento-design-system";
+import {
+  Column,
+  Columns,
+  Title,
+  Stack,
+  Box,
+  Body,
+  Link,
+  Modal,
+  unsafeLocalizedString,
+  withBentoTheme,
+} from "@buildo/bento-design-system";
 import { ColorSelector } from "./ColorSelector";
+import { useRef } from "react";
+import { getRelativeStep } from "../utils/paletteUtils";
+import { useConfiguredTheme } from "../utils/preview";
 
 type Props = {
   tokens: Pick<
@@ -20,23 +34,81 @@ type Props = {
 function ModalPlayground() {
   const { t } = useTranslation();
 
+  const ExampleModal = withBentoTheme(
+    {
+      backgroundColor: {
+        backgroundDarkScrim: "transparent",
+      },
+    },
+    Modal
+  );
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
   return (
     <_Playground>
-      <Box position="relative" display="flex" padding={32} style={{ height: 400 }}>
+      <Box
+        position="relative"
+        display="flex"
+        padding={32}
+        style={{
+          height: 400,
+          // Note: the following transform doesn't alter the Box in any way, but it creates a context for the
+          // fixed position of the modal overlay, so that it's not relative to the body but to this Box instead.
+          transform: "scale(1)",
+        }}
+        ref={containerRef}
+      >
         <Body size="medium">{t("LoremIpsum.longText")}</Body>
         <Box position="absolute" height="full" width="full" top={0} left={0} display="flex">
           <Box display="flex" flexGrow={1}>
             <Box flex={1} height="full" background="backgroundDarkScrim" />
             <Box flex={1} height="full" background="backgroundLightScrim" />
           </Box>
         </Box>
+        <ExampleModal
+          size="small"
+          title={t("TokensSection.Step.other.modalTitle")}
+          onClose={() => {}}
+          portalContainer={containerRef.current ?? undefined}
+          primaryAction={{
+            label: unsafeLocalizedString(t("TokensSection.Step.other.modalAction")),
+            onPress: () => {},
+          }}
+          secondaryAction={{
+            label: unsafeLocalizedString(t("TokensSection.Step.other.modalCancel")),
+            onPress: () => {},
+          }}
+          autoFocus={false}
+        >
+          <Body size="medium">{t("TokensSection.Step.other.modalContent")}</Body>
+        </ExampleModal>
       </Box>
     </_Playground>
   );
 }
 
 function LinkPlayground() {
   const { t } = useTranslation();
+  const theme = useConfiguredTheme();
+
+  const HoverLink = withBentoTheme(
+    {
+      interactiveForegroundColor: {
+        linkEnabled: theme.interactiveForegroundColor?.linkHover,
+      },
+    },
+    Link
+  );
+
+  const FocusLink = withBentoTheme(
+    {
+      interactiveForegroundColor: {
+        linkEnabled: theme.interactiveForegroundColor?.linkFocus,
+      },
+    },
+    Link
+  );
 
   return (
     <_Playground>
@@ -50,9 +122,9 @@ function LinkPlayground() {
         >
           <Stack space={24}>
             <Link label={t("TokensSection.Step.other.linkEnabled")} />
-            <Link label={t("TokensSection.Step.other.linkHover")} />
-            <Link label={t("TokensSection.Step.other.linkFocus")} />
-            <Link label={t("TokensSection.Step.other.linkDisabled")} />
+            <HoverLink label={t("TokensSection.Step.other.linkHover")} />
+            <FocusLink label={t("TokensSection.Step.other.linkFocus")} />
+            <Link isDisabled label={t("TokensSection.Step.other.linkDisabled")} />
           </Stack>
         </Box>
         <Box
@@ -66,9 +138,9 @@ function LinkPlayground() {
         >
           <Stack space={24}>
             <Link kind="inverse" label={t("TokensSection.Step.other.linkEnabled")} />
-            <Link kind="inverse" label={t("TokensSection.Step.other.linkHover")} />
-            <Link kind="inverse" label={t("TokensSection.Step.other.linkFocus")} />
-            <Link kind="inverse" label={t("TokensSection.Step.other.linkDisabled")} />
+            <HoverLink kind="inverse" label={t("TokensSection.Step.other.linkHover")} />
+            <FocusLink kind="inverse" label={t("TokensSection.Step.other.linkFocus")} />
+            <Link isDisabled kind="inverse" label={t("TokensSection.Step.other.linkDisabled")} />
           </Stack>
         </Box>
       </Box>
@@ -145,6 +217,8 @@ export function OtherTokens(props: Props) {
                     interactiveForegroundColor: {
                       ...props.tokens.interactiveForegroundColor,
                       linkEnabled: value,
+                      linkHover: getRelativeStep(value, 2),
+                      linkFocus: getRelativeStep(value, 2),
                     },
                   })
                 }

diff --git a/packages/configuration-builder/src/locales/en.json b/packages/configuration-builder/src/locales/en.json
@@ -164,6 +164,10 @@
     "TokensSection.Step.inputs.label": "Label",
     "TokensSection.Step.inputs.placeholder": "Placeholder",
     "TokensSection.Step.other": "Other",
+    "TokensSection.Step.other.modalTitle": "Title",
+    "TokensSection.Step.other.modalContent": "Modal content.",
+    "TokensSection.Step.other.modalAction": "Action",
+    "TokensSection.Step.other.modalCancel": "Cancel",
     "TokensSection.Step.other.linkEnabled": "Link Enabled",
     "TokensSection.Step.other.linkHover": "Link Hover",
     "TokensSection.Step.other.linkFocus": "Link Focus",

diff --git a/packages/configuration-builder/src/utils/paletteUtils.ts b/packages/configuration-builder/src/utils/paletteUtils.ts
@@ -108,3 +108,35 @@ export function colorTokenToRGBA(colors: ThemeConfig["colors"]) {
 export function colorToken(colorKey: ColorKey, alpha?: number): ColorToken {
   return { colorKey, alpha: alpha ?? 100 };
 }
+
+export function getRelativeStep(colorToken: ColorToken, gap: number): ColorToken {
+  if (colorToken.colorKey === "black" || colorToken.colorKey === "white") {
+    return { colorKey: "black", alpha: colorToken.alpha };
+  }
+  const [palette, step] = colorToken.colorKey.split("-");
+  const stepIndex = stepNames.indexOf(step as (typeof stepNames)[number]);
+  const nextStepIndex = stepIndex + gap;
+  if (stepNames[nextStepIndex] != null) {
+    return {
+      colorKey: `${palette}-${stepNames[nextStepIndex]}` as ColorKey,
+      alpha: colorToken.alpha,
+    };
+  } else {
+    return { colorKey: "black", alpha: colorToken.alpha };
+  }
+}
+
+export function getPaletteStep(
+  colorKey: ColorKey,
+  step: (typeof stepNames)[number],
+  alpha: number
+): ColorToken {
+  if (colorKey === "black" || colorKey === "white") {
+    return { colorKey: "black", alpha };
+  }
+  const [palette] = colorKey.split("-");
+  return {
+    colorKey: `${palette}-${step}` as ColorKey,
+    alpha,
+  };
+}