fix(input, input-box): allow passing type="url"

.changeset/lazy-chicken-search.md

@@ -0,0 +1,7 @@
+---
+'@twilio-paste/input': patch
+'@twilio-paste/input-box': patch
+'@twilio-paste/core': patch
+---
+
+[Input, Input Box] allow passing `type="url"` to the Input component for convenient browser validation.

packages/paste-core/components/input-box/src/types.ts

@@ -1,7 +1,17 @@
 import PropTypes from 'prop-types';
 import type {BoxProps} from '@twilio-paste/box';
 
-export type InputBoxTypes = 'text' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'date' | 'time';
+export type InputBoxTypes =
+  | 'text'
+  | 'email'
+  | 'hidden'
+  | 'number'
+  | 'password'
+  | 'search'
+  | 'tel'
+  | 'date'
+  | 'time'
+  | 'url';
 export type Variants = 'default' | 'inverse';
 
 export interface FauxInputProps {

packages/paste-core/components/input/src/Input.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import {useMergeRefs} from '@twilio-paste/utils';
 import {Box} from '@twilio-paste/box';
 import type {BoxProps, BoxStyleProps} from '@twilio-paste/box';
@@ -257,23 +256,5 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
 Input.displayName = 'Input';
 
-Input.propTypes = {
-  disabled: PropTypes.bool,
-  element: PropTypes.string,
-  hasError: PropTypes.bool,
-  id: PropTypes.string,
-  name: PropTypes.string,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  required: PropTypes.bool,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  type: PropTypes.oneOf(['text', 'email', 'hidden', 'number', 'password', 'search', 'tel', 'date', 'time'])
-    .isRequired as any,
-  value: PropTypes.string,
-};
-
 export {Input};
 export type {InputBoxTypes as InputTypes};

packages/paste-core/components/input/stories/input.stories.tsx

@@ -3,6 +3,7 @@ import type {StoryFn} from '@storybook/react';
 import {useUID} from '@twilio-paste/uid-library';
 import {action} from '@storybook/addon-actions';
 import {Anchor} from '@twilio-paste/anchor';
+import {Form, FormControl} from '@twilio-paste/form';
 import {useTheme} from '@twilio-paste/theme';
 import {Box} from '@twilio-paste/box';
 import {Text} from '@twilio-paste/text';
@@ -23,25 +24,31 @@ export default {
 export const DefaultInput = (): React.ReactNode => {
   const uid = useUID();
   const helpTextUid = useUID();
-  const [value, setValue] = React.useState('Input');
+  const [value, setValue] = React.useState('');
   return (
-    <>
-      <Label htmlFor={uid}>Label</Label>
-      <Input
-        id={uid}
-        aria-describedby={helpTextUid}
-        type="text"
-        placeholder="Placeholder"
-        value={value}
-        onChange={(event) => {
-          setValue(event.target.value);
-          action('handleChange');
-        }}
-        onFocus={action('handleFocus')}
-        onBlur={action('handleBlur')}
-      />
-      <HelpText id={helpTextUid}>Info that helps a user with this field.</HelpText>
-    </>
+    <Form>
+      <FormControl>
+        <Label required htmlFor={uid}>
+          Website
+        </Label>
+        <Input
+          id={uid}
+          aria-describedby={helpTextUid}
+          type="url"
+          pattern="https://.*"
+          required
+          placeholder="https://twilio.com"
+          value={value}
+          onChange={(event) => {
+            setValue(event.target.value);
+            action('handleChange');
+          }}
+          onFocus={action('handleFocus')}
+          onBlur={action('handleBlur')}
+        />
+        <HelpText id={helpTextUid}>The URL to your personal homepage.</HelpText>
+      </FormControl>
+    </Form>
   );
 };