@razorpay/[email protected]

Minor Changes

• e352eef: fix(blade): add Heading component

@razorpay/[email protected]

Minor Changes

• 75882a7: feat(Blade): add Titlecomponent

  The API for Title component can be found under Typography/Text/_decisions

@razorpay/[email protected]

Minor Changes

• 294173e: - Add the following components that would act as building blocks for our icons:
  1. Svg
  2. Path
  3. Rect
  4. Defs
  5. ClipPath
  6. G
  • Add CreditCardIcon component
  • Add RupeeIcon component

Patch Changes

• e76cd01: feat/add-text-component

@razorpay/[email protected]

Minor Changes

• a20b608: feat(blade): add motion tokens

  Motion tokens

  We have added tokens for

  1. Delay
  2. Duration
  3. Easing

  You can find a detailed RFC for motion here: View Formatted RFC

@razorpay/[email protected]

Minor Changes

• 6885ac3: feat(blade): add BaseText component

@razorpay/[email protected]

Patch Changes

• 0361106: onKeyPress and textAlign props addition in TextInput. textAlign can take values left, right, and center. onKeyPress will take native event as argument. These props are optional

@razorpay/[email protected]

Patch Changes

• 33e3930: feat(blade): add listener for toggling breakpoints

  Updates

  • Add breakpoints token to the themes.
  • Out of the box responsiveness support for typography tokens.
  • Publish useBreakpoint hook.
  • Following breakpoints are supported as of today.
    /** max width: 320px /
    xs: 320;
    /* min width: 321px and max width: 480px /
    s: 480;
    /* min width: 481px and max width: 768px /
    m: 768;
    /* min width: 769 and max width: 1024px /
    l: 1024;
    /* min width: 1025 and max width: 1200px /
    xl: 1200;
    /* min width: 1201px */
    max: 1201;
  • For web the typography scale will toggle between mobile and desktop
    • xs, s, m are considered as mobile
    • l, xl, xl are considered as desktop
  • For react native we always default to mobile typography scale

  What does it mean for me(as a developer)?

  • If you’re already using Blade tokens then you can leverage this by just running yarn upgrade @razorpay/[email protected] and that’s it you are set 🚀
    • You can use the typography tokens as you were doing previously. Refer the usage guideline here
  • You can use these breakpoints as a base reference to build your next set of features by just following the usage guidelines here.

  This is our first step towards building responsive and adaptive applications. We’ll be publishing Typography Components next which will be built on top of these tokens and you can use them directly for your projects. Meanwhile, read more about our responsive and adaptive strategy in this RFC

@razorpay/[email protected]

Minor Changes

• f120e3c: feat(icons): add four new icons for scalability ftux

Patch Changes

• e56b5cf: minor: add outlined & filled icons for home, grid and transactions

• 33e3930: feat(blade): add listener for toggling breakpoints

  Updates

  • Add breakpoints token to the themes.
  • Out of the box responsiveness support for typography tokens.
  • Publish useBreakpoint hook.
  • Following breakpoints are supported as of today.
    /** max width: 320px /
    xs: 320;
    /* min width: 321px and max width: 480px /
    s: 480;
    /* min width: 481px and max width: 768px /
    m: 768;
    /* min width: 769 and max width: 1024px /
    l: 1024;
    /* min width: 1025 and max width: 1200px /
    xl: 1200;
    /* min width: 1201px */
    max: 1201;
  • For web the typography scale will toggle between mobile and desktop
    • xs, s, m are considered as mobile
    • l, xl, xl are considered as desktop
  • For react native we always default to mobile typography scale

  What does it mean for me(as a developer)?

  • If you’re already using Blade tokens then you can leverage this by just running yarn upgrade @razorpay/[email protected] and that’s it you are set 🚀
    • You can use the typography tokens as you were doing previously. Refer the usage guideline here
  • You can use these breakpoints as a base reference to build your next set of features by just following the usage guidelines here.

  This is our first step towards building responsive and adaptive applications. We’ll be publishing Typography Components next which will be built on top of these tokens and you can use them directly for your projects. Meanwhile, read more about our responsive and adaptive strategy in this RFC

@razorpay/[email protected]

Minor Changes

• 802f31d: feat(hyperlink-icon): add hyperlink icon

@razorpay/[email protected]

Minor Changes

• 13e3c3f: feat(Modal): Migrate react-native-modal to 13.0.0