feat(ui): add headless input variant

Author: austincalvelage

.changeset/quiet-pans-smile.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/lib/registry.ts

@@ -65,6 +65,7 @@ import {
 import {
   Default,
   Disabled as InputDisabled,
+  Headless as InputHeadless,
   Invalid,
   meta as inputMeta,
   Sizes as InputSizes,
@@ -261,7 +262,14 @@ const bannerModule: StoryModule = {
 
 const buttonModule: StoryModule = { meta: buttonMeta, Primary, Sizes, Disabled };
 
-const inputModule: StoryModule = { meta: inputMeta, Default, Sizes: InputSizes, Disabled: InputDisabled, Invalid };
+const inputModule: StoryModule = {
+  meta: inputMeta,
+  Default,
+  Sizes: InputSizes,
+  Disabled: InputDisabled,
+  Invalid,
+  Headless: InputHeadless,
+};
 
 const popoverComponentModule: StoryModule = {
   meta: popoverComponentMeta,

packages/swingset/src/stories/input.mdx

@@ -49,3 +49,12 @@ The snippet below reflects the props selected in the table above — change a pr
   name='Invalid'
   storyModule={InputStories}
 />
+
+### Headless
+
+The headless variant keeps the input behavior and sizing while allowing a parent composition to provide the field chrome.
+
+<Story
+  name='Headless'
+  storyModule={InputStories}
+/>

packages/swingset/src/stories/input.stories.tsx

@@ -14,9 +14,11 @@ export const meta: StoryMeta = {
   styles: {
     _variants: {
       size: { sm: {}, md: {}, lg: {} },
+      variant: { default: {}, headless: {} },
     },
     _defaultVariants: {
       size: 'md',
+      variant: 'default',
     },
   },
 };
@@ -75,3 +77,15 @@ export function Invalid(props: Record<string, unknown>) {
     />
   );
 }
+
+export function Headless(props: Record<string, unknown>) {
+  return (
+    <div style={{ border: '1px solid currentColor', borderRadius: 8 }}>
+      <Input
+        {...knobsAsProps(props)}
+        variant='headless'
+        placeholder='Parent provides the field chrome'
+      />
+    </div>
+  );
+}

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

@@ -1,2 +1,2 @@
 export { Input } from './input';
-export type { InputProps } from './input';
+export type { InputProps, InputVariant } from './input';

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

@@ -23,6 +23,14 @@ export const styles = stylex.create({
       color: colorVars['--cl-color-input-placeholder'],
     },
   },
+  headless: {
+    borderRadius: 0,
+    borderStyle: 'none',
+    borderWidth: 0,
+    outline: 'none',
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+  },
 });
 
 export const sizes = stylex.create({

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

@@ -24,6 +24,19 @@ describe('Mosaic Input', () => {
     expect(screen.getByRole('textbox', { name: 'Name' })).toHaveAttribute('data-size', size);
   });
 
+  it('removes field chrome with the headless variant', () => {
+    render(
+      <Input
+        variant='headless'
+        aria-label='Search'
+      />,
+    );
+
+    const input = screen.getByRole('textbox', { name: 'Search' });
+    expect(input).toHaveClass('cl-input');
+    expect(input).toHaveAttribute('data-variant', 'headless');
+  });
+
   it('reflects and forwards the disabled state', () => {
     render(
       <Input

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

@@ -9,13 +9,18 @@ import { reset } from '../../utils/reset.styles';
 import { useOptionalFieldControlProps } from '../field/field.context';
 import { sizes, styles } from './input.styles';
 
+export type InputVariant = 'default' | 'headless';
+
 export interface InputProps extends Omit<MosaicComponentProps<'input'>, 'size'> {
   size?: 'sm' | 'md' | 'lg';
+  /** Removes field chrome so a parent composition can provide it. @default 'default' */
+  variant?: InputVariant;
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(function MosaicInput(
   {
     size = 'md',
+    variant = 'default',
     disabled: disabledProp,
     required: requiredProp,
     render,
@@ -52,8 +57,15 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Mos
       'aria-labelledby': fieldProps?.['aria-labelledby'] ?? ariaLabelledBy,
       'aria-describedby': fieldProps?.['aria-describedby'] ?? ariaDescribedBy,
       ...mergeStyleProps(
-        themeProps('input', { size, disabled }),
-        stylex.props(reset.base, inputStyles.base, styles.base, sizes[size], disabled && inputStyles.disabled),
+        themeProps('input', { size, variant, disabled }),
+        stylex.props(
+          reset.base,
+          styles.base,
+          sizes[size],
+          variant === 'default' && inputStyles.base,
+          variant === 'headless' && styles.headless,
+          variant === 'default' && disabled && inputStyles.disabled,
+        ),
         className,
         style,
       ),

packages/ui/src/mosaic/styles/index.ts

@@ -49,7 +49,7 @@ export type { HeadingProps } from '../components/heading';
 export { Icon, IconFrame } from '../components/icon';
 export type { IconFrameProps, IconProps } from '../components/icon';
 export { Input } from '../components/input';
-export type { InputProps } from '../components/input';
+export type { InputProps, InputVariant } from '../components/input';
 export { Item } from '../components/item';
 export type { ItemProps } from '../components/item';
 export { Menu } from '../components/menu';