feat(TextInput): add note on type="number" attribute (#1120)

* feat: type number story

* feat: add jsdoc

* Create honest-socks-sin.md

.changeset/honest-socks-sin.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat(TextInput): add note on `type="number"` attribute

packages/blade/src/components/Input/TextInput/TextInput.stories.tsx

@@ -256,6 +256,23 @@ export const TextInput = TextInputTemplate.bind({});
 // Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting
 TextInput.storyName = 'TextInput';
 
+export const TextInputTypeNumber = TextInputTemplate.bind({});
+TextInputTypeNumber.storyName = 'TextInput with type number';
+TextInputTypeNumber.args = {
+  type: 'number',
+  label: 'Enter Number',
+  placeholder: 'Enter any random number',
+};
+
+// @ts-expect-error: Just another undocumented, untyped storybook property ;__;
+TextInputTypeNumber.story = {
+  parameters: {
+    docs: {
+      storyDescription: `You might notice that type number allows you to enter other characters as well. That's because instead of setting type number internally, we prefer inputMode numeric. Checkout this article for the reasoning - <b><a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/">Why the GOV.UK Design System team changed the input type for numbers</a></b> \n\nIf you have a usecase of only allowing number in field, you can handle that on validations end.`,
+    },
+  },
+};
+
 export const TextInputHelpText = TextInputTemplate.bind({});
 TextInputHelpText.storyName = 'TextInput with Help Text';
 TextInputHelpText.args = {

packages/blade/src/components/Input/TextInput/TextInput.tsx

@@ -69,6 +69,14 @@ type TextInputProps = Pick<
   /**
    * Type of Input Field to be rendered. Use `PasswordInput` for type `password`
    *
+   *
+   * **Note on number type**
+   *
+   * `type="number"` internally uses `inputMode="numeric"` instead of HTML's `type="number"` which also allows text characters.
+   * If you have a usecase where you only want to support number input, you can handle it on validations end.
+   *
+   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning
+   *
    * @default text
    */
   type?: Type;