LinkButton: show icons in Cambio (#353)

Cambly · Mar 25, 2024 · e0c8259 · e0c8259
1 parent f496dfe
commit e0c8259
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 17 deletions.
diff --git a/.changeset/poor-maps-yawn.md b/.changeset/poor-maps-yawn.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+LinkButton: show icons in Cambio
diff --git a/packages/syntax-core/src/Button/Button.tsx b/packages/syntax-core/src/Button/Button.tsx
@@ -181,8 +181,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           themeName === "classic" ? styles[size] : styles[`${size}Cambio`],
           {
             [styles.fullWidth]: fullWidth,
-            [styles.buttonGap]:
-              themeName === "classic" && (size === "lg" || size === "md"),
+            [styles.buttonGap]: size === "lg" || size === "md",
             [styles.secondaryBorder]:
               themeName === "classic" && color === "secondary",
             [styles.secondaryDestructiveBorder]:

diff --git a/packages/syntax-core/src/LinkButton/LinkButton.tsx b/packages/syntax-core/src/LinkButton/LinkButton.tsx
@@ -165,8 +165,7 @@ const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
           {
             [buttonStyles.fullWidth]: fullWidth,
             [styles.fitContent]: !fullWidth,
-            [buttonStyles.buttonGap]:
-              themeName === "classic" && (size === "lg" || size === "md"),
+            [buttonStyles.buttonGap]: size === "lg" || size === "md",
             [buttonStyles.secondaryBorder]:
               themeName === "classic" && color === "secondary",
             [buttonStyles.secondaryDestructiveBorder]:
@@ -175,7 +174,7 @@ const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
         )}
         onClick={onClick}
       >
-        {StartIcon && themeName === "classic" && (
+        {StartIcon && (
           <StartIcon
             className={classNames(
               buttonStyles.icon,
@@ -195,7 +194,7 @@ const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
             {text}
           </span>
         </Typography>
-        {EndIcon && themeName === "classic" && (
+        {EndIcon && (
           <EndIcon
             className={classNames(
               buttonStyles.icon,

diff --git a/packages/syntax-core/src/RichSelect/RichSelectList.tsx b/packages/syntax-core/src/RichSelect/RichSelectList.tsx
@@ -178,25 +178,21 @@ function RichSelectList(props: RichSelectListProps): ReactElement {
       <div
         className={classNames(styles.selectContainer, {
           [styles.opacityOverlay]: disabled,
-          [styles.selectContainerCambio]: themeName === "cambio",
         })}
         onClick={onClick}
       >
         {label && (
           <>
             <ReactAriaLabel
               data-testid={[dataTestId, "label"].filter(Boolean).join("-")}
-              className={classNames(
-                themeName === "cambio" && styles.labelCambio,
-              )}
               {...labelProps}
               onClick={() => {
                 if (disabled) return;
                 fieldRef.current?.focus();
                 setInteractionModality("keyboard"); // Show the focus ring so the user knows where focus went
               }}
             >
-              <Box paddingX={themeName === "classic" ? 1 : 3}>
+              <Box paddingX={1}>
                 <Typography size={100} color="gray700">
                   {label}
                 </Typography>
@@ -279,7 +275,7 @@ function RichSelectList(props: RichSelectListProps): ReactElement {
           </TapArea>
         </Popover>
         {(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/SelectList/SelectList.module.css b/packages/syntax-core/src/SelectList/SelectList.module.css
@@ -4,10 +4,6 @@
   gap: 8px;
 }
 
-.selectContainerCambio {
-  position: relative;
-}
-
 .opacityOverlay {
   opacity: 0.5;
 }

diff --git a/packages/syntax-core/src/SelectList/SelectList.tsx b/packages/syntax-core/src/SelectList/SelectList.tsx
@@ -109,7 +109,6 @@ export default function SelectList({
     <div
       className={classNames(styles.selectContainer, {
         [styles.opacityOverlay]: disabled,
-        [styles.selectContainerCambio]: themeName === "cambio",
       })}
     >
       {label && (