@razorpay/blade 6.7.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,88 @@
 # @razorpay/blade
 
+## 7.0.0
+
+### Major Changes
+
+- 5248ea66: feat(Typography): streamline typography scale
+
+  > **Warning**
+  >
+  > Breaking Change!
+  > This is a breaking change for typography components and lineHeight scale
+  >
+  > We have written codemod to ease this process so please follow the [migration guide thoroughly](#breaking-changes)
+
+  ### Component Changes:
+
+  - Title:
+    - Added `xlarge` size
+  - Text:
+    - Added `large` size
+  - Link:
+    - Added `large` size
+  - Code:
+    - Added `weight=bold`
+
+  ### Breaking Changes:
+
+  - Title:
+    - Replace all `large` size variants to `xlarge`
+
+  ```diff
+  - <Title size="large">hello world</Title>
+  + <Title size="xlarge">hello world</Title>
+  ```
+
+  ***
+
+  ### Line-height scale changes
+
+  New scale has been changed to use numbered values for more flexibility, to read more about the changes [check this doc](https://docs.google.com/document/d/16j8dIKuQF9GjDgkhkZwnokVGNeoK7R-7zzIXHCgvveA/edit).
+
+  #### **Migration guide:**
+
+  Replace old named tokens to corresponding numbered values:
+
+  For example:
+
+  ```diff
+  - theme.typography.lineHeights.s
+  + theme.typography.lineHeights[50]
+  ```
+
+  **Old vs New mappings:**
+
+  | old | new |
+  | --- | --- |
+  | s   | 50  |
+  | m   | 50  |
+  | l   | 100 |
+  | xl  | 200 |
+  | 2xl | 300 |
+  | 3xl | 400 |
+  | 4xl | 600 |
+  | 5xl | 700 |
+  | 6xl | 800 |
+
+  #### **Migrate with Codemod:**
+
+  To change all instances of `theme.typography.lineHeights` to the new scale automatically use this codemod:
+
+  **Step1:** Install this version of blade
+
+  **Step2:** Run the codemod with the following command
+
+  > Checkout [jscodeshift docs](https://github.com/facebook/jscodeshift) for further cli usage help.
+
+  ```sh
+  npx jscodeshift ./YOUR_DIR --extensions=tsx,ts,jsx,js -t ./node_modules/@razorpay/blade/codemods/migrate-typography/transformers/migrate-typography.ts --ignore-pattern="**/node_modules/**"
+  ```
+
+  > **Note**
+  >
+  > This codemod will cover 80% of the usecases, but it might miss certain edge cases, it is advised to thoroughly test & check the code to ensure nothing is missed.
+
 ## 6.7.0
 
 ### Minor Changes

package/build/components/index.d.ts

@@ -127,12 +127,12 @@ type FontWeight = {
 type FontSize = {
   /** desktop: 9(px/rem/pt)
    *
-   * mobile: 10(px/rem/pt)
+   * mobile: 9(px/rem/pt)
    */
   10: number;
   /** desktop: 10(px/rem/pt)
    *
-   * mobile: 11(px/rem/pt)
+   * mobile: 10(px/rem/pt)
    */
   25: number;
   /** desktop: 11(px/rem/pt)
@@ -147,32 +147,32 @@ type FontSize = {
   75: number;
   /** desktop: 14(px/rem/pt)
    *
-   * mobile: 15(px/rem/pt)
+   * mobile: 14(px/rem/pt)
    */
   100: number;
   /** desktop: 16(px/rem/pt)
    *
-   * mobile: 17(px/rem/pt)
+   * mobile: 16(px/rem/pt)
    */
   200: number;
   /** desktop: 18(px/rem/pt)
    *
-   * mobile: 18(px/rem/pt)
+   * mobile: 16(px/rem/pt)
    */
   300: number;
   /** desktop: 20(px/rem/pt)
    *
-   * mobile: 20(px/rem/pt)
+   * mobile: 18(px/rem/pt)
    */
   400: number;
   /** desktop: 22(px/rem/pt)
    *
-   * mobile: 22(px/rem/pt)
+   * mobile: 20(px/rem/pt)
    */
   500: number;
-  /** desktop: 25(px/rem/pt)
+  /** desktop: 24(px/rem/pt)
    *
-   * mobile: 22(px/rem/pt)
+   * mobile: 20(px/rem/pt)
    */
   600: number;
   /** desktop: 28(px/rem/pt)
@@ -187,12 +187,12 @@ type FontSize = {
   800: number;
   /** desktop: 36(px/rem/pt)
    *
-   * mobile: 29(px/rem/pt)
+   * mobile: 32(px/rem/pt)
    */
   900: number;
   /** desktop: 40(px/rem/pt)
    *
-   * mobile: 29(px/rem/pt)
+   * mobile: 32(px/rem/pt)
    */
   1000: number;
 };
@@ -204,51 +204,66 @@ type Typography = {
     weight: FontWeight;
   };
   lineHeights: {
+    /** desktop: 0(px/rem/pt)
+     *
+     * mobile: 0(px/rem/pt)
+     */
+    0: number;
+    /** desktop: 14(px/rem/pt)
+     *
+     * mobile: 14(px/rem/pt)
+     */
+    25: number;
     /** desktop: 16(px/rem/pt)
      *
      * mobile: 16(px/rem/pt)
      */
-    s: number;
-    /** desktop: 16(px/rem/pt)
+    50: number;
+    /** desktop: 18(px/rem/pt)
      *
      * mobile: 18(px/rem/pt)
      */
-    m: number;
+    75: number;
     /** desktop: 20(px/rem/pt)
      *
-     * mobile: 24(px/rem/pt)
+     * mobile: 20(px/rem/pt)
      */
-    l: number;
+    100: number;
     /** desktop: 24(px/rem/pt)
      *
-     * mobile: 28(px/rem/pt)
+     * mobile: 20(px/rem/pt)
      */
-    xl: number;
+    200: number;
     /** desktop: 24(px/rem/pt)
      *
      * mobile: 24(px/rem/pt)
      */
-    '2xl': number;
+    300: number;
     /** desktop: 28(px/rem/pt)
+     *
+     * mobile: 24(px/rem/pt)
+     */
+    400: number;
+    /** desktop: 32(px/rem/pt)
      *
      * mobile: 28(px/rem/pt)
      */
-    '3xl': number;
+    500: number;
     /** desktop: 40(px/rem/pt)
      *
      * mobile: 32(px/rem/pt)
      */
-    '4xl': number;
-    /** desktop: 42(px/rem/pt)
+    600: number;
+    /** desktop: 40(px/rem/pt)
      *
-     * mobile: 30(px/rem/pt)
+     * mobile: 40(px/rem/pt)
      */
-    '5xl': number;
-    /** desktop: 60(px/rem/pt)
+    700: number;
+    /** desktop: 48(px/rem/pt)
      *
      * mobile: 40(px/rem/pt)
      */
-    '6xl': number;
+    800: number;
   };
   // letterSpacings: {};
 };
@@ -2278,7 +2293,7 @@ declare type LinkCommonProps = {
      *
      * @default medium
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
 } & TestID$1 & StyledPropsBlade & Platform$1.Select<{
     native: {
         /**
@@ -2413,7 +2428,7 @@ type TextVariant$1 = 'body' | 'caption';
 
 type TextBodyVariant$1 = TextCommonProps$1 & {
   variant?: Extract<TextVariant$1, 'body'>;
-  size?: 'xsmall' | 'small' | 'medium';
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
 };
 
 type TextCaptionVariant$1 = TextCommonProps$1 & {
@@ -4299,7 +4314,7 @@ declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisa
 declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
 
 declare type TitleProps = {
-    size?: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
     contrast?: ColorContrastTypes;
     type?: TextTypes;
     children: StringChildrenType;
@@ -4387,7 +4402,7 @@ declare type TextCommonProps = {
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
-    size?: 'xsmall' | 'small' | 'medium';
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
 };
 declare type TextCaptionVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'caption'>;
@@ -4403,9 +4418,13 @@ declare type TextProps<T> = T extends {
 declare type TextForwardedAs = {
     forwardedAs?: BaseTextProps['as'];
 };
+declare type GetTextPropsReturn = Omit<BaseTextProps, 'children'> & TextForwardedAs;
+declare type GetTextProps<T extends {
+    variant: TextVariant;
+}> = Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast' | 'testID' | 'textAlign'>;
 declare const getTextProps: <T extends {
     variant: TextVariant;
-}>({ variant, type, weight, size, contrast, testID, textAlign, }: Pick<TextProps<T>, "testID" | "textAlign" | "size" | "weight" | "type" | "variant" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
+}>({ variant, type, weight, size, contrast, testID, textAlign, }: GetTextProps<T>) => GetTextPropsReturn;
 declare const Text: <T extends {
     variant: TextVariant;
 }>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, ...styledProps }: TextProps<T>) => ReactElement;
@@ -4418,6 +4437,7 @@ declare type CodeProps = {
      * @default small
      */
     size?: 'small' | 'medium';
+    weight?: 'regular' | 'bold';
 } & TestID$1 & StyledPropsBlade;
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
@@ -4445,7 +4465,7 @@ declare type CodeProps = {
  * </BaseBox>
  * ```
  */
-declare const Code: ({ children, size, testID, ...styledProps }: CodeProps) => JSX.Element;
+declare const Code: ({ children, size, weight, testID, ...styledProps }: CodeProps) => JSX.Element;
 
 declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
 declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;

package/build/components/index.native.d.ts

@@ -128,12 +128,12 @@ type FontWeight = {
 type FontSize = {
   /** desktop: 9(px/rem/pt)
    *
-   * mobile: 10(px/rem/pt)
+   * mobile: 9(px/rem/pt)
    */
   10: number;
   /** desktop: 10(px/rem/pt)
    *
-   * mobile: 11(px/rem/pt)
+   * mobile: 10(px/rem/pt)
    */
   25: number;
   /** desktop: 11(px/rem/pt)
@@ -148,32 +148,32 @@ type FontSize = {
   75: number;
   /** desktop: 14(px/rem/pt)
    *
-   * mobile: 15(px/rem/pt)
+   * mobile: 14(px/rem/pt)
    */
   100: number;
   /** desktop: 16(px/rem/pt)
    *
-   * mobile: 17(px/rem/pt)
+   * mobile: 16(px/rem/pt)
    */
   200: number;
   /** desktop: 18(px/rem/pt)
    *
-   * mobile: 18(px/rem/pt)
+   * mobile: 16(px/rem/pt)
    */
   300: number;
   /** desktop: 20(px/rem/pt)
    *
-   * mobile: 20(px/rem/pt)
+   * mobile: 18(px/rem/pt)
    */
   400: number;
   /** desktop: 22(px/rem/pt)
    *
-   * mobile: 22(px/rem/pt)
+   * mobile: 20(px/rem/pt)
    */
   500: number;
-  /** desktop: 25(px/rem/pt)
+  /** desktop: 24(px/rem/pt)
    *
-   * mobile: 22(px/rem/pt)
+   * mobile: 20(px/rem/pt)
    */
   600: number;
   /** desktop: 28(px/rem/pt)
@@ -188,12 +188,12 @@ type FontSize = {
   800: number;
   /** desktop: 36(px/rem/pt)
    *
-   * mobile: 29(px/rem/pt)
+   * mobile: 32(px/rem/pt)
    */
   900: number;
   /** desktop: 40(px/rem/pt)
    *
-   * mobile: 29(px/rem/pt)
+   * mobile: 32(px/rem/pt)
    */
   1000: number;
 };
@@ -205,51 +205,66 @@ type Typography = {
     weight: FontWeight;
   };
   lineHeights: {
+    /** desktop: 0(px/rem/pt)
+     *
+     * mobile: 0(px/rem/pt)
+     */
+    0: number;
+    /** desktop: 14(px/rem/pt)
+     *
+     * mobile: 14(px/rem/pt)
+     */
+    25: number;
     /** desktop: 16(px/rem/pt)
      *
      * mobile: 16(px/rem/pt)
      */
-    s: number;
-    /** desktop: 16(px/rem/pt)
+    50: number;
+    /** desktop: 18(px/rem/pt)
      *
      * mobile: 18(px/rem/pt)
      */
-    m: number;
+    75: number;
     /** desktop: 20(px/rem/pt)
      *
-     * mobile: 24(px/rem/pt)
+     * mobile: 20(px/rem/pt)
      */
-    l: number;
+    100: number;
     /** desktop: 24(px/rem/pt)
      *
-     * mobile: 28(px/rem/pt)
+     * mobile: 20(px/rem/pt)
      */
-    xl: number;
+    200: number;
     /** desktop: 24(px/rem/pt)
      *
      * mobile: 24(px/rem/pt)
      */
-    '2xl': number;
+    300: number;
     /** desktop: 28(px/rem/pt)
+     *
+     * mobile: 24(px/rem/pt)
+     */
+    400: number;
+    /** desktop: 32(px/rem/pt)
      *
      * mobile: 28(px/rem/pt)
      */
-    '3xl': number;
+    500: number;
     /** desktop: 40(px/rem/pt)
      *
      * mobile: 32(px/rem/pt)
      */
-    '4xl': number;
-    /** desktop: 42(px/rem/pt)
+    600: number;
+    /** desktop: 40(px/rem/pt)
      *
-     * mobile: 30(px/rem/pt)
+     * mobile: 40(px/rem/pt)
      */
-    '5xl': number;
-    /** desktop: 60(px/rem/pt)
+    700: number;
+    /** desktop: 48(px/rem/pt)
      *
      * mobile: 40(px/rem/pt)
      */
-    '6xl': number;
+    800: number;
   };
   // letterSpacings: {};
 };
@@ -2281,7 +2296,7 @@ declare type LinkCommonProps = {
      *
      * @default medium
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
 } & TestID$1 & StyledPropsBlade & Platform.Select<{
     native: {
         /**
@@ -2416,7 +2431,7 @@ type TextVariant$1 = 'body' | 'caption';
 
 type TextBodyVariant$1 = TextCommonProps$1 & {
   variant?: Extract<TextVariant$1, 'body'>;
-  size?: 'xsmall' | 'small' | 'medium';
+  size?: 'xsmall' | 'small' | 'medium' | 'large';
 };
 
 type TextCaptionVariant$1 = TextCommonProps$1 & {
@@ -4095,7 +4110,7 @@ declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisa
 declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
 
 declare type TitleProps = {
-    size?: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
     contrast?: ColorContrastTypes;
     type?: TextTypes;
     children: StringChildrenType;
@@ -4183,7 +4198,7 @@ declare type TextCommonProps = {
 declare type TextVariant = 'body' | 'caption';
 declare type TextBodyVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'body'>;
-    size?: 'xsmall' | 'small' | 'medium';
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
 };
 declare type TextCaptionVariant = TextCommonProps & {
     variant?: Extract<TextVariant, 'caption'>;
@@ -4199,9 +4214,13 @@ declare type TextProps<T> = T extends {
 declare type TextForwardedAs = {
     forwardedAs?: BaseTextProps['as'];
 };
+declare type GetTextPropsReturn = Omit<BaseTextProps, 'children'> & TextForwardedAs;
+declare type GetTextProps<T extends {
+    variant: TextVariant;
+}> = Pick<TextProps<T>, 'type' | 'variant' | 'weight' | 'size' | 'contrast' | 'testID' | 'textAlign'>;
 declare const getTextProps: <T extends {
     variant: TextVariant;
-}>({ variant, type, weight, size, contrast, testID, textAlign, }: Pick<TextProps<T>, "testID" | "textAlign" | "size" | "weight" | "type" | "variant" | "contrast">) => Omit<BaseTextProps, 'children'> & TextForwardedAs;
+}>({ variant, type, weight, size, contrast, testID, textAlign, }: GetTextProps<T>) => GetTextPropsReturn;
 declare const Text: <T extends {
     variant: TextVariant;
 }>({ variant, weight, size, type, contrast, truncateAfterLines, children, color, testID, textAlign, ...styledProps }: TextProps<T>) => ReactElement;
@@ -4214,6 +4233,7 @@ declare type CodeProps = {
      * @default small
      */
     size?: 'small' | 'medium';
+    weight?: 'regular' | 'bold';
 } & TestID$1 & StyledPropsBlade;
 /**
  * Code component can be used for displaying token, variable names, or inlined code snippets.
@@ -4241,7 +4261,7 @@ declare type CodeProps = {
  * </BaseBox>
  * ```
  */
-declare const Code: ({ children, size, testID, ...styledProps }: CodeProps) => JSX.Element;
+declare const Code: ({ children, size, weight, testID, ...styledProps }: CodeProps) => JSX.Element;
 
 declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
 declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;