Export field

Author: mikeldking

src/field/Field.tsx

@@ -24,7 +24,7 @@ export interface FieldProps
     Validation {
   children: ReactElement;
   label?: ReactNode;
-  labelProps: HTMLAttributes<HTMLElement>;
+  labelProps?: HTMLAttributes<HTMLElement>;
   wrapperClassName?: string;
 }
 

src/field/FieldLabel.tsx

@@ -59,7 +59,8 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
       htmlFor={ElementType === 'label' ? labelFor || htmlFor : undefined}
       css={css`
         font-size: ${theme.typography.sizes.small.fontSize}px;
-        font-weight: ${theme.typography.sizes.small.lineHeight}px;
+        line-height: ${theme.typography.sizes.small.lineHeight}px;
+        font-weight: ${theme.typography.weights.heavy};
         color: ${theme.textColors.white90};
         padding: ${theme.spacing.padding4}px 0;
         display: inline-block;

src/field/HelpText.tsx

@@ -7,9 +7,9 @@ import theme from '../theme';
 
 export interface HelpTextComponentProps extends HelpTextProps, Validation {
   /** Props for the help text description element. */
-  descriptionProps: HTMLAttributes<HTMLElement>;
+  descriptionProps?: HTMLAttributes<HTMLElement>;
   /** Props for the help text error message element. */
-  errorMessageProps: HTMLAttributes<HTMLElement>;
+  errorMessageProps?: HTMLAttributes<HTMLElement>;
   /** Whether the description is displayed with lighter text. */
   isDisabled?: boolean;
   /** Whether an error icon is rendered. */

src/index.tsx

@@ -15,6 +15,7 @@ export * from './dropdown';
 export * from './listbox';
 export * from './picker';
 export * from './notification';
+export * from './field';
 export * from './textfield';
 export * from './form';
 // export interface Props extends HTMLAttributes<HTMLDivElement> {

stories/Gallery.stories.tsx

@@ -9,6 +9,7 @@ import {
   TextField,
   Dropdown,
   Provider,
+  Field,
 } from '../src';
 
 // @ts-ignore
@@ -99,7 +100,14 @@ const Template: Story = args => {
             `}
           >
             <TextField label="name" placeholder="enter your name" />
-            <Dropdown menu={<div>Hello</div>}>Action</Dropdown>
+            <TextField
+              label="email"
+              addonBefore="mail"
+              placeholder="enter your email"
+            />
+            <Field label="Perform action">
+              <Dropdown menu={<div>Hello</div>}>Action</Dropdown>
+            </Field>
             <Button variant="primary">Submit</Button>
           </div>
         </Card>