Cambio updates after bugbash (#339)

Cambly · Mar 19, 2024 · d373edc · d373edc
1 parent aa42573
commit d373edc
Show file tree

Hide file tree

Showing 25 changed files with 133 additions and 126 deletions.
diff --git a/.changeset/thick-seas-provide.md b/.changeset/thick-seas-provide.md
@@ -0,0 +1,7 @@
+---
+"@cambly/syntax-floating-components": minor
+"@cambly/syntax-core": minor
+"@syntax/storybook": minor
+---
+
+Cambio updates after bug bash: bring back elevation / Avatar & GroupAvatar sizes / Button icons / Form elements regular labels
diff --git a/apps/storybook/assets/images/defaultAvatar.svg b/apps/storybook/assets/images/defaultAvatar.svg
diff --git a/packages/syntax-core/src/Avatar/Avatar.module.css b/packages/syntax-core/src/Avatar/Avatar.module.css
@@ -15,7 +15,12 @@
 }
 
 .avatarImageOutlineCambio {
-  border: 2px solid var(--color-cambio-gray-100);
+  border: 1px solid var(--color-cambio-gray-100);
+}
+
+.xs {
+  width: 24px;
+  height: 24px;
 }
 
 .sm {
@@ -38,6 +43,11 @@
   height: 129px;
 }
 
+.xsCambio {
+  width: 24px;
+  height: 24px;
+}
+
 .smCambio {
   width: 32px;
   height: 32px;

diff --git a/packages/syntax-core/src/Avatar/Avatar.stories.tsx b/packages/syntax-core/src/Avatar/Avatar.stories.tsx
@@ -13,7 +13,7 @@ export default {
   },
   argTypes: {
     size: {
-      options: ["sm", "md", "lg", "xl"],
+      options: ["xs", "sm", "md", "lg", "xl"],
       control: { type: "radio" },
     },
   },

diff --git a/packages/syntax-core/src/Avatar/Avatar.tsx b/packages/syntax-core/src/Avatar/Avatar.tsx
@@ -6,22 +6,25 @@ import { useAvatarGroup } from "../AvatarGroup/AvatarGroup";
 import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 const sizeToIconStyles = {
+  xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
   sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
   md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },
   lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },
   xl: { bottom: 12, marginInlineEnd: 12, height: 16, width: 16 },
 } as const;
 
 const sizeToMarginClassic = {
+  xs: -16,
   sm: -16,
   md: -28,
   lg: -48,
   xl: -88,
 } as const;
 
 const sizeToMarginCambio = {
-  sm: -12,
-  md: -20,
+  xs: -10,
+  sm: -14,
+  md: -22,
   lg: -28,
   xl: -28,
 } as const;
@@ -36,7 +39,7 @@ function AvatarInternal({
   accessibilityLabel: string;
   icon?: React.ReactElement;
   outline?: boolean;
-  size?: "sm" | "md" | "lg" | "xl";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   src: string;
 }): ReactElement {
   const { themeName } = useTheme();
@@ -110,14 +113,15 @@ const Avatar = ({
    * * `xl`: 128px
    *
    * Cambio:
+   * * `xs`: 24px (Cambio only)
    * * `sm`: 32px
    * * `md`: 48px
    * * `lg`: 64px
    * * `xl`: 64px (deprecated, maps to `lg` in Cambio)
    *
    * @defaultValue `md`
    */
-  size?: "sm" | "md" | "lg" | "xl";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   /**
    * URL of the image to display as the avatar.
    */

diff --git a/packages/syntax-core/src/AvatarGroup/AvatarGroup.stories.tsx b/packages/syntax-core/src/AvatarGroup/AvatarGroup.stories.tsx
@@ -18,7 +18,7 @@ export default {
   },
   argTypes: {
     size: {
-      options: ["sm", "md", "lg", "xl"],
+      options: ["xs", "sm", "md", "lg", "xl"],
       control: { type: "radio" },
     },
     orientation: {

diff --git a/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx b/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx
@@ -8,6 +8,7 @@ import Box from "../Box/Box";
 import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 type Size =
+  | "xs"
   | "sm"
   | "md"
   | "lg"
@@ -56,6 +57,7 @@ export default function AvatarGroup({
    * * `xl`: 128px
    *
    * Cambio:
+   * * `xs`: 24px (Cambio only)
    * * `sm`: 32px
    * * `md`: 48px
    * * `lg`: 64px

diff --git a/packages/syntax-core/src/Button/Button.tsx b/packages/syntax-core/src/Button/Button.tsx
@@ -99,12 +99,10 @@ type ButtonProps = {
   fullWidth?: boolean;
   /**
    * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
-   * Note: startIcon is not supported in the Cambio theme
    */
   startIcon?: React.ComponentType<{ className?: string }>;
   /**
    * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
-   * Note: endIcon is not supported in the Cambio theme
    */
   endIcon?: React.ComponentType<{ className?: string }>;
   /**
@@ -189,7 +187,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           },
         )}
       >
-        {!loading && StartIcon && themeName === "classic" && (
+        {!loading && StartIcon && (
           <StartIcon className={classNames(styles.icon, iconSize[size])} />
         )}
         {((loading && loadingText) || (!loading && text)) && (
@@ -209,7 +207,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             </Typography>
           </Box>
         )}
-        {!loading && EndIcon && themeName === "classic" && (
+        {!loading && EndIcon && (
           <EndIcon className={classNames(styles.icon, iconSize[size])} />
         )}
         {loading && (

diff --git a/packages/syntax-core/src/Checkbox/Checkbox.module.css b/packages/syntax-core/src/Checkbox/Checkbox.module.css
@@ -79,3 +79,11 @@
 .mdBorderRadius {
   border-radius: 8px;
 }
+
+.checkmark {
+  fill: var(--color-base-black);
+}
+
+.checkmarkError {
+  fill: var(--color-base-destructive-900);
+}
diff --git a/packages/syntax-core/src/Checkbox/Checkbox.tsx b/packages/syntax-core/src/Checkbox/Checkbox.tsx
@@ -119,14 +119,22 @@ const Checkbox = ({
       )}
     >
       <div className={checked ? checkedStyling : uncheckedStyling}>
-        {checked && (
+        {checked && themeName === "classic" && (
           <svg aria-hidden="true" viewBox="0 0 24 24" width={iconWidth[size]}>
             <path
-              fill={themeName === "classic" ? "#fff" : "#050500"}
+              fill="#fff"
               d="m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
             ></path>
           </svg>
         )}
+        {checked && themeName === "cambio" && (
+          <svg aria-hidden="true" viewBox="0 0 24 24" width={iconWidth[size]}>
+            <path
+              className={error ? styles.checkmarkError : styles.checkmark}
+              d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z"
+            ></path>
+          </svg>
+        )}
       </div>
       <input
         data-testid={dataTestId}

diff --git a/packages/syntax-core/src/Chip/Chip.stories.tsx b/packages/syntax-core/src/Chip/Chip.stories.tsx
@@ -18,6 +18,9 @@ export default {
     text: "text on chip",
     size: "sm",
     on: "lightBackground",
+    disabled: false,
+    "data-testid": "",
+    dangerouslyForceFocusStyles: false,
   },
   argTypes: {
     on: {

diff --git a/packages/syntax-core/src/Chip/Chip.tsx b/packages/syntax-core/src/Chip/Chip.tsx
@@ -159,6 +159,7 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
               themeName === "classic" ? typographySize[transformedSize] : 100
             }
             color={color}
+            weight={themeName === "classic" ? "regular" : "medium"}
           >
             {text}
           </Typography>

diff --git a/packages/syntax-core/src/Dialog/Dialog.tsx b/packages/syntax-core/src/Dialog/Dialog.tsx
@@ -15,6 +15,7 @@ import styles from "./Dialog.module.css";
 import { Dialog as ReactAriaDialog } from "react-aria-components";
 import classNames from "classnames";
 import type Box from "../Box/Box";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 type DialogSize = "sm" | "md" | "lg";
 type DialogRounding = "lg" | "xl";
@@ -71,6 +72,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
   } = props;
 
   const { padding } = useContext(DialogContext);
+  const { themeName } = useTheme();
 
   return (
     <ReactAriaDialog
@@ -89,7 +91,11 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
         colorStyles.whiteBackgroundColor,
         paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],
         paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],
-        roundingStyles[`rounding${sizeToRounding[size]}`],
+        roundingStyles[
+          themeName === "classic"
+            ? (`rounding${sizeToRounding[size]}` as const)
+            : "roundingmdCambio"
+        ],
         elevationStyles.elevation400BoxShadow,
         layoutStyles.fullMaxHeight,
         layoutStyles.visibilityVisible,

diff --git a/packages/syntax-core/src/Modal/Modal.tsx b/packages/syntax-core/src/Modal/Modal.tsx
@@ -136,7 +136,11 @@ export default function Modal({
   /**
    * The size of the card
    *
-   * * `sm`: 400px
+   * Classic:
+   * * `sm`: 400px (Classic only)
+   * * `lg`: 600px
+   *
+   * Cambio:
    * * `lg`: 600px
    *
    *
@@ -177,8 +181,10 @@ export default function Modal({
               rounding={themeName === "classic" ? "xl" : "md"}
               display="flex"
               direction="column"
+              marginStart={4}
+              marginEnd={4}
               minWidth={240}
-              maxWidth={sizeWidth[size]}
+              maxWidth={sizeWidth[themeName === "classic" ? size : "lg"]}
               width="100%"
               dangerouslySetInlineStyle={{ __style: { overflow: "hidden" } }}
             >
@@ -218,13 +224,13 @@ export default function Modal({
               {image && <Box maxHeight={200}>{image}</Box>}
               <Box
                 display="flex"
-                gap={3}
+                gap={themeName === "classic" ? 3 : 4}
                 direction="column"
                 padding={themeName === "classic" ? 9 : 6}
               >
                 <Heading
                   as="h1"
-                  size={themeName === "classic" ? 500 : 400}
+                  size={themeName === "classic" ? 500 : 600}
                   fontStyle={themeName === "classic" ? "sans-serif" : "serif"}
                 >
                   {header}
@@ -237,6 +243,7 @@ export default function Modal({
                     display="flex"
                     direction="column"
                     gap={3}
+                    marginTop={themeName === "classic" ? 0 : 2}
                     smDirection="row"
                     smJustifyContent="end"
                     lgDirection="row"

diff --git a/packages/syntax-core/src/RadioButton/RadioButton.tsx b/packages/syntax-core/src/RadioButton/RadioButton.tsx
@@ -123,7 +123,7 @@ const RadioButton = ({
       <div className={themeName === "classic" ? classicStyles : cambioStyles} />
       {themeName === "cambio" && checked && (
         <Box
-          backgroundColor="gray900"
+          backgroundColor={error ? "destructive900" : "gray900"}
           width={size === "md" ? 12 : 8}
           height={size === "md" ? 12 : 8}
           position="absolute"

diff --git a/packages/syntax-core/src/SelectList/SelectList.module.css b/packages/syntax-core/src/SelectList/SelectList.module.css
@@ -12,17 +12,6 @@
   opacity: 0.5;
 }
 
-.labelCambio {
-  left: 1px; /* Adjust to 1px border */
-  right: 1px; /* Adjust to 1px border */
-  position: absolute;
-  border-radius: 8px;
-  pointer-events: none;
-  width: 100%;
-  padding-top: 7px;
-  z-index: 1;
-}
-
 .selectWrapper {
   display: flex;
   position: relative;
@@ -55,7 +44,7 @@
   box-sizing: border-box;
   font-size: 14px;
   height: 48px;
-  padding: 12px 36px 0 12px;
+  padding: 12px 36px 12px 12px;
 }
 
 .selectMouseFocusStyling {

diff --git a/packages/syntax-core/src/SelectList/SelectList.tsx b/packages/syntax-core/src/SelectList/SelectList.tsx
@@ -113,11 +113,8 @@ export default function SelectList({
       })}
     >
       {label && (
-        <label
-          htmlFor={selectId}
-          className={classNames(themeName === "cambio" && styles.labelCambio)}
-        >
-          <Box paddingX={themeName === "classic" ? 1 : 3}>
+        <label htmlFor={selectId}>
+          <Box paddingX={1}>
             <Typography size={100} color="gray700">
               {label}
             </Typography>
@@ -176,7 +173,7 @@ export default function SelectList({
         </div>
       </div>
       {(helperText || errorText) && (
-        <Box paddingX={themeName === "classic" ? 1 : 0}>
+        <Box paddingX={1}>
           <Typography
             size={100}
             color={errorText ? "destructive-primary" : "gray700"}

diff --git a/packages/syntax-core/src/TextArea/TextArea.module.css b/packages/syntax-core/src/TextArea/TextArea.module.css
@@ -18,13 +18,6 @@
 }
 
 .textareaCambio {
-  padding: 28px 12px 12px;
-}
-
-.fixTextareaHeight {
-  line-height: 0;
-}
-
-.labelCambio {
-  padding: 12px 0 4px;
+  display: block; /* Fixes chrome bug https://stackoverflow.com/questions/63430767; */
+  padding: 12px;
 }