@channel.io/bezier-react 3.6.5 → 4.0.0-next.0

package/src/components/AlphaIconButton/IconButton.module.scss

@@ -60,6 +60,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         background-color: $background-color;
       }
     }
+
   }
 
   &:where(.variant-secondary) {
@@ -81,6 +82,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         background-color: $background-color;
       }
     }
+
+    &:where(.color-blue) {
+      background-color: var(--color-fill-neutral-light);
+    }
   }
 
   &:where(.variant-tertiary) {
@@ -98,6 +103,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-white-absolute) {
       background-color: var(--color-fill-absolute-white-transparent);
     }
+
   }
 
   /* color */
@@ -116,6 +122,15 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.color-white-absolute) {
       color: var(--color-text-absolute-black);
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-inverse);
+      background-color: var(--color-fill-neutral-heaviest);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-inverse-heavier);
+      }
+    }
   }
 
   &:where(.variant-secondary, .variant-tertiary) {
@@ -148,6 +163,22 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
         color: var(--color-icon-neutral);
       }
     }
+
+    &:where(.variant-secondary.color-blue) {
+      color: var(--color-text-neutral);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+    }
+
+    &:where(.variant-tertiary.color-blue) {
+      color: var(--color-text-neutral-light);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+    }
   }
 
   &:where(.variant-tertiary, .variant-secondary):where(.color-white-absolute) {
@@ -158,19 +189,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
   /* border-radius */
   &:where(.shape-rectangle) {
-    $border-radius-by-size: (
-      xs: var(--radius-6),
-      s: var(--radius-7),
-      m: var(--radius-10),
-      l: var(--radius-12),
-      xl: var(--radius-14),
-    );
-
-    @each $size, $border-radius in $border-radius-by-size {
-      &:where(.size-#{$size}) {
-        border-radius: $border-radius;
-      }
-    }
+    border-radius: 9999px;
   }
 
   &:where(.shape-circle) {
@@ -196,6 +215,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       &:where(.color-light-grey) {
         background-color: var(--color-fill-neutral-heavier-hovered);
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
     }
 
     &:where(.variant-secondary) {
@@ -209,6 +232,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       &:where(.color-dark-grey, .color-light-grey) {
         background-color: var(--color-fill-neutral-light-hovered);
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-light-hovered);
+      }
     }
 
     &:where(.variant-tertiary) {
@@ -228,6 +255,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
       &:where(.color-white-absolute) {
         background-color: var(--color-fill-absolute-white-transparent-hovered);
       }
+
+      &:where(.color-blue) {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
     }
 
     &:where(.color-dark-grey):where(.variant-secondary, .variant-tertiary) {

package/src/components/Button/Button.module.scss

@@ -13,7 +13,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   &:where(.size-xs) {
     min-width: 20px;
     height: 20px;
-    padding: 0 2px;
+    padding: 0 4px;
 
     &:where(.style-floating, .style-floating-alt) {
       padding: 0 7px;
@@ -23,7 +23,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   &:where(.size-s) {
     min-width: 24px;
     height: 24px;
-    padding: 0 4px;
+    padding: 0 6px;
 
     &:where(.style-floating, .style-floating-alt) {
       padding: 0 9px;
@@ -61,7 +61,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   }
 
   &:where(.size-xs, .size-s) {
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 3px;
     }
   }
@@ -71,7 +71,7 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
       gap: 2px;
     }
 
-    & :where(.ButtonText) {
+    & .ButtonText {
       padding: 0 4px;
     }
   }
@@ -111,6 +111,19 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
       color: var(--color-text-inverse);
       background-color: var(--color-fill-neutral-heaviest);
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-inverse);
+      background-color: var(--color-fill-neutral-heaviest);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-inverse-heavier);
+      }
+
+      &#{$active-selector} {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
+    }
   }
 
   &:where(.style-secondary) {
@@ -153,6 +166,19 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
         background-color: var(--color-fill-neutral-light-hovered);
       }
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-neutral);
+      background-color: var(--color-fill-neutral-light);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+
+      &#{$active-selector} {
+        background-color: var(--color-fill-neutral-light-hovered);
+      }
+    }
   }
 
   &:where(.style-tertiary) {
@@ -193,9 +219,23 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
         background-color: var(--color-fill-neutral-light-hovered);
       }
     }
+
+    &:where(.color-blue) {
+      color: var(--color-text-neutral-light);
+
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-neutral-heavy);
+      }
+
+      &#{$active-selector} {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
+    }
   }
 
   &:where(.style-floating, .style-floating-alt) {
+    overflow: hidden;
+
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
         color: var(--color-text-absolute-white);
@@ -225,36 +265,32 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
       color: var(--color-text-neutral);
       background-color: var(--color-fill-bright);
     }
-  }
-
-  /* Effect */
-  &:where(.style-primary, .style-secondary, .style-tertiary) {
-    &:where(.size-xs) {
-      border-radius: var(--radius-6);
-    }
 
-    &:where(.size-s, .size-m) {
-      border-radius: var(--radius-8);
-    }
+    &:where(.color-blue) {
+      color: var(--color-text-inverse);
+      background-color: var(--color-fill-neutral-heaviest);
 
-    &:where(.size-l) {
-      border-radius: var(--radius-12);
-    }
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--color-icon-inverse-heavier);
+      }
 
-    &:where(.size-xl) {
-      border-radius: var(--radius-16);
+      &#{$active-selector} {
+        background-color: var(--color-fill-neutral-heaviest-hovered);
+      }
     }
   }
 
-  &:where(.style-floating) {
-    overflow: hidden;
+  /* Effect */
+  &:where(
+      .style-primary,
+      .style-secondary,
+      .style-tertiary,
+      .style-floating,
+      .style-floating-alt
+    ) {
     border-radius: 9999px;
   }
 
-  &:where(.style-floating-alt) {
-    border-radius: var(--radius-8);
-  }
-
   &:where(.style-primary.color-blue:focus-visible) {
     outline: 3px solid var(--color-state-action-light);
   }

package/src/components/Button/Button.tsx

@@ -150,7 +150,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             <Text
               className={styles.ButtonText}
               typo={getTypography(size)}
-              bold
+              fontWeight={500}
             >
               {text}
             </Text>

package/src/components/Text/Text.module.scss

@@ -4,20 +4,21 @@ $typo-sizes: 11, 12, 13, 14, 15, 16, 17, 18, 22, 24, 30, 36;
 
 .Text {
   --b-text-color: initial;
+  --b-text-font-weight: 400;
   --b-text-line-clamp: 1;
   --b-text-line-height: initial;
   --b-text-font-size: initial;
   --b-text-letter-spacing: initial;
 
   font-size: var(--b-text-font-size);
-  font-weight: 400;
+  font-weight: var(--b-text-font-weight);
   font-style: normal;
   line-height: var(--b-text-line-height);
   color: var(--b-text-color);
   letter-spacing: var(--b-text-letter-spacing);
 
   &:where(.bold) {
-    font-weight: 700;
+    --b-text-font-weight: 700;
   }
 
   &:where(.italic) {

package/src/components/Text/Text.test.tsx

@@ -29,6 +29,19 @@ describe('Text', () => {
     expect(rendered).toHaveClass(styles.italic)
   })
 
+  it('should receives font weight style', () => {
+    const { getByText } = renderComponent({ fontWeight: 500 })
+    const rendered = getByText(TEXT)
+    expect(rendered).toHaveStyle('--b-text-font-weight: 500')
+  })
+
+  it('should prioritize font weight over bold', () => {
+    const { getByText } = renderComponent({ bold: true, fontWeight: 500 })
+    const rendered = getByText(TEXT)
+    expect(rendered).toHaveClass(styles.bold)
+    expect(rendered).toHaveStyle('--b-text-font-weight: 500')
+  })
+
   it('should receives truncated style', () => {
     const { getByText } = renderComponent({ truncated: true })
     const rendered = getByText(TEXT)

package/src/components/Text/Text.tsx

@@ -38,6 +38,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(
       typo = '15',
       color,
       bold,
+      fontWeight,
       italic,
       truncated,
       align,
@@ -51,6 +52,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(
         ref: forwardedRef,
         style: {
           '--b-text-color': colorTokenCssVar(color),
+          '--b-text-font-weight': fontWeight,
           '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,
           ...marginStyles.style,
           ...style,

package/src/components/Text/Text.types.ts

@@ -22,6 +22,7 @@ type Typography =
   | '36'
 
 type TextAlign = 'left' | 'center' | 'right'
+type TextFontWeight = 400 | 500 | 600 | 700
 
 interface TextOwnProps {
   /**
@@ -38,6 +39,13 @@ interface TextOwnProps {
    * @default false
    */
   bold?: boolean
+  /**
+   * Font weight of the text.
+   * If `bold` and `fontWeight` are used together, `fontWeight` takes precedence.
+   * This prop is currently intended for internal Bezier component usage.
+   * @internal
+   */
+  fontWeight?: TextFontWeight
   /**
    * Whether the text is italic.
    * @default false