@spark-web/text-input 1.1.1 → 2.0.0

package/README.md

@@ -7,7 +7,7 @@ Text input provides a way for inputting text. The component must be nested
 within a [`Field`](/package/field). See [`Field`](/package/field) for more
 details.
 
-## Examples
+## Text Input
 
 ### Controlled
 
@@ -76,8 +76,29 @@ return (
 );
 ```
 
+## InputContainer
+
+The `InputContainer` is used internally to handle some shared styling between
+components that are wrapped in the `Field` component.
+
+Typically input adornments (icons or buttons that _appear_ to be inside the
+input) will be absolutely positioning above it and padding is applied to make
+sure that text does not get obscured below the adornments.
+
+On top of this, password managers will insert buttons above the input which can
+get in the way of our adornments.
+
+To get around these problems, we wrap the input and adornments with the
+`InputContainer` and apply our own focus styles to an absolutely positioned
+element that is an adjacent sibling of the input (when the input is focused).
+
+The `InputContainer` also provides the border and background styles and has
+slots to place the start and end adornments.
+
 ## Props
 
+### TextInput
+
 | Prop         | Type                                                                                | Default | Description                                                                                  |
 | ------------ | ----------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------- |
 | data?        | [DataAttributeMap][data-attribute-map]                                              |         | Sets data attributes for the component.                                                      |
@@ -94,3 +115,12 @@ return (
   https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
 [adornment-children]:
   https://github.com/brighte-labs/spark-web/blob/d4da46200f2d6e5e9291d3c650eaaff7e53f411b/packages/text-input/src/childrenToAdornments.tsx#L12
+
+### InputContainer
+
+| Prop            | Type                                | Default | Description                     |
+| --------------- | ----------------------------------- | ------- | ------------------------------- |
+| startAdornment? | ReactElement\<InputAdornmentProps\> |         | Slot to start render adornment. |
+| endAdornment?   | ReactElement\<InputAdornmentProps\> |         | Slot to end render adornment.   |
+
+Extra props are passed into the underlying [`Box`](/package/box) component.

package/dist/declarations/src/InputContainer.d.ts

@@ -0,0 +1,10 @@
+import type { BoxProps } from '@spark-web/box';
+import type { ReactElement } from 'react';
+import type { InputAdornmentProps } from './InputAdornment';
+export declare type InputContainerProps = {
+    /** Slot to start render adornment. */
+    startAdornment?: ReactElement<InputAdornmentProps> | null;
+    /** Slot to end render adornment. */
+    endAdornment?: ReactElement<InputAdornmentProps> | null;
+} & Omit<BoxProps, 'background' | 'position'>;
+export declare const InputContainer: ({ children, startAdornment, endAdornment, ...boxProps }: InputContainerProps) => JSX.Element;