fix(ui): apply Mosaic reset to Input

Author: austincalvelage

packages/ui/src/mosaic/components/input/input.styles.ts

@@ -35,8 +35,6 @@ export const styles = stylex.create({
       ':focus-visible:where([aria-invalid="true"])': 'none',
     },
     backgroundColor: colorVars['--cl-color-input'],
-    boxSizing: 'border-box',
-    color: 'inherit',
     display: 'block',
     fontFamily: fontFamilyVars['--cl-font-family-sans'],
     outlineOffset: '2px',

packages/ui/src/mosaic/components/input/input.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { reset } from '../reset.styles';
 import { sizes, styles } from './input.styles';
 
 export interface InputProps extends Omit<MosaicComponentProps<'input'>, 'size'> {
@@ -22,7 +23,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Mos
       disabled,
       ...mergeStyleProps(
         themeProps('input', { size, disabled }),
-        stylex.props(styles.base, sizes[size], disabled && styles.disabled),
+        stylex.props(reset.base, styles.base, sizes[size], disabled && styles.disabled),
         className,
         style,
       ),

packages/ui/src/mosaic/components/reset.test.tsx

@@ -9,6 +9,7 @@ import { Button } from './button';
 import { Card } from './card';
 import { Heading } from './heading';
 import { Icon } from './icon';
+import { Input } from './input';
 import { Item } from './item';
 import { reset } from './reset.styles';
 import { Text } from './text';
@@ -50,6 +51,7 @@ const cases: Array<[string, React.ReactElement]> = [
       name='ellipsis'
     />,
   ],
+  ['Input', <Input key='input' />],
   ['Item', <Item.Root key='item' />],
   ['Item.Group', <Item.Group key='item-group' />],
   ['Item.Separator', <Item.Separator key='item-separator' />],