docs(docs): update Fieldset docs

packages/big-design/src/components/Fieldset/Fieldset.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { warning } from '../../utils/warning';
 
@@ -11,44 +11,46 @@ export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSet
   description?: React.ReactChild;
 }
 
-export const Fieldset: React.FC<FieldsetProps> = ({ className, legend, description, children, style, ...props }) => {
-  const renderedLegend = useMemo(() => {
-    if (typeof legend === 'string') {
-      return <FieldsetLegend>{legend}</FieldsetLegend>;
-    }
-
-    if (React.isValidElement(legend) && legend.type === FieldsetLegend) {
-      return legend;
-    }
-
-    if (!legend) {
-      return null;
-    }
-
-    warning('legend must be either a string or a FieldsetLegend component.');
-  }, [legend]);
-
-  const renderedDescription = useMemo(() => {
-    if (typeof description === 'string') {
-      return <FieldsetDescription>{description}</FieldsetDescription>;
-    }
-
-    if (React.isValidElement(description) && description.type === FieldsetDescription) {
-      return description;
-    }
-
-    if (!description) {
-      return null;
-    }
-
-    warning('description must be either a string or a FieldsetDescription component.');
-  }, [description]);
-
-  return (
-    <StyledFieldset {...props}>
-      {renderedLegend}
-      {renderedDescription}
-      {children}
-    </StyledFieldset>
-  );
-};
+export const Fieldset: React.FC<FieldsetProps> = memo(
+  ({ className, legend, description, children, style, ...props }) => {
+    const renderedLegend = useMemo(() => {
+      if (typeof legend === 'string') {
+        return <FieldsetLegend>{legend}</FieldsetLegend>;
+      }
+
+      if (React.isValidElement(legend) && legend.type === FieldsetLegend) {
+        return legend;
+      }
+
+      if (!legend) {
+        return null;
+      }
+
+      warning('legend must be either a string or a FieldsetLegend component.');
+    }, [legend]);
+
+    const renderedDescription = useMemo(() => {
+      if (typeof description === 'string') {
+        return <FieldsetDescription>{description}</FieldsetDescription>;
+      }
+
+      if (React.isValidElement(description) && description.type === FieldsetDescription) {
+        return description;
+      }
+
+      if (!description) {
+        return null;
+      }
+
+      warning('description must be either a string or a FieldsetDescription component.');
+    }, [description]);
+
+    return (
+      <StyledFieldset {...props}>
+        {renderedLegend}
+        {renderedDescription}
+        {children}
+      </StyledFieldset>
+    );
+  },
+);

packages/big-design/src/components/Form/spec.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render } from '@test/utils';
 import 'jest-styled-components';
 import React from 'react';
 
+import { Fieldset } from '../Fieldset';
 import { Input } from '../Input';
 
 import { Form } from './index';
@@ -27,15 +28,14 @@ test('calls onSubmit', () => {
 
 test('exposes expected statics', () => {
   expect(Form.Error).toBeDefined();
-  expect(Form.Fieldset).toBeDefined();
   expect(Form.Label).toBeDefined();
   expect(Form.Group).toBeDefined();
 });
 
 test('simple form render', () => {
   const { container } = render(
     <Form>
-      <Form.Fieldset
+      <Fieldset
         legend="Primary contact"
         description="Minim velit quis aute adipisicing adipisicing do do exercitation cupidatat enim ex voluptate consequat labore."
       >
@@ -54,7 +54,7 @@ test('simple form render', () => {
             placeholder="Placeholder text"
           />
         </Form.Group>
-      </Form.Fieldset>
+      </Fieldset>
     </Form>,
   );
 

packages/big-design/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './Checkbox';
 export * from './Chip';
 export * from './Dropdown';
 export * from './Flex';
+export * from './Fieldset';
 export * from './Form';
 export * from './GlobalStyles';
 export * from './Grid';

packages/big-design/src/utils/warning/spec.ts

@@ -1,6 +1,6 @@
 import { warning } from './warning';
 
-const consoleError = jest.spyOn(console, 'error').mockImplementation(jest.fn);
+const consoleError = jest.spyOn(console, 'warn').mockImplementation(jest.fn);
 
 jest.mock('./warning', () => ({
   ...jest.requireActual('./warning'),

packages/big-design/src/utils/warning/warning.ts

@@ -1,54 +1,30 @@
-// Ported version of Facebook's warning module:
-// https://github.com/BerkeleyTrue/warning/blob/master/warning.js
+// Ported from tiny-warning:
+// https://github.com/alexreardon/tiny-warning/blob/master/src/index.js
 // --------------------------------------------
 // Since we don't care about whether or not there is a condition passed
 // we modified the original to account for that.
 
-export let warning = (_format: string) => {}; // tslint:disable-line
+const isProduction: boolean = process.env.NODE_ENV === 'production';
 
-if (process.env.NODE_ENV !== 'production') {
-  const printWarning = (format: string, ...args: any[]) => {
-    // @ts-ignore
-    const len = arguments.length;
+export const warning = (message: string): void => {
+  // don't do anything in production
+  // wrapping in production check for better dead code elimination
+  if (!isProduction) {
+    // Condition not passed
+    const text: string = `Warning: ${message}`;
 
-    args = new Array(len > 1 ? len - 1 : 0);
-
-    for (let key = 1; key < len; key++) {
-      // @ts-ignore
-      args[key - 1] = arguments[key];
-    }
-
-    let argIndex = 0;
-
-    const message =
-      'Warning: ' +
-      format.replace(/%s/g, () => {
-        return args[argIndex++];
-      });
+    // check console for IE9 support which provides console
+    // only with open devtools
     if (typeof console !== 'undefined') {
-      console.error(message); // tslint:disable-line
-    }
-    try {
-      throw new Error(message);
-    } catch (x) {} // tslint:disable-line
-  };
-
-  warning = (format: string, ...args: any[]) => {
-    // @ts-ignore
-    const len = arguments.length;
-
-    args = new Array(len > 2 ? len - 2 : 0);
-
-    for (let key = 2; key < len; key++) {
-      // @ts-ignore
-      args[key - 2] = arguments[key];
+      console.warn(text); // tslint:disable-line no-console
     }
 
-    if (format === undefined) {
-      throw new Error('`warning(format, ...args)` requires a warning ' + 'message argument');
-    }
-
-    // @ts-ignore
-    printWarning.apply(null, [format].concat(args));
-  };
-}
+    // Throwing an error and catching it immediately
+    // to improve debugging
+    // A consumer can use 'pause on caught exceptions'
+    // https://github.com/facebook/react/issues/4216
+    try {
+      throw Error(text);
+    } catch (x) {} // tslint:disable-line no-empty
+  }
+};

packages/docs/PropTables/FormPropTable.tsx

@@ -24,18 +24,18 @@ const formProps: Prop[] = [
 const formFieldsetProps: Prop[] = [
   {
     name: 'description',
-    types: 'ReactChild',
-    description: 'Pass in a description to display in the fieldset.',
+    types: ['string', 'FieldsetDescription'],
+    description: 'Pass in a description to display in the fieldset. Will render nothing if not the correct type.',
   },
   {
     name: 'legend',
-    types: 'ReactChild',
-    description: 'Pass in a legend to display in the fieldset.',
+    types: ['string', 'FieldsetLegend'],
+    description: 'Pass in a legend to display in the fieldset. Will render nothing if not the correct type.',
   },
 ];
 
 export const FormFieldsetPropTable: React.FC<PropTableWrapper> = props => (
-  <PropTable title="Form.Fieldset" propList={formFieldsetProps} {...props} />
+  <PropTable title="Fieldset" propList={formFieldsetProps} {...props} />
 );
 
 export const FormLabelPropTable: React.FC<{ id?: string }> = ({ id }) => (

packages/docs/pages/Form/FormPage.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Checkbox,
+  Fieldset,
   Form,
   H0,
   H1,
@@ -60,9 +61,9 @@ export default () => (
     <H1>API</H1>
     <FormPropTable />
     <FormErrorPropTable id="error" />
-    <FormFieldsetPropTable />
     <FormLabelPropTable id="label" />
     <FormGroupPropTable />
+    <FormFieldsetPropTable />
 
     <H1>Input Types</H1>
 
@@ -126,13 +127,13 @@ export default () => (
           <Input label="State" placeholder="Texas" required />
           <Input label="Postal Code" placeholder="78726" required />
         </Form.Group>
-        <Form.Fieldset legend="Shipping Method">
+        <Fieldset legend="Shipping Method" description={<div />}>
           <Form.Group>
             <Radio label="Free – Three Day Shipping" checked onChange={() => null} />
             <Radio label="$4.99 – Two Day Shipping" />
             <Radio label="$9.99 – One Day Shipping" />
           </Form.Group>
-        </Form.Fieldset>
+        </Fieldset>
       </Form>
       {/* jsx-to-string:end */}
     </CodePreview>

packages/docs/pages/Radio/RadioPage.tsx

@@ -1,4 +1,4 @@
-import { Form, H0, H1, Link, Radio, Text } from '@bigcommerce/big-design';
+import { Fieldset, Form, H0, H1, Link, Radio, Text } from '@bigcommerce/big-design';
 import React from 'react';
 
 import { Code, CodePreview } from '../../components';
@@ -46,7 +46,7 @@ export default () => (
     <H1>Grouping</H1>
 
     <Text>
-      In order to group radio controls, use the <Code>Form.Fieldset</Code> component to separate the controls.
+      In order to group radio controls, use the <Code>Fieldset</Code> component to separate the controls.
     </Text>
 
     <CodePreview>
@@ -60,18 +60,18 @@ export default () => (
 
         return (
           <Form>
-            <Form.Fieldset legend="First Group">
+            <Fieldset legend="First Group">
               <Form.Group>
                 <Radio label="On" checked={firstRadio === 'on'} value="on" onChange={handleFirstChange} />
                 <Radio label="Off" checked={firstRadio === 'off'} value="off" onChange={handleFirstChange} />
               </Form.Group>
-            </Form.Fieldset>
-            <Form.Fieldset legend="Second Group">
+            </Fieldset>
+            <Fieldset legend="Second Group">
               <Form.Group>
                 <Radio label="On" checked={secondRadio === 'on'} value="on" onChange={handleSecondChange} />
                 <Radio label="Off" checked={secondRadio === 'off'} value="off" onChange={handleSecondChange} />
               </Form.Group>
-            </Form.Fieldset>
+            </Fieldset>
           </Form>
         );
       }}