@channel.io/bezier-react 3.6.6 → 4.0.0-next.1

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